225 lines
12 KiB
TypeScript
225 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
|
|
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import { Sparkles, Linkedin, Twitter, Globe, Github } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="compact"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="floatingGradient"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{ name: "Work", id: "work" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Process", id: "process" },
|
|
{ name: "Team", id: "team" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
brandName="Studio"
|
|
bottomLeftText="Creative Excellence"
|
|
bottomRightText="hello@creativestudio.com"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogo
|
|
logoText="Studio"
|
|
description="Where creativity meets strategy. We craft exceptional digital experiences that elevate brands and drive meaningful results."
|
|
buttons={[
|
|
{ text: "View Our Work", href: "work" },
|
|
{ text: "Get in Touch", href: "contact" }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/close-up-laptop-keyboard-colorful-neon-illumination-backlit-keyboard_169016-29670.jpg"
|
|
imageAlt="Creative studio workspace"
|
|
showDimOverlay={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
tag="About Us"
|
|
tagIcon={Sparkles}
|
|
title="Transforming Ideas Into Remarkable Design"
|
|
description="We're a boutique creative bureau dedicated to solving complex design challenges through innovative thinking and meticulous execution. Our multidisciplinary team brings together strategists, designers, and developers to create cohesive experiences that resonate with audiences and drive business growth."
|
|
metrics={[
|
|
{ value: "50+", title: "Projects Completed" },
|
|
{ value: "15+", title: "Years Combined Experience" }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-people-discussing-traveling_23-2149080795.jpg"
|
|
imageAlt="Creative team collaboration"
|
|
useInvertedBackground={false}
|
|
mediaAnimation="slide-up"
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="work" data-section="work">
|
|
<ProductCardOne
|
|
title="Featured Work"
|
|
description="Explore our latest projects showcasing our commitment to design excellence and strategic thinking."
|
|
tag="Portfolio"
|
|
tagIcon={Sparkles}
|
|
products={[
|
|
{
|
|
id: "1", name: "Brand Identity System", price: "Fashion & Lifestyle", imageSrc: "http://img.b2bpic.net/free-vector/flat-design-interior-design-template_23-2149265896.jpg", imageAlt: "Brand identity project"
|
|
},
|
|
{
|
|
id: "2", name: "E-Commerce Platform", price: "Digital Experience", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-business-concept_53876-41706.jpg", imageAlt: "E-commerce design project"
|
|
},
|
|
{
|
|
id: "3", name: "Motion Design Campaign", price: "Creative Campaign", imageSrc: "http://img.b2bpic.net/free-vector/webtemplate-landing-page-expression_52683-30914.jpg", imageAlt: "Motion design work"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="process" data-section="process">
|
|
<FeatureCardNineteen
|
|
tag="How We Work"
|
|
tagIcon={Sparkles}
|
|
title="Our Creative Process"
|
|
description="A structured approach to delivering innovative solutions that exceed expectations."
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: 1,
|
|
tag: "Discovery", title: "Ideation & Strategy", subtitle: "Understanding your vision", description: "We begin with deep exploration of your brand, market, and audience. Through collaborative workshops and strategic analysis, we uncover insights that inform every creative decision.", imageSrc: "http://img.b2bpic.net/free-photo/woman-working-while-pregnant_23-2149247975.jpg", imageAlt: "Ideation workshop"
|
|
},
|
|
{
|
|
id: 2,
|
|
tag: "Design", title: "Concept & Design", subtitle: "Bringing ideas to life", description: "Our designers translate insights into compelling visual concepts. We create wireframes, mockups, and prototypes that showcase the user experience and design direction.", imageSrc: "http://img.b2bpic.net/free-photo/hand-drawn-movie-script-close-up_23-2149066350.jpg", imageAlt: "Design development"
|
|
},
|
|
{
|
|
id: 3,
|
|
tag: "Execution", title: "Development & Launch", subtitle: "Flawless implementation", description: "Our development team brings designs to life with clean code and optimal performance. We ensure every detail is perfect before launch and provide ongoing support.", imageSrc: "http://img.b2bpic.net/free-photo/old-client-asking-senior-medical-specialist-about-disease-prevention_482257-122765.jpg", imageAlt: "Development and launch"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardTwo
|
|
tag="Meet The Team"
|
|
tagIcon={Sparkles}
|
|
title="Creative Minds"
|
|
description="Our talented team of strategists, designers, and developers passionate about exceptional work."
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
members={[
|
|
{
|
|
id: "1", name: "Alexandra Chen", role: "Creative Director", description: "Visionary leader with 12 years in brand strategy and design direction.", imageSrc: "http://img.b2bpic.net/free-photo/freelancing-is-good-idea-independent-person_329181-12349.jpg", imageAlt: "Alexandra Chen", socialLinks: [
|
|
{ icon: Linkedin, url: "https://linkedin.com" },
|
|
{ icon: Twitter, url: "https://twitter.com" }
|
|
]
|
|
},
|
|
{
|
|
id: "2", name: "Marcus Rodriguez", role: "Lead Designer", description: "Digital design specialist focused on user experience and interface design.", imageSrc: "http://img.b2bpic.net/free-photo/african-american-person-texting-messages-smartphone-app-sofa-finishing-tasks-before_482257-132216.jpg", imageAlt: "Marcus Rodriguez", socialLinks: [
|
|
{ icon: Linkedin, url: "https://linkedin.com" },
|
|
{ icon: Globe, url: "https://example.com" }
|
|
]
|
|
},
|
|
{
|
|
id: "3", name: "Sophie Laurent", role: "Strategy Lead", description: "Business strategist with expertise in brand positioning and growth.", imageSrc: "http://img.b2bpic.net/free-photo/guy-eyeglasses_1098-14679.jpg", imageAlt: "Sophie Laurent", socialLinks: [
|
|
{ icon: Linkedin, url: "https://linkedin.com" },
|
|
{ icon: Twitter, url: "https://twitter.com" }
|
|
]
|
|
},
|
|
{
|
|
id: "4", name: "James Kim", role: "Lead Developer", description: "Full-stack developer creating high-performance digital solutions.", imageSrc: "http://img.b2bpic.net/free-photo/middle-eastern-manager-examines-infographics-oversee-business-operations_482257-128607.jpg", imageAlt: "James Kim", socialLinks: [
|
|
{ icon: Github, url: "https://github.com" },
|
|
{ icon: Linkedin, url: "https://linkedin.com" }
|
|
]
|
|
}
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="Trusted by Leading Brands"
|
|
description="We've had the privilege of collaborating with innovative companies across diverse industries."
|
|
tag="Partners"
|
|
tagIcon={Sparkles}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={["TechVenture", "LuxeStyle", "FinanceFlow", "WellnessHub", "CulinaryArt", "PropertyOne", "TravelPro"]}
|
|
logos={[
|
|
"http://img.b2bpic.net/free-vector/gradient-technology-logo-template-collection_23-2148218237.jpg", "http://img.b2bpic.net/free-vector/gradient-luxury-logo-template_23-2150854966.jpg", "http://img.b2bpic.net/free-vector/flat-design-business-workshop-labels-template_23-2149412868.jpg", "http://img.b2bpic.net/free-vector/logo-template-with-ear_1057-2653.jpg", "http://img.b2bpic.net/free-vector/international-beer-day-badges_23-2148582058.jpg", "http://img.b2bpic.net/free-vector/logo-template-design_1289-154.jpg", "http://img.b2bpic.net/free-vector/hand-drawn-gold-crown-logo-template_23-2150947488.jpg"
|
|
]}
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Ready to elevate your brand? Let's create something extraordinary together."
|
|
animationType="entrance-slide"
|
|
buttons={[
|
|
{ text: "Start a Project", href: "contact" },
|
|
{ text: "Schedule a Call", href: "https://calendly.com" }
|
|
]}
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
logoText="Studio"
|
|
columns={[
|
|
{
|
|
items: [
|
|
{ label: "Work", href: "#work" },
|
|
{ label: "About", href: "#about" },
|
|
{ label: "Process", href: "#process" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Team", href: "#team" },
|
|
{ label: "Contact", href: "#contact" },
|
|
{ label: "Privacy", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Twitter", href: "https://twitter.com" },
|
|
{ label: "LinkedIn", href: "https://linkedin.com" },
|
|
{ label: "Instagram", href: "https://instagram.com" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|