279 lines
16 KiB
TypeScript
279 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import MediaAbout from '@/components/sections/about/MediaAbout';
|
|
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
|
|
import TeamCardOne from '@/components/sections/team/TeamCardOne';
|
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
|
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
import { Award, Package, Sparkles, TrendingUp, Users, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="mediumSmall"
|
|
sizing="mediumLarge"
|
|
background="none"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{ name: "About", id: "about" },
|
|
{ name: "Portfolio", id: "portfolio" },
|
|
{ name: "Projects", id: "/projects" },
|
|
{ name: "Team", id: "team" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Get Started", href: "contact" }}
|
|
brandName="Studio"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardGallery
|
|
title="Elevate Your Brand"
|
|
description="Award-winning design studio crafting compelling visual identities and digital experiences for forward-thinking brands"
|
|
background={{ variant: "plain" }}
|
|
tag="Design Excellence"
|
|
tagAnimation="slide-up"
|
|
mediaItems={[
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/workplace-with-laptop_23-2147651756.jpg?_wi=1", imageAlt: "Portfolio showcase" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-vector/flat-design-minimal-business-card_23-2149277811.jpg?_wi=1", imageAlt: "Creative work" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/man-working-desk-top-view_23-2149930937.jpg?_wi=1", imageAlt: "Design process" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-psd/designer-template-design_23-2151802964.jpg?_wi=1", imageAlt: "Brand identity" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-working-as-interior-designer_23-2150346499.jpg?_wi=1", imageAlt: "Studio excellence" }
|
|
]}
|
|
mediaAnimation="blur-reveal"
|
|
buttons={[
|
|
{ text: "View Our Work", href: "/projects" },
|
|
{ text: "Start a Project", href: "contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="portfolio" data-section="portfolio">
|
|
<ProductCardFour
|
|
title="Featured Projects"
|
|
description="A selection of our most impactful brand and design work"
|
|
tag="Showcase"
|
|
tagIcon={Package}
|
|
tagAnimation="slide-up"
|
|
products={[
|
|
{
|
|
id: "proj-1", name: "TechFlow Brand Identity", price: "Complete Rebrand", variant: "Logo, Guidelines, Digital Assets", imageSrc: "http://img.b2bpic.net/free-psd/designer-template-design_23-2151802964.jpg?_wi=2", imageAlt: "TechFlow branding"
|
|
},
|
|
{
|
|
id: "proj-2", name: "Luxe Packaging Design", price: "Custom Solution", variant: "Packaging, Labels, Unboxing Experience", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-working-as-interior-designer_23-2150346499.jpg?_wi=2", imageAlt: "Luxury packaging"
|
|
},
|
|
{
|
|
id: "proj-3", name: "Digital Experience Design", price: "Full Service", variant: "UI/UX, Web Design, Mobile App", imageSrc: "http://img.b2bpic.net/free-vector/company-proposal-template-design_742173-21283.jpg?_wi=1", imageAlt: "Digital design"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaAbout
|
|
title="Crafting Design That Matters"
|
|
description="We believe great design is more than aesthetics—it's a strategic tool that transforms brands and creates meaningful connections. Our team combines creative vision with strategic thinking to deliver work that resonates."
|
|
tag="About Our Studio"
|
|
imageSrc="http://img.b2bpic.net/free-photo/cheerful-women-office_23-2147651758.jpg?_wi=1"
|
|
imageAlt="Our creative studio"
|
|
buttons={[{ text: "Learn More", href: "#" }]}
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardThree
|
|
title="Our Process"
|
|
description="A systematic approach to design excellence"
|
|
tag="Methodology"
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
id: "01", title: "Discovery & Strategy", description: "Deep dive into your brand, market, and audience to uncover insights that drive design direction", imageSrc: "http://img.b2bpic.net/free-vector/process-infographic-template_23-2149009144.jpg?_wi=1", imageAlt: "Strategy session"
|
|
},
|
|
{
|
|
id: "02", title: "Concept Development", description: "Creative exploration and ideation resulting in bold, innovative design concepts", imageSrc: "http://img.b2bpic.net/free-photo/business-people-pointing-screen_1098-21556.jpg?_wi=1", imageAlt: "Design concepts"
|
|
},
|
|
{
|
|
id: "03", title: "Refinement & Execution", description: "Meticulous attention to detail as we perfect and implement your chosen direction", imageSrc: "http://img.b2bpic.net/free-photo/woodworker-black-businesswoman-examining-blueprints-factory-coronavirus-pandemic_637285-11917.jpg?_wi=1", imageAlt: "Design execution"
|
|
},
|
|
{
|
|
id: "04", title: "Delivery & Support", description: "Comprehensive asset delivery and ongoing support to ensure successful implementation", imageSrc: "http://img.b2bpic.net/free-photo/closeup-hands-holding-open-novel-coffee-cup_53876-23475.jpg?_wi=1", imageAlt: "Project delivery"
|
|
}
|
|
]}
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardOne
|
|
title="Meet Our Team"
|
|
description="Talented designers, strategists, and creative minds working together"
|
|
tag="Our People"
|
|
tagAnimation="slide-up"
|
|
members={[
|
|
{
|
|
id: "1", name: "Sarah Chen", role: "Creative Director", imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-caucasian-happy-teacher-glasses_74855-9736.jpg", imageAlt: "Sarah Chen"
|
|
},
|
|
{
|
|
id: "2", name: "Marcus Rodriguez", role: "Brand Strategist", imageSrc: "http://img.b2bpic.net/free-photo/dark-blonde-bearded-man-crosses-his-hands-chest-posing-black-shirt_8353-1116.jpg", imageAlt: "Marcus Rodriguez"
|
|
},
|
|
{
|
|
id: "3", name: "Emma Thompson", role: "Visual Designer", imageSrc: "http://img.b2bpic.net/free-photo/positive-middle-aged-business-leader-window_1262-5388.jpg", imageAlt: "Emma Thompson"
|
|
},
|
|
{
|
|
id: "4", name: "James Park", role: "UX/UI Designer", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-suit_23-2149705918.jpg", imageAlt: "James Park"
|
|
}
|
|
]}
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardThree
|
|
title="By The Numbers"
|
|
description="Our impact and experience in design excellence"
|
|
tag="Impact"
|
|
tagAnimation="slide-up"
|
|
metrics={[
|
|
{
|
|
id: "1", icon: Award,
|
|
title: "Awards Won", value: "47+"
|
|
},
|
|
{
|
|
id: "2", icon: Users,
|
|
title: "Happy Clients", value: "250+"
|
|
},
|
|
{
|
|
id: "3", icon: Zap,
|
|
title: "Projects Completed", value: "500+"
|
|
},
|
|
{
|
|
id: "4", icon: TrendingUp,
|
|
title: "Years Experience", value: "15+"
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
title="What Our Clients Say"
|
|
description="Real feedback from brands we've transformed"
|
|
tag="Testimonials"
|
|
tagAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Jessica Wong, CEO of TechFlow", date: "Date: 15 November 2024", title: "Transformed our entire brand presence", quote: "The team completely transformed how we present ourselves to the market. Their strategic approach combined with stunning design has elevated our brand perception significantly.", tag: "Brand Strategy", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageSrc: "http://img.b2bpic.net/free-vector/flat-employee-appreciation-day-vertical-poster-template_23-2149272005.jpg?_wi=1", imageAlt: "TechFlow transformation"
|
|
},
|
|
{
|
|
id: "2", name: "David Chen, Founder of Luxe Co.", date: "Date: 8 October 2024", title: "Exceeded all our expectations", quote: "Working with this studio was a game-changer. They took our vision and created something even better than we imagined. The attention to detail is remarkable.", tag: "Packaging Design", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageSrc: "http://img.b2bpic.net/free-photo/elegant-cozy-office-with-laptop-desk_23-2149636248.jpg?_wi=1", imageAlt: "Luxe Co. packaging"
|
|
},
|
|
{
|
|
id: "3", name: "Amanda Rodriguez, Marketing Director of Startify", date: "Date: 22 September 2024", title: "Professional and innovative", quote: "Their team brought fresh ideas and professional execution to our digital presence. Our user engagement increased dramatically after the redesign.", tag: "UI/UX Design", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-people-working-office_23-2149636256.jpg?_wi=1", imageAlt: "Startify digital design"
|
|
},
|
|
{
|
|
id: "4", name: "Michael Thompson, COO of Global Brands Inc.", date: "Date: 5 August 2024", title: "Delivered strategic value beyond design", quote: "What impressed us most was how they aligned our visual identity with our business strategy. It's not just pretty—it's effective.", tag: "Brand Identity", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageSrc: "http://img.b2bpic.net/free-photo/close-up-people-working-office_329181-16293.jpg?_wi=1", imageAlt: "Global Brands identity"
|
|
},
|
|
{
|
|
id: "5", name: "Sophie Bennett, Head of Creative at Design Hub", date: "Date: 18 July 2024", title: "True design partners", quote: "They understood our brand as well as we did. The collaborative process was smooth, and the final results speak for themselves.", tag: "Creative Direction", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageSrc: "http://img.b2bpic.net/free-photo/workspace-with-note-brick-wall_53876-31266.jpg", imageAlt: "Design Hub collaboration"
|
|
},
|
|
{
|
|
id: "6", name: "Robert Kim, Founder of Innovation Labs", date: "Date: 30 June 2024", title: "Investment that truly paid off", quote: "Our rebranding helped us attract top talent and better customers. The studio's work has become a competitive advantage for us.", tag: "Full Rebrand", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageSrc: "http://img.b2bpic.net/free-photo/success-new-business-launch-plan-concept_53876-133970.jpg", imageAlt: "Innovation Labs success"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Ready to Start?"
|
|
tagIcon={Sparkles}
|
|
title="Let's Create Something Extraordinary"
|
|
description="Whether you're looking to launch a new brand or elevate an existing one, we're here to help. Get in touch to discuss your project and discover how we can drive your success."
|
|
buttons={[
|
|
{ text: "Contact Us", href: "contact" },
|
|
{ text: "Schedule Call", href: "#" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Navigate", items: [
|
|
{ label: "Home", href: "/" },
|
|
{ label: "About", href: "#about" },
|
|
{ label: "Projects", href: "/projects" },
|
|
{ label: "Team", href: "#team" }
|
|
]
|
|
},
|
|
{
|
|
title: "Services", items: [
|
|
{ label: "Brand Strategy", href: "#" },
|
|
{ label: "Design Systems", href: "#" },
|
|
{ label: "Digital Design", href: "#" },
|
|
{ label: "Packaging", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Contact", href: "#contact" },
|
|
{ label: "Careers", href: "#" },
|
|
{ label: "Blog", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Cookie Policy", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
bottomLeftText="© 2025 Studio. All rights reserved."
|
|
bottomRightText="Crafting excellence in design"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|