5 Commits

Author SHA1 Message Date
b0e74115a4 Update src/app/services/page.tsx 2026-06-02 19:38:38 +00:00
9210090f5f Update src/app/contact/page.tsx 2026-06-02 19:38:38 +00:00
0c6059f07d Add src/app/services/page.tsx 2026-06-02 19:37:46 +00:00
a9cab95c98 Update src/app/page.tsx 2026-06-02 19:37:45 +00:00
2f4cae9917 Add src/app/contact/page.tsx 2026-06-02 19:37:45 +00:00
3 changed files with 465 additions and 192 deletions

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

@@ -0,0 +1,176 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import FooterBase from "@/components/sections/footer/FooterBase";
import Textarea from "@/components/form/Textarea";
import { useState } from "react";
import { Sparkles } from "lucide-react"; // Import any necessary icons
export default function ContactPage() {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [message, setMessage] = useState("");
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
console.log({ name, email, message });
alert("Message sent! We'll get back to you soon.");
setName("");
setEmail("");
setMessage("");
};
const navItems = [
{ name: "Work", id: "work" },
{ name: "Services", id: "services" },
{ name: "About", id: "about" },
{ name: "Pricing", id: "/pricing" },
{ name: "Contact", id: "/contact" }
];
const button = { text: "Get Started", href: "/contact" };
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"
>
<NavbarLayoutFloatingOverlay
brandName="Webild"
navItems={navItems}
button={button}
/>
<div className="relative py-20 lg:py-32 flex flex-col items-center justify-center text-center">
<div className="container max-w-4xl px-4">
<h1 className="text-4xl lg:text-6xl font-semibold mb-6 text-foreground">
Get in Touch
</h1>
<p className="text-lg lg:text-xl text-foreground/70 mb-12">
Have a question or want to start a project? Fill out the form below or find us at our office.
</p>
<div className="grid md:grid-cols-2 gap-12 text-left">
{/* Contact Form */}
<div className="card-style p-8 rounded-lg">
<h2 className="text-2xl font-semibold mb-6 text-foreground">Send us a message</h2>
<form onSubmit={handleSubmit} className="space-y-6">
<div>
<label htmlFor="name" className="block text-foreground text-sm font-medium mb-2">
Name
</label>
<input
type="text"
id="name"
className="w-full p-3 rounded-md border border-border bg-input-background text-foreground focus:ring-2 focus:ring-primary-cta outline-none"
placeholder="Your Name"
value={name}
onChange={(e) => setName(e.target.value)}
required
/>
</div>
<div>
<label htmlFor="email" className="block text-foreground text-sm font-medium mb-2">
Email
</label>
<input
type="email"
id="email"
className="w-full p-3 rounded-md border border-border bg-input-background text-foreground focus:ring-2 focus:ring-primary-cta outline-none"
placeholder="your@email.com"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
</div>
<div>
<label htmlFor="message" className="block text-foreground text-sm font-medium mb-2">
Message
</label>
<Textarea
id="message"
value={message}
onChange={setMessage}
placeholder="Your message..."
rows={6}
required
/>
</div>
<button
type="submit"
className="w-full py-3 px-6 rounded-md bg-primary-cta text-primary-cta-foreground font-semibold hover:opacity-90 transition-opacity"
>
Send Message
</button>
</form>
</div>
{/* Location and Hours */}
<div className="card-style p-8 rounded-lg">
<h2 className="text-2xl font-semibold mb-6 text-foreground">Our Office</h2>
<div className="space-y-4 text-foreground/80">
<p>
<strong>Address:</strong><br />
123 Digital Avenue, Suite 400<br />
Innovation City, TX 78701<br />
United States
</p>
<p>
<strong>Phone:</strong><br />
+1 (555) 123-4567
</p>
<p>
<strong>Email:</strong><br />
info@webuild.com
</p>
<p>
<strong>Hours:</strong><br />
Monday - Friday: 9:00 AM - 5:00 PM (CST)<br />
Saturday - Sunday: Closed
</p>
</div>
</div>
</div>
</div>
</div>
<FooterBase
logoText="Webild"
copyrightText="© 2026 | Webild"
columns={[
{
title: "Company", items: [
{ label: "About", href: "#about" },
{ label: "Services", href: "#services" },
{ label: "Work", href: "#work" },
{ label: "Pricing", href: "/pricing" },
{ 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: "#" },
],
},
]}
/>
</ThemeProvider>
);
}

View File

@@ -12,7 +12,7 @@ import TeamCardFive from "@/components/sections/team/TeamCardFive";
import FaqBase from "@/components/sections/faq/FaqBase"; import FaqBase from "@/components/sections/faq/FaqBase";
import ContactCTA from "@/components/sections/contact/ContactCTA"; import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterBase from "@/components/sections/footer/FooterBase"; import FooterBase from "@/components/sections/footer/FooterBase";
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen"; import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
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, Monitor, Shield, Zap, Puzzle, TrendingUp, Lock, Phone, MessageCircle, BookOpen, Tv, Camera, Music, Settings, Award, Users } from "lucide-react";
export default function WebAgency2Page() { export default function WebAgency2Page() {
@@ -36,7 +36,7 @@ export default function WebAgency2Page() {
{ name: "Work", id: "work" }, { name: "Work", id: "work" },
{ name: "Services", id: "services" }, { name: "Services", id: "services" },
{ name: "About", id: "about" }, { name: "About", id: "about" },
{ name: "Contact", id: "contact" }, { name: "Contact", id: "contact" }
]} ]}
button={{ text: "Get Started", href: "#contact" }} button={{ text: "Get Started", href: "#contact" }}
/> />
@@ -49,25 +49,26 @@ export default function WebAgency2Page() {
background={{ variant: "canvas-reveal" }} background={{ variant: "canvas-reveal" }}
buttons={[ buttons={[
{ text: "Start Project", href: "#contact" }, { text: "Start Project", href: "#contact" },
{ text: "View Work", href: "#work" }, { text: "View Work", href: "#work" }
]} ]}
buttonAnimation="slide-up" buttonAnimation="slide-up"
carouselPosition="right" carouselPosition="right"
leftCarouselItems={[ leftCarouselItems={[
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp", imageAlt: "UI UX Design - Daily Life app" }, { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dfd8Bt61NuqIYNtcRWxjLKsYOg/uploaded-1780428951358-gnif02ip.jpg", imageAlt: "UI UX Design - Daily Life app" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp", imageAlt: "UI UX Design - SaaS platform" }, { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dfd8Bt61NuqIYNtcRWxjLKsYOg/uploaded-1780428951358-tx96m2wg.jpg", imageAlt: "UI UX Design - SaaS platform" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-6.webp", imageAlt: "UI UX Design - Luminé skincare" }, { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-6.webp", imageAlt: "UI UX Design - Luminé skincare" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-7.webp", imageAlt: "UI UX Design - Online courses" }, { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-7.webp", imageAlt: "UI UX Design - Online courses" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-9.webp", imageAlt: "UI UX Design - Business coach" }, { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-9.webp", imageAlt: "UI UX Design - Business coach" }
]} ]}
rightCarouselItems={[ rightCarouselItems={[
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp", imageAlt: "UI UX Design - Luxuria travel" }, { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dfd8Bt61NuqIYNtcRWxjLKsYOg/uploaded-1780428951358-wuxfdn02.jpg", imageAlt: "UI UX Design - Luxuria travel" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-5.webp", imageAlt: "UI UX Design - Dental practice" }, { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dfd8Bt61NuqIYNtcRWxjLKsYOg/uploaded-1780428951358-fvnegh5p.jpg", imageAlt: "UI UX Design - Dental practice" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-3.webp", imageAlt: "UI UX Design - AI product builder" }, { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-3.webp", imageAlt: "UI UX Design - AI product builder" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-8.webp", imageAlt: "UI UX Design - AI automation" }, { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-8.webp", imageAlt: "UI UX Design - AI automation" }
]} ]}
carouselItemClassName="!aspect-[4/5]" carouselItemClassName="!aspect-[4/5]"
/> />
<div id="services" data-section="services">
<FeatureBento <FeatureBento
title="Our Services" title="Our Services"
description="We offer a full suite of digital services to help your brand stand out online." description="We offer a full suite of digital services to help your brand stand out online."
@@ -78,35 +79,27 @@ export default function WebAgency2Page() {
buttonAnimation="slide-up" buttonAnimation="slide-up"
features={[ features={[
{ {
title: "SEO", title: "SEO", description: "We optimize your website to rank higher on search engines and drive organic traffic.", bentoComponent: "marquee", centerIcon: Search,
description: "We optimize your website to rank higher on search engines and drive organic traffic.", variant: "text", texts: ["Keywords", "Backlinks", "Meta Tags", "Organic Traffic", "Rankings", "Analytics", "SERP", "Indexing"]
bentoComponent: "marquee",
centerIcon: Search,
variant: "text",
texts: ["Keywords", "Backlinks", "Meta Tags", "Organic Traffic", "Rankings", "Analytics", "SERP", "Indexing"],
}, },
{ {
title: "Web Development", title: "Web Development", description: "Custom-built websites that are fast, responsive, and designed to convert.", bentoComponent: "media-stack", items: [
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-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-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" }, { 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", title: "Branding", description: "Build a memorable brand identity that resonates with your audience.", bentoComponent: "media-stack", items: [
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-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-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" }, { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp", imageAlt: "Brand project 3" }
], ]
}, }
]} ]}
/> />
</div>
<div id="work" data-section="work">
<FeatureCardTwentySix <FeatureCardTwentySix
title="Our Work" title="Our Work"
description="A selection of projects we've crafted for clients across industries." description="A selection of projects we've crafted for clients across industries."
@@ -117,47 +110,28 @@ export default function WebAgency2Page() {
cardClassName="!h-auto aspect-video" cardClassName="!h-auto aspect-video"
features={[ features={[
{ {
title: "Umbra Skincare", 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,
description: "Luxury fragrance e-commerce", buttonHref: "#"
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", 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,
description: "Bespoke luxury travel experiences", buttonHref: "#"
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", 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,
description: "Premier dental practice", buttonHref: "#"
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", 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,
description: "Professional roofing services", buttonHref: "#"
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", 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,
description: "Luxury property listings", buttonHref: "#"
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: "#",
},
]} ]}
/> />
</div>
<FeatureBento <FeatureBento
title="Our Promise" title="Our Promise"
description="We deliver results that speak for themselves." description="We deliver results that speak for themselves."
@@ -166,14 +140,9 @@ export default function WebAgency2Page() {
animationType="slide-up" animationType="slide-up"
features={[ features={[
{ {
title: "All Devices Optimization", title: "All Devices Optimization", description: "Pixel-perfect websites that look stunning on every screen size and device.", bentoComponent: "phone", statusIcon: Lock,
description: "Pixel-perfect websites that look stunning on every screen size and device.",
bentoComponent: "phone",
statusIcon: Lock,
alertIcon: Monitor, alertIcon: Monitor,
alertTitle: "Responsive check", alertTitle: "Responsive check", alertMessage: "All breakpoints passed", apps: [
alertMessage: "All breakpoints passed",
apps: [
{ name: "Phone", icon: Phone }, { name: "Phone", icon: Phone },
{ name: "SMS", icon: MessageCircle }, { name: "SMS", icon: MessageCircle },
{ name: "Books", icon: BookOpen }, { name: "Books", icon: BookOpen },
@@ -181,57 +150,59 @@ export default function WebAgency2Page() {
{ name: "Camera", icon: Camera }, { name: "Camera", icon: Camera },
{ name: "Music", icon: Music }, { name: "Music", icon: Music },
{ name: "Settings", icon: Settings }, { name: "Settings", icon: Settings },
{ name: "Chat", icon: MessageCircle }, { name: "Chat", icon: MessageCircle }
], ]
}, },
{ {
title: "Secure Hosting", title: "Secure Hosting", description: "Enterprise-grade security and 99.9% uptime for your website.", bentoComponent: "reveal-icon", icon: Shield
description: "Enterprise-grade security and 99.9% uptime for your website.",
bentoComponent: "reveal-icon",
icon: Shield,
}, },
{ {
title: "Fast Turnaround", title: "Fast Turnaround", description: "From concept to launch in record time without sacrificing quality.", bentoComponent: "timeline", heading: "Project Launch", subheading: "Week 1", items: [
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: "Discovery & wireframes", detail: "Day 1-3" },
{ label: "Design & development", detail: "Day 4-10" }, { label: "Design & development", detail: "Day 4-10" },
{ label: "Testing & deployment", detail: "Day 11-14" }, { label: "Testing & deployment", detail: "Day 11-14" }
], ],
completedLabel: "Live", completedLabel: "Live"
}, },
{ {
title: "Seamless Integrations", title: "Seamless Integrations", description: "Connect with the tools you already use — CRMs, analytics, payments, and more.", bentoComponent: "orbiting-icons", centerIcon: Puzzle,
description: "Connect with the tools you already use — CRMs, analytics, payments, and more.",
bentoComponent: "orbiting-icons",
centerIcon: Puzzle,
items: [ items: [
{ icon: Shield }, { icon: Shield },
{ icon: Monitor }, { icon: Monitor },
{ icon: Zap }, { icon: Zap },
{ icon: TrendingUp }, { icon: TrendingUp }
], ]
}, },
{ {
title: "Growth Trends", title: "Growth Trends", description: "Data-driven insights to optimize your search presence and drive traffic.", bentoComponent: "line-chart"
description: "Data-driven insights to optimize your search presence and drive traffic.", }
bentoComponent: "line-chart",
},
]} ]}
/> />
<TestimonialCardFifteen <TestimonialCardThirteen
testimonial="Webild completely transformed our online presence. The team delivered a stunning website that exceeded our expectations and doubled our conversion rate." title="What Our Clients Say"
rating={5} description="Hear from businesses that have experienced our premium digital solutions and achieved remarkable results."
author="— Maria Santos, CEO at Luxuria Travel" showRating={true}
avatars={[ animationType="slide-up"
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp", alt: "Client" }, textboxLayout="default"
]}
ratingAnimation="slide-up"
avatarsAnimation="slide-up"
useInvertedBackground={false} useInvertedBackground={false}
testimonials={[
{
id: "1", name: "Maria Santos", handle: "CEO at Luxuria Travel", testimonial: "Webild completely transformed our online presence. The team delivered a stunning website that exceeded our expectations and doubled our conversion rate.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp", imageAlt: "Maria Santos"
},
{
id: "2", name: "John Doe", handle: "Founder, Tech Innovations", testimonial: "The new website design is sleek, modern, and incredibly user-friendly. Our engagement metrics have soared since launch.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/avatars/avatar-1.webp", imageAlt: "John Doe"
},
{
id: "3", name: "Sarah Chen", handle: "Marketing Director, Global Brands", testimonial: "Webild's strategic approach to SEO and development has significantly boosted our organic traffic and lead generation. Highly recommend!", rating: 4,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/avatars/avatar-2.webp", imageAlt: "Sarah Chen"
},
{
id: "4", name: "David Lee", handle: "Owner, Local Business Solutions", testimonial: "Professional service and outstanding results. Our online sales have seen a consistent increase thanks to their expertise.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/avatars/avatar-3.webp", imageAlt: "David Lee"
}
]}
/> />
<MetricCardOne <MetricCardOne
title="Trusted by Industry Leaders" title="Trusted by Industry Leaders"
@@ -243,9 +214,10 @@ export default function WebAgency2Page() {
metrics={[ metrics={[
{ id: "projects", value: "100+", title: "Projects", description: "Successfully delivered across all industries", icon: Award }, { id: "projects", value: "100+", title: "Projects", description: "Successfully delivered across all industries", icon: Award },
{ id: "satisfaction", value: "99%", title: "Satisfaction", description: "Client satisfaction rate and counting", icon: Users }, { id: "satisfaction", value: "99%", title: "Satisfaction", description: "Client satisfaction rate and counting", icon: Users },
{ id: "years", value: "8+", title: "Years", description: "Of crafting exceptional digital experiences", icon: TrendingUp }, { id: "years", value: "8+", title: "Years", description: "Of crafting exceptional digital experiences", icon: TrendingUp }
]} ]}
/> />
<div id="about" data-section="about">
<FeatureCardSixteen <FeatureCardSixteen
title="Why Choose Webild" title="Why Choose Webild"
description="See the difference a professional web agency makes." description="See the difference a professional web agency makes."
@@ -254,23 +226,16 @@ export default function WebAgency2Page() {
animationType="slide-up" animationType="slide-up"
negativeCard={{ negativeCard={{
items: [ items: [
"Generic templates with no personality", "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"
"Slow load times and poor performance", ]
"No SEO strategy or search visibility",
"Outdated design that hurts credibility",
"No ongoing support after launch",
],
}} }}
positiveCard={{ positiveCard={{
items: [ items: [
"Custom designs tailored to your brand", "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"
"Lightning-fast performance on all devices", ]
"Built-in SEO to drive organic traffic",
"Modern design that builds trust",
"Dedicated support and maintenance",
],
}} }}
/> />
</div>
<TeamCardFive <TeamCardFive
title="Meet the Team" title="Meet the Team"
description="The creative minds behind your next project." description="The creative minds behind your next project."
@@ -281,7 +246,7 @@ export default function WebAgency2Page() {
team={[ team={[
{ id: "1", name: "Sarah Miller", role: "Lead Developer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp", imageAlt: "Sarah Miller" }, { id: "1", name: "Sarah Miller", role: "Lead Developer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp", imageAlt: "Sarah Miller" },
{ id: "2", name: "Valentina Reyes", role: "Creative Director", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-2.webp", imageAlt: "Valentina Reyes" }, { id: "2", name: "Valentina Reyes", role: "Creative Director", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-2.webp", imageAlt: "Valentina Reyes" },
{ id: "3", name: "Carlos Mendoza", role: "UX Designer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-3.webp", imageAlt: "Carlos Mendoza" }, { id: "3", name: "Carlos Mendoza", role: "UX Designer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-3.webp", imageAlt: "Carlos Mendoza" }
]} ]}
/> />
<FaqBase <FaqBase
@@ -295,9 +260,10 @@ export default function WebAgency2Page() {
{ id: "2", title: "What is your pricing structure?", content: "We offer project-based pricing tailored to your needs. Every project includes design, development, SEO optimization, and post-launch support." }, { id: "2", title: "What is your pricing structure?", content: "We offer project-based pricing tailored to your needs. Every project includes design, development, SEO optimization, and post-launch support." },
{ id: "3", title: "Do you offer ongoing maintenance?", content: "Yes! We provide ongoing support and maintenance packages to keep your website updated, secure, and performing at its best." }, { id: "3", title: "Do you offer ongoing maintenance?", content: "Yes! We provide ongoing support and maintenance packages to keep your website updated, secure, and performing at its best." },
{ id: "4", title: "Can you redesign my existing website?", content: "Absolutely. We specialize in website redesigns that modernize your brand while preserving your existing content and SEO rankings." }, { id: "4", title: "Can you redesign my existing website?", content: "Absolutely. We specialize in website redesigns that modernize your brand while preserving your existing content and SEO rankings." },
{ id: "5", title: "What technologies do you use?", content: "We build with modern technologies including Next.js, React, and Tailwind CSS to ensure fast, scalable, and maintainable websites." }, { id: "5", title: "What technologies do you use?", content: "We build with modern technologies including Next.js, React, and Tailwind CSS to ensure fast, scalable, and maintainable websites." }
]} ]}
/> />
<div id="contact" data-section="contact">
<ContactCTA <ContactCTA
tag="Get in Touch" tag="Get in Touch"
title="Ready to Transform Your Digital Presence?" title="Ready to Transform Your Digital Presence?"
@@ -305,42 +271,40 @@ export default function WebAgency2Page() {
background={{ variant: "rotated-rays-animated" }} background={{ variant: "rotated-rays-animated" }}
buttons={[ buttons={[
{ text: "Start Your Project", href: "#contact" }, { text: "Start Your Project", href: "#contact" },
{ text: "View Our Work", href: "#work" }, { text: "View Our Work", href: "#work" }
]} ]}
buttonAnimation="slide-up" buttonAnimation="slide-up"
useInvertedBackground={false} useInvertedBackground={false}
/> />
</div>
<FooterBase <FooterBase
logoText="Webild" logoText="Webild"
copyrightText="© 2026 | Webild" copyrightText="© 2026 | Webild"
columns={[ columns={[
{ {
title: "Company", title: "Company", items: [
items: [
{ label: "About", href: "#about" }, { label: "About", href: "#about" },
{ label: "Services", href: "#services" }, { label: "Services", href: "#services" },
{ label: "Work", href: "#work" }, { label: "Work", href: "#work" },
{ label: "Contact", href: "#contact" }, { label: "Contact", href: "#contact" }
], ]
}, },
{ {
title: "Services", title: "Services", items: [
items: [
{ label: "Web Development", href: "#" }, { label: "Web Development", href: "#" },
{ label: "SEO", href: "#" }, { label: "SEO", href: "#" },
{ label: "Branding", href: "#" }, { label: "Branding", href: "#" },
{ label: "UI/UX Design", href: "#" }, { label: "UI/UX Design", href: "#" }
], ]
}, },
{ {
title: "Connect", title: "Connect", items: [
items: [
{ label: "Twitter", href: "#" }, { label: "Twitter", href: "#" },
{ label: "LinkedIn", href: "#" }, { label: "LinkedIn", href: "#" },
{ label: "Instagram", href: "#" }, { label: "Instagram", href: "#" },
{ label: "Dribbble", href: "#" }, { label: "Dribbble", href: "#" }
], ]
}, }
]} ]}
/> />
</ReactLenis> </ReactLenis>

133
src/app/services/page.tsx Normal file
View File

@@ -0,0 +1,133 @@
"use client";
import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroPersonalLinks from "@/components/sections/hero/HeroPersonalLinks";
import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterBase from "@/components/sections/footer/FooterBase";
import { Wrench, Car, PackageCheck, Lightbulb, BatteryCharging, Gauge, Settings, Shield, Fuel, Zap, Search } from "lucide-react";
export default function ServicesPage() {
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="Officina Meccatronica Control Garage"
navItems={[
{ name: "Home", id: "/" },
{ name: "Servizi", id: "/services" },
{ name: "Chi Siamo", id: "/about" },
{ name: "Lavori", id: "work" },
{ name: "Contatti", id: "contact" }
]}
button={{ text: "Contattaci", href: "#contact" }}
/>
<HeroPersonalLinks
title="I Nostri Servizi"
background={{ variant: "downward-rays-static" }}
linkCards={[
{ title: "Diagnostica Elettronica", description: "Rilevazione e risoluzione di guasti con strumenti all'avanguardia.", icon: Search, button: { text: "Dettagli" } },
{ title: "Riparazioni Meccaniche", description: "Interventi su motore, freni, sospensioni e trasmissione.", icon: Wrench, button: { text: "Dettagli" } },
{ title: "Manutenzione Ordinaria", description: "Tagliandi, cambio olio, filtri e controlli di routine.", icon: PackageCheck, button: { text: "Dettagli" } },
{ title: "Sistemi Elettrici/Elettronici", description: "Riparazione e configurazione di impianti elettrici e centraline.", icon: Lightbulb, button: { text: "Dettagli" } },
{ title: "Controllo Batteria e Impianto di Ricarica", description: "Verifica e sostituzione batterie, alternatori e motorini d'avviamento.", icon: BatteryCharging, button: { text: "Dettagli" } },
{ title: "Assetto Ruote e Pneumatici", description: "Convergenza, equilibratura e montaggio/sostituzione pneumatici.", icon: Car, button: { text: "Dettagli" } }
]}
/>
<FeatureCardTwentySeven
title="Dettaglio dei Servizi"
description="Ogni servizio è eseguito con la massima cura e attenzione, utilizzando solo ricambi di qualità."
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
features={[
{
id: "feature-1", title: "Diagnostica Computerizzata", descriptions: ["Identificazione precisa dei codici di errore e malfunzionamenti.", "Analisi approfondita dei parametri del veicolo.", "Utilizzo di software diagnostici specifici per ogni marca."],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp", imageAlt: "Computer diagnostics screen"
},
{
id: "feature-2", title: "Riparazione e Revisione Motori", descriptions: ["Interventi su motori benzina, diesel e ibridi.", "Sostituzione componenti usurate e revisioni complete.", "Miglioramento delle prestazioni e dell'efficienza."],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dfd8Bt61NuqIYNtcRWxjLKsYOg/uploaded-1780428951358-gnif02ip.jpg", imageAlt: "Car engine repair"
},
{
id: "feature-3", title: "Freni e Sospensioni", descriptions: ["Controllo e sostituzione di dischi, pastiglie e liquido freni.", "Manutenzione e riparazione di ammortizzatori e molle.", "Garanzia di sicurezza e comfort di guida."],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-3.webp", imageAlt: "Brake system components"
},
{
id: "feature-4", title: "Manutenzione Impianti A/C", descriptions: ["Ricarica e igienizzazione del sistema di climatizzazione.", "Controllo perdite e riparazione componenti.", "Miglioramento della qualità dell'aria nell'abitacolo."],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp", imageAlt: "Car A/C maintenance"
},
{
id: "feature-5", title: "Servizio Pneumatici", descriptions: ["Vendita e montaggio pneumatici delle migliori marche.", "Equilibratura e convergenza computerizzata.", "Riparazione forature e stoccaggio stagionale."],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-4.webp", imageAlt: "Tire service"
},
{
id: "feature-6", title: "Revisioni e Pre-Revisioni", descriptions: ["Preparazione completa del veicolo per la revisione periodica.", "Esecuzione della revisione presso centri autorizzati.", "Controllo di tutti i punti critici per superare l'esame."],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-5.webp", imageAlt: "Car inspection"
}
]}
/>
<ContactSplitForm
title="Richiedi un Preventivo"
description="Compila il modulo per un preventivo personalizzato o per prenotare un appuntamento. Ti risponderemo al più presto."
inputs={[
{ name: "name", type: "text", placeholder: "Il tuo nome", required: true },
{ name: "email", type: "email", placeholder: "La tua email", required: true },
{ name: "phone", type: "tel", placeholder: "Il tuo telefono" },
{ name: "car_model", type: "text", placeholder: "Marca e modello auto" }
]}
textarea={{
name: "message", placeholder: "Descrivi il problema o la richiesta...", rows: 5,
}}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dfd8Bt61NuqIYNtcRWxjLKsYOg/uploaded-1780428951358-tx96m2wg.jpg"
imageAlt="Mechanic working on car"
buttonText="Invia Richiesta"
useInvertedBackground={false}
mediaPosition="right"
/>
<FooterBase
logoText="Officina Control Garage"
copyrightText="© 2026 | Officina Meccatronica Control Garage"
columns={[
{
title: "Officina", items: [
{ label: "Chi Siamo", href: "/about" },
{ label: "Servizi", href: "/services" },
{ label: "Lavori", href: "#work" },
{ label: "Contatti", href: "#contact" },
],
},
{
title: "Servizi Principali", items: [
{ label: "Diagnostica Elettronica", href: "/services" },
{ label: "Riparazioni Meccaniche", href: "/services" },
{ label: "Manutenzione Periodica", href: "/services" },
{ label: "Elettronica Auto", href: "/services" },
],
},
{
title: "Seguici", items: [
{ label: "Facebook", href: "#" },
{ label: "Instagram", href: "#" },
{ label: "LinkedIn", href: "#" },
],
},
]}
/>
</ReactLenis>
</ThemeProvider>
);
}