Hero Banner xsm breakpoint

app/page.js

@@ -1,6 +1,16 @@
 import NumberedCards from "./components/NumberedCards";
+import HeroBanner from "./components/HeroBanner";
 
 export default function Page() {
+  const heroBannerData = {
+    title: "Collaborate",
+    subtitle: "with clarity",
+    description:
+      "Help your community make important decisions in a way that reflects its unique values.",
+    ctaText: "Learn how CommunityRule works",
+    ctaHref: "#",
+  };
+
   const numberedCardsData = {
     title: "How CommunityRule works",
     subtitle: "Here's a quick overview of the process, from start to finish.",
@@ -25,6 +35,7 @@ export default function Page() {
 
   return (
     <div>
+      <HeroBanner {...heroBannerData} />
       <NumberedCards {...numberedCardsData} />
     </div>
   );