4 Commits

Author SHA1 Message Date
2ec0bc7b30 Update theme fonts 2026-04-26 20:39:34 +00:00
9e44fa5257 Update theme fonts 2026-04-26 20:39:34 +00:00
6387df3127 Update src/app/page.tsx 2026-04-26 16:52:42 +00:00
1727b84fd1 Update src/app/page.tsx 2026-04-26 16:52:04 +00:00
3 changed files with 162 additions and 195 deletions

View File

@@ -6,20 +6,22 @@ import "@/lib/gsap-setup";
import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag";
import { getVisualEditScript } from "@/utils/visual-edit-script";
import { Libre_Baskerville } from "next/font/google";
const halant = Halant({
variable: "--font-halant",
export const metadata: Metadata = { title: 'Digital Transformation | Before & After Results | Webild', description: 'Transform your brand with expert web design and structured development. Explore our before-and-after results, schedule your services, and request a free quote today.' };
const libreBaskerville = Libre_Baskerville({
variable: "--font-libre-baskerville",
subsets: ["latin"],
weight: ["300", "400", "500", "600", "700"],
weight: ["400", "700"],
});
const inter = Inter({
variable: "--font-inter",
subsets: ["latin"],
});
export const metadata: Metadata = { title: 'Digital Transformation | Before & After Results | Webild', description: 'Transform your brand with expert web design and structured development. Explore our before-and-after results, schedule your services, and request a free quote today.' };
export default function RootLayout({
children,
}: Readonly<{
@@ -28,9 +30,7 @@ export default function RootLayout({
return (
<html lang="en" suppressHydrationWarning>
<ServiceWrapper>
<body
className={`${halant.variable} ${inter.variable} antialiased`}
>
<body className={`${libreBaskerville.variable} ${inter.variable} antialiased`}>
<Tag />
{children}
<script

View File

@@ -4,16 +4,15 @@ import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
import PricingCardOne from "@/components/sections/pricing/PricingCardOne";
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
import TeamCardFive from "@/components/sections/team/TeamCardFive";
import FaqBase from "@/components/sections/faq/FaqBase";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterBase from "@/components/sections/footer/FooterBase";
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
import { Sparkles, Search, ArrowUpRight, Monitor, Shield, Zap, Puzzle, TrendingUp, Lock, Phone, MessageCircle, BookOpen, Tv, Camera, Music, Settings, Award, Users } from "lucide-react";
import { Sparkles, Search, ArrowUpRight, Zap, TrendingUp, Award, CheckCircle } from "lucide-react";
export default function WebAgency2Page() {
return (
@@ -25,191 +24,159 @@ export default function WebAgency2Page() {
sizing="medium"
background="none"
cardStyle="glass-elevated"
primaryButtonStyle="metallic"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="medium"
>
<ReactLenis root>
<NavbarLayoutFloatingOverlay
brandName="Webild"
navItems={[
{ name: "Results", id: "results" },
{ name: "Services", id: "services" },
{ name: "About", id: "about" },
{ name: "Contact", id: "contact" },
]}
button={{ text: "Get Free Quote", href: "#contact" }}
/>
<HeroSplitDoubleCarousel
title="See Your Digital Potential Realized"
description="We don't just design websites; we architect high-performance digital journeys. Explore our proven before-and-after results and discover how our structured services propel your business forward."
tag="Proven Results Architecture"
tagIcon={Sparkles}
tagAnimation="slide-up"
background={{ variant: "canvas-reveal" }}
buttons={[
{ text: "Get Free Quote", href: "#contact" },
{ text: "See Results", href: "#results" },
]}
buttonAnimation="slide-up"
carouselPosition="right"
leftCarouselItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-pc-monitors-desk-used-monitoring-data-center-devices-energy_482257-118092.jpg", imageAlt: "Before: Outdated business interface" },
{ imageSrc: "http://img.b2bpic.net/free-photo/businessman-studying-infographics-performance-metrics_482257-122632.jpg", imageAlt: "After: Modern SaaS dashboard" },
{ imageSrc: "http://img.b2bpic.net/free-photo/top-down-view-software-engineer-putting-face-hands-frustration_482257-111316.jpg", imageAlt: "Before: Low engagement landing page" },
{ imageSrc: "http://img.b2bpic.net/free-photo/closeup-african-american-woman-typing-laptop_482257-131626.jpg", imageAlt: "After: Optimized high-conversion page" },
]}
rightCarouselItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/fashion-young-girl-sitting-summer-cafe_1157-20648.jpg", imageAlt: "After: Elegant e-commerce storefront" },
{ imageSrc: "http://img.b2bpic.net/free-photo/webpage-content-design-website-icon_53876-120651.jpg", imageAlt: "Before: Unstructured layout" },
{ imageSrc: "http://img.b2bpic.net/free-photo/blank-white-card-pattern-glass_53876-125897.jpg", imageAlt: "After: Professional branding identity" },
]}
carouselItemClassName="!aspect-[4/5]"
/>
<FeatureBento
title="Our Scheduled Services"
description="Transparent planning, iterative growth, and clear milestones for every client."
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
buttons={[{ text: "Book a Session", href: "#contact" }]}
buttonAnimation="slide-up"
features={[
{
title: "Strategy Planning", description: "Scheduled deep-dives into your business goals to map your digital roadmap.", bentoComponent: "marquee", centerIcon: Search,
variant: "text", texts: ["Discovery", "Auditing", "Roadmapping", "Targeting", "Growth Plan", "Competitor Analysis"],
},
{
title: "Implementation", description: "Agile development cycles ensuring consistent progress from day one.", bentoComponent: "media-stack", items: [
{ imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-presenting-new-strategy-plans-whiteboard-her-colleagues-covid19-pandemic_637285-10663.jpg", imageAlt: "Development workflow" },
{ imageSrc: "http://img.b2bpic.net/free-photo/focus-lines-code-laptop-screen-used-by-data-center-engineers_482257-117920.jpg", imageAlt: "Code quality assurance" },
{ imageSrc: "http://img.b2bpic.net/free-photo/male-system-engineer-analyzing-big-data-computer-checking-cloud-computing-network-digital-servers-young-it-technician-inspecting-modern-data-center-digitalization-handheld-shot_482257-59941.jpg", imageAlt: "System deployment" },
],
},
{
title: "Maintenance", description: "Ongoing support to ensure peak performance and security after launch.", bentoComponent: "media-stack", items: [
{ imageSrc: "http://img.b2bpic.net/free-photo/high-end-empty-work-environment-used-business-industry-corporate-culture_482257-125734.jpg", imageAlt: "Monitoring systems" },
{ imageSrc: "http://img.b2bpic.net/free-photo/cyber-security-concept-digital-art_23-2151637781.jpg", imageAlt: "Security patching" },
{ imageSrc: "http://img.b2bpic.net/free-photo/dynamic-data-visualization-3d_23-2151904328.jpg", imageAlt: "Optimization updates" },
],
},
]}
/>
<FeatureCardTwentySix
title="Before & After Results"
description="See how our structured approach creates tangible business improvements."
textboxLayout="default"
useInvertedBackground={false}
buttons={[{ text: "See Full Portfolio", href: "#work" }]}
buttonAnimation="slide-up"
cardClassName="!h-auto aspect-video"
features={[
{
title: "Fashion Retailer", description: "Conversion increase by 45% post-redesign", imageSrc: "http://img.b2bpic.net/free-photo/sales-promotion-fashion-shopping-discount_53876-123615.jpg", imageAlt: "Fashion e-commerce comparison", buttonIcon: ArrowUpRight,
buttonHref: "#"},
{
title: "Legal Firm", description: "Traffic growth through SEO restructuring", imageSrc: "http://img.b2bpic.net/free-photo/photorealistic-lawyer-environment_23-2151152218.jpg", imageAlt: "Legal service branding shift", buttonIcon: ArrowUpRight,
buttonHref: "#"},
{
title: "Tech Startup", description: "User retention improved by 30%", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-laptop_23-2151004294.jpg", imageAlt: "SaaS UX overhaul", buttonIcon: ArrowUpRight,
buttonHref: "#"},
{
title: "Hospitality Group", description: "Mobile booking speed improved by 60%", imageSrc: "http://img.b2bpic.net/free-photo/man-woman-checking-their-phones-even-their-bathroom_23-2149017790.jpg", imageAlt: "Hospitality mobile results", buttonIcon: ArrowUpRight,
buttonHref: "#"},
]}
/>
<TestimonialCardFifteen
testimonial="The schedule-driven approach gave us complete clarity on our project's progress. Seeing the 'before' mess transform into the 'after' success was incredible."
rating={5}
author="— Elena V., Founder at Global Retail"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/african-american-curly-businesswoman-standing-with-folded-hands-portrait-successful-confident-young-pretty-female-office-employer-suit-posing-work-business-company-management-concept_74855-6735.jpg", alt: "Client" },
]}
ratingAnimation="slide-up"
avatarsAnimation="slide-up"
useInvertedBackground={false}
/>
<MetricCardOne
title="Performance Metrics"
description="Tangible results driven by scheduled design and engineering sprints."
textboxLayout="default"
useInvertedBackground={false}
gridVariant="uniform-all-items-equal"
animationType="slide-up"
metrics={[
{ id: "perf", value: "45%", title: "Avg. Conversion", description: "Average increase in user actions", icon: Award },
{ id: "speed", value: "80%", title: "Load Speed", description: "Reduction in average bounce rate", icon: Zap },
{ id: "growth", value: "2x", title: "Traffic Growth", description: "Organic search improvement rate", icon: TrendingUp },
]}
/>
<TeamCardFive
title="Our Team Architecture"
description="Built to support your scheduled growth."
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
mediaClassName="object-[65%_center]"
team={[
{ id: "1", name: "Alex Rivers", role: "Strategy Lead", imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-young-businesswoman_329181-15813.jpg", imageAlt: "Strategy Lead" },
{ id: "2", name: "Jamie Chen", role: "Design Director", imageSrc: "http://img.b2bpic.net/free-photo/artist-thinking_23-2147781630.jpg", imageAlt: "Design Director" },
{ id: "3", name: "Taylor Scott", role: "Technical Lead", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-typing-keyboard_23-2149101167.jpg", imageAlt: "Technical Lead" },
]}
/>
<FaqBase
title="How We Work"
description="Understand the process behind your project's success."
textboxLayout="default"
useInvertedBackground={false}
faqsAnimation="slide-up"
faqs={[
{ id: "1", title: "How do you manage project scheduling?", content: "We break every project into 2-week sprints, ensuring you always know exactly what is being delivered and when." },
{ id: "2", title: "What makes your 'before and after' results so consistent?", content: "Our data-first approach ensures every design decision is backed by analytics, resulting in predictable performance gains." },
{ id: "3", title: "Can I get a quote before we start?", content: "Yes, use the free quote button at the top to initiate a discovery call. We'll provide a detailed scope based on your specific requirements." },
{ id: "4", title: "Do you support existing platforms?", content: "We can audit your current site and provide a transition plan that maintains SEO and brand equity during the redesign." },
]}
/>
<ContactCTA
tag="Ready to Begin?"
title="Start Your Digital Evolution Today"
description="Get your free quote and review our projected results for your industry."
background={{ variant: "rotated-rays-animated" }}
buttons={[
{ text: "Get Free Quote", href: "#contact" },
{ text: "View Case Studies", href: "#results" },
]}
buttonAnimation="slide-up"
useInvertedBackground={false}
/>
<FooterBase
logoText="Webild"
copyrightText="© 2026 | Webild"
columns={[
{
title: "Platform", items: [
{ label: "Results", href: "#results" },
{ label: "Services", href: "#services" },
{ label: "Process", href: "#" },
{ label: "Contact", href: "#contact" },
],
},
{
title: "Solutions", items: [
{ label: "UI/UX Audit", href: "#" },
{ label: "Development", href: "#" },
{ label: "SEO Scaling", href: "#" },
{ label: "Branding", href: "#" },
],
},
{
title: "Support", items: [
{ label: "Get a Quote", href: "#contact" },
{ label: "Documentation", href: "#" },
{ label: "Status", href: "#" },
{ label: "Privacy", href: "#" },
],
},
]}
/>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Webild"
navItems={[
{ name: "Plans", id: "plans" },
{ name: "Results", id: "results" },
{ name: "Services", id: "services" },
{ name: "Contact", id: "contact" },
]}
button={{ text: "Get Free Quote", href: "#contact" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDoubleCarousel
title="See Your Digital Potential Realized"
description="We don't just design websites; we architect high-performance digital journeys. Explore our proven before-and-after results and discover how our structured services propel your business forward."
tag="Proven Results Architecture"
tagIcon={Sparkles}
tagAnimation="slide-up"
background={{ variant: "canvas-reveal" }}
buttons={[
{ text: "Get Free Quote", href: "#contact" },
{ text: "See Results", href: "#results" },
]}
buttonAnimation="slide-up"
carouselPosition="right"
leftCarouselItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-pc-monitors-desk-used-monitoring-data-center-devices-energy_482257-118092.jpg", imageAlt: "Before: Outdated business interface" },
{ imageSrc: "http://img.b2bpic.net/free-photo/businessman-studying-infographics-performance-metrics_482257-122632.jpg", imageAlt: "After: Modern SaaS dashboard" },
{ imageSrc: "http://img.b2bpic.net/free-photo/top-down-view-software-engineer-putting-face-hands-frustration_482257-111316.jpg", imageAlt: "Before: Low engagement landing page" },
{ imageSrc: "http://img.b2bpic.net/free-photo/closeup-african-american-woman-typing-laptop_482257-131626.jpg", imageAlt: "After: Optimized high-conversion page" },
]}
rightCarouselItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/fashion-young-girl-sitting-summer-cafe_1157-20648.jpg", imageAlt: "After: Elegant e-commerce storefront" },
{ imageSrc: "http://img.b2bpic.net/free-photo/webpage-content-design-website-icon_53876-120651.jpg", imageAlt: "Before: Unstructured layout" },
{ imageSrc: "http://img.b2bpic.net/free-photo/blank-white-card-pattern-glass_53876-125897.jpg", imageAlt: "After: Professional branding identity" },
]}
carouselItemClassName="!aspect-[4/5]"
/>
</div>
<div id="plans" data-section="plans">
<PricingCardOne
title="Transparent Service Plans"
description="Clear, milestone-driven packages to scale your digital presence."
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
plans={[
{ id: "basic", badge: "Start", badgeIcon: CheckCircle, price: "$1,999", subtitle: "Essential growth foundation", features: ["Strategy audit", "Landing page design", "SEO basics"] },
{ id: "pro", badge: "Scaling", badgeIcon: CheckCircle, price: "$4,999", subtitle: "Comprehensive performance", features: ["Full site architecture", "Development sprints", "Performance monitoring"] },
{ id: "custom", badge: "Enterprise", badgeIcon: CheckCircle, price: "Custom", subtitle: "Tailored high-scale solution", features: ["Dedicated strategy lead", "Ongoing maintenance", "Custom development"] }
]}
/>
</div>
<div id="results" data-section="results">
<FeatureCardTwentySix
title="Before & After Results"
description="See how our structured approach creates tangible business improvements."
textboxLayout="default"
useInvertedBackground={false}
features={[
{ title: "Fashion Retailer", description: "Conversion increase by 45% post-redesign", imageSrc: "http://img.b2bpic.net/free-photo/sales-promotion-fashion-shopping-discount_53876-123615.jpg", imageAlt: "Fashion e-commerce comparison", buttonIcon: ArrowUpRight, buttonHref: "#" },
{ title: "Legal Firm", description: "Traffic growth through SEO restructuring", imageSrc: "http://img.b2bpic.net/free-photo/photorealistic-lawyer-environment_23-2151152218.jpg", imageAlt: "Legal service branding shift", buttonIcon: ArrowUpRight, buttonHref: "#" },
{ title: "Tech Startup", description: "User retention improved by 30%", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-laptop_23-2151004294.jpg", imageAlt: "SaaS UX overhaul", buttonIcon: ArrowUpRight, buttonHref: "#" },
{ title: "Hospitality Group", description: "Mobile booking speed improved by 60%", imageSrc: "http://img.b2bpic.net/free-photo/man-woman-checking-their-phones-even-their-bathroom_23-2149017790.jpg", imageAlt: "Hospitality mobile results", buttonIcon: ArrowUpRight, buttonHref: "#" },
]}
/>
</div>
<div id="testimonial" data-section="testimonial">
<TestimonialCardFifteen
testimonial="The schedule-driven approach gave us complete clarity on our project's progress. Seeing the 'before' mess transform into the 'after' success was incredible."
rating={5}
author="— Elena V., Founder at Global Retail"
avatars={[{ src: "http://img.b2bpic.net/free-photo/african-american-curly-businesswoman-standing-with-folded-hands-portrait-successful-confident-young-pretty-female-office-employer-suit-posing-work-business-company-management-concept_74855-6735.jpg", alt: "Client" }]}
ratingAnimation="slide-up"
avatarsAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardOne
title="Performance Metrics"
description="Tangible results driven by scheduled design and engineering sprints."
gridVariant="uniform-all-items-equal"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{ id: "perf", value: "45%", title: "Avg. Conversion", description: "Average increase in user actions", icon: Award },
{ id: "speed", value: "80%", title: "Load Speed", description: "Reduction in average bounce rate", icon: Zap },
{ id: "growth", value: "2x", title: "Traffic Growth", description: "Organic search improvement rate", icon: TrendingUp },
]}
/>
</div>
<div id="team" data-section="team">
<TeamCardFive
title="Our Team Architecture"
description="Built to support your scheduled growth."
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
team={[
{ id: "1", name: "Alex Rivers", role: "Strategy Lead", imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-young-businesswoman_329181-15813.jpg" },
{ id: "2", name: "Jamie Chen", role: "Design Director", imageSrc: "http://img.b2bpic.net/free-photo/artist-thinking_23-2147781630.jpg" },
{ id: "3", name: "Taylor Scott", role: "Technical Lead", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-typing-keyboard_23-2149101167.jpg" },
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
title="How We Work"
description="Understand the process behind your project's success."
faqsAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{ id: "1", title: "How do you manage project scheduling?", content: "We break every project into 2-week sprints, ensuring you always know exactly what is being delivered and when." },
{ id: "2", title: "What makes your 'before and after' results so consistent?", content: "Our data-first approach ensures every design decision is backed by analytics, resulting in predictable performance gains." },
{ id: "3", title: "Can I get a quote before we start?", content: "Yes, use the free quote button at the top to initiate a discovery call. We'll provide a detailed scope based on your specific requirements." },
{ id: "4", title: "Do you support existing platforms?", content: "We can audit your current site and provide a transition plan that maintains SEO and brand equity during the redesign." },
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
tag="Ready to Begin?"
title="Start Your Digital Evolution Today"
description="Get your free quote and review our projected results for your industry."
background={{ variant: "rotated-rays-animated" }}
buttons={[
{ text: "Get Free Quote", href: "#contact" },
{ text: "View Case Studies", href: "#results" },
]}
buttonAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
logoText="Webild"
copyrightText="© 2026 | Webild"
columns={[
{ title: "Platform", items: [{ label: "Plans", href: "#plans" }, { label: "Results", href: "#results" }, { label: "Services", href: "#services" }, { label: "Contact", href: "#contact" }] },
{ title: "Solutions", items: [{ label: "UI/UX Audit", href: "#" }, { label: "Development", href: "#" }, { label: "SEO Scaling", href: "#" }, { label: "Branding", href: "#" }] },
{ title: "Support", items: [{ label: "Get a Quote", href: "#contact" }, { label: "Documentation", href: "#" }, { label: "Privacy", href: "#" }] },
]}
/>
</div>
</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-inter), 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-libre-baskerville), serif;
}