Add src/app/about/page.tsx

2026-04-15 15:14:09 +00:00
parent 5727a69e59
commit 219dee1d7e
1 changed files with 84 additions and 0 deletions
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -0,0 +1,84 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import TextAbout from "@/components/sections/about/TextAbout";
+import TeamCardFive from "@/components/sections/team/TeamCardFive";
+import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
+import { Award, TrendingUp, Users } from "lucide-react";
+
+export default function AboutPage() {
+  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", id: "/" },
+            { name: "Services", id: "/services" },
+            { name: "About", id: "/about" },
+            { name: "Contact", id: "/contact" },
+          ]}
+          button={{ text: "Get Started", href: "/contact" }}
+        />
+        <TextAbout
+          title="About Us"
+          tag="Our Story"
+          className="pt-32"
+        />
+        <MetricCardOne
+          title="Our Impact"
+          description="We focus on results and long-term partnerships."
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
+          metrics={[
+            { 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: "years", value: "8+", title: "Years", description: "Of crafting exceptional digital experiences", icon: TrendingUp },
+          ]}
+        />
+        <TeamCardFive
+          title="Meet the Team"
+          description="The creative minds behind your next project."
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="slide-up"
+          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: "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" },
+          ]}
+        />
+        <ContactCTA
+          title="Join Our Journey"
+          description="Let's build something extraordinary together."
+          background={{ variant: "rotated-rays-animated" }}
+          buttons={[{ text: "Contact Us", href: "/contact" }]}
+        />
+        <FooterBase
+          logoText="Webild"
+          copyrightText="© 2026 | Webild"
+          columns={[
+            { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Services", href: "/services" }, { label: "Contact", href: "/contact" }] },
+            { title: "Services", items: [{ label: "Web Development", href: "/services" }, { label: "SEO", href: "/services" }] },
+            { title: "Connect", items: [{ label: "Twitter", href: "#" }, { label: "LinkedIn", href: "#" }] },
+          ]}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}