196 lines
11 KiB
TypeScript
196 lines
11 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
|
||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
||
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||
import TextAbout from '@/components/sections/about/TextAbout';
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="shift-hover"
|
||
defaultTextAnimation="entrance-slide"
|
||
borderRadius="pill"
|
||
contentWidth="mediumSmall"
|
||
sizing="large"
|
||
background="circleGradient"
|
||
cardStyle="inset"
|
||
primaryButtonStyle="diagonal-gradient"
|
||
secondaryButtonStyle="solid"
|
||
headingFontWeight="normal"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarLayoutFloatingInline
|
||
navItems={[
|
||
{ name: "Home", id: "hero" },
|
||
{ name: "About", id: "about" },
|
||
{ name: "Services", id: "features" },
|
||
{ name: "Contact", id: "contact" },
|
||
]}
|
||
brandName="Studio 26"
|
||
button={{ text: "Get Started", href: "#contact" }}
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroSplit
|
||
background={{ variant: "plain" }}
|
||
title="Studio 26 – your color zone"
|
||
description="Transforming vision into vibrant digital reality. We are a creative color zone dedicated to pushing visual boundaries."
|
||
buttons={[
|
||
{ text: "Explore Work", href: "#products" },
|
||
{ text: "Get In Touch", href: "#contact" },
|
||
]}
|
||
imageSrc="https://img.b2bpic.net/free-photo/attractive-shy-girl-sitting-alone-holding-herself-knees-nude-stylish-makeup-curly-long-hairstyle-black-jacket-creamy-dress-her-body_343629-58.jpg?id=11953522"
|
||
imageAlt="creative studio vibrant color concept"
|
||
mediaAnimation="slide-up"
|
||
avatars={[
|
||
{ src: "http://img.b2bpic.net/free-photo/digital-art-style-fashion-design-sketch-paper_23-2151487049.jpg", alt: "Digital art style fashion design sketch on paper" },
|
||
{ src: "http://img.b2bpic.net/free-photo/digital-art-style-fashion-design-sketch-paper_23-2151486994.jpg", alt: "Digital art style fashion design sketch on paper" },
|
||
{ src: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345421.jpg", alt: "Still life of graphic design office" },
|
||
{ src: "http://img.b2bpic.net/free-photo/digital-art-style-fashion-design-sketch-paper_23-2151487043.jpg", alt: "Digital art style fashion design sketch on paper" },
|
||
{ src: "http://img.b2bpic.net/free-photo/high-angle-measuring-tools-still-life_23-2150440938.jpg", alt: "High angle measuring tools still life" },
|
||
]}
|
||
avatarText="Trusted by 50+ partners"
|
||
/>
|
||
</div>
|
||
|
||
<div id="about" data-section="about">
|
||
<TextAbout
|
||
useInvertedBackground={false}
|
||
title="Creating color, creating identity"
|
||
buttons={[{ text: "Our Approach", href: "#features" }]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="features" data-section="features">
|
||
<FeatureCardTwentyFour
|
||
animationType="slide-up"
|
||
textboxLayout="split"
|
||
useInvertedBackground={false}
|
||
features={[
|
||
{ id: "1", title: "Brand Identity", author: "Studio 26", description: "Building unique visual languages for modern companies.", tags: ["Strategy", "Design"], imageSrc: "http://img.b2bpic.net/free-photo/top-view-items-redecorating-house-with-color-palette_23-2148815773.jpg" },
|
||
{ id: "2", title: "Digital Experience", author: "Studio 26", description: "Seamless web and UI/UX design for better conversion.", tags: ["Web", "Digital"], imageSrc: "http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150104502.jpg" },
|
||
{ id: "3", title: "Art Direction", author: "Studio 26", description: "Creative visual narrative for every medium.", tags: ["Creative", "Art"], imageSrc: "http://img.b2bpic.net/free-photo/scenes-famous-vlogger-recording-social-media-creative-young-man_482257-24887.jpg" },
|
||
{ id: "4", title: "Motion Graphics", author: "Studio 26", description: "Bringing static designs to life with fluid animation.", tags: ["Motion", "Video"], imageSrc: "http://img.b2bpic.net/free-photo/discussing-logo_1098-18299.jpg" },
|
||
{ id: "5", title: "Print Design", author: "Studio 26", description: "Tangible brand experiences through editorial layout.", tags: ["Print", "Editorial"], imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345458.jpg" },
|
||
]}
|
||
title="Our Expertise"
|
||
description="Comprehensive creative services for modern brands."
|
||
/>
|
||
</div>
|
||
|
||
<div id="products" data-section="products">
|
||
<ProductCardThree
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
gridVariant="bento-grid"
|
||
useInvertedBackground={false}
|
||
products={[
|
||
{ id: "p1", name: "Brand Revamp", price: "Featured", imageSrc: "http://img.b2bpic.net/free-photo/top-view-boards-mdf-material_23-2149418550.jpg" },
|
||
{ id: "p2", name: "Web Platform", price: "Featured", imageSrc: "http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2151273035.jpg" },
|
||
{ id: "p3", name: "Editorial Design", price: "Featured", imageSrc: "http://img.b2bpic.net/free-photo/time-is-money-sandglass-investment-countdown-measure-concept_53876-120489.jpg" },
|
||
{ id: "p4", name: "Logo System", price: "Featured", imageSrc: "http://img.b2bpic.net/free-photo/creative-ideas-brand-logo-style_53876-120345.jpg" },
|
||
{ id: "p5", name: "Motion Asset", price: "Featured", imageSrc: "http://img.b2bpic.net/free-photo/design-creative-visual-trendy-ideas-style-purpose_53876-16492.jpg" },
|
||
{ id: "p6", name: "UI Concept", price: "Featured", imageSrc: "http://img.b2bpic.net/free-photo/chandelier-design-concept-tablet_23-2152014653.jpg" },
|
||
]}
|
||
title="Selected Portfolio"
|
||
description="A curated look at our recent creative projects."
|
||
/>
|
||
</div>
|
||
|
||
<div id="metrics" data-section="metrics">
|
||
<MetricCardSeven
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
metrics={[
|
||
{ id: "m1", value: "150+", title: "Projects Completed", items: ["Branding", "Web", "Print"] },
|
||
{ id: "m2", value: "50+", title: "Happy Clients", items: ["Global", "Local"] },
|
||
{ id: "m3", value: "12", title: "Design Awards", items: ["Excellence", "Innovation"] },
|
||
]}
|
||
title="Our Impact"
|
||
description="Numbers that define our creative reach."
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardTen
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
testimonials={[
|
||
{ id: "1", title: "Excellent Work", quote: "Studio 26 transformed our brand identity completely.", name: "Alex Smith", role: "Marketing Lead", imageSrc: "http://img.b2bpic.net/free-photo/man-posing-his-hands-chest_1154-74.jpg" },
|
||
{ id: "2", title: "Great Vision", quote: "Their creative direction is simply unparalleled.", name: "Jordan Lee", role: "Startup CEO", imageSrc: "http://img.b2bpic.net/free-photo/young-gymnast-training-competition_23-2149334432.jpg" },
|
||
{ id: "3", title: "Top Professionals", quote: "They understand color and branding perfectly.", name: "Maria Garcia", role: "Product Designer", imageSrc: "http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081913.jpg" },
|
||
{ id: "4", title: "Effective Strategy", quote: "Our web metrics improved significantly after their work.", name: "David Chen", role: "Digital Manager", imageSrc: "http://img.b2bpic.net/free-photo/colleagues-smiling-speaking-discussing-drawings-new-ideas-office_176420-1687.jpg" },
|
||
{ id: "5", title: "Inspiring Partner", quote: "A pleasure to work with from concept to finish.", name: "Emma Wilson", role: "Art Director", imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-man-art-studio_23-2149705900.jpg" },
|
||
]}
|
||
title="What They Say"
|
||
description="Voices from our partners and clients."
|
||
/>
|
||
</div>
|
||
|
||
<div id="faq" data-section="faq">
|
||
<FaqDouble
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
faqs={[
|
||
{ id: "f1", title: "What is your process?", content: "We initiate every engagement with a comprehensive discovery phase, where we deep-dive into your business goals, target audience, and market landscape to ensure every design choice is rooted in data and strategy. This thorough foundation allows us to craft tailored solutions that build genuine trust and long-term brand success." },
|
||
{ id: "f2", title: "Do you work remotely?", content: "Yes, we work with clients worldwide." },
|
||
{ id: "f3", title: "How long do projects take?", content: "Timelines depend on project complexity but we always aim for efficiency." },
|
||
]}
|
||
title="Common Questions"
|
||
description="Answers to help you get started."
|
||
faqsAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactSplitForm
|
||
useInvertedBackground={false}
|
||
title="Start your journey"
|
||
description="Ready to bring color to your project? Reach out today."
|
||
inputs={[
|
||
{ name: "name", type: "text", placeholder: "Name", required: true },
|
||
{ name: "email", type: "email", placeholder: "Email", required: true },
|
||
]}
|
||
textarea={{ name: "message", placeholder: "Tell us about your project", rows: 4, required: true }}
|
||
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-people-working-together_23-2149345223.jpg"
|
||
imageAlt="creative design team professional"
|
||
buttonText="Request a Free Consultation"
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterBase
|
||
columns={[
|
||
{
|
||
title: "Links", items: [
|
||
{ label: "About", href: "#about" },
|
||
{ label: "Services", href: "#features" },
|
||
],
|
||
},
|
||
{
|
||
title: "Connect", items: [
|
||
{ label: "Instagram", href: "#" },
|
||
{ label: "Twitter", href: "#" },
|
||
],
|
||
},
|
||
]}
|
||
logoText="Studio 26"
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
}
|