358 lines
25 KiB
TypeScript
358 lines
25 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
|
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
|
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
|
|
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
|
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
import { CheckCircle, CreditCard, Eye, Gift, Heart, HelpCircle, Sparkles, Star, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="small"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="circleGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
brandName="Surprise"
|
|
navItems={[
|
|
{ name: "How It Works", id: "how-it-works" },
|
|
{ name: "Gallery", id: "gallery" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "FAQs", id: "faq" }
|
|
]}
|
|
button={{
|
|
text: "Create First Surprise", href: "contact"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitKpi
|
|
title="Make Her Feel Special Every Week"
|
|
description="Create beautiful, personalized digital surprises and send them automatically. Love cards, scratch reveals, mini-games, memory timelines, and more. Let AI help you craft the perfect message while you focus on making magic happen."
|
|
tag="AI-Powered Weekly Surprises"
|
|
tagIcon={Sparkles}
|
|
imageSrc="https://img.b2bpic.net/free-photo/woman-hands-with-credit-card-laptop-gift-box-with-heart-coffee-white-background-valentine-day-online-shopping-concept-holiday-background-top-view_501050-1110.jpg"
|
|
imageAlt="Romantic digital gift showcase"
|
|
imagePosition="right"
|
|
enableKpiAnimation={true}
|
|
kpis={[
|
|
{
|
|
value: "7 Gift Types", label: "Interactive surprises to choose from"
|
|
},
|
|
{
|
|
value: "100% Private", label: "Shareable secure links for receivers"
|
|
},
|
|
{
|
|
value: "Automatic Weekly", label: "Schedule once, we deliver magic"
|
|
}
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Create Your First Surprise", href: "contact"
|
|
},
|
|
{
|
|
text: "See Gallery", href: "gallery"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="how-it-works" data-section="how-it-works">
|
|
<MetricCardEleven
|
|
title="How It Works in Three Simple Steps"
|
|
description="Create beautiful surprises, schedule them once, and let AI help you make her smile every week"
|
|
tag="Simple Process"
|
|
tagIcon={Heart}
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
animationType="slide-up"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "Create", title: "Design Your Surprise", description: "Choose from 7 gift types: love cards, scratch reveals, mini-games, timelines, quizzes, spinning wheels, and animated letters. AI helps write personalized messages, poems, date ideas, and compliments.", imageSrc: "https://img.b2bpic.net/free-photo/dark-steel-lettering-love-with-lamps-stands-white-dinner-table_1304-3237.jpg", imageAlt: "Creating a custom gift"
|
|
},
|
|
{
|
|
id: "2", value: "Schedule", title: "Set It & Forget It", description: "Choose weekly delivery times. Our system automatically generates and schedules your surprises. Each week, a new magic moment is ready to share.", imageSrc: "https://img.b2bpic.net/free-photo/heart-shaped-valentines-day-chocolates-with-rose_23-2148389652.jpg", imageAlt: "Scheduling weekly delivery"
|
|
},
|
|
{
|
|
id: "3", value: "Receive", title: "She Gets a Magical Link", description: "She receives a beautiful, private link with a countdown timer. Click to reveal an interactive, mobile-friendly surprise designed just for her.", imageSrc: "https://img.b2bpic.net/free-vector/hand-drawn-valentines-day-landing-page_1188-595.jpg", imageAlt: "Receiving a surprise gift"
|
|
}
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Start Creating", href: "contact"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="gift-types" data-section="gift-types">
|
|
<FeatureCardOne
|
|
title="Seven Types of Digital Surprises"
|
|
description="Each gift is interactive, mobile-optimized, and designed to make her smile. Choose one or mix and match for variety."
|
|
tag="Gift Gallery"
|
|
tagIcon={Gift}
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
animationType="slide-up"
|
|
gridVariant="two-columns-alternating-heights"
|
|
features={[
|
|
{
|
|
title: "Interactive Love Cards", description: "Beautiful animated greeting cards with personalized messages, AI-generated poems, and interactive reveal effects. Create romantic moments with custom designs.", imageSrc: "https://img.b2bpic.net/free-photo/woman-showing-tablet-with-blank-screen-bed_23-2148013188.jpg", imageAlt: "Interactive love card example", button: {
|
|
text: "Create a Love Card"
|
|
}
|
|
},
|
|
{
|
|
title: "Scratch-to-Reveal Messages", description: "Classic scratch-off cards hiding romantic messages, compliments, date ideas, or inside jokes. Interactive and fun for mobile play.", imageSrc: "https://img.b2bpic.net/free-photo/presents-knitted-hearts-near-modern-tablet_23-2148015460.jpg", imageAlt: "Scratch-off card game"
|
|
},
|
|
{
|
|
title: "Memory Timelines", description: "Beautiful visual timeline of your relationship milestones, photos, and dates. AI helps write touching descriptions for each moment.", imageSrc: "https://img.b2bpic.net/free-vector/instagram-story-valentine-s-day-template_23-2148832677.jpg", imageAlt: "Relationship memory timeline"
|
|
},
|
|
{
|
|
title: "Couple Quiz Games", description: "How well do you know each other? Fun quizzes about your relationship with instant scoring and celebratory animations when she wins.", imageSrc: "https://img.b2bpic.net/free-vector/hand-drawn-modern-valentine-s-day-instagram-story_23-2148862335.jpg", imageAlt: "Interactive couple quiz"
|
|
},
|
|
{
|
|
title: "Date Idea Spinning Wheel", description: "Spin the wheel to discover surprise date ideas, restaurant recommendations, activity suggestions, or romantic gestures generated by AI.", imageSrc: "https://img.b2bpic.net/free-vector/grid-valentines-day-instagram-story-template_23-2148808390.jpg", imageAlt: "Spinning date wheel"
|
|
},
|
|
{
|
|
title: "Animated Love Letters", description: "Beautifully animated text reveals your heartfelt message word by word. Add AI-generated compliments, love notes, or personalized confessions.", imageSrc: "https://img.b2bpic.net/free-photo/woman-hands-with-credit-card-laptop-gift-box-with-heart-coffee-white-background-valentine-day-online-shopping-concept-holiday-background-top-view_501050-1110.jpg", imageAlt: "Animated love letter"
|
|
}
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Explore All Gift Types", href: "contact"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="gallery" data-section="gallery">
|
|
<FeatureCardOne
|
|
title="Gallery of Example Surprises"
|
|
description="See what real couples are creating. Get inspired by these beautiful, romantic surprise examples."
|
|
tag="Real Examples"
|
|
tagIcon={Eye}
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
animationType="blur-reveal"
|
|
gridVariant="three-columns-all-equal-width"
|
|
features={[
|
|
{
|
|
title: "Anniversary Love Card", description: "A handcrafted digital anniversary card with animated confetti, personalized poem, and countdown to next anniversary.", imageSrc: "https://img.b2bpic.net/free-photo/expressive-young-person-posing-winter-holidays_140725-135476.jpg", imageAlt: "Anniversary love card example"
|
|
},
|
|
{
|
|
title: "Weekly Surprise Box", description: "Interactive surprise box with hidden daily gifts revealed throughout the week. Each day has a new message or date suggestion.", imageSrc: "https://img.b2bpic.net/free-photo/gifts-hearts-around-tablet_23-2148015409.jpg", imageAlt: "Weekly surprise box example"
|
|
},
|
|
{
|
|
title: "Romantic Love Letter", description: "AI-written love letter with animated text reveal, heart animations, and a beautiful signature. A timeless romantic gesture.", imageSrc: "https://img.b2bpic.net/free-photo/word-love-mobile-phone-screen_53876-96873.jpg", imageAlt: "Romantic love letter example"
|
|
}
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "View More Examples", href: "contact"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
title="Boyfriends Love Surprise"
|
|
description="Real stories from couples who've made their relationship more magical"
|
|
tag="Real Testimonials"
|
|
tagIcon={Star}
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Johnson, Engaged", date: "Date: November 2024", title: "He remembers every week without forgetting!", quote: "My fiancé uses Surprise to send me weekly gifts and I absolutely love it. The AI helps him write amazing messages and poems. I feel special every single week. It's like he's always thinking of me, even when life gets busy.", tag: "Weekly Ritual", avatarSrc: "https://img.b2bpic.net/free-photo/portrait-young-woman_23-2148574874.jpg", imageSrc: "https://img.b2bpic.net/free-photo/expressive-young-person-posing-winter-holidays_140725-135476.jpg", imageAlt: "Happy couple celebrating"
|
|
},
|
|
{
|
|
id: "2", name: "Emma Davis, Married 2 Years", date: "Date: October 2024", title: "This reignited the spark in our relationship", quote: "We were stuck in a routine until my husband discovered Surprise. Now every week I get a new digital gift - love cards, quizzes about us, date ideas. It's like dating again but with the comfort of our marriage. Honestly life-changing.", tag: "Relationship Goals", avatarSrc: "https://img.b2bpic.net/free-photo/caucasion-woman-casual-confident-concept_53876-137678.jpg", imageSrc: "https://img.b2bpic.net/free-photo/gifts-hearts-around-tablet_23-2148015409.jpg", imageAlt: "Excited woman opening gift"
|
|
},
|
|
{
|
|
id: "3", name: "Jessica Martinez, Long Distance", date: "Date: September 2024", title: "Made our long-distance relationship feel closer", quote: "My boyfriend lives in another country. With Surprise, he sends me weekly gifts and messages that feel so personal. The interactive games and love letters make me feel connected to him despite the distance. Worth every penny.", tag: "Long Distance", avatarSrc: "https://img.b2bpic.net/free-photo/positive-blond-girl-shows-tongue-winks-camera-makes-happy-funny-face-stands-against-white-background_176420-46979.jpg", imageSrc: "https://img.b2bpic.net/free-photo/word-love-mobile-phone-screen_53876-96873.jpg", imageAlt: "Woman smiling at phone"
|
|
},
|
|
{
|
|
id: "4", name: "Michelle Lee, Dating 1 Year", date: "Date: August 2024", title: "My boyfriend became the most thoughtful person ever", quote: "He was never the romantic type, but Surprise made it so easy for him to show he cares. The AI suggestions for messages and date ideas helped him be more expressive. Now I get weekly surprises and he feels confident about it.", tag: "Non-Romantic Boyfriend Win", avatarSrc: "https://img.b2bpic.net/free-photo/young-woman-smiling_176474-95672.jpg", imageSrc: "https://img.b2bpic.net/free-photo/expressive-young-person-posing-winter-holidays_140725-135476.jpg", imageAlt: "Couple holding hands"
|
|
},
|
|
{
|
|
id: "5", name: "Rebecca Chen, Married 5 Years", date: "Date: July 2024", title: "Keeps our love feeling fresh and exciting", quote: "After 5 years of marriage, I was worried we'd lost the excitement. My husband set up weekly Surprise gifts and now it's our favorite tradition. Each week I get something unique - scratch cards, timelines reminding me of our memories, date wheel spins.", tag: "Long-Term Love", avatarSrc: "https://img.b2bpic.net/free-photo/close-up-attractive-african-american-woman-smiling-looking-happy-standing-yellow-background_1258-54850.jpg", imageSrc: "https://img.b2bpic.net/free-photo/gifts-hearts-around-tablet_23-2148015409.jpg", imageAlt: "Happy woman laughing"
|
|
},
|
|
{
|
|
id: "6", name: "Amanda Foster, Engaged", date: "Date: June 2024", title: "The best investment for our relationship", quote: "My fiancé invested in Surprise Premium and it's genuinely the best money he's spent on our relationship. The AI personalization is incredible - it writes poems, suggests activities, creates quizzes about our love story. I feel cherished every single week.", tag: "Premium User", avatarSrc: "https://img.b2bpic.net/free-photo/joy-happiness-positive-emotions-portrait-stylish-beautiful-young-female-cozy-sweater-having-fun-laughing-good-joke-feeling-happy-carefree-posing-isolated-copy-space-blank-wall_343059-4669.jpg", imageSrc: "https://img.b2bpic.net/free-photo/word-love-mobile-phone-screen_53876-96873.jpg", imageAlt: "Woman excited and happy"
|
|
}
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Join Thousands of Happy Couples", href: "contact"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardFive
|
|
title="Simple, Transparent Pricing"
|
|
description="Start free, upgrade when you want more magic. No hidden fees, cancel anytime."
|
|
tag="Pricing Plans"
|
|
tagIcon={CreditCard}
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
animationType="slide-up"
|
|
plans={[
|
|
{
|
|
id: "free", tag: "Free Forever Plan", tagIcon: Sparkles,
|
|
price: "$0", period: "/month", description: "Perfect for getting started. Create and send one surprise per month.", button: {
|
|
text: "Start Free", href: "contact"
|
|
},
|
|
featuresTitle: "What's Included:", features: [
|
|
"1 surprise per month", "3 gift types (love cards, scratch reveals, basic letters)", "Basic AI message suggestions", "Mobile-friendly delivery", "Private shareable links", "Community support"
|
|
]
|
|
},
|
|
{
|
|
id: "weekly", tag: "Weekly Plan", tagIcon: Heart,
|
|
price: "$9.99", period: "/month", description: "Make her smile every week. 4 surprises monthly with all gift types.", button: {
|
|
text: "Start Weekly", href: "contact"
|
|
},
|
|
featuresTitle: "Everything in Free, Plus:", features: [
|
|
"4 surprises per month (1 per week)", "All 7 gift types included", "Advanced AI: poems, date ideas, compliments", "Customize delivery schedule", "Surprise scheduling for up to 3 months ahead", "Priority email support", "Beautiful animated previews"
|
|
]
|
|
},
|
|
{
|
|
id: "premium", tag: "Premium Plan", tagIcon: Zap,
|
|
price: "$24.99", period: "/month", description: "Go all-in. Unlimited surprises with full AI personalization.", button: {
|
|
text: "Start Premium", href: "contact"
|
|
},
|
|
featuresTitle: "Everything in Weekly, Plus:", features: [
|
|
"Unlimited surprises per month", "Unlimited AI message generation", "AI customization: learn her preferences", "Schedule up to 12 months ahead", "Multiple recipients (send to friends too)", "Custom branding and themes", "Priority 24/7 support", "Advanced analytics (what she loved most)", "Exclusive seasonal gift templates"
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Ready to make her feel special every week? Start creating your first surprise right now. No credit card required."
|
|
animationType="entrance-slide"
|
|
useInvertedBackground="noInvert"
|
|
buttons={[
|
|
{
|
|
text: "Create Your First Surprise", href: "#"
|
|
},
|
|
{
|
|
text: "Browse Examples First", href: "gallery"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
title="Frequently Asked Questions"
|
|
description="Everything you need to know about creating and sending weekly surprises"
|
|
tag="FAQ"
|
|
tagIcon={HelpCircle}
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
animationType="smooth"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "What is Surprise?", content: "Surprise is an AI-powered web app that helps you create and automatically send weekly digital gifts to your girlfriend. Choose from 7 interactive gift types, let AI help personalize messages, and schedule them once. We handle the rest—delivering magic every week."
|
|
},
|
|
{
|
|
id: "2", title: "How does the AI help?", content: "Our AI helps you write personalized messages, romantic poems, date ideas, compliments, and gift suggestions. If you're not sure what to write, the AI suggests options based on your relationship. You can always customize and make it your own."
|
|
},
|
|
{
|
|
id: "3", title: "Can she see it's AI-written?", content: "No. The AI is just a tool to help you. Everything you send is from you—personalized and authentic. You customize all AI suggestions before sending, so it feels completely real and heartfelt."
|
|
},
|
|
{
|
|
id: "4", title: "What gift types are included?", content: "7 interactive gift types: interactive love cards, scratch-to-reveal messages, memory timelines, couple quiz games, spinning date wheels, animated love letters, and surprise boxes. Mix and match each week for variety."
|
|
},
|
|
{
|
|
id: "5", title: "Is it really automatic?", content: "Yes. Create one surprise and schedule it for weekly delivery. Our system automatically sends her a beautiful private link every week at the time you choose. She gets a countdown timer and clicks to reveal her interactive gift."
|
|
},
|
|
{
|
|
id: "6", title: "What does she receive?", content: "She gets a private, mobile-friendly link to an interactive digital gift. It's beautifully designed and works on any device. No account needed—she just clicks the link and plays/reveals the surprise."
|
|
},
|
|
{
|
|
id: "7", title: "How private is it?", content: "Completely private. Each gift is shared via a unique secure link that only works for her. She can't see other gifts, and no one can guess the URL. Perfect for romantic, personal surprises."
|
|
},
|
|
{
|
|
id: "8", title: "Can I schedule in advance?", content: "Yes. Free plan: schedule 1 month ahead. Weekly plan: schedule 3 months ahead. Premium: schedule up to 12 months ahead. Create all your surprises for the year and relax."
|
|
},
|
|
{
|
|
id: "9", title: "Can I personalize the gifts?", content: "Absolutely. Every element is customizable: messages, poems, photos, colors, animations, date ideas, quiz questions. The AI suggests, but you create. It's all about your unique relationship."
|
|
},
|
|
{
|
|
id: "10", title: "What if I'm not romantic?", content: "That's exactly why Surprise exists. The AI handles the hard part—writing romantic messages, suggesting date ideas, creating personalized content. You just approve and send. Easy mode for romance."
|
|
},
|
|
{
|
|
id: "11", title: "Can I gift her the app itself?", content: "Yes. You can gift Premium or Weekly plans as gift cards. Let her experience the magic of weekly surprises. Perfect for anniversaries, engagements, or just showing you care."
|
|
},
|
|
{
|
|
id: "12", title: "What if she hates surprises?", content: "30-day money-back guarantee. If it's not working for your relationship, we refund it no questions asked. But most partners love the weekly magic—it shows effort and thoughtfulness."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Product", items: [
|
|
{ label: "Gift Types", href: "#gift-types" },
|
|
{ label: "Pricing", href: "#pricing" },
|
|
{ label: "How It Works", href: "#how-it-works" },
|
|
{ label: "Gallery", href: "#gallery" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#" },
|
|
{ label: "Blog", href: "#" },
|
|
{ label: "Contact", href: "#" },
|
|
{ label: "Careers", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Resources", items: [
|
|
{ label: "FAQ", href: "#faq" },
|
|
{ label: "Help Center", href: "#" },
|
|
{ label: "Status", href: "#" },
|
|
{ label: "Guides", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Cookie Policy", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
bottomLeftText="© 2025 Surprise. All rights reserved. Made with love for love."
|
|
bottomRightText="Make her smile every week ♥"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |