Implement "How it Works" Page / 10daer

src/app/globals.css

@@ -3,10 +3,54 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
+  /* Background and Foreground */
+  --color-background: #ffffff; /* White */
+  --color-foreground-primary: #0353f0; /* Light Blue */
+  --color-foreground-secondary: #000b21; /* Dark Blue */
+  --color-foreground-neutral: #121212; /* Very Dark Blue */
+
+  /* Primary Colors */
+  --color-primary-50: #edf7ff;
+  --color-primary-100: #d6ecff;
+  --color-primary-200: #b6e0ff;
+  --color-primary-300: #84cdff;
+  --color-primary-400: #44b1ff;
+  --color-primary-500: #218bff;
+  --color-primary-600: #096cff;
+  --color-primary-700: #0355f0;
+  --color-primary-800: #0443c3;
+  --color-primary-900: #0f3d99;
+  --color-primary-950: #0f265c;
+
+  /* Secondary Colors */
+  --color-secondary-50: #e9f7ff;
+  --color-secondary-100: #ceedff;
+  --color-secondary-200: #a7e1ff;
+  --color-secondary-300: #6bd2ff;
+  --color-secondary-400: #26b6ff;
+  --color-secondary-500: #008bff;
+  --color-secondary-600: #0061ff;
+  --color-secondary-700: #0046ff;
+  --color-secondary-800: #003be6;
+  --color-secondary-900: #0033b3;
+  --color-secondary-950: #000821;
+
+  /* Neutral Colors */
+  --color-neutral-50: #f6f6f6;
+  --color-neutral-100: #e7e7e7;
+  --color-neutral-200: #d1d1d1;
+  --color-neutral-300: #b0b0b0;
+  --color-neutral-400: #888888;
+  --color-neutral-500: #6d6d6d;
+  --color-neutral-600: #5d5d5d;
+  --color-neutral-700: #4f4f4f;
+  --color-neutral-800: #454545;
+  --color-neutral-900: #3d3d3d;
+  --color-neutral-950: #121212;
+
+  /* Additional colors */
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -36,10 +80,102 @@
   --color-popover: var(--popover);
   --color-card-foreground: var(--card-foreground);
   --color-card: var(--card);
+
+  /* Font Family */
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+
+  /* DIsplay TextSizes */
+  --text-display-large: 57px;
+  --text-display-large--line-height: 64px;
+  --text-display-large--letter-spacing: -0.25px;
+  --text-display-medium: 45px;
+  --text-display-medium--line-height: 52px;
+  --text-display-medium--letter-spacing: 0px;
+  --text-display-small: 32px;
+  --text-display-small--line-height: 44px;
+  --text-display-small--letter-spacing: 0px;
+
+  /* Heading TextSizes */
+  --text-headline-xl-large: 44px;
+  --text-headline-xl-large--line-height: 100%;
+  --text-headline-xl-large--letter-spacing: 0px;
+  --text-headline-x-large: 40px;
+  --text-headline-x-large--line-height: 100%;
+  --text-headline-x-large--letter-spacing: 0px;
+  --text-headline-large: 32px;
+  --text-headline-large--line-height: 40px;
+  --text-headline-large--letter-spacing: 0px;
+  --text-headline-medium: 28px;
+  --text-headline-medium--line-height: 36px;
+  --text-headline-medium--letter-spacing: 0px;
+  --text-headline-small: 24px;
+  --text-headline-small--line-height: 32px;
+  --text-headline-small--letter-spacing: 0px;
+
+  /* Title TextSizes */
+  --text-title-large: 22px;
+  --text-title-large--line-height: 28px;
+  --text-title-large--letter-spacing: 0px;
+  --text-title-medium: 16px;
+  --text-title-medium--line-height: 20px;
+  --text-title-medium--letter-spacing: 0.15px;
+  --text-title-small: 14px;
+  --text-title-small--line-height: 20px;
+  --text-title-small--letter-spacing: 0.1px;
+
+  /* Logo TextSizes */
+  --text-logo: 20.5px;
+  --text-logo--line-height: 26px;
+  --text-logo--letter-spacing: 0px;
+
+  /* Body TextSizes */
+  --text-body-large: 16px;
+  --text-body-large--line-height: 24px;
+  --text-body-large--letter-spacing: 0px;
+  --text-body-medium: 14px;
+  --text-body-medium--line-height: 18px;
+  --text-body-medium--letter-spacing: 0.25px;
+  --text-body-small: 12px;
+  --text-body-small--line-height: 16px;
+  --text-body-small--letter-spacing: 0.4px;
+  --text-body-18px-large: 18px;
+  --text-body-18px-large--line-height: 26px;
+  --text-body-18px-large--letter-spacing: 0px;
+
+  /* Label TextSizes */
+  --text-label-large: 14px;
+  --text-label-large--line-height: 100%;
+  --text-label-large--letter-spacing: 0px;
+  --text-label-medium: 14px;
+  --text-label-medium--line-height: 20px;
+  --text-label-medium--letter-spacing: 0.1px;
+  --text-label-small: 11px;
+  --text-label-small--line-height: 16px;
+  --text-label-small--letter-spacing: 0.5px;
+  --text-label-xs: 9px;
+  --text-label-xs--line-height: 12px;
+  --text-label-xs--letter-spacing: 0.8px;
+
+  /* Font Weights */
+  --font-weight-light: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 700;
+
+  /* Radius */
+  --radius-x-large: 28px;
+  --radius-large: 16px;
+  --radius-base: 12px;
+  --radius-small: 8px;
+  --radius-x-small: 4px;
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
+
+  /* Shadow */
+  --shadow-large: 0px 20px 16px 0px #00000014;
+  --shadow-base: 0px 12px 16px 0px #0000000a;
 }
 
 :root {
@@ -75,6 +211,10 @@
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
+
+  * {
+    /* outline: 1px solid black; */
+  }
 }
 
 .dark {
@@ -120,6 +260,34 @@
   }
 }
 
+* {
+  @apply border-border outline-ring/50;
+}
+
+body {
+  @apply bg-background text-foreground;
+}
+
+html::-webkit-scrollbar {
+  display: none;
+  width: 0px;
+}
+
+html {
+  scrollbar-width: none;
+}
+
+html {
+  -ms-overflow-style: none;
+}
+
+html {
+  overflow-y: scroll;
+  overflow-x: hidden;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+}
+
 .splide__pagination {
   margin-top: 20px !important;
   justify-content: center;
@@ -138,24 +306,6 @@
   background: #b0b0b0 !important;
 }
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 @media (max-width: 1024px) {
   .splide__pagination__page {
     width: 20px !important;
@@ -173,3 +323,8 @@
     gap: 10px;
   }
 }
+
+button,
+a {
+  cursor: pointer;
+}

src/app/how-it-works/_components/AnimatedContent.tsx

@@ -0,0 +1,21 @@
+import { IOnboardStepContentProps } from "./types";
+
+export function AnimatedStepContent({ header, handleClick, message, index, length }: IOnboardStepContentProps) {
+
+    return (
+        <div onClick={() => handleClick(index)} className="cursor-pointer grid grid-cols-[2.5rem_auto] gap-6 lg:gap-10 place-content-start place-items-start max-w-md">
+            <div className="flex flex-col relative justify-center items-center gap-0 w-fit mx-auto">
+                <span className="rounded-full size-10 grid place-content-center bg-primary-950 font-bold text-background">{index + 1}</span>
+                {index + 1 < length && <div className="w-0.75 bg-primary-900 h-54 sm:h-80"></div>}
+            </div>
+            <div>
+                <h2 className="text-title-large font-bold text-primary-950 mb-1 sm:mb-4">
+                    {header}
+                </h2>
+                <p className="text-body-large font-light">
+                    {message}
+                </p>
+            </div>
+        </div>
+    )
+}

src/app/how-it-works/_components/AnimatedImage.tsx

@@ -0,0 +1,18 @@
+import Image from "next/image";
+import { IOnboardStepImageProps } from "./types";
+
+export function AnimatedStepImage({ className = "", ImageSrc, handleClick, alt, step, index }: IOnboardStepImageProps) {
+    const isActive = step === index;
+
+    return (
+        <div onClick={() => handleClick(index)} className={`cursor-pointer ${className} absolute inset-0 flex items-center justify-center sm:justify-end transition-[transform_opacity] duration-1000 ease-in-out`}
+            style={{ transform: `rotate(${isActive ? 0 : 45}deg) scale(${isActive ? 1 : 0})`, opacity: `${isActive ? 100 : 0}%` }}
+        >
+            <div className="relative size-80">
+                <Image alt={alt} src={ImageSrc} fill className="object-contain"
+                />
+            </div>
+        </div>
+
+    )
+}

src/app/how-it-works/_components/Button.tsx

@@ -0,0 +1,15 @@
+import Link from "next/link";
+import { ReactNode } from "react";
+
+function Button({ children, href, className }: { className: string, children: ReactNode, href: string }) {
+    return (
+        <Link href={href} className={`${className} px-8 py-4 rounded-base flex items-center font-light justify-center text-label-large`}>
+            <span> {children}</span>
+        </Link>
+    )
+}
+
+
+
+export default Button;
+

src/app/how-it-works/_components/FaqSection.tsx

@@ -0,0 +1,76 @@
+"use client"
+
+import { Dispatch, SetStateAction, useState } from "react";
+import { BiMinusCircle, BiPlusCircle } from "react-icons/bi";
+
+const faqItems = [
+    {
+        question: "How to create an account on ChaineLib",
+        answer: "Get a unique NFT-powered author profile with your bio, genres, and publishing rights.\n\nGet a unique NFT-powered author profile with your bio, genres, and publishing rights."
+    },
+    {
+        question: "How to create an account on ChaineLib",
+        answer: "Get a unique NFT-powered author profile with your bio, genres, and publishing rights.\n\nGet a unique NFT-powered author profile with your bio, genres, and publishing rights."
+    },
+    {
+        question: "How to create an account on ChaineLib",
+        answer: "Get a unique NFT-powered author profile with your bio, genres, and publishing rights.\n\nGet a unique NFT-powered author profile with your bio, genres, and publishing rights."
+    },
+    {
+        question: "How to create an account on ChaineLib",
+        answer: "Get a unique NFT-powered author profile with your bio, genres, and publishing rights.\n\nGet a unique NFT-powered author profile with your bio, genres, and publishing rights."
+    },
+    {
+        question: "How to create an account on ChaineLib",
+        answer: "Get a unique NFT-powered author profile with your bio, genres, and publishing rights.\n\nGet a unique NFT-powered author profile with your bio, genres, and publishing rights."
+    },
+];
+
+export default function FaqSection() {
+    const [clicked, setClicked] = useState(1);
+
+    return (
+        <div className="sm:w-[65vw] lg:w-3xl xl:w-4xl mx-auto">
+            <h2 className="text-primary-950 text-center font-bold text-headline-large md:text-headline-xl-large">
+                You Got Questions?
+            </h2>
+
+            <div className="flex flex-col mt-20 justify-center items-center">
+                {faqItems.map((item, index) => (
+                    <FaqItem
+                        key={index}
+                        question={item.question}
+                        answer={item.answer}
+                        index={index}
+                        clicked={clicked}
+                        setClicked={setClicked}
+                    />
+                ))}
+            </div>
+        </div >
+    )
+}
+
+
+function FaqItem({ question, answer, index, setClicked, clicked }: { question: string, answer: string, index: number, setClicked: Dispatch<SetStateAction<number>>, clicked: number }) {
+    function handleClick() {
+        if (index === clicked) { setClicked(0) }
+        else { setClicked(index) }
+    }
+
+    return (
+        <div className="border-b-[0.5px] border-neutral-200 text-neutral-600 py-5 px-4 flex flex-col justify-center items-start font-light w-full relative overflow-hidden">
+            <h3 onClick={handleClick} className="flex cursor-pointer justify-between items-center w-full gap-3">
+                <span className="text-title-medium md:text-title-large text-neutral-900">
+                    {question}
+                </span>
+                <span className="text-neutral-200 text-2xl">
+                    {clicked === index ? <BiMinusCircle size={24} /> : <BiPlusCircle size={24} />}
+                </span>
+            </h3>
+            <p className={`text-body-medium md:text-body-18px-large max-w-[46rem] overflow-hidden transition-all duration-300 ease-in-out ${clicked === index ? "h-auto mt-8" : "h-0 max-h-0"}`}>
+                {answer}
+            </p>
+        </div >
+    )
+}