172 lines
9.2 KiB
TypeScript
172 lines
9.2 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import HeroBillboardSplit from '@/components/sections/hero/HeroBillboardSplit';
|
|
import TagAbout from '@/components/sections/about/TagAbout';
|
|
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
|
import ContactInline from '@/components/sections/contact/ContactInline';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import { CheckCircle, Star, Users, Award, Sparkles, Zap, TrendingUp, MessageSquare } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="mediumSmall"
|
|
sizing="large"
|
|
background="floatingGradient"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="outline"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="Artisan"
|
|
navItems={[
|
|
{ name: "Features", id: "features" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Metrics", id: "metrics" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardSplit
|
|
title="Build remarkable digital experiences"
|
|
description="Create stunning interfaces and seamless user journeys with our comprehensive design and development platform. From concept to launch, we've got you covered."
|
|
tag="Innovation Leaders"
|
|
tagIcon={Sparkles}
|
|
buttons={[
|
|
{ text: "Get Started", href: "contact" },
|
|
{ text: "Learn More", href: "features" }
|
|
]}
|
|
imageSrc="https://img.b2bpic.net/free-vector/dashboard-interface-user-panel-template_52683-23323.jpg"
|
|
imageAlt="Digital dashboard interface"
|
|
frameStyle="browser"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TagAbout
|
|
tag="Our Mission"
|
|
description="We empower creative teams to transform their vision into reality. Through elegant design systems and powerful development tools, we make the extraordinary achievable for every project."
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardSeven
|
|
title="How We Work"
|
|
description="Our proven three-step process ensures every project delivers exceptional results from start to finish."
|
|
tag="Process"
|
|
tagIcon={Zap}
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Strategic Design", description: "We begin with deep discovery and research to understand your goals, audience, and competitive landscape. Our design team creates thoughtful, user-centered solutions.", imageSrc: "https://img.b2bpic.net/free-vector/creative-process-design_1025-874.jpg", imageAlt: "Design process illustration"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Expert Development", description: "Our developers bring designs to life with clean, scalable code and modern technologies. We prioritize performance, accessibility, and maintainability.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767713791452-25ctky6u.jpg", imageAlt: "Development workflow illustration"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Successful Launch", description: "We don't just hand off—we support your launch and beyond. Comprehensive testing, optimization, and ongoing guidance ensure your success.", imageSrc: "https://img.b2bpic.net/free-vector/start-up-concept-with-rocket_23-2147787744.jpg", imageAlt: "Launch and growth illustration"
|
|
}
|
|
]}
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
buttons={[
|
|
{ text: "View Case Studies", href: "https://example.com" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardOne
|
|
title="Our Impact"
|
|
description="Proven results that speak for themselves across our diverse client portfolio."
|
|
tag="Statistics"
|
|
tagIcon={TrendingUp}
|
|
metrics={[
|
|
{
|
|
id: "1", value: "200+", title: "Projects", description: "Successfully delivered across industries", icon: CheckCircle
|
|
},
|
|
{
|
|
id: "2", value: "95%", title: "Satisfaction", description: "Client happiness and retention rate", icon: Star
|
|
},
|
|
{
|
|
id: "3", value: "50M+", title: "Users", description: "Reached through our digital solutions", icon: Users
|
|
},
|
|
{
|
|
id: "4", value: "8y", title: "Experience", description: "Industry expertise and proven track record", icon: Award
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
gridVariant="uniform-all-items-equal"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSix
|
|
title="What Our Clients Say"
|
|
description="Hear from the teams who've transformed their products with our platform."
|
|
tag="Testimonials"
|
|
tagIcon={MessageSquare}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Mitchell", handle: "@sarahm_design", testimonial: "Artisan completely transformed how our team approaches design and development. The results exceeded our expectations.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707511590-ys5q268i.jpg", imageAlt: "Sarah Mitchell"
|
|
},
|
|
{
|
|
id: "2", name: "James Chen", handle: "@jchen_tech", testimonial: "The level of detail and craftsmanship in every aspect is remarkable. Our product launch was seamless.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767713793861-v9wv8o77.jpg", imageAlt: "James Chen"
|
|
},
|
|
{
|
|
id: "3", name: "Elena Rodriguez", handle: "@erodriguez_pm", testimonial: "Working with Artisan was enlightening. They understood our vision and delivered beyond our initial brief.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767713795392-fc9nb25p.jpg", imageAlt: "Elena Rodriguez"
|
|
},
|
|
{
|
|
id: "4", name: "Marcus Thompson", handle: "@mthompson_ceo", testimonial: "Outstanding partnership from start to finish. Our user engagement increased by 150% post-launch.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707518288-rwqzte6l.jpg", imageAlt: "Marcus Thompson"
|
|
},
|
|
{
|
|
id: "5", name: "Lisa Wang", handle: "@lisawang_ux", testimonial: "The attention to user experience detail is exceptional. Every interaction feels intentional and delightful.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767713796793-ixk0h12o.jpg", imageAlt: "Lisa Wang"
|
|
},
|
|
{
|
|
id: "6", name: "David Kumar", handle: "@dkumar_founder", testimonial: "Artisan elevated our brand and product. They're now our go-to partner for all digital initiatives.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767707513341-no1hcfqx.jpg", imageAlt: "David Kumar"
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
speed={30}
|
|
topMarqueeDirection="left"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactInline
|
|
text="Ready to create something extraordinary?"
|
|
animationType="reveal-blur"
|
|
inputPlaceholder="your@email.com"
|
|
buttonText="Get Started"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="Artisan"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |