V2 preview

app/(default)/page.tsx

@@ -1,4 +1,5 @@
-import Features from "@/components/features/Features";
+import Features from "@/components/Features";
+import VideoSection from "@/components/features/VideoSection";
 import Hero from "@/components/hero";
 import OpenSource from "@/components/opensource";
 import Showcase from "@/components/showcase";
@@ -13,6 +14,7 @@ export default function Home() {
   return (
     <>
       <Hero />
+      <VideoSection />
       <Features />
       {/* <OpenSource /> */}
       <Showcase />

app/beta/page.tsx

@@ -16,7 +16,7 @@ export default async function Beta() {
   } = await supabase.auth.getUser();
   return (
     <>
-      <BetaPage user={user} />
+      <BetaPage />
     </>
   );
 }

app/pricing/page.tsx

@@ -14,9 +14,5 @@ export default async function Pricing() {
   const {
     data: { user },
   } = await supabase.auth.getUser();
-  return (
-    <>
-      <PricingPage user={user} />
-    </>
-  );
+  return <PricingPage user={user} />;
 }

app/programs/beta-tester/page.tsx

@@ -1,78 +1,143 @@
-import { Metadata } from "next";
-import { BetaTesterSignupForm } from "@/components/ui/beta-tester-signup-form";
+"use client";
+
+import { FAQItem } from "@/types/faqItems";
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from "@/components/ui/accordion";
+import Link from "next/link";
 import Footer from "@/components/footer";
+import { useEffect, useState } from "react";
+import CTA from "@/components/cta";
+import { BetaTesterSignupForm } from "@/components/ui/beta-tester-signup-form";
 
-export const metadata: Metadata = {
-  title: "PearAI Beta Tester Program",
-  description:
-    "Join the PearAI Beta Tester Program for exclusive early access, rewards, and to shape the future of AI software creation.",
-  alternates: { canonical: "/programs/beta-tester" },
-};
+const faqData: FAQItem[] = [
+  {
+    id: "first",
+    question: "What's In It For You?",
+    answer: (
+      <ul className="list-disc space-y-1 pl-4 text-left">
+        <li>Free base PearAI subscription for the entire month</li>
+        <li>Exclusive early access to experimental features and updates</li>
+        <li>
+          Direct influence on product development—your feedback shapes what we
+          build!
+        </li>
+        <li>
+          Be part of the inner circle that&apos;s helping create the next
+          generation of AI tools. You&apos;ll get a special Discord role as well
+          on the PearAI server.
+        </li>
+      </ul>
+    ),
+  },
+  {
+    id: "second",
+    question: "How It Works",
+    answer: (
+      <p>
+        Simply fill out the form below if you’re interested in joining! If
+        selected, you can try out our beta releases, play around with new
+        features, and let us know what you think via a quick feedback form. If
+        you spot any bugs or have suggestions, we want to hear them!
+      </p>
+    ),
+  },
+  {
+    id: "third",
+    question: "We Can't Do This Without You!",
+    answer: (
+      <p>
+        We&apos;re incredibly grateful for beta testers who take the time to
+        help us improve. Your participation doesn&apos;t just help us; it helps
+        build better tools for everyone who wants to create software. Fill out
+        the form below to join!
+      </p>
+    ),
+  },
+];
+
+const FAQComponent: React.FC = () => {
+  const [openItem, setOpenItem] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    const hash = window.location.hash;
+    if (hash) {
+      const id = hash.replace("#", "");
+      const element = document.getElementById(id);
+      if (element) {
+        // Delay the scroll to ensure the page is fully loaded
+        setTimeout(() => {
+          const navbarHeight = 80; // Adjust this value based on your navbar height
+          const elementPosition = element.getBoundingClientRect().top;
+          const offsetPosition =
+            elementPosition + window.pageYOffset - navbarHeight;
+
+          window.scrollTo({
+            top: offsetPosition,
+            behavior: "smooth",
+          });
+
+          const item = faqData.find((item) => item.id === id);
+          if (item) {
+            setOpenItem(id);
+          }
+        }, 100);
+      }
+    }
+  }, []);
 
-export default function BetaTesterPage() {
   return (
     <>
-      <section className="mx-auto mt-36 flex w-full max-w-3xl flex-col items-center px-4">
-        <div className="mb-16 text-center">
-          <h2 className="mb-4 whitespace-pre-line text-3xl font-bold text-primary-700">
-            Join the PearAI Beta Tester Program! 👾🍐
-          </h2>
-          <p className="mb-6 whitespace-pre-line text-base text-gray-600">
-            At PearAI, our mission is to allow anyone to turn their ideas into
-            creation. We’re constantly adding new features and updates to get
-            closer to our goal. To make sure public releases are bug-free, we
-            regularly release early versions of PearAI with experimental
-            features to those in the PearAI Beta Tester Program!
-          </p>
-          <div className="mx-auto mb-8 mt-6 max-w-2xl rounded-xl border border-primary-100 bg-gray-50 p-6 shadow-sm">
-            <h3 className="mb-4 text-2xl font-bold text-primary-700">
-              What&apos;s In It For You? 🍐
-            </h3>
-            <ul className="list-disc space-y-2 pl-6 text-left text-base text-gray-700">
-              <li>Free base PearAI subscription for the entire month</li>
-              <li>
-                Exclusive early access to experimental features and updates
-              </li>
-              <li>
-                Direct influence on product development—your feedback shapes
-                what we build!
-              </li>
-              <li>
-                Be part of the inner circle that&apos;s helping create the next
-                generation of AI tools. You&apos;ll get a special Discord role
-                as well on the PearAI server.
-              </li>
-            </ul>
-          </div>
-          <div className="mx-auto mb-8 mt-6 max-w-2xl rounded-xl border border-primary-100 bg-gray-50 p-6 shadow-sm">
-            <h3 className="mb-4 text-2xl font-bold text-primary-700">
-              How It Works 🍐
-            </h3>
-            <p className="mb-2 text-base text-gray-700">
-              Simply fill out the form below if you’re interested in joining! If
-              selected, you can try out our beta releases, play around with new
-              features, and let us know what you think via a quick feedback
-              form. If you spot any bugs or have suggestions, we want to hear
-              them!
+      <div className="w-full px-6">
+        <section className="mx-auto mb-[68px] mt-[122px] flex max-w-[1049px] flex-col">
+          <div className="mb-16 flex flex-col gap-5">
+            <h2 className="text-[44px] font-semibold text-black">
+              Join the PearAI Beta Tester Program!
+            </h2>
+            <p className="text-xl text-[#666666]">
+              At PearAI, our mission is to allow anyone to turn their ideas into
+              creation. We&apos;re constantly adding new features and updates to
+              get closer to our goal. To make sure public releases are bug-free,
+              we regularly release early versions of PearAI with experimental
+              features to those in the PearAI Beta Tester Program!
             </p>
           </div>
-          <div className="mx-auto mb-8 mt-6 max-w-2xl rounded-xl border border-primary-100 bg-gray-50 p-6 shadow-sm">
-            <h3 className="mb-4 text-2xl font-bold text-primary-700">
-              We Can&apos;t Do This Without You 🍐
-            </h3>
-            <p className="text-base text-gray-700">
-              We&apos;re incredibly grateful for beta testers who take the time
-              to help us improve. Your participation doesn&apos;t just help us;
-              it helps build better tools for everyone who wants to create
-              software. Fill out the form below to join!
-            </p>
+
+          <Accordion
+            type="single"
+            collapsible
+            className="mb-16 w-full rounded-xl border-[1.5px] border-[#e6e6e6] bg-[#F4F4F4]"
+            value={openItem}
+            onValueChange={setOpenItem}
+          >
+            {faqData.map((item, index) => (
+              <AccordionItem
+                key={item.id}
+                value={item.id}
+                id={item.id}
+                className={`border-b-[#e6e6e6] p-7 ${index === faqData.length - 1 ? "border-none" : "border-b-[1.5px]"}`}
+              >
+                <AccordionTrigger className="p-0 text-left text-2xl font-medium hover:no-underline">
+                  {item.question}
+                </AccordionTrigger>
+                <AccordionContent className="whitespace-pre-line p-0 pt-3 text-xl text-[#666666]">
+                  {item.answer}
+                </AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
+          <div className="w-full">
+            <BetaTesterSignupForm />
           </div>
-        </div>
-        <div className="w-full max-w-xl">
-          <BetaTesterSignupForm />
-        </div>
-      </section>
+        </section>
+      </div>
+      <CTA />
       <Footer />
     </>
   );
-}
+};
+
+export default FAQComponent;