merging recent pull

Author: ericsngyun

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/FeaturesSection.jsx

@@ -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/LandingPage.tsx

@@ -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():any {
   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,11 +116,17 @@ export default function LandingPage():any {
         </div>
 
       <div className="relative mt-16">
+        <Blogs />
+        <FeaturesSection />
         <TeamSection />
       </div>
 
 
+<<<<<<< HEAD
       </main>``
+=======
+      </main>
+>>>>>>> b0762547e2888aed98ea28a1845973415410bdf6
 
       {/* Footer section */}
       <footer className="mt-8 bg-[#333333] gray-900 sm:mt-8">

www/src/pages/components/NavBar.tsx

@@ -1,14 +1,41 @@
-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 (
+<<<<<<< HEAD
     <Disclosure as="nav" className="bg-[#333333] fixed z-10 w-screen drop-shadow-20px">
+=======
+    <Disclosure as="nav" className={NavBarSytling()}>
+>>>>>>> b0762547e2888aed98ea28a1845973415410bdf6
       {({ open }) => (
         <>
           <div className="mx-auto max-w9xl px-4 sm:px-6 lg:px-8">
@@ -21,7 +48,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 +67,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/TeamSection.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/index.tsx

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

www/src/styles/globals.css

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