bender/53854874-de53-4a91-9ef0-6e18a5147fc6
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: bender:version_1
Branches Tags
bender:main bender:version_3 bender:version_2 bender:version_1
...
pull from: bender:main
Branches Tags
bender:main bender:version_3 bender:version_2 bender:version_1

12 Commits
version_1 ... main

Author SHA1 Message Date
bender
401d87b6b5 Merge version_3 into main 
Merge version_3 into main
 2026-04-01 06:41:43 +00:00
bender
6886f8fc00 Update src/app/page.tsx 2026-04-01 06:41:40 +00:00
bender
56260e0a8d Merge version_2 into main 
Merge version_2 into main
 2026-04-01 06:39:41 +00:00
bender
8ba140a3b0 Update src/app/about/page.tsx 2026-04-01 06:39:35 +00:00
bender
58eb4f8c89 Merge version_2 into main 
Merge version_2 into main
 2026-04-01 06:39:04 +00:00
bender
a75a2a14c6 Update src/app/contact/page.tsx 2026-04-01 06:39:01 +00:00
bender
d396232dd0 Update src/app/about/page.tsx 2026-04-01 06:39:01 +00:00
bender
ef1aef0c82 Merge version_2 into main 
Merge version_2 into main
 2026-04-01 06:38:35 +00:00
bender
dc1af0d0fd Update src/app/styles/variables.css 2026-04-01 06:38:32 +00:00
bender
556e01961a Update src/app/page.tsx 2026-04-01 06:38:31 +00:00
bender
e2551149fd Add src/app/contact/page.tsx 2026-04-01 06:38:31 +00:00
bender
b6ab5659a5 Add src/app/about/page.tsx 2026-04-01 06:38:30 +00:00
4 changed files with 157 additions and 108 deletions
Expand all files Collapse all files

64
src/app/about/page.tsx Normal file
View File

@@ -0,0 +1,64 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
import FooterBase from "@/components/sections/footer/FooterBase";
export default function AboutPage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Services", id: "/#services" },
{ name: "Work", id: "/#work" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
];
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="medium"
sizing="medium"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={navItems}
button={{ text: "Get in Touch", href: "/contact" }}
brandName="Studio"
/>
</div>
<div id="about-section" data-section="about-section">
<MetricSplitMediaAbout
title="About Our Agency"
description="We are a creative agency dedicated to crafting exceptional digital experiences that drive growth and engagement."
useInvertedBackground={false}
metrics={[
{ value: "10+", title: "Years Experience" },
{ value: "500+", title: "Projects Completed" }
]}
mediaAnimation="opacity"
metricsAnimation="opacity"
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{ title: "Studio", items: [{ label: "Home", href: "/" }, { label: "About", href: "/about" }] },
{ title: "Contact", items: [{ label: "Email Us", href: "mailto:hello@studio.com" }] }
]}
logoText="Studio"
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

64
src/app/contact/page.tsx Normal file
View File

@@ -0,0 +1,64 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import FaqBase from "@/components/sections/faq/FaqBase";
import FooterBase from "@/components/sections/footer/FooterBase";
export default function ContactPage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Services", id: "/#services" },
{ name: "Work", id: "/#work" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
];
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="medium"
sizing="medium"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={navItems}
button={{ text: "Get in Touch", href: "/contact" }}
brandName="Studio"
/>
</div>
<div id="faq-section" data-section="faq-section">
<FaqBase
title="Frequently Asked Questions"
description="Find answers to common questions about our agency and process."
faqs={[
{ id: "1", title: "How do we get started?", content: "Reach out via our contact page." },
{ id: "2", title: "What is your timeline?", content: "Typically 4-8 weeks." }
]}
faqsAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{ title: "Studio", items: [{ label: "Home", href: "/" }, { label: "About", href: "/about" }] },
{ title: "Contact", items: [{ label: "Email Us", href: "mailto:hello@studio.com" }] }
]}
logoText="Studio"
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

123
src/app/page.tsx
View File

@@ -4,13 +4,12 @@ import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
import TextAbout from "@/components/sections/about/TextAbout";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import { Sparkles, Users, Globe, Zap, Star, Layers, Twitter, Instagram, Linkedin } from "lucide-react";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import { Sparkles, Users, Globe, Zap, Star, Layers, Twitter, Instagram, Linkedin, Check, Code, Palette, TrendingUp } from "lucide-react";
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
import FeatureCardNineteen from "@/components/sections/feature/FeatureCardNineteen";
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
import { Check, Code, Palette, TrendingUp } from "lucide-react";
import ContactText from "@/components/sections/contact/ContactText";
import FooterCard from "@/components/sections/footer/FooterCard";
@@ -26,20 +25,19 @@ export default function WebAgencyThemePage() {
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
borderRadius="rounded"
contentWidth="medium"
sizing="medium"
background="aurora"
cardStyle="layered-gradient"
background="noiseDiagonalGradient"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="medium"
headingFontWeight="semibold"
>
<ReactLenis root>
<NavbarLayoutFloatingInline
<NavbarStyleApple
navItems={navItems}
brandName="Studio"
button={{ text: "Get in Touch", href: "#contact" }}
/>
<HeroSplitKpi
background={{ variant: "radial-gradient" }}
@@ -55,13 +53,9 @@ export default function WebAgencyThemePage() {
]}
buttons={[
{
text: "Start Project",
href: "#contact",
},
text: "Start Project", href: "#contact"},
{
text: "View Work",
href: "#work",
},
text: "View Work", href: "#work"},
]}
avatars={[
{ src: "/templates/web-agency/hero/hero2.webp", alt: "Team member 1" },
@@ -103,40 +97,16 @@ export default function WebAgencyThemePage() {
features={[
{
id: 1,
tag: "Service 01",
title: "01",
subtitle: "Web Development",
description: "Your website should be more than functional—it should resonate. We craft bespoke digital experiences that merge innovation with creativity, delivering intuitive, visually stunning platforms that captivate audiences, reflect your brand's essence, and adapt to future opportunities.",
imageSrc: "/templates/web-agency/process/process1.webp",
imageAlt: "Web development",
},
tag: "Service 01", title: "01", subtitle: "Web Development", description: "Your website should be more than functional—it should resonate. We craft bespoke digital experiences that merge innovation with creativity, delivering intuitive, visually stunning platforms that captivate audiences, reflect your brand's essence, and adapt to future opportunities.", imageSrc: "/templates/web-agency/process/process1.webp", imageAlt: "Web development"},
{
id: 2,
tag: "Service 02",
title: "02",
subtitle: "Marketing",
description: "Impactful marketing goes beyond visibility—it creates connections. We fuse creativity with analytics to craft adaptive strategies that engage your audience authentically, keeping your brand relevant and resonant while delivering measurable results in an ever-evolving digital world.",
imageSrc: "/templates/web-agency/process/process2.webp",
imageAlt: "Marketing",
},
tag: "Service 02", title: "02", subtitle: "Marketing", description: "Impactful marketing goes beyond visibility—it creates connections. We fuse creativity with analytics to craft adaptive strategies that engage your audience authentically, keeping your brand relevant and resonant while delivering measurable results in an ever-evolving digital world.", imageSrc: "/templates/web-agency/process/process2.webp", imageAlt: "Marketing"},
{
id: 3,
tag: "Service 03",
title: "03",
subtitle: "Design",
description: "Design is your brand's voice. We craft visuals and layouts that communicate purpose, inspire trust, and connect emotionally. By harmonizing artistry with intent, our designs transform user interactions into meaningful, memorable experiences that align with your identity.",
imageSrc: "/templates/web-agency/process/process3.webp",
imageAlt: "Design",
},
tag: "Service 03", title: "03", subtitle: "Design", description: "Design is your brand's voice. We craft visuals and layouts that communicate purpose, inspire trust, and connect emotionally. By harmonizing artistry with intent, our designs transform user interactions into meaningful, memorable experiences that align with your identity.", imageSrc: "/templates/web-agency/process/process3.webp", imageAlt: "Design"},
{
id: 4,
tag: "Service 04",
title: "04",
subtitle: "Software Development",
description: "We build custom software that evolves with your business. By addressing unique challenges, our tailored solutions streamline workflows, eliminate inefficiencies, and foster innovation—empowering you to scale, adapt, and maintain a competitive edge in an ever-changing landscape.",
imageSrc: "/templates/web-agency/process/process4.webp",
imageAlt: "Software development",
},
tag: "Service 04", title: "04", subtitle: "Software Development", description: "We build custom software that evolves with your business. By addressing unique challenges, our tailored solutions streamline workflows, eliminate inefficiencies, and foster innovation—empowering you to scale, adapt, and maintain a competitive edge in an ever-changing landscape.", imageSrc: "/templates/web-agency/process/process4.webp", imageAlt: "Software development"},
]}
textboxLayout="default"
useInvertedBackground={false}
@@ -163,53 +133,13 @@ export default function WebAgencyThemePage() {
tagIcon={Star}
testimonials={[
{
id: "1",
name: "Sarah Johnson",
date: "CEO, TechStart",
title: "Transformed Our Digital Presence",
quote: "Working with Studio was a game-changer for our startup. They delivered a website that not only looks stunning but converts visitors into customers at twice our previous rate.",
tag: "Web Development",
avatarSrc: "/templates/web-agency/hero/hero2.webp",
avatarAlt: "Sarah Johnson",
imageSrc: "/templates/web-agency/hero/hero2.webp",
imageAlt: "TechStart project showcase",
},
id: "1", name: "Sarah Johnson", date: "CEO, TechStart", title: "Transformed Our Digital Presence", quote: "Working with Studio was a game-changer for our startup. They delivered a website that not only looks stunning but converts visitors into customers at twice our previous rate.", tag: "Web Development", avatarSrc: "/templates/web-agency/hero/hero2.webp", avatarAlt: "Sarah Johnson", imageSrc: "/templates/web-agency/hero/hero2.webp", imageAlt: "TechStart project showcase"},
{
id: "2",
name: "Michael Chen",
date: "Founder, GrowthLab",
title: "Exceeded All Expectations",
quote: "The team's attention to detail and creative vision brought our brand to life in ways we never imagined. Our new platform has received incredible feedback from users.",
tag: "Brand Design",
avatarSrc: "/templates/web-agency/hero/hero3.webp",
avatarAlt: "Michael Chen",
imageSrc: "/templates/web-agency/hero/hero3.webp",
imageAlt: "GrowthLab project showcase",
},
id: "2", name: "Michael Chen", date: "Founder, GrowthLab", title: "Exceeded All Expectations", quote: "The team's attention to detail and creative vision brought our brand to life in ways we never imagined. Our new platform has received incredible feedback from users.", tag: "Brand Design", avatarSrc: "/templates/web-agency/hero/hero3.webp", avatarAlt: "Michael Chen", imageSrc: "/templates/web-agency/hero/hero3.webp", imageAlt: "GrowthLab project showcase"},
{
id: "3",
name: "Emily Rodriguez",
date: "Marketing Director, Elevate",
title: "A True Partnership",
quote: "From strategy to execution, Studio understood our vision and delivered beyond what we hoped for. The new website has become our most powerful marketing asset.",
tag: "E-commerce",
avatarSrc: "/templates/web-agency/hero/hero4.webp",
avatarAlt: "Emil Svenson",
imageSrc: "/templates/web-agency/hero/hero4.webp",
imageAlt: "Elevate project showcase",
},
id: "3", name: "Emily Rodriguez", date: "Marketing Director, Elevate", title: "A True Partnership", quote: "From strategy to execution, Studio understood our vision and delivered beyond what we hoped for. The new website has become our most powerful marketing asset.", tag: "E-commerce", avatarSrc: "/templates/web-agency/hero/hero4.webp", avatarAlt: "Emil Svenson", imageSrc: "/templates/web-agency/hero/hero4.webp", imageAlt: "Elevate project showcase"},
{
id: "4",
name: "David Park",
date: "CTO, InnovateCo",
title: "Technical Excellence",
quote: "The development team delivered a high-performance application that handles our complex requirements with ease. Their technical expertise is unmatched in the industry.",
tag: "Web Application",
avatarSrc: "/templates/web-agency/hero/hero5.webp",
avatarAlt: "David Park",
imageSrc: "/templates/web-agency/hero/hero5.webp",
imageAlt: "InnovateCo project showcase",
},
id: "4", name: "David Park", date: "CTO, InnovateCo", title: "Technical Excellence", quote: "The development team delivered a high-performance application that handles our complex requirements with ease. Their technical expertise is unmatched in the industry.", tag: "Web Application", avatarSrc: "/templates/web-agency/hero/hero5.webp", avatarAlt: "David Park", imageSrc: "/templates/web-agency/hero/hero5.webp", imageAlt: "InnovateCo project showcase"},
]}
textboxLayout="default"
useInvertedBackground={false}
@@ -224,10 +154,7 @@ export default function WebAgencyThemePage() {
useInvertedBackground={false}
features={[
{
id: "1",
title: "Discovery & Strategy",
description: "We start by understanding your goals, audience, and market to build a roadmap tailored to your business.",
media: { imageSrc: "/templates/web-agency/services/how1.webp", imageAlt: "Discovery and strategy" },
id: "1", title: "Discovery & Strategy", description: "We start by understanding your goals, audience, and market to build a roadmap tailored to your business.", media: { imageSrc: "/templates/web-agency/services/how1.webp", imageAlt: "Discovery and strategy" },
reverse: false,
items: [
{ icon: Code, text: "In-depth research and audits" },
@@ -236,10 +163,7 @@ export default function WebAgencyThemePage() {
],
},
{
id: "2",
title: "Design & Prototyping",
description: "We translate strategy into visual concepts, iterating with you until every detail feels right.",
media: { imageSrc: "/templates/web-agency/services/how2.webp", imageAlt: "Design and prototyping" },
id: "2", title: "Design & Prototyping", description: "We translate strategy into visual concepts, iterating with you until every detail feels right.", media: { imageSrc: "/templates/web-agency/services/how2.webp", imageAlt: "Design and prototyping" },
reverse: true,
items: [
{ icon: Palette, text: "Wireframes and mockups" },
@@ -248,10 +172,7 @@ export default function WebAgencyThemePage() {
],
},
{
id: "3",
title: "Build & Launch",
description: "We develop, test, and deploy your project with precision, ensuring a smooth launch and measurable impact.",
media: { imageSrc: "/templates/web-agency/services/how3.webp", imageAlt: "Build and launch" },
id: "3", title: "Build & Launch", description: "We develop, test, and deploy your project with precision, ensuring a smooth launch and measurable impact.", media: { imageSrc: "/templates/web-agency/services/how3.webp", imageAlt: "Build and launch" },
reverse: false,
items: [
{ icon: TrendingUp, text: "Agile development sprints" },
@@ -262,7 +183,7 @@ export default function WebAgencyThemePage() {
]}
/>
<ContactText
text="Ready to transform your digital presence? Let's create something extraordinary together."
text="Let's build your brand’s next big win—connect with our experts today."
buttons={[
{ text: "Start a Project", href: "#contact" },
{ text: "Schedule a Call", href: "#call" },
@@ -282,4 +203,4 @@ export default function WebAgencyThemePage() {
</ReactLenis>
</ThemeProvider>
);
}
}

14
src/app/styles/variables.css
View File

@@ -10,15 +10,15 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #f7f6f7;
--card: #ffffff;
--foreground: #0c1325;
--primary-cta: #0b07ff;
--background: #000000;
--card: #1a2a1a;
--foreground: #ffffff;
--primary-cta: #ffffff;
--primary-cta-text: #f7f6f7;
--secondary-cta: #ffffff;
--secondary-cta: #0d1a0d;
--secondary-cta-text: #0c1325;
--accent: #93b7ff;
--background-accent: #a8bae8;
--accent: #2d4a2d;
--background-accent: #c1e1c1;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);