build ui header, footer, home page, about page

app/components/home/Achievements.tsx

@@ -0,0 +1,47 @@
+interface AchievementsProps {
+    data: {
+        heading: string;
+        subheading: string;
+        items: {
+            value: string;
+            suffix: string;
+            label: string;
+            description: string;
+        }[];
+    };
+}
+
+const Achievements = ({ data }: AchievementsProps) => {
+    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">{data.subheading}</span>
+                    <h2 className="text-white split-text-right split-text-in-right">
+                        {data.heading}
+                    </h2>
+                </div>
+            </div>
+            <div className="counter-wrapper">
+                <div className="container">
+                    <div className="counter-main-item">
+                        {data.items.map((item, index) => (
+                            <div key={index} className={`counter-item ${index < 3 ? 'style-2' : ''}`}>
+                                <h2><span className="odometer" data-count={item.value}>00</span>{item.suffix}</h2>
+                                <h5>{item.label}</h5>
+                                <p>
+                                    {item.description}
+                                </p>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default Achievements;