build ui header, footer, home page, about page

app/components/about/AboutHero.tsx

@@ -0,0 +1,37 @@
+import Link from 'next/link';
+import { AboutData } from '../../about/types';
+
+interface AboutHeroProps {
+    data: AboutData['hero'];
+}
+
+const AboutHero = ({ data }: AboutHeroProps) => {
+    return (
+        <section className="breadcrumb-wrapper fix bg-cover" style={{ backgroundImage: `url(${data.backgroundImage})` }}>
+            <div className="shape">
+                <img src="/assets/img/inner-page/shape.png" alt="img" />
+            </div>
+            <div className="container">
+                <div className="page-heading">
+                    <h1 className="breadcrumb-title">{data.title}</h1>
+                    <ul className="breadcrumb-list">
+                        {data.breadcrumb.map((item, index) => (
+                            <li key={index}>
+                                {index === data.breadcrumb.length - 1 ? (
+                                    item
+                                ) : (
+                                    <>
+                                        <Link href="/">{item}</Link>
+                                        <i className="fa-solid fa-chevron-right ms-2 me-2"></i>
+                                    </>
+                                )}
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default AboutHero;