278 lines
20 KiB
TypeScript
278 lines
20 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
|
import HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel";
|
|
import SplitAbout from "@/components/sections/about/SplitAbout";
|
|
import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
|
|
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
|
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
|
|
import FaqDouble from "@/components/sections/faq/FaqDouble";
|
|
import ContactFaq from "@/components/sections/contact/ContactFaq";
|
|
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
|
import { Sparkles, Heart, Palette, Wand2, Star, Zap, CheckCircle, Gift, HelpCircle, Mail } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="medium"
|
|
sizing="medium"
|
|
background="circleGradient"
|
|
cardStyle="outline"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "Services", id: "features" },
|
|
{ name: "Postcards", id: "product" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
brandName="The Homefront"
|
|
bottomLeftText="Craft Beautiful Memories"
|
|
bottomRightText="hello@thehomefront.com"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardRotatedCarousel
|
|
title="Create Beautiful Postcards for Every Moment"
|
|
description="Design and send personalized postcards for holidays, business promotions, events, and special occasions. Make every message memorable with The Homefront's elegant postcard designs and premium printing."
|
|
tag="Welcome to The Homefront"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Start Creating", href: "#product" },
|
|
{ text: "Explore Designs", href: "#features" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
background={{ variant: "plain" }}
|
|
carouselItems={[
|
|
{
|
|
id: "1", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-christmas-composition-with-letters-wooden-surface_169016-17186.jpg", imageAlt: "Holiday postcard design"},
|
|
{
|
|
id: "2", imageSrc: "http://img.b2bpic.net/free-vector/abstract-business-card-template-with-geometric-shapes_23-2147942853.jpg", imageAlt: "Business postcard design"},
|
|
{
|
|
id: "3", imageSrc: "http://img.b2bpic.net/free-vector/creative-blue-wedding-invitation-design_23-2147772999.jpg", imageAlt: "Event celebration postcard"},
|
|
{
|
|
id: "4", imageSrc: "http://img.b2bpic.net/free-photo/encouragement-quote-note-starting-with-dear_23-2150105105.jpg", imageAlt: "Artistic postcard creation"},
|
|
{
|
|
id: "5", imageSrc: "http://img.b2bpic.net/free-vector/simple-christmas-card-collection_23-2148008237.jpg", imageAlt: "Seasonal postcard collection"},
|
|
{
|
|
id: "6", imageSrc: "http://img.b2bpic.net/free-vector/flat-spring-card-collection_23-2148050777.jpg", imageAlt: "Diverse postcard templates"},
|
|
]}
|
|
autoPlay={true}
|
|
autoPlayInterval={4000}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
title="About The Homefront"
|
|
description="We believe every message deserves to be special. At The Homefront, we combine timeless elegance with modern convenience to bring your postcard dreams to life. Whether you're celebrating a milestone, promoting your business, or simply staying connected, we're here to make it memorable."
|
|
tag="Our Story"
|
|
tagIcon={Heart}
|
|
tagAnimation="slide-up"
|
|
buttons={[{ text: "Learn More", href: "#" }]}
|
|
buttonAnimation="slide-up"
|
|
bulletPoints={[
|
|
{
|
|
title: "Curated Designs", description: "Beautiful, professionally crafted postcard templates for every occasion and aesthetic.", icon: Palette,
|
|
},
|
|
{
|
|
title: "Easy Customization", description: "Personalize every detail with our intuitive design tool. No design experience needed.", icon: Wand2,
|
|
},
|
|
{
|
|
title: "Premium Quality", description: "Vibrant colors, smooth finishes, and durable materials that make an impression.", icon: Star,
|
|
},
|
|
{
|
|
title: "Quick Delivery", description: "From creation to your mailbox. Fast, reliable shipping to anywhere.", icon: Zap,
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/stationery-wedding-invitation-concept-flat-lay_23-2148187996.jpg"
|
|
imageAlt="The Homefront postcard collection"
|
|
mediaAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
imagePosition="right"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentySeven
|
|
title="Why Choose The Homefront"
|
|
description="Discover the features that make creating postcards effortless and enjoyable"
|
|
tag="Our Services"
|
|
tagIcon={CheckCircle}
|
|
tagAnimation="slide-up"
|
|
buttons={[{ text: "Explore All Services", href: "#product" }]}
|
|
buttonAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: "1", title: "Custom Design Tool", description: "Intuitive drag-and-drop interface lets you customize every element. Choose colors, fonts, images, and layouts that perfectly match your vision with real-time preview.", imageSrc: "http://img.b2bpic.net/free-vector/dashboard-user-panel-template_23-2148355297.jpg", imageAlt: "Custom design tool"},
|
|
{
|
|
id: "2", title: "Express Delivery", description: "Fast turnaround times without compromising quality. Your postcards arrive quickly and beautifully, ready to make an impact.", imageSrc: "http://img.b2bpic.net/free-vector/creative-delivery-concept-background_23-2147704002.jpg", imageAlt: "Express delivery service"},
|
|
{
|
|
id: "3", title: "Premium Materials", description: "High-quality cardstock and printing ensure your postcards stand out. Smooth finishes and vibrant colors that capture attention.", imageSrc: "http://img.b2bpic.net/free-photo/woman-using-printer-while-working-office_23-2149456945.jpg", imageAlt: "Premium material quality"},
|
|
{
|
|
id: "4", title: "Affordable Pricing", description: "Premium quality at accessible prices. We believe creating beautiful postcards shouldn't break the bank.", imageSrc: "http://img.b2bpic.net/free-photo/savings-jar-with-mini-shopping-cart_23-2148081042.jpg", imageAlt: "Affordable pricing"},
|
|
]}
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
animationType="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="product" data-section="product">
|
|
<ProductCardTwo
|
|
title="Postcard Collections"
|
|
description="Browse our curated collections of stunning postcard designs for every need"
|
|
tag="Shop Now"
|
|
tagIcon={Gift}
|
|
tagAnimation="slide-up"
|
|
buttons={[{ text: "See All Designs", href: "#" }]}
|
|
buttonAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "1", brand: "The Homefront", name: "Classic Elegance", price: "$4.99", rating: 5,
|
|
reviewCount: "2.3k", imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-flat-autumn-instagram-stories-collection_23-2149096657.jpg", imageAlt: "Classic white postcard"},
|
|
{
|
|
id: "2", brand: "The Homefront", name: "Vibrant Celebration", price: "$5.99", rating: 5,
|
|
reviewCount: "1.8k", imageSrc: "http://img.b2bpic.net/free-vector/abstract-colorful-business-card-template_23-2148331299.jpg", imageAlt: "Colorful postcard design"},
|
|
{
|
|
id: "3", brand: "The Homefront", name: "Premium Luxury", price: "$7.99", rating: 5,
|
|
reviewCount: "980", imageSrc: "http://img.b2bpic.net/free-psd/birthday-celebration-template_23-2151503788.jpg", imageAlt: "Gold foil luxury postcard"},
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
title="Loved by Our Customers"
|
|
description="See what people are saying about their Homefront postcard experiences"
|
|
tag="Customer Stories"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Chen, Marketing Director at CreativeFlow", date: "Date: 15 November 2024", title: "Perfect for our holiday campaign!", quote: "The Homefront made it so easy to create professional postcards for our client outreach. Beautiful designs, quick delivery, and exceptional quality. Our clients were impressed!", tag: "Business Promotion", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-sexy-smiling-handsome-fashion-businessman-model-dressed-elegant-blue-suit-posing-street-background-metrosexual_158538-10421.jpg", avatarAlt: "Sarah Chen", imageSrc: "http://img.b2bpic.net/free-photo/portrait-sexy-smiling-handsome-fashion-businessman-model-dressed-elegant-blue-suit-posing-street-background-metrosexual_158538-10421.jpg"},
|
|
{
|
|
id: "2", name: "Marcus Rodriguez, Event Planner at Celebrations Inc", date: "Date: 10 November 2024", title: "Incredible quality and speed", quote: "I've ordered postcards from several vendors, but The Homefront stands out. The design tool is intuitive, the quality is outstanding, and the turnaround time is amazing. Highly recommended!", tag: "Event Marketing", avatarSrc: "http://img.b2bpic.net/free-photo/smiling-successful-middle-aged-business-leader_1262-5690.jpg", avatarAlt: "Marcus Rodriguez", imageSrc: "http://img.b2bpic.net/free-photo/smiling-successful-middle-aged-business-leader_1262-5690.jpg"},
|
|
{
|
|
id: "3", name: "Jennifer Walsh, Restaurant Owner", date: "Date: 5 November 2024", title: "Our customers love them", quote: "We send personalized thank-you postcards to our regulars using The Homefront. It's a small gesture that makes a big difference. The quality and design options are fantastic!", tag: "Customer Retention", avatarSrc: "http://img.b2bpic.net/free-photo/senior-businessman-walking-outside-modern-office-building_1139-1078.jpg", avatarAlt: "Jennifer Walsh", imageSrc: "http://img.b2bpic.net/free-photo/senior-businessman-walking-outside-modern-office-building_1139-1078.jpg"},
|
|
{
|
|
id: "4", name: "David Thompson, Travel Photographer", date: "Date: 1 November 2024", title: "Turned my photos into art", quote: "As a photographer, I needed a way to share my work. The Homefront lets me create custom postcards from my images. The premium quality does my work justice!", tag: "Creative Expression", avatarSrc: "http://img.b2bpic.net/free-photo/front-view-man-developing-photos_23-2149893918.jpg", avatarAlt: "David Thompson", imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-developing-photos_23-2149893918.jpg"},
|
|
{
|
|
id: "5", name: "Lisa Montgomery, Non-Profit Director", date: "Date: 28 October 2024", title: "Amazing value for nonprofits", quote: "We use The Homefront for donor thank-you cards and event announcements. Affordable pricing combined with premium quality makes it perfect for our budget.", tag: "Organization", avatarSrc: "http://img.b2bpic.net/free-photo/bearded-worker-crossed-arms-office_1139-202.jpg", avatarAlt: "Lisa Montgomery", imageSrc: "http://img.b2bpic.net/free-photo/bearded-worker-crossed-arms-office_1139-202.jpg"},
|
|
{
|
|
id: "6", name: "Robert Kim, Small Business Owner", date: "Date: 22 October 2024", title: "Professional postcards on a budget", quote: "Running a small business means every penny counts. The Homefront delivers professional-quality postcards at prices that work for my bottom line. Five stars!", tag: "Small Business", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-man-black-suit_23-2148401442.jpg", avatarAlt: "Robert Kim", imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-black-suit_23-2148401442.jpg"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
title="Frequently Asked Questions"
|
|
description="Find answers to common questions about designing, ordering, and receiving your postcards"
|
|
tag="Help & Support"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How do I customize my postcard design?", content: "Our intuitive design tool makes it easy. Simply choose a template, upload your images or select from our gallery, customize colors and text, and preview in real-time. No design experience needed!"},
|
|
{
|
|
id: "2", title: "What sizes and materials are available?", content: "We offer standard postcard sizes (4x6) in multiple materials including premium cardstock, matte finish, and glossy finish. Each option delivers beautiful, professional results."},
|
|
{
|
|
id: "3", title: "How long does delivery take?", content: "Standard delivery takes 5-7 business days after order confirmation. We also offer rush options for urgent needs. All orders are carefully packaged to arrive in perfect condition."},
|
|
{
|
|
id: "4", title: "Can I order in bulk?", content: "Absolutely! We offer discounted bulk pricing for orders of 100+. Contact our team for custom bulk quotes and special arrangements for large corporate orders."},
|
|
{
|
|
id: "5", title: "Is there a minimum order quantity?", content: "No minimum! You can order as few as 10 postcards. We believe everyone should be able to create beautiful postcards without large commitments."},
|
|
{
|
|
id: "6", title: "What payment methods do you accept?", content: "We accept all major credit cards, PayPal, and digital payment methods. All transactions are secure and encrypted to protect your information."},
|
|
{
|
|
id: "7", title: "Can I include my own photography?", content: "Yes! Upload your own photos to personalize your postcards. Our tool supports high-resolution images for professional results."},
|
|
{
|
|
id: "8", title: "Do you ship internationally?", content: "We currently ship throughout the United States. For international shipping inquiries, please contact our customer service team for custom arrangements."},
|
|
]}
|
|
faqsAnimation="slide-up"
|
|
animationType="smooth"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactFaq
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How do I get started?", content: "Getting started is simple. Browse our design collections, select a template that speaks to you, customize it with your personal touch, and place your order. You'll receive tracking information and your postcards will arrive ready to send!"},
|
|
{
|
|
id: "2", title: "Can I request a custom design?", content: "Our design tool provides extensive customization options. For unique requirements beyond templates, contact our team at hello@thehomefront.com to discuss custom design services."},
|
|
{
|
|
id: "3", title: "What if I'm not satisfied with my order?", content: "We're confident you'll love your postcards. However, if you're not satisfied, we offer a satisfaction guarantee. Contact us within 14 days of delivery to discuss solutions."},
|
|
]}
|
|
ctaTitle="Ready to Create Something Beautiful?"
|
|
ctaDescription="Have questions or need personalized assistance? Our team is here to help you create the perfect postcards for your needs."
|
|
ctaButton={{ text: "Get In Touch", href: "mailto:hello@thehomefront.com" }}
|
|
ctaIcon={Mail}
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
accordionAnimationType="smooth"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="The Homefront"
|
|
columns={[
|
|
{
|
|
title: "Product", items: [
|
|
{ label: "Browse Designs", href: "#product" },
|
|
{ label: "Custom Orders", href: "#contact" },
|
|
{ label: "Pricing", href: "#product" },
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Our Story", href: "#about" },
|
|
{ label: "Blog", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{ label: "FAQ", href: "#faq" },
|
|
{ label: "Contact Us", href: "#contact" },
|
|
{ label: "Shipping Info", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{ label: "Instagram", href: "#" },
|
|
{ label: "Facebook", href: "#" },
|
|
{ label: "Pinterest", href: "#" },
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2025 The Homefront | Creating Beautiful Moments"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|