Merge version_1 into main #2
410
src/app/page.tsx
410
src/app/page.tsx
@@ -11,7 +11,7 @@ import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
||||
import TextAbout from '@/components/sections/about/TextAbout';
|
||||
import { Book, BookOpen, Clock, Instagram, Lightbulb, PenTool, Star, Twitter, Users } from "lucide-react";
|
||||
import { Book, BookOpen, Clock, Coffee, Instagram, Lightbulb, PenTool, Star, Twitter, Users } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -19,305 +19,135 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Together"
|
||||
button={{
|
||||
text: "Join Club",
|
||||
href: "#contact",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Together"
|
||||
button={{ text: "Join Club", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Stories Best Shared Together"
|
||||
description="Join our community of passionate readers. Discover your next favorite book, engage in deep discussions, and build lasting friendships one page at a time."
|
||||
kpis={[
|
||||
{
|
||||
value: "500+",
|
||||
label: "Active Members",
|
||||
},
|
||||
{
|
||||
value: "120+",
|
||||
label: "Books Read",
|
||||
},
|
||||
{
|
||||
value: "12+",
|
||||
label: "Chapters Worldwide",
|
||||
},
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[
|
||||
{
|
||||
text: "Join The Club",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://pixabay.com/get/gbbb368d4f269a90dc37047aa9b0f07abb653ddbdab583e747ab7b5b657cd590f31e3460c1b06968f7773095b6a07a33074de66977e1d8fe667ae264c0a71c7f9_1280.jpg"
|
||||
imageAlt="Reading environment"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
title="Stories Best Shared Together"
|
||||
description="Join our community of passionate readers. Discover your next favorite book, engage in deep discussions, and build lasting friendships one page at a time."
|
||||
background={{ variant: "plain" }}
|
||||
kpis={[
|
||||
{ value: "500+", label: "Active Members" },
|
||||
{ value: "120+", label: "Books Read" },
|
||||
{ value: "12+", label: "Chapters Worldwide" },
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[{ text: "Join The Club", href: "#contact" }]}
|
||||
imageSrc="https://pixabay.com/get/gbbb368d4f269a90dc37047aa9b0f07abb653ddbdab583e747ab7b5b657cd590f31e3460c1b06968f7773095b6a07a33074de66977e1d8fe667ae264c0a71c7f9_1280.jpg"
|
||||
imageAlt="Reading environment"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
tag="Our Mission"
|
||||
title="Building a Community Where Every Book Has a Voice"
|
||||
buttons={[
|
||||
{
|
||||
text: "Learn More",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
tag="Our Mission"
|
||||
title="Building a Community Where Every Book Has a Voice"
|
||||
buttons={[{ text: "Learn More" }]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardNineteen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
tag: "Discussions",
|
||||
title: "Deep Dive Sessions",
|
||||
subtitle: "Weekly meetings",
|
||||
description: "Engage in meaningful conversations about themes, characters, and personal interpretations of every book we select.",
|
||||
imageSrc: "https://pixabay.com/get/ga56715e86f4a993d2485c545be1cec9c1c1718f1a3201ed3556f023997130d59b87858bbbc561e597cdfaac5fb63c2b71fc348142d76fc4f4420c2c4e70399c5_1280.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
tag: "Curated",
|
||||
title: "Curated Reading Tracks",
|
||||
subtitle: "Discover new genres",
|
||||
description: "Explore curated lists designed to challenge your perspectives and broaden your literary horizons comfortably.",
|
||||
imageSrc: "https://pixabay.com/get/g3206dd8c4ae854b0606bb1cb41bcd9d41761386b5b5e796bd6b72c2d314a12f2af6347c6d6c6b2982285a6259641ac7d1f551538b090c3d939a723862263e7c2_1280.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
tag: "Social",
|
||||
title: "Author Q&A Events",
|
||||
subtitle: "Connect directly",
|
||||
description: "Exclusive opportunities to engage with contemporary authors and gain insights behind the creative process.",
|
||||
imageSrc: "https://pixabay.com/get/ga56715e86f4a993d2485c545be1cec9c1c1718f1a3201ed3556f023997130d59b87858bbbc561e597cdfaac5fb63c2b71fc348142d76fc4f4420c2c4e70399c5_1280.jpg?_wi=2",
|
||||
},
|
||||
]}
|
||||
title="Why Members Love Us"
|
||||
description="Everything you need to enrich your reading journey."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardNineteen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ id: 1, tag: "Discussions", title: "Deep Dive Sessions", subtitle: "Weekly meetings", description: "Engage in meaningful conversations about themes, characters, and personal interpretations of every book we select.", imageSrc: "https://pixabay.com/get/ga56715e86f4a993d2485c545be1cec9c1c1718f1a3201ed3556f023997130d59b87858bbbc561e597cdfaac5fb63c2b71fc348142d76fc4f4420c2c4e70399c5_1280.jpg" },
|
||||
{ id: 2, tag: "Curated", title: "Curated Reading Tracks", subtitle: "Discover new genres", description: "Explore curated lists designed to challenge your perspectives and broaden your literary horizons comfortably.", imageSrc: "https://pixabay.com/get/g3206dd8c4ae854b0606bb1cb41bcd9d41761386b5b5e796bd6b72c2d314a12f2af6347c6d6c6b2982285a6259641ac7d1f551538b090c3d939a723862263e7c2_1280.jpg" },
|
||||
{ id: 3, tag: "Social", title: "Author Q&A Events", subtitle: "Connect directly", description: "Exclusive opportunities to engage with contemporary authors and gain insights behind the creative process.", imageSrc: "https://pixabay.com/get/ga56715e86f4a993d2485c545be1cec9c1c1718f1a3201ed3556f023997130d59b87858bbbc561e597cdfaac5fb63c2b71fc348142d76fc4f4420c2c4e70399c5_1280.jpg" },
|
||||
]}
|
||||
title="Why Members Love Us"
|
||||
description="Everything you need to enrich your reading journey."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "1.2k",
|
||||
title: "Total Discussions",
|
||||
description: "Lively conversations held",
|
||||
icon: BookOpen,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "45",
|
||||
title: "Genres Covered",
|
||||
description: "Diverse literary exploration",
|
||||
icon: BookOpen,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "98%",
|
||||
title: "Member Satisfaction",
|
||||
description: "Highly engaged community",
|
||||
icon: Star,
|
||||
},
|
||||
]}
|
||||
title="Club Milestones"
|
||||
description="Celebrating our growth and shared passion for literature."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "1.2k", title: "Total Discussions", description: "Lively conversations held", icon: BookOpen },
|
||||
{ id: "m2", value: "45", title: "Genres Covered", description: "Diverse literary exploration", icon: BookOpen },
|
||||
{ id: "m3", value: "98%", title: "Member Satisfaction", description: "Highly engaged community", icon: Star },
|
||||
]}
|
||||
title="Club Milestones"
|
||||
description="Celebrating our growth and shared passion for literature."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Sarah J.",
|
||||
date: "Jan 2025",
|
||||
title: "Transformative",
|
||||
quote: "Together has completely transformed how I consume literature. The discussions are life-changing.",
|
||||
tag: "Verified",
|
||||
avatarSrc: "https://pixabay.com/get/gc86d602594759328954f6a8dd6abb91158d1acf1de4d980efc833d7a052df7fae3c7fd2c80f95fa606384b58597ec3e6193f6a3b7fc6ee1f20f8fbdb9789b8bc_1280.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Mark D.",
|
||||
date: "Dec 2024",
|
||||
title: "Inclusive",
|
||||
quote: "I love the diverse reading tracks. It pushes me outside my comfort zone every single month.",
|
||||
tag: "Verified",
|
||||
avatarSrc: "https://pixabay.com/get/g2ddb3bdfce780ca9037326e547a961fe28772c6c8fbb6d536c06572f52e87186f993dcd17e608e9f11b0441588197400efe469a77ecd011945e594f200c9e080_1280.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Elena R.",
|
||||
date: "Nov 2024",
|
||||
title: "Engaging",
|
||||
quote: "The author sessions are fantastic. Connecting directly with the writers is a dream come true.",
|
||||
tag: "Verified",
|
||||
avatarSrc: "https://pixabay.com/get/g2ec11fa8dc1d6766bdf1038e81ec640ac3aca501d08ebc285cd0b1bb89023d72dc96fa6ddea44897d06dfc425b1d0307f3be149dd1eaff272553219a88a06bfc_1280.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "James L.",
|
||||
date: "Oct 2024",
|
||||
title: "Cozy Atmosphere",
|
||||
quote: "Such a warm, friendly community. I’ve made lifelong friends through our monthly meetings.",
|
||||
tag: "Verified",
|
||||
avatarSrc: "https://pixabay.com/get/g69ff47130051e8513df3b693176897462556daa780e6a06ed71c0e6daf83d08fb66b1cefd143742e80f1ee6f7b169dc4a001366b0658570d9e3abe325f0e3982_1280.jpg",
|
||||
},
|
||||
]}
|
||||
title="What Readers Say"
|
||||
description="Hear about the experiences of our wonderful club members."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Sarah J.", date: "Jan 2025", title: "Transformative", quote: "Together has completely transformed how I consume literature. The discussions are life-changing.", tag: "Verified", avatarSrc: "https://pixabay.com/get/gc86d602594759328954f6a8dd6abb91158d1acf1de4d980efc833d7a052df7fae3c7fd2c80f95fa606384b58597ec3e6193f6a3b7fc6ee1f20f8fbdb9789b8bc_1280.jpg" },
|
||||
{ id: "t2", name: "Mark D.", date: "Dec 2024", title: "Inclusive", quote: "I love the diverse reading tracks. It pushes me outside my comfort zone every single month.", tag: "Verified", avatarSrc: "https://pixabay.com/get/g2ddb3bdfce780ca9037326e547a961fe28772c6c8fbb6d536c06572f52e87186f993dcd17e608e9f11b0441588197400efe469a77ecd011945e594f200c9e080_1280.jpg" },
|
||||
{ id: "t3", name: "Elena R.", date: "Nov 2024", title: "Engaging", quote: "The author sessions are fantastic. Connecting directly with the writers is a dream come true.", tag: "Verified", avatarSrc: "https://pixabay.com/get/g2ec11fa8dc1d6766bdf1038e81ec640ac3aca501d08ebc285cd0b1bb89023d72dc96fa6ddea44897d06dfc425b1d0307f3be149dd1eaff272553219a88a06bfc_1280.jpg" },
|
||||
{ id: "t4", name: "James L.", date: "Oct 2024", title: "Cozy Atmosphere", quote: "Such a warm, friendly community. I’ve made lifelong friends through our monthly meetings.", tag: "Verified", avatarSrc: "https://pixabay.com/get/g69ff47130051e8513df3b693176897462556daa780e6a06ed71c0e6daf83d08fb66b1cefd143742e80f1ee6f7b169dc4a001366b0658570d9e3abe325f0e3982_1280.jpg" },
|
||||
]}
|
||||
title="What Readers Say"
|
||||
description="Hear about the experiences of our wonderful club members."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features-track" data-section="features-track">
|
||||
<FeatureCardTen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Fiction & Classics",
|
||||
description: "Timeless stories for the soul.",
|
||||
media: {
|
||||
imageSrc: "https://pixabay.com/get/ga56715e86f4a993d2485c545be1cec9c1c1718f1a3201ed3556f023997130d59b87858bbbc561e597cdfaac5fb63c2b71fc348142d76fc4f4420c2c4e70399c5_1280.jpg?_wi=3",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
icon: Book,
|
||||
text: "Monthly classics discussion",
|
||||
},
|
||||
{
|
||||
icon: PenTool,
|
||||
text: "Deep character analysis",
|
||||
},
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Non-Fiction Growth",
|
||||
description: "Learning and expanding knowledge.",
|
||||
media: {
|
||||
imageSrc: "https://pixabay.com/get/g3206dd8c4ae854b0606bb1cb41bcd9d41761386b5b5e796bd6b72c2d314a12f2af6347c6d6c6b2982285a6259641ac7d1f551538b090c3d939a723862263e7c2_1280.jpg?_wi=2",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
icon: Lightbulb,
|
||||
text: "Practical application",
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
text: "Expert-led dialogues",
|
||||
},
|
||||
],
|
||||
reverse: true,
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Short Story Cycle",
|
||||
description: "Bitesize literature for busy lives.",
|
||||
media: {
|
||||
imageSrc: "https://pixabay.com/get/ga56715e86f4a993d2485c545be1cec9c1c1718f1a3201ed3556f023997130d59b87858bbbc561e597cdfaac5fb63c2b71fc348142d76fc4f4420c2c4e70399c5_1280.jpg?_wi=4",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
icon: Clock,
|
||||
text: "Weekly rapid reads",
|
||||
},
|
||||
{
|
||||
icon: Coffee,
|
||||
text: "Relaxed atmosphere",
|
||||
},
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
]}
|
||||
title="How We Read"
|
||||
description="Structured paths for every type of reader."
|
||||
/>
|
||||
</div>
|
||||
<div id="features-track" data-section="features-track">
|
||||
<FeatureCardTen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "f1", title: "Fiction & Classics", description: "Timeless stories for the soul.", media: { imageSrc: "https://pixabay.com/get/ga56715e86f4a993d2485c545be1cec9c1c1718f1a3201ed3556f023997130d59b87858bbbc561e597cdfaac5fb63c2b71fc348142d76fc4f4420c2c4e70399c5_1280.jpg" }, items: [{ icon: Book, text: "Monthly classics discussion" }, { icon: PenTool, text: "Deep character analysis" }], reverse: false },
|
||||
{ id: "f2", title: "Non-Fiction Growth", description: "Learning and expanding knowledge.", media: { imageSrc: "https://pixabay.com/get/g3206dd8c4ae854b0606bb1cb41bcd9d41761386b5b5e796bd6b72c2d314a12f2af6347c6d6c6b2982285a6259641ac7d1f551538b090c3d939a723862263e7c2_1280.jpg" }, items: [{ icon: Lightbulb, text: "Practical application" }, { icon: Users, text: "Expert-led dialogues" }], reverse: true },
|
||||
{ id: "f3", title: "Short Story Cycle", description: "Bitesize literature for busy lives.", media: { imageSrc: "https://pixabay.com/get/ga56715e86f4a993d2485c545be1cec9c1c1718f1a3201ed3556f023997130d59b87858bbbc561e597cdfaac5fb63c2b71fc348142d76fc4f4420c2c4e70399c5_1280.jpg" }, items: [{ icon: Clock, text: "Weekly rapid reads" }, { icon: Coffee, text: "Relaxed atmosphere" }], reverse: false },
|
||||
]}
|
||||
title="How We Read"
|
||||
description="Structured paths for every type of reader."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
text="Ready to write the next chapter with us? Join 'Together' today and find your literary family."
|
||||
buttons={[
|
||||
{
|
||||
text: "Apply to Join",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
text="Ready to write the next chapter with us? Join 'Together' today and find your literary family."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
buttons={[{ text: "Apply to Join" }]}
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Together"
|
||||
copyrightText="© 2025 Together Reading Club"
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Twitter,
|
||||
href: "#",
|
||||
ariaLabel: "Twitter",
|
||||
},
|
||||
{
|
||||
icon: Instagram,
|
||||
href: "#",
|
||||
ariaLabel: "Instagram",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Together"
|
||||
copyrightText="© 2025 Together Reading Club"
|
||||
socialLinks={[
|
||||
{ icon: Twitter, href: "#", ariaLabel: "Twitter" },
|
||||
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user