Update src/app/page.tsx

2026-04-07 06:20:00 +00:00
1 changed files with 41 additions and 104 deletions
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,6 +2,7 @@

 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
+import { useState } from "react";
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
@@ -11,6 +12,14 @@ import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';

 export default function LandingPage() {
+  const [profileUrl, setProfileUrl] = useState("");
+
+  const handleVibeRead = () => {
+    if (profileUrl) {
+      window.alert(`Analyzing Vibe for: ${profileUrl}`);
+    }
+  };
+
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
@@ -29,17 +38,11 @@ export default function LandingPage() {
      <NavbarStyleApple
      navItems={[
        {
-          name: "Home",
-          id: "hero",
-        },
+          name: "Home",          id: "hero"},
        {
-          name: "How it Works",
-          id: "about",
-        },
+          name: "How it Works",          id: "about"},
        {
-          name: "FAQs",
-          id: "faq",
-        },
+          name: "FAQs",          id: "faq"},
      ]}
      brandName="Vibe Reader"
    />
@@ -48,63 +51,35 @@ export default function LandingPage() {
  <div id="hero" data-section="hero">
      <HeroSplit
      background={{
-        variant: "gradient-bars",
-      }}
+        variant: "gradient-bars"}}
      title="Uncover Your Film Vibe"
      description="Paste your Letterboxd profile to get a personality reading earned from your film taste. No random generation—just data-backed insights."
      buttons={[
        {
-          text: "Get Vibe Reading",
-          href: "#contact",
-        },
+          text: "Get Vibe Reading",          href: "#contact"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/military-surveillance-officers-talk-big-screen-general-headquarters_482257-89969.jpg"
      imageAlt="Dashboard representation of Letterboxd vibe reading"
      mediaAnimation="slide-up"
      avatars={[
        {
-          src: "https://img.b2bpic.net/free-photo/portrait-young-woman-with-glasses-casual-clothing_23-2148197775.jpg",
-          alt: "User 1",
-        },
+          src: "https://img.b2bpic.net/free-photo/portrait-young-woman-with-glasses-casual-clothing_23-2148197775.jpg",          alt: "User 1"},
        {
-          src: "https://img.b2bpic.net/free-photo/handsome-man-wearing-casual-shirt_23-2148197776.jpg",
-          alt: "User 2",
-        },
+          src: "https://img.b2bpic.net/free-photo/handsome-man-wearing-casual-shirt_23-2148197776.jpg",          alt: "User 2"},
        {
-          src: "https://img.b2bpic.net/free-photo/portrait-man-smiling-camera_23-2148197777.jpg",
-          alt: "User 3",
-        },
+          src: "https://img.b2bpic.net/free-photo/portrait-man-smiling-camera_23-2148197777.jpg",          alt: "User 3"},
        {
-          src: "https://img.b2bpic.net/free-photo/young-woman-smiling-camera_23-2148197778.jpg",
-          alt: "User 4",
-        },
+          src: "https://img.b2bpic.net/free-photo/young-woman-smiling-camera_23-2148197778.jpg",          alt: "User 4"},
        {
-          src: "https://img.b2bpic.net/free-photo/portrait-person-smiling-camera_23-2148197779.jpg",
-          alt: "User 5",
-        },
+          src: "https://img.b2bpic.net/free-photo/portrait-person-smiling-camera_23-2148197779.jpg",          alt: "User 5"},
      ]}
      avatarText="Join 10,000+ film lovers"
      marqueeItems={[
-        {
-          type: "text",
-          text: "Cinephile",
-        },
-        {
-          type: "text",
-          text: "Noir Addict",
-        },
-        {
-          type: "text",
-          text: "Sci-Fi Fanatic",
-        },
-        {
-          type: "text",
-          text: "A24 Connoisseur",
-        },
-        {
-          type: "text",
-          text: "Classic Buff",
-        },
+        { type: "text", text: "Cinephile" },
+        { type: "text", text: "Noir Addict" },
+        { type: "text", text: "Sci-Fi Fanatic" },
+        { type: "text", text: "A24 Connoisseur" },
+        { type: "text", text: "Classic Buff" },
      ]}
    />
  </div>
@@ -113,19 +88,9 @@ export default function LandingPage() {
      <InlineImageSplitTextAbout
      useInvertedBackground={false}
      heading={[
-        {
-          type: "text",
-          content: "The science behind your",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/cheerful-girl-mixing-dj-turntables-doing-music-production-tutorial_482257-118694.jpg",
-          alt: "Cinematic focus",
-        },
-        {
-          type: "text",
-          content: "film personality.",
-        },
+        { type: "text", content: "The science behind your" },
+        { type: "image", src: "http://img.b2bpic.net/free-photo/cheerful-girl-mixing-dj-turntables-doing-music-production-tutorial_482257-118694.jpg", alt: "Cinematic focus" },
+        { type: "text", content: "film personality." },
      ]}
    />
  </div>
@@ -137,21 +102,9 @@ export default function LandingPage() {
      gridVariant="bento-grid"
      useInvertedBackground={false}
      metrics={[
-        {
-          id: "m1",
-          value: "1000+",
-          description: "Common films fingerprinted",
-        },
-        {
-          id: "m2",
-          value: "8",
-          description: "Distinct personality archetypes",
-        },
-        {
-          id: "m3",
-          value: "Deterministic",
-          description: "Data-backed scoring system",
-        },
+        { id: "m1", value: "1000+", description: "Common films fingerprinted" },
+        { id: "m2", value: "8", description: "Distinct personality archetypes" },
+        { id: "m3", value: "Deterministic", description: "Data-backed scoring system" },
      ]}
      title="Why Vibe Matters"
      description="The logic looks beyond stars to understand what makes your taste unique."
@@ -163,21 +116,9 @@ export default function LandingPage() {
      textboxLayout="split"
      useInvertedBackground={false}
      faqs={[
-        {
-          id: "1",
-          title: "How does it work?",
-          content: "The engine scrapes your public profile data—ratings, diary frequency, and favorites—and calculates signals based on your unique patterns.",
-        },
-        {
-          id: "2",
-          title: "Is my data safe?",
-          content: "We only read public data already visible on your profile. We don't store your login details or credentials.",
-        },
-        {
-          id: "3",
-          title: "Why fewer than 50 films?",
-          content: "If you have watched fewer than 50 films, your taste profile is still forming and we can't provide an accurate reading yet.",
-        },
+        { id: "1", title: "How does it work?", content: "The engine scrapes your public profile data—ratings, diary frequency, and favorites—and calculates signals based on your unique patterns." },
+        { id: "2", title: "Is my data safe?", content: "We only read public data already visible on your profile. We don't store your login details or credentials." },
+        { id: "3", title: "Why fewer than 50 films?", content: "If you have watched fewer than 50 films, your taste profile is still forming and we can't provide an accurate reading yet." },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/present-near-cactus_23-2147811266.jpg"
      mediaAnimation="blur-reveal"
@@ -190,28 +131,24 @@ export default function LandingPage() {
  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
-      background={{
-        variant: "rotated-rays-static",
-      }}
+      background={{ variant: "rotated-rays-static" }}
      tag="Ready?"
      title="Start Your Vibe Reader"
      description="Paste your Letterboxd URL below to analyze your film taste."
-      inputPlaceholder="letterboxd.com/your-username"
+      inputPlaceholder="Enter letterboxd.com/your-username"
      buttonText="Read Vibe"
+      onSubmit={(url) => {
+        setProfileUrl(url);
+        handleVibeRead();
+      }}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoText="Vibe Reader"
-      leftLink={{
-        text: "Privacy Policy",
-        href: "#",
-      }}
-      rightLink={{
-        text: "Terms of Service",
-        href: "#",
-      }}
+      leftLink={{ text: "Privacy Policy", href: "#" }}
+      rightLink={{ text: "Terms of Service", href: "#" }}
    />
  </div>
      </ReactLenis>