Merge version_1 into main #1
424
src/app/page.tsx
424
src/app/page.tsx
@@ -19,300 +19,158 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Gallery",
|
||||
id: "gallery",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Creator Tool",
|
||||
id: "creator",
|
||||
},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "faq",
|
||||
},
|
||||
]}
|
||||
brandName="Caricatura"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Gallery", id: "gallery" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Creator Tool", id: "creator" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
]}
|
||||
brandName="Caricatura"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Historical Caricature Archive"
|
||||
description="Discover thousands of rare satirical illustrations and political cartoons spanning two centuries of history, from the Belle Époque to WWII."
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Gallery",
|
||||
href: "#gallery",
|
||||
},
|
||||
{
|
||||
text: "Creator Tool",
|
||||
href: "#creator",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/striated-reed-lark-alamanthus-fuliginosus-illustrated-by-elizabeth-gould_53876-65179.jpg"
|
||||
imageAlt="historical political cartoon texture"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/new-south-wales-oriole-oriolus-viridis-illustrated-by-elizabeth-gould_53876-65192.jpg",
|
||||
alt: "New South Wales Oriole",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/great-sandpiper-schoeniclus-magnus-illustrated-by-elizabeth-gould_53876-65215.jpg",
|
||||
alt: "Great Sandpiper",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/black-throated-psophodes-psophodes-nigrogularis-illustrated-by-elizabeth-gould_53876-65169.jpg",
|
||||
alt: "Black-throated Psophodes",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/friar-bird-tropidorhynchus-corniculatus-illustrated-by-elizabeth-gould_53876-65546.jpg",
|
||||
alt: "Friar Bird",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/thoughtful-millennial-female-with-dark-curly-hair-strolls-street-modern-city-holds-portable-touch-pad-stylus-enjoys-view-urban-buildings-uses-technologies-woman-with-digital-tablet-computer_273609-60587.jpg",
|
||||
alt: "academic professional portrait",
|
||||
},
|
||||
]}
|
||||
avatarText="Join 5,000+ researchers"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Historical Caricature Archive"
|
||||
description="Discover thousands of rare satirical illustrations and political cartoons spanning two centuries of history, from the Belle Époque to WWII."
|
||||
buttons={[{ text: "Explore Gallery", href: "#gallery" }, { text: "Creator Tool", href: "#creator" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/striated-reed-lark-alamanthus-fuliginosus-illustrated-by-elizabeth-gould_53876-65179.jpg"
|
||||
imageAlt="historical political cartoon texture"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/new-south-wales-oriole-oriolus-viridis-illustrated-by-elizabeth-gould_53876-65192.jpg", alt: "New South Wales Oriole" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/great-sandpiper-schoeniclus-magnus-illustrated-by-elizabeth-gould_53876-65215.jpg", alt: "Great Sandpiper" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/black-throated-psophodes-psophodes-nigrogularis-illustrated-by-elizabeth-gould_53876-65169.jpg", alt: "Black-throated Psophodes" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/friar-bird-tropidorhynchus-corniculatus-illustrated-by-elizabeth-gould_53876-65546.jpg", alt: "Friar Bird" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/thoughtful-millennial-female-with-dark-curly-hair-strolls-street-modern-city-holds-portable-touch-pad-stylus-enjoys-view-urban-buildings-uses-technologies-woman-with-digital-tablet-computer_273609-60587.jpg", alt: "academic professional portrait" },
|
||||
]}
|
||||
avatarText="Join 5,000+ researchers"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={true}
|
||||
title="Preserving Satirical History"
|
||||
description={[
|
||||
"Caricatura serves as a bridge between the past and the digital present, hosting curated archives of rare editorial art.",
|
||||
"We democratize access to satirical heritage, once scattered across dusty museum databases and physical libraries.",
|
||||
"Our mission is to help researchers, students, and history buffs find, save, and analyze the visual language of the past.",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={true}
|
||||
title="Preserving Satirical History"
|
||||
description={[
|
||||
"Caricatura serves as a bridge between the past and the digital present, hosting curated archives of rare editorial art.", "We democratize access to satirical heritage, once scattered across dusty museum databases and physical libraries.", "Our mission is to help researchers, students, and history buffs find, save, and analyze the visual language of the past."]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="gallery" data-section="gallery">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
brand: "19th Century",
|
||||
name: "The Political Satirist",
|
||||
price: "1890",
|
||||
rating: 5,
|
||||
reviewCount: "Public Domain",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-walking-graveyard-moonlight_23-2152012986.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
brand: "WWI",
|
||||
name: "Editorial Critique",
|
||||
price: "1916",
|
||||
rating: 5,
|
||||
reviewCount: "Public Domain",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/group-people-formal-attire-some-wearing-medals-patriotic-ceremony-with-american-flag-background_23-2151965945.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
brand: "Belle Époque",
|
||||
name: "Social Class Study",
|
||||
price: "1905",
|
||||
rating: 5,
|
||||
reviewCount: "Public Domain",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-surreal-mythological-being-with-fairy-core-aesthetic_23-2151046408.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
brand: "Interwar",
|
||||
name: "Diplomatic Tensions",
|
||||
price: "1932",
|
||||
rating: 5,
|
||||
reviewCount: "Public Domain",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/robot-90s_23-2151901206.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
brand: "19th Century",
|
||||
name: "Royal Scrutiny",
|
||||
price: "1888",
|
||||
rating: 5,
|
||||
reviewCount: "Public Domain",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/digital-art-style-fashion-design-sketch-paper_23-2151487050.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
brand: "WWII",
|
||||
name: "War Time Editorial",
|
||||
price: "1941",
|
||||
rating: 5,
|
||||
reviewCount: "Public Domain",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/character-with-indonesian-flag_23-2151716424.jpg",
|
||||
},
|
||||
]}
|
||||
title="Archive Gallery"
|
||||
description="Browse our curated selection of political cartoons and editorial illustrations. Filter by era, style, and country to uncover visual perspectives of the past."
|
||||
/>
|
||||
</div>
|
||||
<div id="gallery" data-section="gallery">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", brand: "19th Century", name: "The Political Satirist", price: "1890", rating: 5, reviewCount: "Public Domain", imageSrc: "http://img.b2bpic.net/free-photo/man-walking-graveyard-moonlight_23-2152012986.jpg" },
|
||||
{ id: "p2", brand: "WWI", name: "Editorial Critique", price: "1916", rating: 5, reviewCount: "Public Domain", imageSrc: "http://img.b2bpic.net/free-photo/group-people-formal-attire-some-wearing-medals-patriotic-ceremony-with-american-flag-background_23-2151965945.jpg" },
|
||||
{ id: "p3", brand: "Belle Époque", name: "Social Class Study", price: "1905", rating: 5, reviewCount: "Public Domain", imageSrc: "http://img.b2bpic.net/free-photo/portrait-surreal-mythological-being-with-fairy-core-aesthetic_23-2151046408.jpg" },
|
||||
{ id: "p4", brand: "Interwar", name: "Diplomatic Tensions", price: "1932", rating: 5, reviewCount: "Public Domain", imageSrc: "http://img.b2bpic.net/free-photo/robot-90s_23-2151901206.jpg" },
|
||||
{ id: "p5", brand: "19th Century", name: "Royal Scrutiny", price: "1888", rating: 5, reviewCount: "Public Domain", imageSrc: "http://img.b2bpic.net/free-photo/digital-art-style-fashion-design-sketch-paper_23-2151487050.jpg" },
|
||||
{ id: "p6", brand: "WWII", name: "War Time Editorial", price: "1941", rating: 5, reviewCount: "Public Domain", imageSrc: "http://img.b2bpic.net/free-photo/character-with-indonesian-flag_23-2151716424.jpg" },
|
||||
]}
|
||||
title="Archive Gallery"
|
||||
description="Browse our curated selection of political cartoons and editorial illustrations. Filter by era, style, and country to uncover visual perspectives of the past."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="creator" data-section="creator">
|
||||
<FeatureCardTwentySeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Historic Styles",
|
||||
descriptions: [
|
||||
"Access styles from John Tenniel, André Gill, and more.",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/greek-statue-with-risograph-effect-remixed-media_53876-129904.jpg",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Low Friction Cost",
|
||||
descriptions: [
|
||||
"$1 per generation with no subscription needed.",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dictatorship-concept-with-puppeteer_23-2149672833.jpg",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Waitlist Now",
|
||||
descriptions: [
|
||||
"Sign up to get notified for exclusive early access launch.",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-adult-friends-using-smartphones-together-outdoors-youth-culture-concept_53876-13654.jpg",
|
||||
},
|
||||
]}
|
||||
title="AI Caricature Creator"
|
||||
description="Generate your own satirical artwork in minutes. Our AI trained on historical data brings your vision to life in iconic 19th or early 20th century styles."
|
||||
/>
|
||||
</div>
|
||||
<div id="creator" data-section="creator">
|
||||
<FeatureCardTwentySeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ id: "f1", title: "Historic Styles", descriptions: ["Access styles from John Tenniel, André Gill, and more."], imageSrc: "http://img.b2bpic.net/free-photo/greek-statue-with-risograph-effect-remixed-media_53876-129904.jpg" },
|
||||
{ id: "f2", title: "Low Friction Cost", descriptions: ["$1 per generation with no subscription needed."], imageSrc: "http://img.b2bpic.net/free-photo/dictatorship-concept-with-puppeteer_23-2149672833.jpg" },
|
||||
{ id: "f3", title: "Waitlist Now", descriptions: ["Sign up to get notified for exclusive early access launch."], imageSrc: "http://img.b2bpic.net/free-photo/young-adult-friends-using-smartphones-together-outdoors-youth-culture-concept_53876-13654.jpg" },
|
||||
]}
|
||||
title="AI Caricature Creator"
|
||||
description="Generate your own satirical artwork in minutes. Our AI trained on historical data brings your vision to life in iconic 19th or early 20th century styles."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "12,000+",
|
||||
description: "Historical Illustrations",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "450+",
|
||||
description: "Renowned Artists",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "15+",
|
||||
description: "Countries Represented",
|
||||
},
|
||||
]}
|
||||
title="Archive Reach"
|
||||
description="Our collection continues to grow, providing deep historical insights and satirical artistic records."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "12,000+", description: "Historical Illustrations" },
|
||||
{ id: "m2", value: "450+", description: "Renowned Artists" },
|
||||
{ id: "m3", value: "15+", description: "Countries Represented" },
|
||||
]}
|
||||
title="Archive Reach"
|
||||
description="Our collection continues to grow, providing deep historical insights and satirical artistic records."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={true}
|
||||
testimonial="Caricatura is an invaluable resource for my historical research. The searchability across periods is unmatched."
|
||||
rating={5}
|
||||
author="Sarah Miller, Historian"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/thoughtful-millennial-female-with-dark-curly-hair-strolls-street-modern-city-holds-portable-touch-pad-stylus-enjoys-view-urban-buildings-uses-technologies-woman-with-digital-tablet-computer_273609-60587.jpg",
|
||||
alt: "Sarah Miller",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/cheerful-black-man-posing-public-library_74855-1508.jpg",
|
||||
alt: "Researcher A",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/designer-working-3d-model_23-2149371898.jpg",
|
||||
alt: "Researcher B",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-young-business-person-doing-internship_23-2149305396.jpg",
|
||||
alt: "Researcher C",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/brunette-businesswoman-using-her-tablet_23-2148141784.jpg",
|
||||
alt: "Researcher D",
|
||||
},
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={true}
|
||||
testimonial="Caricatura is an invaluable resource for my historical research. The searchability across periods is unmatched."
|
||||
rating={5}
|
||||
author="Sarah Miller, Historian"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/thoughtful-millennial-female-with-dark-curly-hair-strolls-street-modern-city-holds-portable-touch-pad-stylus-enjoys-view-urban-buildings-uses-technologies-woman-with-digital-tablet-computer_273609-60587.jpg", alt: "Sarah Miller" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/cheerful-black-man-posing-public-library_74855-1508.jpg", alt: "Researcher A" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/designer-working-3d-model_23-2149371898.jpg", alt: "Researcher B" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-young-business-person-doing-internship_23-2149305396.jpg", alt: "Researcher C" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/brunette-businesswoman-using-her-tablet_23-2148141784.jpg", alt: "Researcher D" },
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Is the archive free?",
|
||||
content: "Yes, browsing and saving to personal collections is free for all users.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "What eras are available?",
|
||||
content: "Our archive covers 19th century art through the end of WWII.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "How does the creator tool work?",
|
||||
content: "It uses AI trained on our historical dataset to generate style-accurate caricatures for $1.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/vintage-vhs-packaging-shelf_23-2149854262.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
title="Frequently Asked Questions"
|
||||
description="Common questions about accessing, licensing, and using the archive tools."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "q1", title: "Is the archive free?", content: "Yes, browsing and saving to personal collections is free for all users." },
|
||||
{ id: "q2", title: "What eras are available?", content: "Our archive covers 19th century art through the end of WWII." },
|
||||
{ id: "q3", title: "How does the creator tool work?", content: "It uses AI trained on our historical dataset to generate style-accurate caricatures for $1." },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/vintage-vhs-packaging-shelf_23-2149854262.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
title="Frequently Asked Questions"
|
||||
description="Common questions about accessing, licensing, and using the archive tools."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "animated-grid",
|
||||
}}
|
||||
tag="Early Access"
|
||||
title="Join the Creator Waitlist"
|
||||
description="Enter your email to receive early access to our AI Caricature Creator tool. Be the first to experiment with historical AI generation."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/youngster-woman-with-book_23-2147678895.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
buttonText="Notify Me"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "animated-grid" }}
|
||||
tag="Early Access"
|
||||
title="Join the Creator Waitlist"
|
||||
description="Enter your email to receive early access to our AI Caricature Creator tool. Be the first to experiment with historical AI generation."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/youngster-woman-with-book_23-2147678895.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
buttonText="Notify Me"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Caricatura"
|
||||
copyrightText="© 2025 | Caricatura Archive"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Caricatura"
|
||||
copyrightText="© 2025 | Caricatura Archive"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user