build ui header, footer, home page, about page

app/components/about/AboutStats.tsx

@@ -0,0 +1,45 @@
+import { AboutData } from '../../about/types';
+
+interface AboutStatsProps {
+    data: AboutData['stats'];
+}
+
+const AboutStats = ({ data }: AboutStatsProps) => {
+    return (
+        <section className="counter-section section-padding pb-0 fix bg-cover" style={{ backgroundImage: "url('/assets/img/home-1/feature/bg-2.jpg')" }}>
+            <div className="shape">
+                <img src="/assets/img/home-1/feature/shape-2.png" alt="img" />
+            </div>
+            <div className="container">
+                <div className="section-title text-center">
+                    <span className="sub-title bg-2 wow fadeInUp">Did You Know</span>
+                    <h2 className="text-white split-text-right split-text-in-right">
+                       Our Achievements in Numbers
+                    </h2>
+                </div>
+            </div>
+            <div className="counter-wrapper">
+                 <div className="container">
+                    <div className="counter-main-item">
+                        {data.map((stat, index) => {
+                            // Helper to extract number and suffix from value
+                            const valueStr = String(stat.value);
+                            const numericMatch = valueStr.match(/(\d+)/);
+                            const numericValue = numericMatch ? numericMatch[0] : "0";
+                            const suffix = valueStr.replace(numericValue, "");
+
+                            return (
+                                <div key={index} className={`counter-item ${index < 3 ? 'style-2' : ''}`}>
+                                    <h2><span className="odometer" data-count={numericValue}>00</span>{suffix}</h2>
+                                    <h5>{stat.label}</h5>
+                                </div>
+                            );
+                        })}
+                    </div>
+                 </div>
+            </div>
+        </section>
+    );
+};
+
+export default AboutStats;