Merge version_2 into main #1

Merged
bender merged 3 commits from version_2 into main 2026-06-05 10:07:23 +00:00
3 changed files with 305 additions and 99 deletions

View File

@@ -0,0 +1,144 @@
"use client";
import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
import TeamCardSix from "@/components/sections/team/TeamCardSix";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterBase from "@/components/sections/footer/FooterBase";
import { Award, Users, ArrowUpRight } from "lucide-react";
export default function EsmeAgencyPage() {
return (
<ThemeProvider
defaultButtonVariant="text-stagger"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="medium"
sizing="medium"
background="none"
cardStyle="glass-elevated"
primaryButtonStyle="metallic"
secondaryButtonStyle="glass"
headingFontWeight="medium"
>
<ReactLenis root>
<NavbarLayoutFloatingOverlay
brandName="Webild"
navItems={[
{ name: "Home", id: "/" },
{ name: "Work", id: "/#work" },
{ name: "Services", id: "/#services" },
{ name: "About Esme Agency", id: "/esme-agency" },
{ name: "Contact", id: "/#contact" }
]}
button={{ text: "Get Started", href: "/#contact" }}
/>
<div id="agency-profile" data-section="agency-profile">
<FeatureCardOne
title="Esme Agency: Crafting Digital Excellence"
description="We are a full-service digital agency dedicated to helping brands thrive in the online world. With a passion for design and a commitment to results, we transform ideas into impactful digital experiences."
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
gridVariant="two-items-per-row"
features={[
{
title: "Our Vision", description: "To be the leading partner for businesses seeking innovative and effective digital solutions, driving growth and creating lasting brand value.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EgxsIZfN2LKb5GnEtVw4KR6nvX/uploaded-1780653929909-t92ebrh4.png", imageAlt: "Our Vision"
},
{
title: "Our Mission", description: "Empowering brands with bespoke web design, robust development, and strategic digital marketing that captivates audiences and delivers measurable success.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EgxsIZfN2LKb5GnEtVw4KR6nvX/uploaded-1780653929909-hfqibpql.png", imageAlt: "Our Mission"
}
]}
/>
</div>
<div id="case-studies" data-section="case-studies">
<FeatureCardOne
title="Impactful Case Studies"
description="Explore our recent projects and see how Esme Agency delivers exceptional results for diverse clients."
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
gridVariant="three-columns-all-equal-width"
features={[
{
title: "E-commerce Redesign", description: "Transformed an online store, increasing conversions by 40% with a modern UX and robust backend.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EgxsIZfN2LKb5GnEtVw4KR6nvX/uploaded-1780653929909-qabv38rs.png", imageAlt: "Case Study 1", button: { text: "View Details", href: "#" }
},
{
title: "SaaS Platform Launch", description: "Developed a comprehensive SaaS platform from concept to launch, securing early adopters and funding.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EgxsIZfN2LKb5GnEtVw4KR6nvX/uploaded-1780653929909-19lsma9l.png", imageAlt: "Case Study 2", button: { text: "View Details", href: "#" }
},
{
title: "Brand Identity & Website", description: "Crafted a distinctive brand identity and responsive website for a new startup, boosting market entry.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EgxsIZfN2LKb5GnEtVw4KR6nvX/uploaded-1780653929909-l42f1hi3.png", imageAlt: "Case Study 3", button: { text: "View Details", href: "#" }
}
]}
/>
</div>
<div id="team-section" data-section="team-section">
<TeamCardSix
title="Meet the Esme Agency Team"
description="Our diverse team of strategists, designers, and developers are united by a passion for digital innovation."
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
gridVariant="three-columns-all-equal-width"
members={[
{ id: "1", name: "Alice Johnson", role: "Creative Director", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/avatar-1.webp" },
{ id: "2", name: "Robert Smith", role: "Lead Developer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/avatar-2.webp" },
{ id: "3", name: "Emily White", role: "Marketing Strategist", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/avatar-3.webp" },
{ id: "4", name: "David Green", role: "UI/UX Designer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/avatar-4.webp" }
]}
/>
</div>
<ContactCTA
tag="Get in Touch"
title="Ready to Transform Your Digital Presence?"
description="Let's build something extraordinary together. Get in touch and let's discuss your next project."
background={{ variant: "rotated-rays-animated" }}
buttons={[
{ text: "Start Your Project", href: "/#contact" },
{ text: "View Our Work", href: "/#work" }
]}
buttonAnimation="slide-up"
useInvertedBackground={false}
/>
<FooterBase
logoText="Webild"
copyrightText="© 2026 | Webild"
columns={[
{
title: "Company", items: [
{ label: "Home", href: "/" },
{ label: "About Esme Agency", href: "/esme-agency" },
{ label: "Services", href: "/#services" },
{ label: "Work", href: "/#work" },
{ label: "Contact", href: "/#contact" }
]
},
{
title: "Services", items: [
{ label: "Web Development", href: "#" },
{ label: "SEO", href: "#" },
{ label: "Branding", href: "#" },
{ label: "UI/UX Design", href: "#" }
]
},
{
title: "Connect", items: [
{ label: "Twitter", href: "#" },
{ label: "LinkedIn", href: "#" },
{ label: "Instagram", href: "#" },
{ label: "Dribbble", href: "#" }
]
}
]}
/>
</ReactLenis>
</ThemeProvider>
);
}

View File

@@ -0,0 +1,129 @@
"use client";
import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
import FeatureCardTwentyNine from "@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine";
import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
import FooterBase from "@/components/sections/footer/FooterBase";
import { Sparkles, ArrowUpRight, Instagram, Linkedin, Camera, Film, Users, Star } from "lucide-react";
export default function OneTakeStudioPage() {
return (
<ThemeProvider
defaultButtonVariant="text-stagger"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="medium"
sizing="medium"
background="none"
cardStyle="glass-elevated"
primaryButtonStyle="metallic"
secondaryButtonStyle="glass"
headingFontWeight="medium"
>
<ReactLenis root>
<NavbarLayoutFloatingOverlay
brandName="Webild"
navItems={[
{ name: "Work", href: "/onetake-studio" },
{ name: "Services", id: "services" },
{ name: "About", id: "about" },
{ name: "Contact", id: "contact" }
]}
button={{ text: "Get Started", href: "#contact" }}
/>
<div id="studio-profile" data-section="studio-profile">
<InlineImageSplitTextAbout
heading={[{ type: 'text', content: 'OneTake Studio: Crafting Visual Stories' }]}
description="OneTake Studio is a leading creative agency specializing in high-quality photography and videography. We bring visions to life through stunning visuals, compelling narratives, and meticulous attention to detail. From concept to final delivery, our passion is to tell your unique story with unparalleled artistry and technical excellence."
useInvertedBackground={false}
buttons={[
{ text: "View Our Work", href: "#project-gallery" },
{ text: "Contact Us", href: "#contact" }
]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EgxsIZfN2LKb5GnEtVw4KR6nvX/uploaded-1780653929909-hfqibpql.png"
imageAlt="OneTake Studio Profile"
/>
</div>
<div id="project-gallery" data-section="project-gallery">
<FeatureCardTwentyNine
title="Our Project Gallery"
description="Explore a curated selection of our recent photography and videography projects."
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
gridVariant="four-items-2x2-equal-grid"
features={[
{
title: "Cinematic Event Coverage", description: "Capturing the essence of your special moments with a cinematic touch.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EgxsIZfN2LKb5GnEtVw4KR6nvX/uploaded-1780653929909-l42f1hi3.png", imageAlt: "Cinematic Event", titleImageSrc: "", buttonText: "View Details", buttonHref: "#"},
{
title: "Brand Storytelling", description: "Creating powerful visual narratives that elevate your brand's message.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EgxsIZfN2LKb5GnEtVw4KR6nvX/uploaded-1780653929909-qabv38rs.png", imageAlt: "Brand Storytelling", titleImageSrc: "", buttonText: "View Details", buttonHref: "#"},
{
title: "Product Photography", description: "Showcasing your products with high-quality, engaging imagery.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EgxsIZfN2LKb5GnEtVw4KR6nvX/uploaded-1780653929909-t92ebrh4.png", imageAlt: "Product Photography", titleImageSrc: "", buttonText: "View Details", buttonHref: "#"},
{
title: "Portrait Sessions", description: "Capturing unique personalities with professional and artistic portraits.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EgxsIZfN2LKb5GnEtVw4KR6nvX/uploaded-1780653929909-19lsma9l.png", imageAlt: "Portrait Session", titleImageSrc: "", buttonText: "View Details", buttonHref: "#"},
]}
/>
</div>
<div id="testimonials-section" data-section="testimonials-section">
<TestimonialCardThirteen
title="What Our Clients Say"
description="Hear from those who have experienced the OneTake Studio difference."
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
showRating={true}
carouselMode="buttons"
testimonials={[
{
id: "1", name: "Alice Chen", handle: "@alice_c", testimonial: "OneTake Studio transformed our brand's visual identity. Their team is incredibly talented and professional. The results were beyond our expectations!", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp"},
{
id: "2", name: "Mark Johnson", handle: "@markj_films", testimonial: "The cinematic quality they brought to our event coverage was outstanding. Every shot was perfect, telling our story beautifully.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-2.webp"},
{
id: "3", name: "Sophia Lee", handle: "@sophia.lee", testimonial: "Professionalism and creativity combined! OneTake Studio truly understood our vision and delivered stunning product photography.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-3.webp"},
]}
/>
</div>
<FooterBase
logoText="Webild"
copyrightText="© 2026 | Webild"
columns={[
{
title: "Company", items: [
{ label: "About", href: "#about" },
{ label: "Services", href: "#services" },
{ label: "Work", href: "/onetake-studio" },
{ label: "Contact", href: "#contact" },
],
},
{
title: "Services", items: [
{ label: "Web Development", href: "#" },
{ label: "SEO", href: "#" },
{ label: "Branding", href: "#" },
{ label: "UI/UX Design", href: "#" },
],
},
{
title: "Connect", items: [
{ label: "Twitter", href: "#" },
{ label: "LinkedIn", href: "#" },
{ label: "Instagram", href: "#" },
{ label: "Dribbble", href: "#" },
],
},
]}
/>
</ReactLenis>
</ThemeProvider>
);
}

View File

@@ -33,7 +33,7 @@ export default function WebAgency2Page() {
<NavbarLayoutFloatingOverlay
brandName="Webild"
navItems={[
{ name: "Work", id: "work" },
{ name: "Work", href: "/onetake-studio" },
{ name: "Services", id: "services" },
{ name: "About", id: "about" },
{ name: "Contact", id: "contact" },
@@ -49,7 +49,7 @@ export default function WebAgency2Page() {
background={{ variant: "canvas-reveal" }}
buttons={[
{ text: "Start Project", href: "#contact" },
{ text: "View Work", href: "#work" },
{ text: "View Work", href: "/onetake-studio" },
]}
buttonAnimation="slide-up"
carouselPosition="right"
@@ -68,6 +68,7 @@ export default function WebAgency2Page() {
]}
carouselItemClassName="!aspect-[4/5]"
/>
<div id="work" data-section="work"></div>
<FeatureBento
title="Our Services"
description="We offer a full suite of digital services to help your brand stand out online."
@@ -78,28 +79,18 @@ export default function WebAgency2Page() {
buttonAnimation="slide-up"
features={[
{
title: "SEO",
description: "We optimize your website to rank higher on search engines and drive organic traffic.",
bentoComponent: "marquee",
centerIcon: Search,
variant: "text",
texts: ["Keywords", "Backlinks", "Meta Tags", "Organic Traffic", "Rankings", "Analytics", "SERP", "Indexing"],
title: "SEO", description: "We optimize your website to rank higher on search engines and drive organic traffic.", bentoComponent: "marquee", centerIcon: Search,
variant: "text", texts: ["Keywords", "Backlinks", "Meta Tags", "Organic Traffic", "Rankings", "Analytics", "SERP", "Indexing"],
},
{
title: "Web Development",
description: "Custom-built websites that are fast, responsive, and designed to convert.",
bentoComponent: "media-stack",
items: [
title: "Web Development", description: "Custom-built websites that are fast, responsive, and designed to convert.", bentoComponent: "media-stack", items: [
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-2.webp", imageAlt: "Web project - AgentFlow AI platform" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-1.webp", imageAlt: "Web project - Architecture studio" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-3.webp", imageAlt: "Web project - Summit Roofing" },
],
},
{
title: "Branding",
description: "Build a memorable brand identity that resonates with your audience.",
bentoComponent: "media-stack",
items: [
title: "Branding", description: "Build a memorable brand identity that resonates with your audience.", bentoComponent: "media-stack", items: [
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp", imageAlt: "Brand project 1" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp", imageAlt: "Brand project 2" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp", imageAlt: "Brand project 3" },
@@ -112,50 +103,25 @@ export default function WebAgency2Page() {
description="A selection of projects we've crafted for clients across industries."
textboxLayout="default"
useInvertedBackground={false}
buttons={[{ text: "View All Work", href: "#work" }]}
buttons={[{ text: "View All Work", href: "/onetake-studio" }]}
buttonAnimation="slide-up"
cardClassName="!h-auto aspect-video"
features={[
{
title: "Umbra Skincare",
description: "Luxury fragrance e-commerce",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-1.webp",
imageAlt: "Umbra Skincare website",
buttonIcon: ArrowUpRight,
buttonHref: "#",
},
title: "Umbra Skincare", description: "Luxury fragrance e-commerce", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-1.webp", imageAlt: "Umbra Skincare website", buttonIcon: ArrowUpRight,
buttonHref: "#"},
{
title: "Luxuria Travel",
description: "Bespoke luxury travel experiences",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-2.webp",
imageAlt: "Luxuria Travel website",
buttonIcon: ArrowUpRight,
buttonHref: "#",
},
title: "Luxuria Travel", description: "Bespoke luxury travel experiences", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-2.webp", imageAlt: "Luxuria Travel website", buttonIcon: ArrowUpRight,
buttonHref: "#"},
{
title: "Dental Care",
description: "Premier dental practice",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-3.webp",
imageAlt: "Luxury Dental Care website",
buttonIcon: ArrowUpRight,
buttonHref: "#",
},
title: "Dental Care", description: "Premier dental practice", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-3.webp", imageAlt: "Luxury Dental Care website", buttonIcon: ArrowUpRight,
buttonHref: "#"},
{
title: "Summit Roofing",
description: "Professional roofing services",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-4.webp",
imageAlt: "Summit Roofing website",
buttonIcon: ArrowUpRight,
buttonHref: "#",
},
title: "Summit Roofing", description: "Professional roofing services", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-4.webp", imageAlt: "Summit Roofing website", buttonIcon: ArrowUpRight,
buttonHref: "#"},
{
title: "Dubai Real Estate",
description: "Luxury property listings",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-5.webp",
imageAlt: "Dubai Real Estate website",
buttonIcon: ArrowUpRight,
buttonHref: "#",
},
title: "Dubai Real Estate", description: "Luxury property listings", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-5.webp", imageAlt: "Dubai Real Estate website", buttonIcon: ArrowUpRight,
buttonHref: "#"},
]}
/>
<FeatureBento
@@ -166,14 +132,9 @@ export default function WebAgency2Page() {
animationType="slide-up"
features={[
{
title: "All Devices Optimization",
description: "Pixel-perfect websites that look stunning on every screen size and device.",
bentoComponent: "phone",
statusIcon: Lock,
title: "All Devices Optimization", description: "Pixel-perfect websites that look stunning on every screen size and device.", bentoComponent: "phone", statusIcon: Lock,
alertIcon: Monitor,
alertTitle: "Responsive check",
alertMessage: "All breakpoints passed",
apps: [
alertTitle: "Responsive check", alertMessage: "All breakpoints passed", apps: [
{ name: "Phone", icon: Phone },
{ name: "SMS", icon: MessageCircle },
{ name: "Books", icon: BookOpen },
@@ -185,29 +146,17 @@ export default function WebAgency2Page() {
],
},
{
title: "Secure Hosting",
description: "Enterprise-grade security and 99.9% uptime for your website.",
bentoComponent: "reveal-icon",
icon: Shield,
title: "Secure Hosting", description: "Enterprise-grade security and 99.9% uptime for your website.", bentoComponent: "reveal-icon", icon: Shield,
},
{
title: "Fast Turnaround",
description: "From concept to launch in record time without sacrificing quality.",
bentoComponent: "timeline",
heading: "Project Launch",
subheading: "Week 1",
items: [
title: "Fast Turnaround", description: "From concept to launch in record time without sacrificing quality.", bentoComponent: "timeline", heading: "Project Launch", subheading: "Week 1", items: [
{ label: "Discovery & wireframes", detail: "Day 1-3" },
{ label: "Design & development", detail: "Day 4-10" },
{ label: "Testing & deployment", detail: "Day 11-14" },
],
completedLabel: "Live",
},
completedLabel: "Live"},
{
title: "Seamless Integrations",
description: "Connect with the tools you already use — CRMs, analytics, payments, and more.",
bentoComponent: "orbiting-icons",
centerIcon: Puzzle,
title: "Seamless Integrations", description: "Connect with the tools you already use — CRMs, analytics, payments, and more.", bentoComponent: "orbiting-icons", centerIcon: Puzzle,
items: [
{ icon: Shield },
{ icon: Monitor },
@@ -216,10 +165,7 @@ export default function WebAgency2Page() {
],
},
{
title: "Growth Trends",
description: "Data-driven insights to optimize your search presence and drive traffic.",
bentoComponent: "line-chart",
},
title: "Growth Trends", description: "Data-driven insights to optimize your search presence and drive traffic.", bentoComponent: "line-chart"},
]}
/>
<TestimonialCardFifteen
@@ -254,21 +200,11 @@ export default function WebAgency2Page() {
animationType="slide-up"
negativeCard={{
items: [
"Generic templates with no personality",
"Slow load times and poor performance",
"No SEO strategy or search visibility",
"Outdated design that hurts credibility",
"No ongoing support after launch",
],
"Generic templates with no personality", "Slow load times and poor performance", "No SEO strategy or search visibility", "Outdated design that hurts credibility", "No ongoing support after launch"],
}}
positiveCard={{
items: [
"Custom designs tailored to your brand",
"Lightning-fast performance on all devices",
"Built-in SEO to drive organic traffic",
"Modern design that builds trust",
"Dedicated support and maintenance",
],
"Custom designs tailored to your brand", "Lightning-fast performance on all devices", "Built-in SEO to drive organic traffic", "Modern design that builds trust", "Dedicated support and maintenance"],
}}
/>
<TeamCardFive
@@ -305,7 +241,7 @@ export default function WebAgency2Page() {
background={{ variant: "rotated-rays-animated" }}
buttons={[
{ text: "Start Your Project", href: "#contact" },
{ text: "View Our Work", href: "#work" },
{ text: "View Our Work", href: "/onetake-studio" },
]}
buttonAnimation="slide-up"
useInvertedBackground={false}
@@ -315,17 +251,15 @@ export default function WebAgency2Page() {
copyrightText="© 2026 | Webild"
columns={[
{
title: "Company",
items: [
title: "Company", items: [
{ label: "About", href: "#about" },
{ label: "Services", href: "#services" },
{ label: "Work", href: "#work" },
{ label: "Work", href: "/onetake-studio" },
{ label: "Contact", href: "#contact" },
],
},
{
title: "Services",
items: [
title: "Services", items: [
{ label: "Web Development", href: "#" },
{ label: "SEO", href: "#" },
{ label: "Branding", href: "#" },
@@ -333,8 +267,7 @@ export default function WebAgency2Page() {
],
},
{
title: "Connect",
items: [
title: "Connect", items: [
{ label: "Twitter", href: "#" },
{ label: "LinkedIn", href: "#" },
{ label: "Instagram", href: "#" },