Merge pull request #6 from oslabs-beta/compMerge

integrated new feature slide and Team Section, restyled NavBar

Author: benmarg

www/src/pages/components/FeatureSlider.tsx

@@ -1,6 +1,5 @@
 import { Swiper, SwiperSlide } from 'swiper/react'
 import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
-import FeatureSliderCard from "./FeatureSliderCard"
 
 import 'swiper/css';
 import 'swiper/css/navigation';

www/src/pages/components/FeatureSliderCard.tsx

@@ -0,0 +1,79 @@
+import {
+  ArrowPathIcon,
+  CloudArrowUpIcon,
+  CogIcon,
+  LockClosedIcon,
+  ServerIcon,
+  ShieldCheckIcon,
+} from '@heroicons/react/24/outline'
+
+const features = [
+  {
+    name: 'Push to Deploy',
+    description: 'Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.',
+    icon: CloudArrowUpIcon,
+  },
+  {
+    name: 'SSL Certificates',
+    description: 'Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.',
+    icon: LockClosedIcon,
+  },
+  {
+    name: 'Simple Queues',
+    description: 'Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.',
+    icon: ArrowPathIcon,
+  },
+  {
+    name: 'Advanced Security',
+    description: 'Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.',
+    icon: ShieldCheckIcon,
+  },
+  {
+    name: 'Powerful API',
+    description: 'Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.',
+    icon: CogIcon,
+  },
+  {
+    name: 'Database Backups',
+    description: 'Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.',
+    icon: ServerIcon,
+  },
+]
+
+export default function FeaturesSection() {
+  return (
+    <div className="relative bg-white py-24 sm:py-32 lg:py-40">
+      <div className="mx-auto max-w-md px-6 text-center sm:max-w-3xl lg:max-w-7xl lg:px-8">
+        <h2 className="text-lg font-semibold text-indigo-600">Deploy faster</h2>
+        <p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+          Everything you need to deploy your app
+        </p>
+        <p className="mx-auto mt-5 max-w-prose text-xl text-gray-500">
+          Phasellus lorem quam molestie id quisque diam aenean nulla in. Accumsan in quis quis nunc, ullamcorper
+          malesuada. Eleifend condimentum id viverra nulla.
+        </p>
+        <div className="mt-20">
+          <div className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">
+            {features.map((feature) => (
+              <div key={feature.name} className="pt-6">
+                <div className="flow-root rounded-lg bg-gray-50 px-6 pb-8">
+                  <div className="-mt-6">
+                    <div>
+                      <span className="inline-flex items-center justify-center rounded-xl bg-indigo-500 p-3 shadow-lg">
+                        <feature.icon className="h-8 w-8 text-white" aria-hidden="true" />
+                      </span>
+                    </div>
+                    <h3 className="mt-8 text-lg font-semibold leading-8 tracking-tight text-gray-900">
+                      {feature.name}
+                    </h3>
+                    <p className="mt-5 text-base leading-7 text-gray-600">{feature.description}</p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

www/src/pages/components/FeaturesSection.jsx

@@ -1,11 +1,13 @@
 import { ChevronRightIcon, StarIcon } from '@heroicons/react/20/solid';
 import { string } from 'prop-types';
 import TeamSection from '../components/TeamSection';
+import FeaturesSection from '../components/FeaturesSection';
 import Image from 'next/image';
+import Blogs from './Blogs';
 
 export default function LandingPage(): JSX.Element {
   return (
-    <div className="bg-white">
+    <div className="bg-gray-50">
       <main>
         {/* Hero section */}
         <div className="overflow-hidden pt-8 sm:pt-12 lg:relative lg:py-48">
@@ -114,135 +116,12 @@ export default function LandingPage(): JSX.Element {
         </div>
 
       <div className="relative mt-16">
+        <Blogs />
+        <FeaturesSection />
         <TeamSection />
       </div>
 
 
-<<<<<<< HEAD
-            <div className="relative mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:px-0">
-              {/* Content area */}
-              <div className="pt-12 sm:pt-16 lg:pt-20">
-                
-                <div className="mt-6 space-y-6 text-gray-500">
-                  
-                </div>
-              </div>
-
-              {/* Stats section */}
-              
-            </div>
-          </div>
-        </div>
-
-        {/* Logo cloud section */}
-        <div className="mt-32">
-          <div className="mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8">
-            <div className="lg:grid lg:grid-cols-2 lg:items-center lg:gap-24">
-              <div>
-                <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
-                  Backed by world-renowned investors
-                </h2>
-                <p className="mt-6 max-w-3xl text-lg leading-7 text-gray-500">
-                  Sagittis scelerisque nulla cursus in enim consectetur quam. Dictum urna sed consectetur neque
-                  tristique pellentesque. Blandit amet, sed aenean erat arcu morbi. Cursus faucibus nunc nisl netus
-                  morbi vel porttitor vitae ut. Amet vitae fames senectus vitae.
-                </p>
-                <div className="mt-6">
-                  <a href="#" className="text-base font-medium text-rose-500">
-                    Meet our investors and advisors&nbsp&rarr;
-                  </a>
-                </div>
-              </div>
-              <div className="mt-12 grid grid-cols-2 gap-0.5 md:grid-cols-3 lg:mt-0 lg:grid-cols-2">
-                {logos.map((logo) => (
-                  <div key={logo.name} className="col-span-1 flex justify-center bg-gray-50 py-8 px-8">
-                    <img className="max-h-12" src={logo.url} alt={logo.name} />
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* CTA section */}
-        <div className="relative mt-24 sm:mt-32 sm:py-16">
-          <div aria-hidden="true" className="hidden sm:block">
-            <div className="absolute inset-y-0 left-0 w-1/2 rounded-r-3xl bg-gray-50" />
-            <svg className="absolute top-8 left-1/2 -ml-3" width={404} height={392} fill="none" viewBox="0 0 404 392">
-              <defs>
-                <pattern
-                  id="8228f071-bcee-4ec8-905a-2a059a2cc4fb"
-                  x={0}
-                  y={0}
-                  width={20}
-                  height={20}
-                  patternUnits="userSpaceOnUse"
-                >
-                  <rect x={0} y={0} width={4} height={4} className="text-gray-200" fill="currentColor" />
-                </pattern>
-              </defs>
-              <rect width={404} height={392} fill="url(#8228f071-bcee-4ec8-905a-2a059a2cc4fb)" />
-            </svg>
-          </div>
-          <div className="mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8">
-            <div className="relative overflow-hidden rounded-2xl bg-rose-500 px-6 py-10 shadow-xl sm:px-12 sm:py-20">
-              <div aria-hidden="true" className="absolute inset-0 -mt-72 sm:-mt-32 md:mt-0">
-                <svg
-                  className="absolute inset-0 h-full w-full"
-                  preserveAspectRatio="xMidYMid slice"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 1463 360"
-                >
-                  <path
-                    className="text-rose-400 text-opacity-40"
-                    fill="currentColor"
-                    d="M-82.673 72l1761.849 472.086-134.327 501.315-1761.85-472.086z"
-                  />
-                  <path
-                    className="text-rose-600 text-opacity-40"
-                    fill="currentColor"
-                    d="M-217.088 544.086L1544.761 72l134.327 501.316-1761.849 472.086z"
-                  />
-                </svg>
-              </div>
-              <div className="relative">
-                <div className="sm:text-center">
-                  <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
-                    Get notified when we&rsquo;re launching.
-                  </h2>
-                  <p className="mx-auto mt-6 max-w-2xl text-lg text-rose-100">
-                    Sagittis scelerisque nulla cursus in enim consectetur quam. Dictum urna sed consectetur neque
-                    tristique pellentesque.
-                  </p>
-                </div>
-                <form action="#" className="mt-12 sm:mx-auto sm:flex sm:max-w-lg">
-                  <div className="min-w-0 flex-1">
-                    <label htmlFor="cta-email" className="sr-only">
-                      Email address
-                    </label>
-                    <input
-                      id="cta-email"
-                      type="email"
-                      className="block w-full rounded-md border border-transparent px-5 py-3 text-base text-gray-900 placeholder-gray-500 shadow-sm focus:border-transparent focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-rose-500"
-                      placeholder="Enter your email"
-                    />
-                  </div>
-                  <div className="mt-4 sm:mt-0 sm:ml-3">
-                    <button
-                      type="submit"
-                      className="block w-full rounded-md border border-transparent bg-gray-900 px-5 py-3 text-base font-medium text-white shadow hover:bg-black focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-rose-500 sm:px-10"
-                    >
-                      Notify me
-                    </button>
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </div>
-=======
->>>>>>> master
       </main>
 
       {/* Footer section */}

www/src/pages/components/LandingPage.tsx

@@ -1,14 +1,37 @@
-import { Fragment } from 'react'
+import { Fragment, useEffect, useState } from 'react'
 import { Disclosure, Menu, Transition } from '@headlessui/react'
 import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/react/24/outline'
 
 function classNames(...classes: string[]) {
   return classes.filter(Boolean).join(' ')
 }
 
+
+
 export default function NavBar() {
+
+const [scrollPosition, setScrollPosition] = useState(0);
+
+const handleScroll = () => {
+    const position = window.pageYOffset;
+    setScrollPosition(position);
+};
+
+useEffect(() => {
+    window.addEventListener('scroll', handleScroll, { passive: true });
+
+    return () => {
+        window.removeEventListener('scroll', handleScroll);
+    };
+}, []);
+
+function NavBarSytling() {
+  return scrollPosition === 0 ? "sticky top-0 bg-gray-50 w-screen z-20 border-b" : "sticky top-0 bg-gray-50 w-screen z-20 shadow-xl";
+}
+
+
   return (
-    <Disclosure as="nav" className="bg-[#333333]">
+    <Disclosure as="nav" className={NavBarSytling()}>
       {({ open }) => (
         <>
           <div className="mx-auto max-w9xl px-4 sm:px-6 lg:px-8">
@@ -21,7 +44,7 @@ export default function NavBar() {
                     alt="Your Company"
                   />
                   <img
-                    className="hidden h-8 w-auto lg:block invert"
+                    className="hidden h-8 w-auto lg:block"
                     src="https://i.imgur.com/ELBAyVb.png"
                     alt="Your Company"
                   />
@@ -40,19 +63,19 @@ export default function NavBar() {
                     </a>
                     <a
                       href="#"
-                      className="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
+                      className="rounded-md px-3 py-2 text-sm font-medium text-gray-500 hover:bg-gray-700 hover:text-white"
                     >
                       Team
                     </a>
                     <a
                       href="#"
-                      className="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
+                      className="rounded-md px-3 py-2 text-sm font-medium text-gray-500 hover:bg-gray-700 hover:text-white"
                     >
                       Projects
                     </a>
                     <a
                       href="#"
-                      className="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
+                      className="rounded-md px-3 py-2 text-sm font-medium text-gray-500 hover:bg-gray-700 hover:text-white"
                     >
                       Calendar
                     </a>

www/src/pages/components/NavBar.tsx

@@ -72,6 +72,7 @@ const people: string[][] = [
 ]
 
 function replace(e: React.SyntheticEvent<HTMLImageElement>): void{
+    console.log('test');
     e.currentTarget.onerror = null;
     e.currentTarget.src = "/profileFallback.png"
 }

www/src/pages/components/TeamSection.tsx

@@ -12,10 +12,12 @@ const Home: NextPage = () => {
 
   return (
     <>
-      <FeatureSlider/>
+
       <NavBar />
+
       <LandingPage />
-      <Blogs />
+      {/* <FeatureSlider/> */}
+      {/* <Blogs /> */}
     </>
   );
 };

www/src/pages/index.tsx

@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body {
+    background-color: rgba(249, 250, 251);
+}