Update src/app/page.tsx
This commit is contained in:
311
src/app/page.tsx
311
src/app/page.tsx
@@ -31,68 +31,34 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ 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",
|
||||
}}
|
||||
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",
|
||||
},
|
||||
{ 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",
|
||||
},
|
||||
{ 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"
|
||||
/>
|
||||
@@ -102,12 +68,7 @@ export default function LandingPage() {
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="Creating color, creating identity"
|
||||
buttons={[
|
||||
{
|
||||
text: "Our Approach",
|
||||
href: "#features",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Our Approach", href: "#features" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -117,61 +78,11 @@ export default function LandingPage() {
|
||||
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",
|
||||
},
|
||||
{ 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."
|
||||
@@ -185,42 +96,12 @@ export default function LandingPage() {
|
||||
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",
|
||||
},
|
||||
{ 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."
|
||||
@@ -229,37 +110,13 @@ export default function LandingPage() {
|
||||
|
||||
<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",
|
||||
],
|
||||
},
|
||||
{ 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."
|
||||
@@ -271,46 +128,11 @@ export default function LandingPage() {
|
||||
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",
|
||||
},
|
||||
{ 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."
|
||||
@@ -322,21 +144,9 @@ export default function LandingPage() {
|
||||
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.",
|
||||
},
|
||||
{ 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."
|
||||
@@ -350,25 +160,10 @@ export default function LandingPage() {
|
||||
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,
|
||||
},
|
||||
{ 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,
|
||||
}}
|
||||
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"
|
||||
/>
|
||||
@@ -378,29 +173,15 @@ export default function LandingPage() {
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Links",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#features",
|
||||
},
|
||||
title: "Links", items: [
|
||||
{ label: "About", href: "#about" },
|
||||
{ label: "Services", href: "#features" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect",
|
||||
items: [
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Twitter",
|
||||
href: "#",
|
||||
},
|
||||
title: "Connect", items: [
|
||||
{ label: "Instagram", href: "#" },
|
||||
{ label: "Twitter", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
Reference in New Issue
Block a user