feat(saas): added promotion section to landing page

alifarooq9 · Apr 21, 2024 · 9cec7c6 · 9cec7c6
1 parent 0789c39
commit 9cec7c6
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 25 deletions.
diff --git a/starterkits/saas/src/app/(web)/_components/background.tsx b/starterkits/saas/src/app/(web)/_components/background.tsx
@@ -0,0 +1,34 @@
+type BackgroundProps = {
+    children: React.ReactNode;
+};
+
+export function Background({ children }: BackgroundProps) {
+    return (
+        <>
+            <svg
+                className="absolute inset-0 -z-10 h-full w-full stroke-muted-foreground/25 [mask-image:radial-gradient(100%_150%_at_top,white,transparent)]"
+                aria-hidden="true"
+            >
+                <defs>
+                    <pattern
+                        id="0787a7c5-978c-4f66-83c7-11c213f99cb7"
+                        width={200}
+                        height={200}
+                        x="50%"
+                        y={-1}
+                        patternUnits="userSpaceOnUse"
+                    >
+                        <path d="M.5 200V.5H200" fill="none" />
+                    </pattern>
+                </defs>
+                <rect
+                    width="100%"
+                    height="100%"
+                    strokeWidth={0}
+                    fill="url(#0787a7c5-978c-4f66-83c7-11c213f99cb7)"
+                />
+            </svg>
+            {children}
+        </>
+    );
+}
diff --git a/starterkits/saas/src/app/(web)/_components/general-components.tsx b/starterkits/saas/src/app/(web)/_components/general-components.tsx
@@ -22,29 +22,6 @@ export function WebPageWrapper({
                 className,
             )}
         >
-            <svg
-                className="absolute inset-0 -z-10 h-full w-full stroke-muted-foreground/25 [mask-image:radial-gradient(100%_150%_at_top,white,transparent)]"
-                aria-hidden="true"
-            >
-                <defs>
-                    <pattern
-                        id="0787a7c5-978c-4f66-83c7-11c213f99cb7"
-                        width={200}
-                        height={200}
-                        x="50%"
-                        y={-1}
-                        patternUnits="userSpaceOnUse"
-                    >
-                        <path d="M.5 200V.5H200" fill="none" />
-                    </pattern>
-                </defs>
-                <rect
-                    width="100%"
-                    height="100%"
-                    strokeWidth={0}
-                    fill="url(#0787a7c5-978c-4f66-83c7-11c213f99cb7)"
-                />
-            </svg>
             {children}
         </Comp>
     );

diff --git a/starterkits/saas/src/app/(web)/_components/promotion.tsx b/starterkits/saas/src/app/(web)/_components/promotion.tsx
@@ -0,0 +1,20 @@
+import Balancer from "react-wrap-balancer";
+
+export function Promotion() {
+    return (
+        <section className="flex min-h-96 w-full flex-col items-center justify-center gap-5 rounded-[26px] bg-foreground p-8 py-10 text-background">
+            <Balancer as="h2" className="font-heading font-bold md:text-5xl">
+                Launch your SaaS in just a few days 🚀
+            </Balancer>
+            <Balancer as="p" className="text-center text-xl text-background/70">
+                Because Rapidlaunch comes with a SaaS starter kit, Blocks and
+                guides, and more, you can launch your SaaS in just a few days.
+                Get started with our starter kits, components, building guides,
+                and more. Customizable.{" "}
+                <span className="rounded-[5px] bg-background p-1 font-semibold text-foreground">
+                    Open Source.
+                </span>
+            </Balancer>
+        </section>
+    );
+}
diff --git a/starterkits/saas/src/app/(web)/layout.tsx b/starterkits/saas/src/app/(web)/layout.tsx
@@ -1,3 +1,4 @@
+import { Background } from "@/app/(web)/_components/background";
 import { WebHeader } from "@/app/(web)/_components/header";
 
 type WebLayoutProps = {
@@ -7,8 +8,10 @@ type WebLayoutProps = {
 export default function WebLayout({ children }: WebLayoutProps) {
     return (
         <div>
-            <WebHeader />
-            {children}
+            <Background>
+                <WebHeader />
+                {children}
+            </Background>
         </div>
     );
 }
diff --git a/starterkits/saas/src/app/(web)/page.tsx b/starterkits/saas/src/app/(web)/page.tsx
@@ -2,6 +2,7 @@ import {
     WebPageHeader,
     WebPageWrapper,
 } from "@/app/(web)/_components/general-components";
+import { Promotion } from "@/app/(web)/_components/promotion";
 import { buttonVariants } from "@/components/ui/button";
 import { Icons } from "@/components/ui/icons";
 import { siteUrls } from "@/config/urls";
@@ -68,6 +69,8 @@ export default async function HomePage() {
                     />
                 </div>
             </div>
+
+            <Promotion />
         </WebPageWrapper>
     );
 }