feat: add collaboration section

ladunjexa · May 16, 2024 · 5afadad · 5afadad
1 parent 0fb7ec3
commit 5afadad
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 5 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,5 +1,6 @@
 import Navbar from "@/components/layout/navbar";
 import Benefits from "@/components/sections/benefits";
+import Collaboration from "@/components/sections/collaboration";
 import Hero from "@/components/sections/hero";
 import ButtonGradient from "@/components/svg/button-gradient";
 import { cn } from "@/lib/utils";
@@ -11,6 +12,7 @@ export default function Home() {
         <Navbar />
         <Hero />
         <Benefits />
+        <Collaboration />
       </div>
       <ButtonGradient />
     </main>

diff --git a/components/design/collaboration.tsx b/components/design/collaboration.tsx
@@ -1,13 +1,13 @@
-import { curve1, curve2 } from "@/public/assets/index";
+import { images } from "@/constants";
 
 export const RightCurve = () => (
   <div className="pointer-events-none absolute left-full top-1/2 -mt-1 ml-10 hidden w-[10.125rem] xl:block">
-    <img src={curve2} width={162} height={76} alt="Curve 2" />
+    <img src={images.curve2} width={162} height={76} alt="Curve 2" />
   </div>
 );
 
 export const LeftCurve = () => (
   <div className="pointer-events-none absolute right-full top-1/2 -mt-1 mr-10 hidden w-[32.625rem] xl:block">
-    <img src={curve1} width={522} height={182} alt="Curve 1" />
+    <img src={images.curve1} width={522} height={182} alt="Curve 1" />
   </div>
 );
diff --git a/components/layout/navbar.tsx b/components/layout/navbar.tsx
@@ -12,13 +12,16 @@ import MenuSvg from "../svg/menu-svg";
 import { HamburgerMenu } from "../design/navbar";
 
 type Props = {};
+type TSection = "hero" | "features" | "collaboration";
 
 const Navbar = (props: Props) => {
   const params = useParams();
-  const [hash, setHash] = useState(window.location.hash);
+  const [hash, setHash] = useState<TSection>("hero");
   const [openNavigation, setOpenNavigation] = useState<boolean>(false);
 
-  useEffect(() => setHash(window.location.hash), [params]);
+  useEffect(() => {
+    setHash(window.location.hash as TSection);
+  }, [params]);
 
   const toggleNavigation = () => setOpenNavigation(!openNavigation);
   const handleClick = () => {

diff --git a/components/sections/collaboration/index.tsx b/components/sections/collaboration/index.tsx
@@ -0,0 +1,81 @@
+import React from "react";
+import Section from "@/components/layout/section";
+import { collabApps, collabContent, collabText, images } from "@/constants";
+import Image from "next/image";
+import Button from "@/components/atoms/button";
+import { cn } from "@/lib/utils";
+import { LeftCurve, RightCurve } from "@/components/design/collaboration";
+
+type Props = {};
+
+const Collaboration = (props: Props) => {
+  return (
+    <Section id="collaboration" crosses>
+      <div className="container lg:flex">
+        <div className="max-w-[25rem]">
+          <h2 className="h2 mb-12 max-md:mb-4">AI Chat App for seamless collaboration</h2>
+          <ul className="mb-10 max-w-[22rem] md:mb-14">
+            {collabContent.map((item) => (
+              <li key={item.id} className="mb-3 py-3">
+                <div className="flex items-center">
+                  <Image src={images.check} width={24} height={24} alt="check" />
+                  <h6 className="body-2 ml-5">{item.title}</h6>
+                </div>
+                {item.text && <p className="body-2 mt-3 text-n-4">{item.text}</p>}
+              </li>
+            ))}
+          </ul>
+          <Button>Try it now</Button>
+        </div>
+
+        <div className="mt-4 lg:ml-auto xl:w-[38rem]">
+          <p className="body-2 mb-8 text-n-4 md:mb-16 lg:mx-auto lg:mb-32 lg:w-[22rem]">
+            {collabText}
+          </p>
+
+          <div className="relative left-1/2 flex aspect-square w-[22rem] -translate-x-1/2 scale-75 rounded-full border border-n-6 md:scale-100">
+            <div className="m-auto flex aspect-square w-60 rounded-full border border-n-6">
+              <div className="m-auto aspect-square w-24 rounded-full bg-conic-gradient p-[0.2rem]">
+                <div className="flex h-full items-center justify-center rounded-full bg-n-8">
+                  <Image src={images.brainwaveSymbol} width={48} height={48} alt="brainwave" />
+                </div>
+              </div>
+            </div>
+
+            <ul>
+              {collabApps.map((item, index) => (
+                <li
+                  key={item.id}
+                  className={cn(
+                    "absolute left-1/2 top-0 -ml-[1.6rem] h-1/2 origin-bottom",
+                    `rotate-${index * 45}`
+                  )}
+                >
+                  <div
+                    className={cn(
+                      "relative -top-[1.6rem] flex w-[3.2rem] h-[3.2rem] bg-n-7 border border-n-1/15 rounded-xl",
+                      `-rotate-${index * 45}`
+                    )}
+                  >
+                    <Image
+                      src={item.icon}
+                      alt={item.title}
+                      width={36}
+                      height={36}
+                      className="m-auto"
+                    />
+                  </div>
+                </li>
+              ))}
+            </ul>
+
+            <LeftCurve />
+            <RightCurve />
+          </div>
+        </div>
+      </div>
+    </Section>
+  );
+};
+
+export default Collaboration;