From 917e08375697332455342da67449c476d4bd8d4f Mon Sep 17 00:00:00 2001
From: baitcode <batiyiv@gmail.com>
Date: Tue, 26 Nov 2024 04:02:45 +0300
Subject: [PATCH] Added CallToAction

---
 app/page.tsx                           |  7 ++++---
 components/pages/home/callToAction.tsx | 19 +++++++++++++++++++
 2 files changed, 23 insertions(+), 3 deletions(-)
 create mode 100644 components/pages/home/callToAction.tsx

diff --git a/app/page.tsx b/app/page.tsx
index 4c125ce2..a1e1ff8d 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -5,8 +5,9 @@ import { useRouter } from "next/navigation";
 import Blur from "@components/shapes/blur";
 import Typography from "@components/UI/typography/typography";
 import { TEXT_TYPE } from "@constants/typography";
-import MainHeader from "@components/pages/home/header";
+import MainHeader from "@components/pages/home/hero";
 import Card from "@components/pages/home/card";
+import CallToAction from "@components/pages/home/callToAction";
 
 
 
@@ -30,7 +31,7 @@ export default function Page() {
         
         <MainHeader />
 
-        <div className={`flex flex-row flex-wrap gap-5 items-center justify-center py-12`}>
+        <CallToAction>
           <Card title="DeFi" imgSrc="/home/defi.webp" onClick={handleNavigateToDefi}>
             <Typography type={TEXT_TYPE.BODY_MICRO} color="textGray">
               Access the top DeFi opportunities on Starknet and grow your assets effortlessly.
@@ -41,7 +42,7 @@ export default function Page() {
               Complete exciting quests, earn rewards, and deepen your knowledge of Starknet.
             </Typography>
           </Card>
-        </div>
+        </CallToAction>
         
       </div>
     </div>
diff --git a/components/pages/home/callToAction.tsx b/components/pages/home/callToAction.tsx
new file mode 100644
index 00000000..6af75cdd
--- /dev/null
+++ b/components/pages/home/callToAction.tsx
@@ -0,0 +1,19 @@
+import React, { FunctionComponent } from "react";
+
+type CallToActionProps = {
+    children: React.ReactNode;
+};
+
+const CallToAction: FunctionComponent<CallToActionProps> = ({
+    children
+}) => {
+
+  return (
+    <div className={`flex flex-row flex-wrap gap-5 items-center justify-center py-12`}>
+        { children }
+    </div>
+  );
+};
+export default CallToAction;
+
+