376 lines
16 KiB
TypeScript
376 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
|
import HeroCarouselLogo from "@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo";
|
|
import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
|
|
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
|
|
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
|
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
|
|
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
|
|
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
|
|
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
|
import FooterBase from "@/components/sections/footer/FooterBase";
|
|
import { Award, Sparkles, Zap, Shield, CheckCircle, Star } from "lucide-react";
|
|
|
|
export default function HomePage() {
|
|
const navItems = [
|
|
{ name: "Home", id: "home" },
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Contact", id: "contact" },
|
|
];
|
|
|
|
const footerColumns = [
|
|
{
|
|
title: "Product",
|
|
items: [
|
|
{ label: "Features", href: "/#features" },
|
|
{ label: "Pricing", href: "/pricing" },
|
|
{ label: "Security", href: "#" },
|
|
{ label: "Roadmap", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Company",
|
|
items: [
|
|
{ label: "About", href: "/about" },
|
|
{ label: "Blog", href: "#" },
|
|
{ label: "Careers", href: "#" },
|
|
{ label: "Press", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Resources",
|
|
items: [
|
|
{ label: "Documentation", href: "#" },
|
|
{ label: "Community", href: "#" },
|
|
{ label: "Contact", href: "/contact" },
|
|
{ label: "Support", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Legal",
|
|
items: [
|
|
{ label: "Privacy", href: "#" },
|
|
{ label: "Terms", href: "#" },
|
|
{ label: "Cookies", href: "#" },
|
|
{ label: "License", href: "#" },
|
|
],
|
|
},
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="blurBottom"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={navItems}
|
|
brandName="Beautipatler"
|
|
bottomLeftText="Modern & Dynamic"
|
|
bottomRightText="hello@beautipatler.com"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero-home" data-section="hero-home" className="min-h-screen flex items-center justify-center">
|
|
<HeroCarouselLogo
|
|
logoText="Beautipatler"
|
|
description="Experience stunning visual patterns with modern engagement. Create beautiful digital experiences that captivate and inspire your audience."
|
|
buttons={[
|
|
{ text: "Get Started", href: "/contact" },
|
|
{ text: "Learn More", href: "/about" },
|
|
]}
|
|
slides={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-vector/flat-mosaic-pattern-design_23-2149032145.jpg",
|
|
imageAlt: "Modern colorful geometric patterns",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-vector/elegant-mandala_1048-11795.jpg",
|
|
imageAlt: "Elegant burgundy luxury pattern design",
|
|
},
|
|
]}
|
|
autoplayDelay={4000}
|
|
showDimOverlay={true}
|
|
ariaLabel="Hero section with carousel"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about-home" data-section="about-home" className="mx-auto px-4 md:px-6 py-20 lg:py-32">
|
|
<TestimonialAboutCard
|
|
tag="Our Story"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
title="Crafting Beautiful Experiences"
|
|
description="We believe in the power of beautiful design. Our team of creative professionals is dedicated to transforming ideas into stunning visual realities that engage and inspire."
|
|
subdescription="Since 2020, we've been delivering innovative design solutions that help brands stand out in a crowded digital landscape."
|
|
icon={Sparkles}
|
|
imageSrc="http://img.b2bpic.net/free-photo/tech-people-trying-achieve-ambitious-sustainability-goals_23-2150950192.jpg?_wi=1"
|
|
imageAlt="Team collaboration creative workspace modern"
|
|
mediaAnimation="blur-reveal"
|
|
useInvertedBackground={false}
|
|
ariaLabel="About section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features-home" data-section="features-home" className="py-20 lg:py-32 mx-auto px-4 md:px-6">
|
|
<FeatureCardOne
|
|
tag="Capabilities"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
title="Powerful Features for Modern Designers"
|
|
description="Unlock your creative potential with our comprehensive suite of design tools and capabilities."
|
|
features={[
|
|
{
|
|
title: "Seamless Integration",
|
|
description: "Integrate with your favorite design tools and workflows. Connect your entire creative ecosystem effortlessly.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/photovoltaics-factory-expert-designs-production-lines-cad-app-using-tablet_482257-124379.jpg?_wi=1",
|
|
imageAlt: "User experience interface design modern",
|
|
},
|
|
{
|
|
title: "Advanced Analytics",
|
|
description: "Track engagement metrics and performance insights in real time. Make data-driven design decisions.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/senior-people-school-class-with-laptop-computer_23-2150105003.jpg?_wi=1",
|
|
imageAlt: "Data analytics dashboard visualization",
|
|
},
|
|
{
|
|
title: "Enterprise Security",
|
|
description: "Bank-grade security and encryption protect your creative assets. Your data is always safe and secure.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/concept-family-virus-protection_493343-30172.jpg?_wi=1",
|
|
imageAlt: "Security protection digital safety cyber",
|
|
},
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
buttons={[{ text: "Explore Features", href: "/about" }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof-home" data-section="social-proof-home" className="mx-auto px-4 md:px-6 py-20 lg:py-32">
|
|
<SocialProofOne
|
|
names={["TechVision", "CreativeHub", "DesignPro", "InnovateLabs", "FutureScale", "PixelForce", "BrandWorks"]}
|
|
logos={[
|
|
"http://img.b2bpic.net/free-vector/abstract-logos-collection_1025-889.jpg",
|
|
"http://img.b2bpic.net/free-vector/elegant-business-card-blue-white-business-card_1435-1926.jpg",
|
|
"http://img.b2bpic.net/free-vector/flat-design-go-logo-template_23-2148975885.jpg",
|
|
"http://img.b2bpic.net/free-vector/vintage-photo-logo-collecti_23-2147646105.jpg",
|
|
"http://img.b2bpic.net/free-vector/creative-gradient-o-logo-collection_52683-58692.jpg",
|
|
"http://img.b2bpic.net/free-vector/gradient-logo-template-with-abstract-shape_52683-14479.jpg",
|
|
"http://img.b2bpic.net/free-vector/flat-design-consultancy-logo-template_23-2150106124.jpg",
|
|
]}
|
|
title="Trusted by Leading Brands"
|
|
description="Hundreds of companies worldwide trust Beautipatler to deliver beautiful, engaging design experiences."
|
|
tag="Partners"
|
|
tagIcon={Shield}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
speed={50}
|
|
showCard={true}
|
|
ariaLabel="Social proof section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics-home" data-section="metrics-home" className="py-20 lg:py-32 mx-auto px-4 md:px-6">
|
|
<MetricCardSeven
|
|
tag="Impact"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
title="Proven Results & Performance"
|
|
description="Our designs deliver measurable results. See how we've transformed businesses across industries."
|
|
metrics={[
|
|
{
|
|
id: "clients",
|
|
value: "500+",
|
|
title: "Global Clients",
|
|
items: ["Served across 50+ countries", "Trusted partnerships spanning 5+ years"],
|
|
},
|
|
{
|
|
id: "engagement",
|
|
value: "300%",
|
|
title: "Average Engagement Increase",
|
|
items: ["User interaction boost", "Conversion rate improvement"],
|
|
},
|
|
{
|
|
id: "satisfaction",
|
|
value: "98%",
|
|
title: "Client Satisfaction Rate",
|
|
items: ["Industry-leading standards", "Continuous improvement commitment"],
|
|
},
|
|
{
|
|
id: "projects",
|
|
value: "2000+",
|
|
title: "Projects Completed",
|
|
items: ["Successfully delivered on time", "High-quality creative outputs"],
|
|
},
|
|
]}
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
ariaLabel="Metrics section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials-home" data-section="testimonials-home" className="mx-auto px-4 md:px-6 py-20 lg:py-32">
|
|
<TestimonialCardFive
|
|
title="What Clients Say"
|
|
description="Real feedback from real clients who've transformed their brands with Beautipatler."
|
|
tag="Testimonials"
|
|
tagIcon={CheckCircle}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "testimonial-1",
|
|
name: "Sarah Chen",
|
|
date: "March 2024",
|
|
title: "Creative Director",
|
|
quote: "Beautipatler transformed how we approach design. The platform is intuitive, powerful, and delivers stunning results every single time.",
|
|
tag: "Design Excellence",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/business-woman-posing-street_23-2148213514.jpg",
|
|
avatarAlt: "Sarah Chen profile",
|
|
},
|
|
{
|
|
id: "testimonial-2",
|
|
name: "Marcus Johnson",
|
|
date: "February 2024",
|
|
title: "Founder & CEO",
|
|
quote: "The engagement metrics speak for themselves. Our conversion rates increased by 320% after implementing Beautipatler's designs.",
|
|
tag: "Growth Driven",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/close-up-positive-businesswoman_1098-3531.jpg",
|
|
avatarAlt: "Marcus Johnson profile",
|
|
},
|
|
{
|
|
id: "testimonial-3",
|
|
name: "Elena Rodriguez",
|
|
date: "January 2024",
|
|
title: "Brand Manager",
|
|
quote: "Working with Beautipatler was seamless. Their team understood our vision and brought it to life beautifully.",
|
|
tag: "Team Collaboration",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
|
|
avatarAlt: "Elena Rodriguez profile",
|
|
},
|
|
{
|
|
id: "testimonial-4",
|
|
name: "David Kim",
|
|
date: "December 2023",
|
|
title: "Product Manager",
|
|
quote: "The attention to detail is remarkable. Every pixel, every animation, every interaction is thoughtfully crafted.",
|
|
tag: "Quality Focus",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/friendly-handsome-business-leader-cafe_1262-3537.jpg",
|
|
avatarAlt: "David Kim profile",
|
|
},
|
|
{
|
|
id: "testimonial-5",
|
|
name: "Lisa Anderson",
|
|
date: "November 2023",
|
|
title: "Marketing Director",
|
|
quote: "Beautipatler doesn't just deliver designs—they deliver experiences. Our brand has never looked better.",
|
|
tag: "Brand Transformation",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/executive-with-glasses-suit_1098-529.jpg",
|
|
avatarAlt: "Lisa Anderson profile",
|
|
},
|
|
{
|
|
id: "testimonial-6",
|
|
name: "James Wright",
|
|
date: "October 2023",
|
|
title: "Tech Lead",
|
|
quote: "The technical implementation is flawless. Great design meets perfect execution with Beautipatler.",
|
|
tag: "Technical Excellence",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
|
|
avatarAlt: "James Wright profile",
|
|
},
|
|
]}
|
|
ariaLabel="Testimonials section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq-home" data-section="faq-home" className="mx-auto px-4 md:px-6 py-20 lg:py-32">
|
|
<FaqSplitText
|
|
sideTitle="Frequently Asked Questions"
|
|
sideDescription="Find answers to common questions about our design platform, features, and services."
|
|
textPosition="left"
|
|
useInvertedBackground={true}
|
|
showCard={true}
|
|
animationType="smooth"
|
|
faqsAnimation="slide-up"
|
|
faqs={[
|
|
{
|
|
id: "faq-1",
|
|
title: "What makes Beautipatler different?",
|
|
content: "Beautipatler combines stunning visual aesthetics with powerful engagement features. We focus on creating beautiful experiences that drive real business results, not just pretty designs.",
|
|
},
|
|
{
|
|
id: "faq-2",
|
|
title: "How long does a typical project take?",
|
|
content: "Project timelines vary based on scope and complexity. Most projects are completed within 4-8 weeks, with regular progress updates and client collaboration throughout.",
|
|
},
|
|
{
|
|
id: "faq-3",
|
|
title: "Do you offer ongoing support?",
|
|
content: "Yes! We provide comprehensive post-launch support including maintenance, updates, and performance monitoring to ensure your platform continues to perform beautifully.",
|
|
},
|
|
{
|
|
id: "faq-4",
|
|
title: "Can you work with existing systems?",
|
|
content: "Absolutely. Our designs integrate seamlessly with your existing infrastructure. We specialize in connecting beautiful design with practical technical implementation.",
|
|
},
|
|
{
|
|
id: "faq-5",
|
|
title: "What's your design process?",
|
|
content: "We follow a collaborative approach: discovery, strategy, design, refinement, and implementation. Your feedback shapes every stage of the process.",
|
|
},
|
|
{
|
|
id: "faq-6",
|
|
title: "How do you measure success?",
|
|
content: "We track key metrics including user engagement, conversion rates, time on page, and client satisfaction. We focus on delivering measurable business impact.",
|
|
},
|
|
]}
|
|
ariaLabel="FAQ section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact-home" data-section="contact-home" className="mx-auto px-4 md:px-6 py-20 lg:py-32">
|
|
<ContactCTA
|
|
tag="Ready to Begin?"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
title="Let's Create Something Beautiful Together"
|
|
description="Transform your vision into a stunning digital experience. Get in touch with our team to start your journey."
|
|
buttons={[
|
|
{ text: "Schedule a Consultation", href: "mailto:hello@beautipatler.com" },
|
|
{ text: "View Our Work", href: "/about" },
|
|
]}
|
|
background={{ variant: "gradient-bars" }}
|
|
useInvertedBackground={false}
|
|
ariaLabel="Contact call to action section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer-home" data-section="footer-home">
|
|
<FooterBase
|
|
logoText="Beautipatler"
|
|
copyrightText="© 2024 Beautipatler. All rights reserved."
|
|
columns={footerColumns}
|
|
ariaLabel="Site footer"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |