Merge version_2 into main #1
145
src/app/page.tsx
145
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>
|
||||
|
||||
Reference in New Issue
Block a user