Update src/app/about/page.tsx

This commit is contained in:
2026-06-07 21:18:39 +00:00
parent 25fae449b6
commit 0cb455c6ed

View File

@@ -3,45 +3,47 @@
import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import TeamCardTwo from "@/components/sections/team/TeamCardTwo";
import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
import FooterBase from "@/components/sections/footer/FooterBase";
import { Facebook, Twitter, Linkedin } from "lucide-react";
import AboutMetric from "@/components/sections/about/AboutMetric";
import TeamCardOne from "@/components/sections/team/TeamCardOne";
import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import { Globe, Award, Users, TrendingUp, Twitter, Linkedin, Instagram, Dribbble, Star } from "lucide-react";
export default function AboutPage() {
const navItems = [
{ name: "Work", id: "work" },
{ name: "Services", id: "services" },
{ name: "About", href: "/about" },
{ name: "Contact", id: "contact" }
{ name: "Work", id: "/work" },
{ name: "Services", id: "/services" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
];
const footerColumns = [
{
title: "Company", items: [
{ label: "About", href: "/about" },
{ label: "Services", href: "#services" },
{ label: "Work", href: "#work" },
{ label: "Contact", href: "#contact" }
]
{ label: "About", href: "#about" },
{ 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: "#" }
]
{ label: "UI/UX Design", href: "#" },
],
},
{
title: "Connect", items: [
{ label: "Twitter", href: "#" },
{ label: "LinkedIn", href: "#" },
{ label: "Instagram", href: "#" },
{ label: "Dribbble", href: "#" }
]
}
{ label: "Dribbble", href: "#" },
],
},
];
return (
@@ -61,62 +63,95 @@ export default function AboutPage() {
<NavbarLayoutFloatingOverlay
brandName="Webild"
navItems={navItems}
button={{ text: "Get Started", href: "#contact" }}
button={{ text: "Get Started", href: "/contact" }}
/>
<div id="company-story" data-section="company-story">
<TextSplitAbout
title="Our Story: Crafting Digital Excellence"
description={[
"Founded in 2018, Webild began with a simple mission: to empower businesses with stunning, high-performing digital experiences. We noticed a gap in the market for agencies that truly understood both design aesthetics and technical robustness.", "From our humble beginnings, we've grown into a full-service digital agency, partnering with startups, scale-ups, and established enterprises to bring their visions to life. Our journey is marked by countless successful projects, innovative solutions, and a growing family of satisfied clients.", "We believe in a collaborative approach, working closely with our clients every step of the way to ensure their unique goals are met with precision and creativity. Our passion for technology and design drives us to constantly evolve, staying ahead of trends to deliver future-proof solutions."
]}
useInvertedBackground={false}
/>
</div>
<AboutMetric
title="Driving Digital Success for Leading Brands"
metrics={[
{ icon: Award, label: "Awards Won", value: "15+" },
{ icon: Users, label: "Happy Clients", value: "250+" },
{ icon: TrendingUp, label: "Projects Completed", value: "300+" },
{ icon: Globe, label: "Global Reach", value: "20+"
},
]}
metricsAnimation="slide-up"
useInvertedBackground={false}
/>
<TeamCardOne
title="Meet Our Dedicated Team"
description="Our passionate experts are committed to delivering outstanding results."
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
gridVariant="uniform-all-items-equal"
members={[
{
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", socialLinks: [{ icon: Twitter, url: "#" }, { icon: Linkedin, url: "#" }],
description: "Sarah leads our development team, specializing in cutting-edge web technologies and scalable solutions."
},
{
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", socialLinks: [{ icon: Instagram, url: "#" }, { icon: Dribbble, url: "#" }],
description: "Valentina brings artistic vision and innovative design thinking to every project, ensuring unique brand experiences."
},
{
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", socialLinks: [{ icon: Twitter, url: "#" }, { icon: Linkedin, url: "#" }],
description: "Carlos is dedicated to crafting intuitive and engaging user experiences that delight users and drive conversions."
},
{
id: "4", name: "Emily Chen", role: "Project Manager", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-4.webp", imageAlt: "Emily Chen", socialLinks: [{ icon: Linkedin, url: "#" }],
description: "Emily ensures all projects run smoothly, on time, and within budget, acting as the key liaison between clients and the team."
},
{
id: "5", name: "David Lee", role: "SEO Specialist", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-5.webp", imageAlt: "David Lee", socialLinks: [{ icon: Twitter, url: "#" }],
description: "David boosts our clients' online visibility through advanced SEO strategies, driving organic traffic and higher search rankings."
},
]}
/>
<div id="team" data-section="team">
<TeamCardTwo
title="Meet Our Visionary Team"
description="The passionate individuals driving our mission forward, bringing diverse expertise and creative energy to every project."
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
gridVariant="three-columns-all-equal-width"
members={[
{ id: "1", name: "Alice Johnson", role: "CEO & Founder", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp", imageAlt: "Alice Johnson", socialLinks: [{ icon: Linkedin, url: "#" }, { icon: Twitter, url: "#" }] },
{ id: "2", name: "Bob Williams", role: "Lead Developer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-2.webp", imageAlt: "Bob Williams", socialLinks: [{ icon: Linkedin, url: "#" }, { icon: Facebook, url: "#" }] },
{ id: "3", name: "Charlie Brown", role: "Creative Director", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-3.webp", imageAlt: "Charlie Brown", socialLinks: [{ icon: Twitter, url: "#" }] },
{ id: "4", name: "Diana Green", role: "UX/UI Designer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-4.webp", imageAlt: "Diana Green", socialLinks: [{ icon: Linkedin, url: "#" }] },
{ id: "5", name: "Eve Davis", role: "Marketing Strategist", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-5.webp", imageAlt: "Eve Davis", socialLinks: [{ icon: Twitter, url: "#" }, { icon: Facebook, url: "#" }] }
]}
/>
</div>
<TestimonialCardThirteen
title="What Our Clients Say"
description="Hear from businesses that have experienced the Webild difference."
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
showRating={true}
testimonials={[
{
id: "1", name: "Maria Santos", handle: "CEO at Luxuria Travel", testimonial: "Webild transformed our online presence. Their design and development expertise led to a stunning website 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 of StartupX", testimonial: "The team at Webild is incredibly professional and skilled. They understood our vision perfectly and delivered beyond expectations.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-2.webp", imageAlt: "John Doe"},
{
id: "3", name: "Sarah Chen", handle: "Marketing Director, GlobalCorp", testimonial: "Outstanding results and exceptional service. Webild is our go-to partner for all digital projects. Highly recommend them!", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-3.webp", imageAlt: "Sarah Chen"},
]}
/>
<FaqDouble
title="Frequently Asked Questions"
description="Everything you need to know about working with us."
textboxLayout="default"
useInvertedBackground={false}
faqsAnimation="slide-up"
faqs={[
{ id: "1", title: "How long does a typical project take?", content: "Most projects are completed within 2-4 weeks depending on scope and complexity. We'll provide a detailed timeline during our initial consultation." },
{ 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: "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." },
]}
/>
<div id="values" data-section="values">
<FeatureCardSeven
title="Our Core Values"
description="The foundational principles that guide every decision, project, and interaction at Webild."
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
features={[
{
title: "Innovation", description: "We constantly explore new technologies and creative approaches to deliver groundbreaking solutions.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-1.webp", imageAlt: "Innovation concept"
},
{
title: "Collaboration", description: "Working hand-in-hand with our clients and within our team fosters success and outstanding results.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-2.webp", imageAlt: "Collaboration concept"
},
{
title: "Integrity", description: "Honesty and transparency are at the heart of everything we do, building trust with every client.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-3.webp", imageAlt: "Integrity concept"
},
{
title: "Excellence", description: "We are committed to delivering the highest quality in design, development, and client service.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-4.webp", imageAlt: "Excellence concept"
}
]}
/>
</div>
<FooterBase
<SocialProofOne
title="Trusted by Industry Leaders"
description="We've partnered with diverse clients to achieve their digital goals."
textboxLayout="default"
useInvertedBackground={false}
names={[
"Luxuria Travel", "GlobalCorp", "StartupX", "TechInnovate", "FutureBrands", "DigitalEdge", "NextGen Solutions", "Evolve Digital"]}
/>
<FooterBaseCard
logoText="Webild"
copyrightText="© 2026 | Webild"
columns={footerColumns}
@@ -124,4 +159,4 @@ export default function AboutPage() {
</ReactLenis>
</ThemeProvider>
);
}
}