228 lines
9.6 KiB
TypeScript
228 lines
9.6 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="small"
|
|
sizing="large"
|
|
background="floatingGradient"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{
|
|
name: "Features", id: "features"},
|
|
{
|
|
name: "Showcase", id: "showcase"},
|
|
{
|
|
name: "Pricing", id: "pricing"},
|
|
{
|
|
name: "Support", id: "faq"},
|
|
]}
|
|
brandName="DesignSuite"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroCentered
|
|
background={{
|
|
variant: "gradient-bars"}}
|
|
title="Unleash Your Creativity"
|
|
description="The all-in-one design suite that empowers creators, designers, and teams to build stunning visuals in minutes."
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/close-up-woman-hugging-her-pet-dog_23-2149202492.jpg", alt: "User 1"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/luxurious-modern-office-space-with-important-reports-laptop-empty-desk-showcasing-important-data_482257-133861.jpg", alt: "User 2"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/young-stylish-sexy-woman-pink-luxury-dress-summer-trend-chic-style-fashion-designer-working-office-computer_285396-2964.jpg", alt: "User 3"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/beautiful-woman-greenhouse-sitting_23-2148509935.jpg", alt: "User 4"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150038907.jpg", alt: "User 5"},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Get Started", href: "#"},
|
|
{
|
|
text: "See Showcase", href: "#showcase"},
|
|
]}
|
|
marqueeItems={[
|
|
{
|
|
type: "text", text: "Vector Graphics"},
|
|
{
|
|
type: "text", text: "UI/UX Prototyping"},
|
|
{
|
|
type: "text", text: "Real-time Collaboration"},
|
|
{
|
|
type: "text", text: "Automated Export"},
|
|
{
|
|
type: "text", text: "Asset Management"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardSix
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
title: "Precision Tools", description: "Achieve pixel-perfect designs with industry-leading vector tools.", imageSrc: "http://img.b2bpic.net/free-photo/zoom-out-right-side_187299-45685.jpg", buttons: [{ text: "Explore Tools", href: "#" }]},
|
|
{
|
|
title: "Asset Management", description: "Boost productivity by organizing and reusing assets in seconds.", imageSrc: "http://img.b2bpic.net/free-photo/pastel-crayons-high-quality-photo_72229-824.jpg", buttons: [{ text: "Manage Assets", href: "#" }]},
|
|
{
|
|
title: "Instant Export", description: "Deliver high-quality assets to any platform with one click.", imageSrc: "http://img.b2bpic.net/free-photo/view-stone-building-with-coarse-plaster-surface_23-2148252829.jpg", buttons: [{ text: "Export Now", href: "#" }]},
|
|
]}
|
|
title="Design Smarter"
|
|
description="Everything you need to produce professional content at scale."
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
useInvertedBackground={false}
|
|
heading={[
|
|
{
|
|
type: "text", content: "Built for "},
|
|
{
|
|
type: "image", src: "http://img.b2bpic.net/free-photo/people-with-cloud-network-storage-symbols_53876-71519.jpg", alt: "Team"},
|
|
{
|
|
type: "text", content: " seamless collaboration."},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardFourteen
|
|
useInvertedBackground={true}
|
|
title="Trusted Globally"
|
|
tag="Milestones"
|
|
metrics={[
|
|
{
|
|
id: "m1", value: "1M+", description: "Active Creators"},
|
|
{
|
|
id: "m2", value: "500M", description: "Designs Created"},
|
|
{
|
|
id: "m3", value: "99.9%", description: "Uptime"},
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="socialProof" data-section="socialProof">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"Microsoft", "Google", "Apple", "Amazon", "Tesla", "Adobe", "Nike"]}
|
|
title="Industry Leaders"
|
|
description="Used by top global teams."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTen
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "1", title: "Amazing Tool", quote: "Changed my workflow entirely.", name: "Sarah", role: "Designer", imageSrc: "http://img.b2bpic.net/free-photo/female-web-designer-taking-notes-office_23-2149749875.jpg"},
|
|
{
|
|
id: "2", title: "Fast & Easy", quote: "The speed is incredible.", name: "Michael", role: "PM", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-senior-woman_23-2149178449.jpg"},
|
|
{
|
|
id: "3", title: "Professional Grade", quote: "Better than legacy tools.", name: "Emily", role: "Creative", imageSrc: "http://img.b2bpic.net/free-photo/young-smiling-woman-with-short-curly-hair-wireless-earphones_574295-3790.jpg"},
|
|
{
|
|
id: "4", title: "Perfect Collaboration", quote: "My team loves this suite.", name: "David", role: "Director", imageSrc: "http://img.b2bpic.net/free-photo/professional-editor-using-retouching-software-photos-design-studio-with-photography-equipment-technology-media-artist-editing-pictures-with-computer-touch-screen-monitor_482257-34109.jpg"},
|
|
{
|
|
id: "5", title: "Game Changer", quote: "Essential for my daily work.", name: "Lucy", role: "Artist", imageSrc: "http://img.b2bpic.net/free-photo/smiley-tattoo-artist-indoors-side-view_23-2149445974.jpg"},
|
|
]}
|
|
title="Loved by Creators"
|
|
description="What our users say."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "q1", title: "Is it free?", content: "Yes, we offer a free tier that includes all core design tools and export features at no cost."},
|
|
{
|
|
id: "q2", title: "Any team plans?", content: "Yes, our team plans allow real-time collaboration. See our pricing page for details."},
|
|
{
|
|
id: "q3", title: "Can I export PDFs?", content: "Yes, high-resolution PDF exports are included in all subscription tiers."},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/faqs-customer-service-icon-concept_53876-132149.jpg"
|
|
mediaAnimation="slide-up"
|
|
title="Have Questions?"
|
|
description="Find answers to your queries."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
useInvertedBackground={true}
|
|
background={{
|
|
variant: "sparkles-gradient"}}
|
|
tag="Ready to Start?"
|
|
title="Let's Create Something Great"
|
|
description="Start designing your masterpiece today."
|
|
buttons={[
|
|
{
|
|
text: "Get Started Now", href: "#"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Product", items: [
|
|
{
|
|
label: "Features", href: "#"},
|
|
{
|
|
label: "Pricing", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{
|
|
label: "Help Center", href: "#"},
|
|
{
|
|
label: "Contact", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
bottomLeftText="© 2024 DesignSuite Inc."
|
|
bottomRightText="Privacy Policy"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |