230 lines
13 KiB
TypeScript
230 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import { Instagram, Facebook, Twitter } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="mediumSmall"
|
|
sizing="largeSizeMediumTitles"
|
|
background="circleGradient"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
brandName="Puff"
|
|
navItems={[
|
|
{ name: "Gallery", id: "products" },
|
|
{ name: "Features", id: "features" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Reviews", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Create Poster", href: "contact" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardScroll
|
|
tag="Personalized Pet Art"
|
|
tagAnimation="slide-up"
|
|
title="Transform Your Pet Into a Stunning Poster"
|
|
description="Create a one-of-a-kind personalized poster featuring your beloved pet. Upload a photo, customize the style, and get a gallery-worthy print delivered to your door."
|
|
background={{ variant: "plain" }}
|
|
imageSrc="http://img.b2bpic.net/free-vector/valentine-s-day-background-with-cats_23-2147729975.jpg"
|
|
imageAlt="Personalized pet posters showcase"
|
|
buttons={[
|
|
{ text: "Start Creating", href: "contact" },
|
|
{ text: "View Examples", href: "products" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
heading={[
|
|
{ type: "text", content: "We believe every pet deserves to be" },
|
|
{ type: "text", content: "celebrated" },
|
|
{ type: "text", content: "in art form. Our mission is to help pet lovers capture their favorite memories and turn them into beautiful, customizable posters that bring joy to any room." }
|
|
]}
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "Learn More", href: "#features" }]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardFour
|
|
title="Featured Pet Posters"
|
|
description="Explore our gallery of custom pet posters created by pet lovers like you."
|
|
tag="Gallery"
|
|
tagAnimation="slide-up"
|
|
products={[
|
|
{
|
|
id: "1", name: "Golden Retriever Portrait", price: "From $49", variant: "Premium Poster", imageSrc: "http://img.b2bpic.net/free-vector/life-with-dog-is-better-lettering_1191-871.jpg", imageAlt: "Golden retriever custom poster"
|
|
},
|
|
{
|
|
id: "2", name: "Elegant Cat Portrait", price: "From $49", variant: "Premium Poster", imageSrc: "http://img.b2bpic.net/free-psd/lost-pet-invitation-template_23-2151176501.jpg", imageAlt: "Cat custom poster"
|
|
},
|
|
{
|
|
id: "3", name: "Playful Rabbit Art", price: "From $49", variant: "Premium Poster", imageSrc: "http://img.b2bpic.net/free-vector/cute-hand-drawn-gift-tag-instagram-post-template_23-2149378753.jpg", imageAlt: "Rabbit custom poster"
|
|
},
|
|
{
|
|
id: "4", name: "Colorful Bird Portrait", price: "From $49", variant: "Premium Poster", imageSrc: "http://img.b2bpic.net/free-vector/flat-design-christmas-landing-page_52683-27598.jpg", imageAlt: "Bird custom poster"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "Create Your Poster", href: "contact" }]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyOne
|
|
tag="How It Works"
|
|
tagAnimation="slide-up"
|
|
title="Your Pet, Your Style"
|
|
description="Creating a personalized pet poster with Puff is simple and fun. Follow these easy steps to design the perfect tribute to your furry, feathered, or fuzzy friend."
|
|
imageSrc="http://img.b2bpic.net/free-vector/infographics-with-light-bulb_23-2147790212.jpg"
|
|
imageAlt="Design process visualization"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="left"
|
|
accordionItems={[
|
|
{
|
|
id: "1", title: "Upload Your Photo", content: "Start by uploading a clear, high-quality photo of your pet. Our tool supports JPG, PNG, and WEBP formats. The better the photo, the more stunning your poster will be!"
|
|
},
|
|
{
|
|
id: "2", title: "Choose Your Style", content: "Select from multiple artistic styles including watercolor, pop art, minimalist line art, vintage illustration, and modern geometric designs. Each style brings out different personality traits of your pet."
|
|
},
|
|
{
|
|
id: "3", title: "Customize Details", content: "Add your pet's name, choose colors, adjust compositions, and personalize text. You have complete control over the final look. Preview your poster in real-time before ordering."
|
|
},
|
|
{
|
|
id: "4", title: "Order & Enjoy", content: "Select your poster size (A4, A3, or A2) and paper type (matte, gloss, or canvas). We'll print and ship your beautiful poster within 5-7 business days. Transform your home today!"
|
|
}
|
|
]}
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "Start Now", href: "contact" }]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="Loved by Pet Owners Everywhere"
|
|
description="Join thousands of happy customers who have transformed their pet photos into beautiful, lasting memories."
|
|
tag="Trusted Brand"
|
|
tagAnimation="slide-up"
|
|
names={[
|
|
"PetLover Homes", "Happy Pet Parents", "Furry Friends Family", "Pet Portrait Studio", "Pawsitive Art Gallery", "Pet Memory Makers", "Custom Pet Art Co"
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
showCard={true}
|
|
speed={40}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
testimonial="I absolutely love my custom pet poster! The quality is incredible, and the attention to detail captured my dog's personality perfectly. It's now the centerpiece of my living room, and I get compliments from everyone who visits."
|
|
rating={5}
|
|
author="Sarah Chen, Pet Parent"
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg", alt: "Sarah Chen" },
|
|
{ src: "http://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg", alt: "Michael Rodriguez" },
|
|
{ src: "http://img.b2bpic.net/free-photo/close-up-portrait-smiling-african-man-looking_171337-9852.jpg", alt: "Emma Williams" },
|
|
{ src: "http://img.b2bpic.net/free-photo/portrait-smiling-businessman-diplomatic-suit-looking-camera-standing-outside-front-startup-company-office-entrepreneur-man-working-marketing-presentation-outdoor-concept_482257-28140.jpg", alt: "David Thompson" }
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
title="Frequently Asked Questions"
|
|
description="Find answers to common questions about our personalized pet poster service."
|
|
tag="Help"
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqsAnimation="slide-up"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How long does it take to receive my poster?", content: "Once you place your order, we typically process and print your poster within 3-5 business days. Standard shipping takes an additional 2-3 business days. You can track your order in real-time from our dashboard."
|
|
},
|
|
{
|
|
id: "2", title: "What photo quality do I need?", content: "We recommend using a high-resolution photo (at least 1200x1200 pixels) for the best results. Clear, well-lit photos without blur work best. Our design team can also enhance lower-resolution photos upon request."
|
|
},
|
|
{
|
|
id: "3", title: "Can I request revisions to my design?", content: "Absolutely! We include up to two free revision rounds with every order. If you'd like additional changes, we offer affordable revision packages. Our goal is your complete satisfaction."
|
|
},
|
|
{
|
|
id: "4", title: "What sizes are available?", content: "We offer three standard sizes: A4 (8.3\" x 11.7\"), A3 (11.7\" x 16.5\"), and A2 (16.5\" x 23.4\"). Custom sizes are available upon request. All posters come with your choice of matte, gloss, or premium canvas finish."
|
|
},
|
|
{
|
|
id: "5", title: "Do you offer corporate or bulk orders?", content: "Yes! We work with pet-related businesses and organizations for bulk orders. Contact our corporate team at orders@puff.com for custom pricing and fast turnaround times."
|
|
},
|
|
{
|
|
id: "6", title: "What's your refund policy?", content: "We offer a 100% satisfaction guarantee. If you're not happy with your poster, we'll either reprint it free of charge or provide a full refund. No questions asked within 30 days of delivery."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
tag="Get Started"
|
|
tagAnimation="slide-up"
|
|
title="Ready to Celebrate Your Pet?"
|
|
description="Join thousands of pet lovers who have transformed their favorite photos into beautiful, personalized posters. Start your design journey today and create a lasting memory."
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/lifestyle-blogger-records-video-her-room-has-camera-coffee-table-shows-eyeshadow-palette_1258-255040.jpg"
|
|
imageAlt="Pet poster creation workspace"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Get Started"
|
|
termsText="We respect your privacy. Unsubscribe anytime. By signing up, you'll get exclusive tips on pet portraiture and special discounts on your first order."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="Puff"
|
|
copyrightText="© 2025 Puff. Personalized Pet Posters. All rights reserved."
|
|
socialLinks={[
|
|
{ icon: Instagram, href: "https://instagram.com/puffpetposters", ariaLabel: "Instagram" },
|
|
{ icon: Facebook, href: "https://facebook.com/puffpetposters", ariaLabel: "Facebook" },
|
|
{ icon: Twitter, href: "https://twitter.com/puffpets", ariaLabel: "Twitter" }
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|