195 lines
10 KiB
TypeScript
195 lines
10 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="http://img.b2bpic.net/free-photo/comparison-different-types-brush-strokes_23-2150105283.jpg"
|
||
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 follow a collaborative approach from discovery to final delivery." },
|
||
{ 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"
|
||
/>
|
||
</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>
|
||
);
|
||
}
|