restrucuring

app/components/Hero/index.tsx

@@ -1,45 +1,24 @@
-import React from 'react';
-import Typography from '@mui/material/Typography';
-import MuiLink from '@mui/material/Link';
-import Button from '@mui/material/Button';
+import Link from "next/link";
 
-export default class Hero extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      show: true,
-    };
-  }
+export default function Hero() {
+    {/* Hero Section */ }
+    return (
 
-  render() {
-    return (      
+        <section className="bg-gray-700 text-white py-20 text-center">
+            <div className="container mx-auto px-6">
+                <h2 className="text-4xl font-bold mb-4">Build Your Dream Firearm</h2>
+                <p className="text-lg mb-6">
+                    Customize every component of your firearm with ease and precision.
+                </p>
+                <Link
+                    href="/builder"
+                    className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
 
-      <div className="hero" styles={{ backgroundImage:`url({${this.props.image}})` }}>
-        <div className="hero-text">
-          <h3>{this.props.heading}</h3>
-          <p>{this.props.subheading}</p>
-          <Button href={this.props.link} variant="contained" color="primary">
-            {this.props.linktext}
-          </Button>
-        </div>
+                    Get Started
 
-        <style jsx>{`
-            .hero {
-                // background:url('/gb-hero.jpg');
-                background-size:cover;
-                min-height:35vw;
-                color: #fff;
-                display:flex;
-                justify-content: center;
-                flex-direction: column;
-            }
-            .hero-text {
-              padding: 2em;
-            }
-        `}</style>
-      </div>
-    );
-  }
-
-}
+                </Link>
+            </div>
+        </section>
 
+    )
+}