11 Commits

Author SHA1 Message Date
a4236a2c95 Merge version_3 into main
Merge version_3 into main
2026-04-17 11:47:38 +00:00
93bd35dc07 Update src/app/styles/base.css 2026-04-17 11:47:35 +00:00
2b3b25fdf0 Update src/app/page.tsx 2026-04-17 11:47:35 +00:00
782dcc8eae Merge version_2 into main
Merge version_2 into main
2026-04-17 11:46:03 +00:00
926eba22b4 Update src/app/page.tsx 2026-04-17 11:46:00 +00:00
047034bd34 Merge version_2 into main
Merge version_2 into main
2026-04-17 11:45:39 +00:00
414041e3c2 Update src/app/page.tsx 2026-04-17 11:45:36 +00:00
31b3995c9c Merge version_2 into main
Merge version_2 into main
2026-04-17 11:45:10 +00:00
34c457bbb2 Update src/app/styles/variables.css 2026-04-17 11:45:07 +00:00
57da8de500 Update src/app/styles/base.css 2026-04-17 11:45:06 +00:00
d23d246a39 Update src/app/page.tsx 2026-04-17 11:45:06 +00:00
3 changed files with 66 additions and 184 deletions

View File

@@ -5,18 +5,18 @@ 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 { Sparkles, Users, Globe, Zap, Star, Layers } 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";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import TeamCardTwo from "@/components/sections/team/TeamCardTwo";
export default function WebAgencyThemePage() {
const navItems = [
{ name: "Home", id: "home" },
{ name: "About", id: "about" },
{ name: "Services", id: "services" },
{ name: "Work", id: "work" },
{ name: "Contact", id: "contact" },
@@ -38,15 +38,15 @@ export default function WebAgencyThemePage() {
<ReactLenis root>
<NavbarLayoutFloatingInline
navItems={navItems}
brandName="Studio"
brandName="Onion Group"
button={{ text: "Get in Touch", href: "#contact" }}
/>
<HeroSplitKpi
background={{ variant: "radial-gradient" }}
tag="Award-Winning Agency"
tag="Strategic Digital Agency"
tagIcon={Sparkles}
title="We Build Digital Experiences"
description="Transform your brand with cutting-edge web design and development. We craft stunning websites that convert visitors into customers."
title="Digital Excellence Across Europe"
description="Onion Group provides bespoke web solutions and digital strategy from our offices in Como, Lugano, and Milan."
enableKpiAnimation={true}
kpis={[
{ value: "150+", label: "Projects Delivered" },
@@ -54,92 +54,61 @@ export default function WebAgencyThemePage() {
{ value: "12+", label: "Years Experience" },
]}
buttons={[
{
text: "Start Project",
href: "#contact",
},
{
text: "View Work",
href: "#work",
},
{ text: "Start Project", href: "#contact" },
{ text: "View Work", href: "#work" },
]}
avatars={[
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero2.webp", alt: "Team member 1" },
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero3.webp", alt: "Team member 2" },
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero4.webp", alt: "Team member 3" }
]}
avatarText="Trusted by startups and Fortune 500 companies"
avatarText="Trusted by leading brands across Italy and Switzerland"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero1.webp"
imageAlt="Web design showcase"
mediaAnimation="slide-up"
showMarqueeCard={false}
marqueeItems={[
{ type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/logo.svg", alt: "Logo" },
{ type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/logo.svg", alt: "Logo" },
{ type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/logo.svg", alt: "Logo" },
{ type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/logo.svg", alt: "Logo" },
{ type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/logo.svg", alt: "Logo" },
{ type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/logo.svg", alt: "Logo" },
{ type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/logo.svg", alt: "Logo" },
{ type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/logo.svg", alt: "Logo" },
{ type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/logo.svg", alt: "Logo" },
{ type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/logo.svg", alt: "Logo" },
]}
marqueeClassName="md:mb-5"
/>
<TextAbout
title="We craft digital experiences that captivate audiences and drive meaningful results for ambitious brands worldwide."
title="We operate at the intersection of creativity and technology, bridging our expertise between Como, Lugano, and Milan to deliver international-standard results."
buttons={[
{ text: "Our Process", href: "#process" },
{ text: "Meet the Team", href: "#team" },
]}
useInvertedBackground={false}
/>
<div id="about" data-section="about">
<TeamCardTwo
title="Our European Presence"
description="Strategically located to serve clients across the Italy-Switzerland axis."
textboxLayout="default"
gridVariant="four-items-2x2-equal-grid"
animationType="slide-up"
useInvertedBackground={true}
members={[
{ id: "1", name: "Como Hub", role: "Design Studio", description: "Our creative heart, focusing on brand identity and immersive digital user experiences.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero2.webp?_wi=1" },
{ id: "2", name: "Lugano Office", role: "Tech Strategy", description: "Serving our Swiss clients with high-performance web development and scalable infrastructure.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero3.webp?_wi=1" },
{ id: "3", name: "Milan Headquarters", role: "Growth Operations", description: "Focused on digital marketing, client relations, and large-scale enterprise integration.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero4.webp" },
{ id: "4", name: "Onion Group", role: "Unified Team", description: "A cohesive cross-border team dedicated to quality, precision, and digital innovation.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero5.webp" }
]}
/>
</div>
<FeatureCardNineteen
title="Our Services"
description="A proven methodology that delivers results consistently across every project."
tag="What We Do"
tagIcon={Layers}
features={[
{
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: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/process/process1.webp",
imageAlt: "Web development",
},
{
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: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/process/process2.webp",
imageAlt: "Marketing",
},
{
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: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/process/process3.webp",
imageAlt: "Design",
},
{
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: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/process/process4.webp",
imageAlt: "Software development",
},
{ tag: "Service 01", title: "01", subtitle: "Web Development", description: "Your website should be more than functional—it should resonate.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/process/process1.webp" },
{ tag: "Service 02", title: "02", subtitle: "Marketing", description: "Impactful marketing goes beyond visibility—it creates connections.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/process/process2.webp" },
{ tag: "Service 03", title: "03", subtitle: "Design", description: "Design is your brand's voice. We craft visuals that communicate purpose.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/process/process3.webp" },
{ tag: "Service 04", title: "04", subtitle: "Software Development", description: "We build custom software that evolves with your business.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/process/process4.webp" },
]}
textboxLayout="default"
useInvertedBackground={false}
/>
<MetricCardOne
title="Results That Speak"
description="Our track record of delivering exceptional digital solutions for clients across industries."
description="Our track record of delivering exceptional digital solutions."
tag="Our Impact"
tagIcon={Sparkles}
metrics={[
@@ -154,125 +123,38 @@ export default function WebAgencyThemePage() {
/>
<TestimonialCardFive
title="What Our Clients Say"
description="Hear from the brands we've helped transform through innovative digital solutions."
description="Hear from the brands we've helped transform."
tag="Testimonials"
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: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero2.webp",
avatarAlt: "Sarah Johnson",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/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: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero3.webp",
avatarAlt: "Michael Chen",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/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: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero4.webp",
avatarAlt: "Emil Svenson",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/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: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero5.webp",
avatarAlt: "David Park",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero5.webp",
imageAlt: "InnovateCo project showcase",
},
{ id: "1", name: "Sarah Johnson", date: "CEO, TechStart", title: "Transformed Our Presence", tag: "Review", quote: "Working with Onion Group was a game-changer. They delivered a website that converts visitors at twice our previous rate.", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero2.webp", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero2.webp?_wi=2" },
{ id: "2", name: "Michael Chen", date: "Founder, GrowthLab", title: "Exceeded Expectations", tag: "Review", quote: "The team's attention to detail and creative vision brought our brand to life in ways we never imagined.", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero3.webp", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero3.webp?_wi=2" }
]}
textboxLayout="default"
useInvertedBackground={false}
/>
<FeatureCardTen
tag="How We Work"
tagIcon={Layers}
title="Our Process"
description="A structured approach that turns your vision into results, every step of the way."
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
features={[
{
title: "Discovery & Strategy",
description: "We start by understanding your goals, audience, and market to build a roadmap tailored to your business.",
media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/services/how1.webp", imageAlt: "Discovery and strategy" },
reverse: false,
items: [
{ icon: Code, text: "In-depth research and audits" },
{ icon: Zap, text: "Clear goals and KPIs defined" },
{ icon: Check, text: "Custom project roadmap" },
],
},
{
title: "Design & Prototyping",
description: "We translate strategy into visual concepts, iterating with you until every detail feels right.",
media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/services/how2.webp", imageAlt: "Design and prototyping" },
reverse: true,
items: [
{ icon: Palette, text: "Wireframes and mockups" },
{ icon: Layers, text: "Interactive prototypes" },
{ icon: Check, text: "Client feedback loops" },
],
},
{
title: "Build & Launch",
description: "We develop, test, and deploy your project with precision, ensuring a smooth launch and measurable impact.",
media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/services/how3.webp", imageAlt: "Build and launch" },
reverse: false,
items: [
{ icon: TrendingUp, text: "Agile development sprints" },
{ icon: Globe, text: "QA testing and optimization" },
{ icon: Check, text: "Launch support and analytics" },
],
},
]}
/>
<ContactText
text="Ready to transform your digital presence? Let's create something extraordinary together."
buttons={[
{ text: "Start a Project", href: "#contact" },
{ text: "Schedule a Call", href: "#call" },
]}
background={{ variant: "canvas-reveal" }}
useInvertedBackground={false}
/>
<FooterCard
logoText="Studio"
copyrightText="© 2025 Studio. All rights reserved."
socialLinks={[
{ icon: Twitter, href: "https://twitter.com", ariaLabel: "Follow us on Twitter" },
{ icon: Instagram, href: "https://instagram.com", ariaLabel: "Follow us on Instagram" },
{ icon: Linkedin, href: "https://linkedin.com", ariaLabel: "Connect on LinkedIn" },
<div id="contact" data-section="contact">
<ContactSplitForm
title="Contact Our Regional Hubs"
description="Connect with us in Como, Lugano, or Milan. Let's discuss your upcoming project."
inputs={[
{ name: "name", type: "text", placeholder: "Full Name", required: true },
{ name: "email", type: "email", placeholder: "Work Email", required: true },
{ name: "office", type: "select", placeholder: "Preferred Office (Como, Lugano, Milan)" },
{ name: "company", type: "text", placeholder: "Company Name" }
]}
textarea={{ name: "message", placeholder: "Tell us about your project requirements...", rows: 4, required: true }}
useInvertedBackground={true}
/>
</div>
<FooterLogoEmphasis
logoText="Onion Group"
columns={[
{ items: [{ label: "Home", href: "#home" }, { label: "About", href: "#about" }, { label: "Services", href: "#services" }] },
{ items: [{ label: "Contact", href: "#contact" }, { label: "Privacy Policy" }, { label: "Terms of Service" }] }
]}
/>
</ReactLenis>
</ThemeProvider>
);
}
}

View File

@@ -11,7 +11,7 @@ html {
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-inter-tight), sans-serif;
font-family: var(--font-dm-sans), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
h4,
h5,
h6 {
font-family: var(--font-inter-tight), sans-serif;
font-family: var(--font-dm-serif-display), serif;
}

View File

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