From 099c777f3b6cf660a3ca94687f173ae91dab5974 Mon Sep 17 00:00:00 2001
From: Izan Gil <66965250+SrIzan10@users.noreply.github.com>
Date: Mon, 16 Dec 2024 16:01:49 +0100
Subject: [PATCH] feat: landing page

---
 src/app/(protected)/dashboard/page.tsx        |  13 +-
 src/app/(public)/page.tsx                     | 164 ++++++++----------
 .../app/LandingStepper/LandingStepper.tsx     |  70 ++++++++
 src/components/app/NavBar/NavBar.tsx          |   3 +-
 .../app/ProjectSettings/ProjectSettings.tsx   |   2 -
 src/components/app/Video/Video.tsx            |  35 ++++
 6 files changed, 184 insertions(+), 103 deletions(-)
 create mode 100644 src/components/app/LandingStepper/LandingStepper.tsx
 create mode 100644 src/components/app/Video/Video.tsx

diff --git a/src/app/(protected)/dashboard/page.tsx b/src/app/(protected)/dashboard/page.tsx
index dbdb8f5..f3ffa21 100644
--- a/src/app/(protected)/dashboard/page.tsx
+++ b/src/app/(protected)/dashboard/page.tsx
@@ -11,13 +11,10 @@ export default async function Page() {
     },
   });
   return (
-    <>
-      <h1>Dashboard</h1>
-      <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 p-4">
-        {db.map((d) => (
-          <ProjectCard key={d.id} {...d} />
-        ))}
-      </div>
-    </>
+    <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 p-4">
+      {db.map((d) => (
+        <ProjectCard key={d.id} {...d} />
+      ))}
+    </div>
   );
 }
diff --git a/src/app/(public)/page.tsx b/src/app/(public)/page.tsx
index 21d9fd0..1ab1874 100644
--- a/src/app/(public)/page.tsx
+++ b/src/app/(public)/page.tsx
@@ -1,104 +1,86 @@
 // https://v0.dev/r/DxCSk58T8pM
-import { Button } from "@/components/ui/button";
-import Link from "next/link";
+import LandingStepper from '@/components/app/LandingStepper/LandingStepper';
+import Video from '@/components/app/Video/Video';
+import { Button } from '@/components/ui/button';
+import Link from 'next/link';
 
 export default function Home() {
   return (
     <>
       <main className="flex-1">
-          <section className="w-full py-12 md:py-24 lg:py-32 xl:py-48">
-            <div className="container px-4 md:px-6">
-              <div className="flex flex-col items-center space-y-4 text-center">
-                <div className="space-y-2">
-                  <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none">
-                    The modern tech stack for your next(.js) project
-                  </h1>
-                  <p className="mx-auto max-w-[700px] text-gray-500 md:text-xl dark:text-gray-400">
-                    stack is a comprehensive tech stack that includes everything you need to build and deploy your next
-                    web application.
-                  </p>
-                </div>
-                <div className="space-x-4">
-                  <Link href="https://github.com/SrIzan10/stack">
-                    <Button>Start right NOW!</Button>
-                  </Link>
-                </div>
+        <section className="w-full py-12 md:py-24 lg:py-32 xl:py-48">
+          <div className="container px-4 md:px-6">
+            <div className="flex flex-col items-center space-y-4 text-center">
+              <div className="space-y-2">
+                <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none">
+                  User feedback for developers
+                </h1>
+                <p className="mx-auto max-w-[700px] text-gray-500 md:text-xl dark:text-gray-400">
+                  Save time and build better products with headless but streamlined feedback
+                  collection
+                </p>
+              </div>
+              <div className="flex gap-5">
+                <Link href="/auth">
+                  <Button>Get started</Button>
+                </Link>
+                <Button variant="secondary">Learn more</Button>
               </div>
             </div>
-          </section>
-          <section className="w-full py-12 md:py-24 lg:py-32 bg-gray-100 dark:bg-gray-900" id="features">
-            <div className="container px-4 md:px-6">
-              <div className="flex flex-col items-center justify-center space-y-4 text-center">
-                <div className="space-y-2">
-                  <div className="inline-block rounded-lg bg-gray-100 px-3 py-1 text-sm dark:bg-gray-800">
-                    Key Features
-                  </div>
-                  <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">
-                    Everything you need to build and deploy
-                  </h2>
-                  <p className="max-w-[900px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed dark:text-gray-400">
-                    Stack is a comprehensive tech stack that includes everything you need to build and deploy your next
-                    web application.
-                  </p>
-                </div>
-              </div>
-              <div className="mx-auto max-w-5xl items-center gap-6 py-12 lg:grid-cols-2 lg:gap-12">
-                <div className="flex flex-col justify-center items-center text-center space-y-4">
-                  <ul className="grid gap-6">
-                    <li>
-                      <div className="grid gap-1">
-                        <h3 className="text-xl font-bold">Next.js</h3>
-                        <p className="text-gray-500 dark:text-gray-400">
-                          Build server-rendered React applications with Next.js.
+          </div>
+        </section>
+        <section
+          className="w-full py-12 md:py-24 lg:py-32 bg-gray-100 dark:bg-gray-900"
+          id="features"
+        >
+          <div className="container px-4 md:px-6">
+            <div className="flex flex-col items-center justify-center space-y-4 text-center">
+              <LandingStepper
+                steps={[
+                  {
+                    title: 'Create a project',
+                    description:
+                      'Create a project and invite your team members (soon) to start collecting feedback',
+                    html: (
+                      <Video
+                        src="https://cloud-flt5r19p6-hack-club-bot.vercel.app/0kooha-2024-12-15-21-37-18.mp4"
+                        autoPlay
+                        muted
+                        className="w-full bg-gray-200 dark:bg-gray-800 rounded-lg"
+                      />
+                    ),
+                  },
+                  {
+                    title: 'Collect feedback',
+                    description:
+                      'Make a query to the API and create your own UI to collect user feedback',
+                    html: (
+                      // eslint-disable-next-line @next/next/no-img-element
+                      <img
+                        src="https://cloud-9x06b7lfe-hack-club-bot.vercel.app/0carbon_2_.png"
+                        alt="Code example"
+                        className="w-full rounded-lg"
+                      />
+                    ),
+                  },
+                  {
+                    title: 'Improve your product',
+                    description:
+                      'Use the tools provided to analyze feedback and improve your product!',
+                    html: (
+                      <div className="w-full h-64">
+                        <p className="flex justify-center items-center text-center">
+                          No example here, but Github integrations are on the way!
                         </p>
                       </div>
-                    </li>
-                    <li>
-                      <div className="grid gap-1">
-                        <h3 className="text-xl font-bold">Prisma</h3>
-                        <p className="text-gray-500 dark:text-gray-400">
-                          Access your database with Prisma, the best way to work with databases in Ethan&apos;s opinion
-                        </p>
-                      </div>
-                    </li>
-                    <li>
-                      <div className="grid gap-1">
-                        <h3 className="text-xl font-bold">Tailwind CSS</h3>
-                        <p className="text-gray-500 dark:text-gray-400">
-                          Style your application with Tailwind CSS, the utility-first CSS framework.
-                        </p>
-                      </div>
-                    </li>
-                    <li>
-                      <div className="grid gap-1">
-                        <h3 className="text-xl font-bold">shadcn/ui</h3>
-                        <p className="text-gray-500 dark:text-gray-400">
-                          The customizability of the components makes it one of the best UI libraries out there.
-                        </p>
-                      </div>
-                    </li>
-                    <li>
-                      <div className="grid gap-1">
-                        <h3 className="text-xl font-bold">Vercel</h3>
-                        <p className="text-gray-500 dark:text-gray-400">
-                          Deploy your application to the cloud with Vercel, the serverless platform.
-                        </p>
-                      </div>
-                    </li>
-                    <li>
-                      <div className="grid gap-1">
-                          <h3 className="text-xl font-bold">Lucia</h3>
-                          <p className="text-gray-500 dark:text-gray-400">
-                            Manage authentication with Lucia auth, the best selfhosted authentication library.
-                          </p>
-                      </div>
-                    </li>
-                  </ul>
-                </div>
-              </div>
+                    ),
+                  },
+                ]}
+              />
             </div>
-          </section>
-        </main>
-      </>
+          </div>
+        </section>
+      </main>
+    </>
   );
 }
diff --git a/src/components/app/LandingStepper/LandingStepper.tsx b/src/components/app/LandingStepper/LandingStepper.tsx
new file mode 100644
index 0000000..ad53538
--- /dev/null
+++ b/src/components/app/LandingStepper/LandingStepper.tsx
@@ -0,0 +1,70 @@
+"use client"
+
+import { type ReactNode, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+interface Step {
+  title: string;
+  description: string;
+  html: ReactNode;
+}
+
+export default function LandingStepper({ steps }: { steps: Step[] }) {
+  const [currentStep, setCurrentStep] = useState(0);
+
+  const nextStep = () => {
+    if (currentStep < steps.length - 1) {
+      setCurrentStep(currentStep + 1);
+    }
+  };
+
+  const prevStep = () => {
+    if (currentStep > 0) {
+      setCurrentStep(currentStep - 1);
+    }
+  };
+
+  return (
+    <div className="container mx-auto px-4 py-16">
+      <div className="flex flex-col lg:flex-row items-center lg:items-start gap-8">
+        <div className="w-full lg:w-1/2 space-y-8">
+          <h2 className="text-3xl font-bold">How It Works</h2>
+          <div className="space-y-6">
+            {steps.map((step, index) => (
+              <div
+                key={index}
+                className={`flex items-center gap-4 ${
+                  index === currentStep ? 'opacity-100' : 'opacity-50'
+                }`}
+              >
+                <div
+                  className={`w-8 h-8 rounded-full flex items-center justify-center ${
+                    index === currentStep ? 'bg-primary text-primary-foreground' : 'bg-muted'
+                  }`}
+                >
+                  {index + 1}
+                </div>
+                <div>
+                  <h3 className="text-xl font-semibold">{step.title}</h3>
+                  <p className="text-muted-foreground">{step.description}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="flex justify-between">
+            <Button onClick={prevStep} disabled={currentStep === 0} variant="outline">
+              <ChevronLeft className="mr-2 h-4 w-4" /> Previous
+            </Button>
+            <Button onClick={nextStep} disabled={currentStep === steps.length - 1}>
+              Next <ChevronRight className="ml-2 h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+        <div className="w-full lg:w-1/2">
+          {steps[currentStep].html}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/app/NavBar/NavBar.tsx b/src/components/app/NavBar/NavBar.tsx
index 8b11e85..76826c7 100644
--- a/src/components/app/NavBar/NavBar.tsx
+++ b/src/components/app/NavBar/NavBar.tsx
@@ -17,7 +17,6 @@ import MobileNavbarLinks from "../MobileNavbarLinks/MobileNavbarLinks"
 import { ThemeSwitcher } from "../ThemeSwitcher/ThemeSwitcher"
 
 export const links = [
-  { href: '/', name: 'Home' },
   { href: '/dashboard', name: 'Dashboard' },
   { href: '/create', name: 'Create' },
 ]
@@ -41,7 +40,7 @@ export default function Navbar() {
     <>
       <nav className="flex items-center h-16 px-4 border-b gap-3 shrink-0">
         <Link href="/" className="hidden md:flex">
-          <Button>stack</Button>
+          <Button>echospace</Button>
         </Link>
         <MobileNavbarLinks />
         <div className="hidden md:flex">
diff --git a/src/components/app/ProjectSettings/ProjectSettings.tsx b/src/components/app/ProjectSettings/ProjectSettings.tsx
index e71c8db..075aa67 100644
--- a/src/components/app/ProjectSettings/ProjectSettings.tsx
+++ b/src/components/app/ProjectSettings/ProjectSettings.tsx
@@ -147,8 +147,6 @@ export default function ProjectSettings(project: Project) {
                 <h3 className="text-sm font-medium">Example Request (cURL)</h3>
                 <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm block whitespace-pre overflow-x-auto">
                   {stripIndents`curl -X POST \\
-          -H "Content-Type: application/json" \\
-          -H "Authorization: Bearer YOUR_API_KEY" \\
           -d '${bodyGenNoIdent(project.customData)}' \\
           ${url}`}
                 </code>
diff --git a/src/components/app/Video/Video.tsx b/src/components/app/Video/Video.tsx
new file mode 100644
index 0000000..2444aea
--- /dev/null
+++ b/src/components/app/Video/Video.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+interface VideoProps {
+  src: string;
+  autoPlay?: boolean;
+  controls?: boolean;
+  width?: string | number;
+  height?: string | number;
+  className?: string;
+  muted?: boolean;
+}
+
+export default function Video({
+  src,
+  autoPlay = false,
+  controls = true,
+  width = '100%',
+  height = 'auto',
+  className = '',
+  muted = false,
+}: VideoProps) {
+  return (
+    <video
+      src={src}
+      autoPlay={autoPlay}
+      controls={controls}
+      width={width}
+      height={height}
+      className={className}
+      muted={muted}
+    >
+      Your browser does not support the video tag.
+    </video>
+  );
+}
\ No newline at end of file