rename to hero

components/pages/home/hero.tsx

@@ -0,0 +1,35 @@
+import React, { FunctionComponent } from "react";
+import styles from "@styles/components/pages/home/hero.module.css";
+
+import Typography from "../../UI/typography/typography";
+import { TEXT_TYPE } from "@constants/typography";
+import SplitTitle from "./splitTitle";
+
+type HeroProps = {
+};
+
+const Hero: FunctionComponent<HeroProps> = ({
+}) => {
+
+  return (
+    <div>
+        <div className="item-center justify-center pb-4">
+          <SplitTitle className="leading-12 pb-2" />
+
+          <Typography type={TEXT_TYPE.H1} 
+            className={`${styles.header} flex justify-center text-center text-5xl leading-12 text-transparent`}>
+            WITH STARKNET
+          </Typography>
+        </div>
+
+        <Typography type={TEXT_TYPE.BODY_MICRO} color="textGray"
+          className="max-w-screen-sm text-sm leading-6 text-center">
+          Starknet Quest is our gateway to DeFi, offering tools and opportunities 
+          for individuals, DAOs, and protocols to grow their assets and explore Starknet's
+          full potential.
+        </Typography>
+
+    </div>
+  );
+};
+export default Hero;

styles/components/pages/home/hero.module.css

@@ -0,0 +1,9 @@
+.header {
+    font-family: 'Sora-Bold';
+    font-weight: 1000;
+
+    background: linear-gradient(90deg,
+      var(--primary) -0.12%,
+      var(--tertiary) 99.88%);
+    background-clip: text;
+}