feat: add benefits section

ladunjexa · May 15, 2024 · 0fb7ec3 · 0fb7ec3
1 parent 5c950bc
commit 0fb7ec3
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 7 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
+// import { Inter } from "next/font/google";
 import "./globals.css";
 
-const inter = Inter({ subsets: ["latin"] });
+// const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
   title: "Next.js 14 SaaS landing page template",
@@ -17,7 +17,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body>{children}</body>
     </html>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,4 +1,5 @@
 import Navbar from "@/components/layout/navbar";
+import Benefits from "@/components/sections/benefits";
 import Hero from "@/components/sections/hero";
 import ButtonGradient from "@/components/svg/button-gradient";
 import { cn } from "@/lib/utils";
@@ -9,6 +10,7 @@ export default function Home() {
       <div className={cn("overflow-hidden pt-[4.75rem] lg:pt-[5.25rem]")}>
         <Navbar />
         <Hero />
+        <Benefits />
       </div>
       <ButtonGradient />
     </main>

diff --git a/components/layout/section.tsx b/components/layout/section.tsx
@@ -3,11 +3,11 @@ import { cn } from "@/lib/utils";
 import SectionSvg from "../svg/section-svg";
 
 type Props = {
-  className: string;
+  className?: string;
   id: string;
-  crosses: boolean;
-  crossesOffset: string;
-  customPaddings: boolean;
+  crosses?: boolean;
+  crossesOffset?: string;
+  customPaddings?: boolean;
   children: React.ReactNode;
 };
 

diff --git a/components/sections/benefits/heading.tsx b/components/sections/benefits/heading.tsx
@@ -0,0 +1,17 @@
+import { cn } from "@/lib/utils";
+import React from "react";
+
+type Props = {
+  className?: string;
+  title: string;
+};
+
+const Heading = ({ className, title }: Props) => {
+  return (
+    <div className={cn(className, "max-w-[50rem] mx-auto mb-12 lg:mb-20")}>
+      {title && <h2 className="h2">{title}</h2>}
+    </div>
+  );
+};
+
+export default Heading;
diff --git a/components/sections/benefits/index.tsx b/components/sections/benefits/index.tsx
@@ -0,0 +1,67 @@
+import React from "react";
+import Section from "@/components/layout/section";
+import Heading from "./heading";
+import { benefits } from "@/constants";
+import Image from "next/image";
+import Arrow from "@/components/svg/arrow";
+import { GradientLight } from "@/components/design/benefits";
+import ClipPath from "@/components/svg/clip-path";
+
+type Props = {};
+
+const Benefits = (props: Props) => {
+  return (
+    <Section id="features">
+      <div className="container relative z-2">
+        <Heading
+          className="text-center md:max-w-md lg:max-w-2xl"
+          title="Chat Smarter, Not Harder with Brainwave"
+        />
+
+        <div className="mb-10 flex flex-wrap gap-10">
+          {benefits.map((item) => (
+            <div
+              key={item.id}
+              className="relative block bg-[length:100%_100%] bg-no-repeat p-0.5 md:max-w-[24rem]"
+              style={{
+                backgroundImage: `url(${item.backgroundUrl})`,
+              }}
+            >
+              <div className="pointer-events-none relative z-2 flex min-h-[22rem] flex-col p-[2.4rem]">
+                <h5 className="h5 mb-5">{item.title}</h5>
+                <p className="body-2 mb-6 text-n-3">{item.text}</p>
+                <div className="mt-auto flex items-center">
+                  <Image src={item.iconUrl} width={48} height={48} alt={item.title} />
+                  <p className="ml-auto font-code text-xs font-bold uppercase tracking-wider text-n-1">
+                    Explore more
+                  </p>
+                  <Arrow />
+                </div>
+              </div>
+
+              {item.light && <GradientLight />}
+
+              <div className="absolute inset-0.5 bg-n-8" style={{ clipPath: `url(#benefits)` }}>
+                <div className="absolute inset-0 opacity-0 transition-opacity hover:opacity-10">
+                  {item.imageUrl && (
+                    <Image
+                      src={item.imageUrl}
+                      width={380}
+                      height={362}
+                      alt={item.title}
+                      className="size-full object-cover"
+                    />
+                  )}
+                </div>
+              </div>
+
+              <ClipPath />
+            </div>
+          ))}
+        </div>
+      </div>
+    </Section>
+  );
+};
+
+export default Benefits;