src/App.tsx

@@ -3,12 +3,14 @@ import Layout from './components/Layout';
 import HomePage from './pages/HomePage';
 
 import VicforceRecruitmentPage from "@/pages/VicforceRecruitmentPage";
+import AboutUsPage from "@/pages/AboutUsPage";
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route path="/" element={<HomePage />} />
         <Route path="/vicforce-recruitment" element={<VicforceRecruitmentPage />} />
+        <Route path="/about-us" element={<AboutUsPage />} />
       </Route>
     </Routes>
   );

src/components/Layout.tsx

@@ -36,6 +36,8 @@ export default function Layout() {
     "href": "#contact"
   },
   { name: "Vicforce Recruitment", href: "/vicforce-recruitment" },
+  { name: "About Us", href: "/about-us" },
+
 
 ];
 

src/pages/AboutUsPage.tsx

@@ -0,0 +1,20 @@
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import GridOrCarousel from "@/components/ui/GridOrCarousel";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import { Quote } from "lucide-react";
+
+export default function AboutUsPage() {
+  return (
+    <>
+      <div data-webild-section="AboutTextSplit"><section aria-label="About section" className=""><div className="flex flex-col mx-auto w-content-width"><div className="flex flex-col md:flex-row gap-3"><div className="w-full md:w-1/2"><TextAnimation text="15 Years of People-First Service" variant="fade-blur" gradientText={true} tag="h2" className="text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-balance" /></div><div className="flex flex-col gap-2 w-full md:w-1/2"><TextAnimation key={0} text="Since our humble beginnings, ABC Group has built a reputation on integrity and reliability. We believe that true success comes from putting people first in everything we do." variant="fade-blur" gradientText={false} tag="p" className="text-xl md:text-2xl leading-snug text-balance" />
+<TextAnimation key={1} text="Our dedicated team works tirelessly to foster long-term relationships, ensuring that every client and candidate feels valued, supported, and empowered to reach their goals." variant="fade-blur" gradientText={false} tag="p" className="text-xl md:text-2xl leading-snug text-balance" /><div className="flex flex-wrap gap-3 mt-2 md:mt-3"><Button text="Our Services" href="/services" variant="primary" /><Button text="Meet the Team" href="/team" variant="secondary" animationDelay={0.1} /></div></div></div><div className="w-full border-b border-foreground/5" /></div></section></div>
+      <div data-webild-section="TeamOverlayCards"><section aria-label="Team section" className=""><div className="flex flex-col gap-8"><div className="flex flex-col items-center gap-2 w-content-width mx-auto"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Our People</p></div><TextAnimation text="Meet the Team Behind ABC Group" variant="fade-blur" gradientText={true} tag="h2" className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance" /><TextAnimation text="For 15 years, our dedicated professionals have built lasting relationships based on integrity and trust." variant="fade-blur" gradientText={false} tag="p" className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance" /><div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3"><Button text="Join Our Team" href="/careers" variant="primary" /><Button text="Learn More" variant="secondary" animationDelay={0.1} /></div></div><ScrollReveal variant="fade-blur"><GridOrCarousel><div key="Sarah J." className="relative aspect-4/5 card rounded"><div className="relative w-full h-full rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/confident-business-woman-portrait-smiling-face_53876-137693.jpg" /><div className="absolute inset-x-4 bottom-4 xl:inset-x-5 xl:bottom-5 2xl:inset-x-6 2xl:bottom-6 flex items-center justify-between gap-4 xl:gap-5 2xl:gap-6 p-4 xl:p-5 2xl:p-6 card backdrop-blur-sm rounded"><span className="text-xl font-semibold leading-snug truncate">Sarah J.</span><div className="px-3 py-2 text-sm primary-button text-primary-cta-text rounded"><p className="truncate">Managing Director</p></div></div></div></div>
+<div key="Michael B." className="relative aspect-4/5 card rounded"><div className="relative w-full h-full rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/handsome-corporate-man-real-estate-agent-assistant-smiling-holding-hands-together-how-can-i-help-smiling-camera-standing-white-background_176420-45257.jpg" /><div className="absolute inset-x-4 bottom-4 xl:inset-x-5 xl:bottom-5 2xl:inset-x-6 2xl:bottom-6 flex items-center justify-between gap-4 xl:gap-5 2xl:gap-6 p-4 xl:p-5 2xl:p-6 card backdrop-blur-sm rounded"><span className="text-xl font-semibold leading-snug truncate">Michael B.</span><div className="px-3 py-2 text-sm primary-button text-primary-cta-text rounded"><p className="truncate">Head of Recruitment</p></div></div></div></div>
+<div key="Emma L." className="relative aspect-4/5 card rounded"><div className="relative w-full h-full rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/young-beautiful-woman-pink-warm-sweater-natural-look-smiling-portrait-isolated-long-hair_285396-896.jpg" /><div className="absolute inset-x-4 bottom-4 xl:inset-x-5 xl:bottom-5 2xl:inset-x-6 2xl:bottom-6 flex items-center justify-between gap-4 xl:gap-5 2xl:gap-6 p-4 xl:p-5 2xl:p-6 card backdrop-blur-sm rounded"><span className="text-xl font-semibold leading-snug truncate">Emma L.</span><div className="px-3 py-2 text-sm primary-button text-primary-cta-text rounded"><p className="truncate">Client Relations Manager</p></div></div></div></div>
+<div key="David W." className="relative aspect-4/5 card rounded"><div className="relative w-full h-full rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/portrait-handsome-smiling-stylish-young-man-model-dressed-red-checkered-shirt-fashion-man-posing_158538-4914.jpg" /><div className="absolute inset-x-4 bottom-4 xl:inset-x-5 xl:bottom-5 2xl:inset-x-6 2xl:bottom-6 flex items-center justify-between gap-4 xl:gap-5 2xl:gap-6 p-4 xl:p-5 2xl:p-6 card backdrop-blur-sm rounded"><span className="text-xl font-semibold leading-snug truncate">David W.</span><div className="px-3 py-2 text-sm primary-button text-primary-cta-text rounded"><p className="truncate">Operations Lead</p></div></div></div></div></GridOrCarousel></ScrollReveal></div></section></div>
+      <div data-webild-section="AboutTestimonial"><section aria-label="Testimonial section" className=""><div className="grid grid-cols-1 md:grid-cols-5 gap-5 mx-auto w-content-width"><div className="relative md:col-span-3 card rounded"><div className="absolute flex items-center justify-center -top-7 -left-7 md:-top-8 md:-left-8 size-14 md:size-16 primary-button rounded"><Quote className="h-5/10 text-primary-cta-text" strokeWidth={1.5} /></div><div className="relative flex flex-col justify-center gap-5 h-full"><div className="w-fit px-3 py-1 mb-1 text-sm card rounded"><p>Client Success</p></div><TextAnimation text="ABC Group has been our go-to recruitment partner for over a decade. Their commitment to finding the right people and building long-term relationships is unmatched." variant="fade-blur" gradientText={false} tag="h1" className="text-4xl md:text-5xl leading-[1.15] font-semibold text-balance" /><div className="flex items-center gap-2 min-w-0"><span className="text-base font-medium truncate">Jessica T.</span><span className="text-accent shrink-0">•</span><span className="text-base font-medium truncate">Operations Manager</span></div></div></div><ScrollReveal variant="fade-blur" className="p-px md:col-span-2 aspect-square md:aspect-auto md:h-full card rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/confident-business-woman-smiling-looking-camera_114579-78988.jpg" /></ScrollReveal></div></section></div>
+    </>
+  );
+}

src/routes.ts

@@ -7,4 +7,5 @@ export interface Route {
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
   { path: '/vicforce-recruitment', label: 'Vicforce Recruitment', pageFile: 'VicforceRecruitmentPage' },
+  { path: '/about-us', label: 'About Us', pageFile: 'AboutUsPage' },
 ];