232 lines
13 KiB
TypeScript
232 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import { Zap, Shield, Star, Award, Layout } from "lucide-react";
|
|
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumLarge"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="none"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{ name: "Explore", id: "features" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Blog", id: "blog" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
brandName="TemplateVault"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardGallery
|
|
background={{
|
|
variant: "sparkles-gradient"}}
|
|
title="Download premium design templates instantly"
|
|
description="Unlock your creative potential with thousands of high-quality templates for web, social media, branding, and more. Join TemplateVault today."
|
|
buttons={[
|
|
{ text: "Get Started", href: "#" },
|
|
{ text: "Browse All", href: "#features" },
|
|
]}
|
|
mediaItems={[
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/desktop-pc-wooden-desk-showcases-infographics-client-reach-data_482257-126876.jpg", imageAlt: "Dashboard view" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/still-life-office-desk-mess_23-2150164797.jpg", imageAlt: "Workspace view" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-nutritional-counter-app_23-2149880604.jpg", imageAlt: "Mobile UI view" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/purchasing-shop-buying-selling-teade_53876-134043.jpg", imageAlt: "Dashboard view 2" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-top-view-office-table-desk-workspace-background_1150-6664.jpg", imageAlt: "Workspace view 2" },
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentySix
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Social Media", description: "High-conversion post templates for Instagram, LinkedIn, and Twitter.", imageSrc: "http://img.b2bpic.net/free-photo/cinema-3d-glasses_23-2148115289.jpg", buttonIcon: Zap,
|
|
},
|
|
{
|
|
title: "Business Branding", description: "Professional logo and business card designs to elevate your identity.", imageSrc: "http://img.b2bpic.net/free-photo/blank-cardboard-business-cards_23-2147687449.jpg", buttonIcon: Shield,
|
|
},
|
|
{
|
|
title: "Logo Design", description: "Customizable vector logos for all industries and needs.", imageSrc: "http://img.b2bpic.net/free-photo/female-logo-designer-working-her-tablet-connected-laptop_23-2149119204.jpg", buttonIcon: Star,
|
|
},
|
|
{
|
|
title: "Resume Builder", description: "Modern, sleek, and ATS-friendly templates to land your dream job.", imageSrc: "http://img.b2bpic.net/free-vector/user-persona-infographic-template-design_742173-14931.jpg", buttonIcon: Award,
|
|
},
|
|
{
|
|
title: "UI Kit Elements", description: "High-fidelity components for your next SaaS dashboard project.", imageSrc: "http://img.b2bpic.net/free-photo/colorful-3d-shapes-vaporwave-style_23-2148981127.jpg", buttonIcon: Layout,
|
|
},
|
|
]}
|
|
title="Explore Our Categories"
|
|
description="Whether you're building a brand, a website, or a social feed, we have the perfect template."
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{ id: "p1", name: "Minimalist UI Kit", price: "Free", variant: "Figma", imageSrc: "http://img.b2bpic.net/free-photo/financial-broker-analyzing-stock-trade-market-computer-using-exchange-hedge-fund-statistics-create-investment-profit-entrepreneur-working-with-forex-real-time-sales-trend-handheld-shot_482257-40951.jpg" },
|
|
{ id: "p2", name: "Elegant Business Card", price: "Free", variant: "PSD", imageSrc: "http://img.b2bpic.net/free-photo/high-view-office-items-business-cards_23-2148500499.jpg" },
|
|
{ id: "p3", name: "Modern Social Kit", price: "Free", variant: "Canva", imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169844.jpg" },
|
|
{ id: "p4", name: "Executive Resume", price: "Free", variant: "PDF", imageSrc: "http://img.b2bpic.net/free-vector/professional-modern-cv-resume_1435-2258.jpg" },
|
|
{ id: "p5", name: "Startup Logo Set", price: "Free", variant: "AI/EPS", imageSrc: "http://img.b2bpic.net/free-photo/elegant-white-stationery-business-visiting-cards_23-2148500533.jpg" },
|
|
]}
|
|
title="Trending Templates"
|
|
description="The most downloaded designs of the week."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardNine
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{
|
|
id: "free", title: "Free Tier", price: "$0", period: "/ forever", features: ["5 Free Downloads", "Community Access", "Standard Support"],
|
|
button: { text: "Start Free" },
|
|
imageSrc: "http://img.b2bpic.net/free-vector/flat-design-fitness-app-template_23-2151084918.jpg", imageAlt: "mobile ui interface showcase"},
|
|
{
|
|
id: "pro", title: "Pro Plan", price: "$29", period: "/ mo", features: ["Unlimited Downloads", "Premium Templates", "Priority Support", "Source Files Included"],
|
|
button: { text: "Get Pro" },
|
|
imageSrc: "http://img.b2bpic.net/free-photo/desktop-pc-wooden-desk-showcases-infographics-client-reach-data_482257-126876.jpg", imageAlt: "mobile ui interface showcase"},
|
|
{
|
|
id: "lifetime", title: "Lifetime Access", price: "$199", period: "/ one-time", features: ["Everything in Pro", "Lifetime Updates", "Exclusive Assets", "Early Access"],
|
|
button: { text: "Get Lifetime" },
|
|
imageSrc: "http://img.b2bpic.net/free-photo/still-life-office-desk-mess_23-2150164797.jpg", imageAlt: "mobile ui interface showcase"},
|
|
]}
|
|
title="Membership Plans"
|
|
description="Get unlimited access or buy a single template."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
useInvertedBackground={true}
|
|
testimonial="TemplateVault has revolutionized my workflow. I can find high-quality templates in minutes instead of spending hours on design. Absolutely essential for creative professionals."
|
|
rating={5}
|
|
author="Sarah Jenkins, Creative Art Director"
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-photo/beautiful-woman-with-trendy-hairstyle_23-2149405998.jpg", alt: "Sarah J" },
|
|
{ src: "http://img.b2bpic.net/free-photo/upbeat-it-expert-pleased-after-increasing-data-security-using-laptop_482257-116333.jpg", alt: "Mike D" },
|
|
{ src: "http://img.b2bpic.net/free-photo/portrait-smiling-charismatic-young-woman-content-creator-records-video-digital-camera-laughing_1258-254299.jpg", alt: "Emily K" },
|
|
{ src: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1674.jpg", alt: "David B" },
|
|
{ src: "http://img.b2bpic.net/free-photo/smiling-woman-black-blazer-portrait_23-2152009548.jpg", alt: "Jessica L" },
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{ id: "q1", title: "How does the free download system work?", content: "You get 5 free downloads immediately after signing up. After that, you can upgrade to a premium plan." },
|
|
{ id: "q2", title: "What payment methods do you accept?", content: "We support Stripe, PayPal, and Razorpay for seamless and secure transactions." },
|
|
{ id: "q3", title: "Can I request custom templates?", content: "Yes! Our Pro members can submit custom design requests via our community portal." },
|
|
{ id: "q4", title: "Are files commercial-use ready?", content: "Yes, all premium templates come with a standard commercial license." },
|
|
{ id: "q5", title: "Can I get a refund?", content: "We offer a 30-day money-back guarantee for all our yearly subscribers." },
|
|
]}
|
|
title="Frequently Asked Questions"
|
|
description="Have questions? We have answers."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="blog" data-section="blog">
|
|
<BlogCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
title="Design Insights"
|
|
description="Get tips, tricks, and the latest design trends."
|
|
blogs={[
|
|
{
|
|
id: "b1", category: "Trends", title: "Top Design Trends of 2024", excerpt: "What to expect in the design world this year.", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-notepad-lamp-workplace-night_169016-17381.jpg", authorName: "Jane Doe", authorAvatar: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-blue-jacket_23-2149020770.jpg", date: "Oct 1, 2024"},
|
|
{
|
|
id: "b2", category: "Tutorials", title: "How to Customize Your First Template", excerpt: "A step-by-step guide for beginners.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-drawing-ipad_23-2150040121.jpg", authorName: "John Smith", authorAvatar: "http://img.b2bpic.net/free-photo/pensive-young-handsome-man-working-laptop_1262-3582.jpg", date: "Oct 5, 2024"},
|
|
{
|
|
id: "b3", category: "Branding", title: "Why Branding Matters for Startups", excerpt: "Building a consistent visual identity from day one.", imageSrc: "http://img.b2bpic.net/free-photo/female-web-designer-office-with-notebook_23-2149749858.jpg", authorName: "Jane Doe", authorAvatar: "http://img.b2bpic.net/free-photo/happy-smiling-youth-asian-transgender-lgbt-looking-camera-while-posing_74952-3151.jpg", date: "Oct 10, 2024"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
useInvertedBackground={false}
|
|
background={{ variant: "gradient-bars" }}
|
|
tag="Stay Updated"
|
|
title="Join Our Newsletter"
|
|
description="Receive daily design inspiration and exclusive template offers directly in your inbox."
|
|
imageSrc="http://img.b2bpic.net/free-photo/3d-abstract-background-with-flowing-hexagonal-grid-design_1048-11285.jpg"
|
|
inputPlaceholder="Enter your email address"
|
|
buttonText="Subscribe"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
logoText="TemplateVault"
|
|
columns={[
|
|
{
|
|
title: "Marketplace", items: [
|
|
{ label: "Social Media", href: "#" },
|
|
{ label: "Business Cards", href: "#" },
|
|
{ label: "UI Kits", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#" },
|
|
{ label: "Careers", href: "#" },
|
|
{ label: "Affiliate", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2024 TemplateVault Inc. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|