Feat: Updated About Us page

app/(marketing)/about/page.tsx

@@ -1,34 +1,61 @@
+import AnimatedHero from '@/components/AnimatedHero';
 import Navbar from '@/components/Navbar';
-import Footer from "@/components/Footer";
-
+import Footer from '@/components/Footer';
+import ScrollToTop from '@/components/ScrollBtn';
 
 export default function AboutUsPage() {
   return (
-    <div>
+    <>
+      <ScrollToTop />
       <Navbar />
 
-      <div className="flex justify-center items-center min-h-screen">
-        <div className="bg-gray-100 border border-gray-300 p-8 rounded-lg shadow-lg text-center" style={{ width: "1200px", height: "350px" }}>
-          <h2 className="text-2xl font-bold text-black mb-4">Introduction</h2>
-          <p className="text-gray-700 mb-2">Weekend Knocks is an Indian esports startup seeking to transform the ecosystem by nurturing new talent,
-            fostering community connections, enhancing brand commitments, and redefining league experiences.
+      {/* Hero */}
+      <AnimatedHero
+        title="About Weekend Knocks"
+        subtitle="Nurturing talent, building community, and elevating the esports experience across India."
+        bgUrl="/img/page-top-bg/services-bg.jpg"
+      />
+
+      {/* Content */}
+      <main className="max-w-7xl mx-auto px-4 py-16">
+        <section className="bg-[var(--color-card-bg)] rounded-lg shadow-lg p-8">
+          <h2 className="text-3xl font-bold mb-4">Introduction</h2>
+          <p className="text-gray-300 leading-relaxed">
+            Weekend Knocks is an Indian esports startup aiming to transform the ecosystem by discovering and
+            nurturing new talent, fostering strong community connections, enhancing brand partnerships, and
+            redefining league experiences.
           </p>
-          <h2 className="text-2xl font-bold text-black mb-4">Player-Centric Environment</h2>
-          <p className="text-gray-700 mb-2">At Weekend Knocks, we prioritize our players above all, creating a player-centric environment that respects and values their contributions.
+        </section>
+
+        <section className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-12">
+          <div className="bg-[var(--color-card-bg)] rounded-lg shadow-md p-6">
+            <h3 className="text-2xl font-semibold mb-3">Player-Centric Environment</h3>
+            <p className="text-gray-300">
+              We prioritize our players, creating an environment that respects and values their contributions.
+              Our programs focus on growth, wellbeing, and professional opportunities.
+            </p>
+          </div>
+
+          <div className="bg-[var(--color-card-bg)] rounded-lg shadow-md p-6">
+            <h3 className="text-2xl font-semibold mb-3">Talent Scouting & Development</h3>
+            <p className="text-gray-300">
+              Through grassroots initiatives, tournaments, and community events, we scout undiscovered talents
+              and provide training, mentorship, and exposure to help them succeed on bigger stages.
+            </p>
+          </div>
+        </section>
+
+        <section className="mt-12 bg-[var(--color-card-bg)] rounded-lg shadow-md p-8">
+          <h3 className="text-2xl font-semibold mb-3">Our Mission</h3>
+          <p className="text-gray-300 leading-relaxed">
+            To build a sustainable esports ecosystem that supports players, engages fans, and offers reliable
+            partnership opportunities for brands and organizers. We believe in transparent, fair competition
+            and long-term career pathways for gamers.
           </p>
-          <h2 className="text-2xl font-bold text-black mb-4">Talent Scouting and Development</h2>
-
-          <p className="text-gray-700">We scout undiscovered talents through grassroots initiatives and groom them into icons who knit the gaming world together.</p>
-        </div>
-
-      </div>
-
-
-
+        </section>
+      </main>
 
       <Footer />
-    </div>
-
+    </>
   );
-
 }

components/AnimatedHero.tsx

@@ -0,0 +1,32 @@
+"use client";
+import { motion } from 'framer-motion';
+import React from 'react';
+
+type Props = {
+    title: string;
+    subtitle?: string;
+    bgUrl?: string;
+};
+
+export default function AnimatedHero({ title, subtitle, bgUrl }: Props) {
+    return (
+        <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.8 }}
+            className="relative h-[45vh] flex items-center justify-center overflow-hidden"
+            style={{
+                background: `linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url("${bgUrl || '/img/page-top-bg/services-bg.jpg'}")`,
+                backgroundSize: 'cover',
+                backgroundPosition: 'center',
+            }}
+        >
+            <div className="text-center px-4">
+                <h1 className="text-4xl md:text-5xl font-bold text-[var(--color-text-light)] pixel-font">{title}</h1>
+                {subtitle && (
+                    <p className="text-lg md:text-xl text-gray-300 max-w-2xl mx-auto mt-4">{subtitle}</p>
+                )}
+            </div>
+        </motion.div>
+    );
+}

components/ScrollBtn.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowUp } from "@fortawesome/free-solid-svg-icons";