From e415bf4a0d488c5f252e91841076a7688d3d0095 Mon Sep 17 00:00:00 2001
From: ladunjexa <110838700+ladunjexa@users.noreply.github.com>
Date: Thu, 16 May 2024 14:42:35 +0300
Subject: [PATCH] feat: add services section

---
 app/page.tsx                                  |   2 +
 .../{sections/hero => atoms}/generating.tsx   |   0
 .../{sections/benefits => atoms}/heading.tsx  |   4 +-
 components/design/hero.tsx                    |   2 +
 components/design/services.tsx                |  10 +-
 components/sections/benefits/index.tsx        |   2 +-
 components/sections/hero/index.tsx            |   2 +-
 components/sections/services/index.tsx        | 127 ++++++++++++++++++
 8 files changed, 141 insertions(+), 8 deletions(-)
 rename components/{sections/hero => atoms}/generating.tsx (100%)
 rename components/{sections/benefits => atoms}/heading.tsx (68%)
 create mode 100644 components/sections/services/index.tsx

diff --git a/app/page.tsx b/app/page.tsx
index 76c090d..6b5c8d0 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2,6 +2,7 @@ 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 Services from "@/components/sections/services";
 import ButtonGradient from "@/components/svg/button-gradient";
 import { cn } from "@/lib/utils";
 
@@ -13,6 +14,7 @@ export default function Home() {
         <Hero />
         <Benefits />
         <Collaboration />
+        <Services />
       </div>
       <ButtonGradient />
     </main>
diff --git a/components/sections/hero/generating.tsx b/components/atoms/generating.tsx
similarity index 100%
rename from components/sections/hero/generating.tsx
rename to components/atoms/generating.tsx
diff --git a/components/sections/benefits/heading.tsx b/components/atoms/heading.tsx
similarity index 68%
rename from components/sections/benefits/heading.tsx
rename to components/atoms/heading.tsx
index 4e8e0bc..2663d47 100644
--- a/components/sections/benefits/heading.tsx
+++ b/components/atoms/heading.tsx
@@ -4,12 +4,14 @@ import React from "react";
 type Props = {
   className?: string;
   title: string;
+  text: string;
 };
 
-const Heading = ({ className, title }: Props) => {
+const Heading = ({ className, title, text }: Props) => {
   return (
     <div className={cn(className, "max-w-[50rem] mx-auto mb-12 lg:mb-20")}>
       {title && <h2 className="h2">{title}</h2>}
+      {text && <p className="body-2 mt-4 text-n-4">{text}</p>}
     </div>
   );
 };
diff --git a/components/design/hero.tsx b/components/design/hero.tsx
index 5fa3fc6..6e7006a 100644
--- a/components/design/hero.tsx
+++ b/components/design/hero.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useState } from "react";
 import { MouseParallax } from "react-just-parallax";
 
diff --git a/components/design/services.tsx b/components/design/services.tsx
index cf5ebce..42f9e47 100644
--- a/components/design/services.tsx
+++ b/components/design/services.tsx
@@ -1,12 +1,12 @@
-import { brainwaveWhiteSymbol, gradient, play } from "@/public/assets/index";
 import ChatBubbleWing from "@/components/svg/chat-bubble-wing";
+import { images } from "@/constants";
 
 export const Gradient = () => {
   return (
     <div className="pointer-events-none absolute -left-40 top-0 size-[56.625rem] opacity-50 mix-blend-color-dodge">
       <img
         className="absolute left-1/2 top-1/2 h-[88.5625rem] w-[79.5625rem] max-w-[79.5625rem] -translate-x-1/2 -translate-y-1/2"
-        src={gradient}
+        src={images.gradient}
         width={1417}
         height={1417}
         alt="Gradient"
@@ -15,7 +15,7 @@ export const Gradient = () => {
   );
 };
 
-export const PhotChatMessage = () => {
+export const PhotoChatMessage = () => {
   return (
     <div className="absolute right-8 top-8 max-w-[17.5rem] rounded-t-xl rounded-bl-xl bg-black px-8 py-6 font-code text-base lg:right-[8.75rem] lg:top-16 lg:max-w-[17.5rem]">
       Hey Brainwave, enhance this photo
@@ -29,7 +29,7 @@ export const VideoChatMessage = () => {
     <div className="absolute left-[3.125rem] top-8 w-full max-w-56 rounded-t-xl rounded-br-xl bg-n-6 pb-7 pl-5 pr-2.5 pt-2.5 font-code text-base md:max-w-[17.5rem]">
       Video generated!
       <div className="absolute -bottom-[1.125rem] left-5 flex size-9 items-center justify-center rounded-xl bg-color-1">
-        <img src={brainwaveWhiteSymbol} width={26} height={26} alt="Brainwave" />
+        <img src={images.brainwaveWhiteSymbol} width={26} height={26} alt="Brainwave" />
       </div>
       <p className="tagline absolute bottom-1 right-2.5 text-[0.625rem] uppercase text-n-3">
         just now
@@ -45,7 +45,7 @@ export const VideoChatMessage = () => {
 export const VideoBar = () => {
   return (
     <div className="absolute bottom-0 left-0 flex w-full items-center p-6">
-      <img src={play} width={24} height={24} alt="Play" className="mr-3 object-contain" />
+      <img src={images.play} width={24} height={24} alt="Play" className="mr-3 object-contain" />
 
       <div className="flex-1 bg-[#D9D9D9]">
         <div className="h-0.5 w-1/2 bg-color-1"></div>
diff --git a/components/sections/benefits/index.tsx b/components/sections/benefits/index.tsx
index 3f5350c..7d1acd6 100644
--- a/components/sections/benefits/index.tsx
+++ b/components/sections/benefits/index.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import Section from "@/components/layout/section";
-import Heading from "./heading";
+import Heading from "../../atoms/heading";
 import { benefits } from "@/constants";
 import Image from "next/image";
 import Arrow from "@/components/svg/arrow";
diff --git a/components/sections/hero/index.tsx b/components/sections/hero/index.tsx
index 81b83a8..8684b0f 100644
--- a/components/sections/hero/index.tsx
+++ b/components/sections/hero/index.tsx
@@ -8,7 +8,7 @@ import { images, heroIcons } from "@/constants";
 import Button from "../../atoms/button";
 import { BackgroundCircles, BottomLine, Gradient } from "../../design/hero";
 import { ScrollParallax } from "react-just-parallax";
-import Generating from "./generating";
+import Generating from "../../atoms/generating";
 import Notification from "./notification";
 import CompanyLogos from "./company-logos";
 
diff --git a/components/sections/services/index.tsx b/components/sections/services/index.tsx
new file mode 100644
index 0000000..21ac3d3
--- /dev/null
+++ b/components/sections/services/index.tsx
@@ -0,0 +1,127 @@
+import React from "react";
+import Section from "@/components/layout/section";
+import Heading from "../../atoms/heading";
+import { brainwaveServices, brainwaveServicesIcons, images } from "@/constants";
+import Image from "next/image";
+import Generating from "../../atoms/generating";
+import { PhotoChatMessage, VideoBar, VideoChatMessage } from "@/components/design/services";
+import { cn } from "@/lib/utils";
+import { Gradient } from "@/components/design/hero";
+
+type Props = {};
+
+const Services = (props: Props) => {
+  return (
+    <Section id="how-to-use">
+      <div className="container">
+        <Heading
+          title="Generative AI made for creators."
+          text="Brainwave unlocks the potential of AI-powered applications"
+        />
+
+        <div className="relative">
+          <div className="relative z-1 mb-5 flex h-[39rem] items-center overflow-hidden rounded-3xl border border-n-1/10 p-8 lg:p-20 xl:h-[46rem]">
+            <div className="pointer-events-none absolute left-0 top-0 h-full md:w-3/5 xl:w-auto">
+              <Image
+                src={images.service1}
+                alt="smartest ai"
+                width={800}
+                height={730}
+                className="size-full object-cover md:object-right"
+              />
+            </div>
+
+            <div className="relative z-1 ml-auto max-w-[17rem]">
+              <h4 className="h4 mb-4">Smartest AI</h4>
+              <p className="body-2 mb-12 text-n-3">
+                Brainwave unlocks the potential of AI-powered applications
+              </p>
+              <ul className="body-2">
+                {brainwaveServices.map((service, index) => (
+                  <li key={index} className="flex items-start border-t border-n-6 py-4">
+                    <Image src={images.check} alt="check" width={24} height={24} />
+                    <p className="ml-4">{service}</p>
+                  </li>
+                ))}
+              </ul>
+            </div>
+            <Generating className="absolute inset-x-4 bottom-4 border border-n-1/10 lg:bottom-8 lg:left-1/2 lg:right-auto lg:-translate-x-1/2" />
+          </div>
+
+          <div className="relative z-1 grid gap-5 lg:grid-cols-2">
+            <div className="relative min-h-[39rem] overflow-hidden rounded-3xl border border-n-1/10">
+              <div className="absolute inset-0">
+                <Image
+                  src={images.service2}
+                  className="size-full object-cover"
+                  width={630}
+                  height={750}
+                  alt="robot"
+                />
+              </div>
+              <div className="absolute inset-0 flex flex-col justify-end bg-gradient-to-b from-n-8/0 to-n-8/90 p-8 lg:p-15">
+                <h4 className="h4 mb-4">Photo editing</h4>
+                <p className="body-2 mb-12 text-n-3">
+                  Automatically enhance your photos using our AI app&apos;s photo editing feature.
+                  Try it now!
+                </p>
+              </div>
+
+              <PhotoChatMessage />
+            </div>
+
+            <div className="overflow-hidden rounded-3xl bg-n-7 p-4 lg:min-h-[46rem]">
+              <div className="px-4 py-12 xl:px-8">
+                <h4 className="h4 mb-4">Video generation</h4>
+                <p className="body-2 mb-8 text-n-3">
+                  The world’s most powerful AI photo and video art generation engine. What will you
+                  create?
+                </p>
+
+                <ul className="flex items-center justify-between">
+                  {brainwaveServicesIcons.map((item, index) => (
+                    <li
+                      key={index}
+                      className={cn(
+                        "flex items-center justify-center rounded-2xl",
+                        index === 2
+                          ? "w-[3rem] h-[3rem] p-0.25 bg-conic-gradient md:w-[4.5rem] md:h-[4.5rem]"
+                          : "w-10 h-10 bg-n-6 md:w-15 md:h-15"
+                      )}
+                    >
+                      <div
+                        className={cn(
+                          index === 2 &&
+                            "flex size-full items-center justify-center rounded-2xl bg-n-7"
+                        )}
+                      >
+                        <Image src={item} alt="icon" width={24} height={24} />
+                      </div>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+
+              <div className="relative h-80 overflow-hidden rounded-xl bg-n-8 md:h-[25rem]">
+                <Image
+                  src={images.service3}
+                  className="size-full object-cover"
+                  width={520}
+                  height={400}
+                  alt="scary robot"
+                />
+
+                <VideoChatMessage />
+                <VideoBar />
+              </div>
+            </div>
+          </div>
+
+          <Gradient />
+        </div>
+      </div>
+    </Section>
+  );
+};
+
+export default Services;