feat(saas): Mobile Responsive landing page (#22)

Mobile responsive landing page
alifarooq9 · May 5, 2024 · 2ae3e37 · 2ae3e37
2 parents b4df878 + 6f4bf57
commit 2ae3e37
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 12 deletions.
diff --git a/starterkits/saas/src/app/(web)/_components/features.tsx b/starterkits/saas/src/app/(web)/_components/features.tsx
@@ -7,18 +7,18 @@ export default function Features() {
     return (
         <section className="flex flex-col items-center justify-center gap-20 py-20">
             <div className="grid gap-3">
-                <h2 className="text-center text-4xl font-bold text-foreground">
+                <h2 className="text-center text-2xl font-bold text-foreground sm:text-3xl">
                     Starterkit Features
                 </h2>
                 <Balancer
                     as="p"
-                    className="max-w-2xl text-center text-xl text-muted-foreground"
+                    className="max-w-2xl text-center text-base text-muted-foreground sm:text-xl"
                 >
                     Starterkit features are designed to help you build a robust
                     and scalable SaaS project.
                 </Balancer>
             </div>
-            <div className="grid max-w-6xl grid-cols-2 gap-4">
+            <div className="grid max-w-6xl grid-cols-1 gap-4 md:grid-cols-2">
                 {features.map((feature, idx) => (
                     <FeatureCard
                         key={feature.title + idx}
@@ -43,7 +43,7 @@ function FeatureCard({
     index,
 }: FeatureCardProps) {
     return (
-        <div className="grid gap-10 rounded-[25px] border border-border p-10 transition-colors duration-300 hover:bg-muted/50 md:grid-cols-1">
+        <div className="grid gap-10 rounded-[25px] border border-border bg-muted/50 p-10 transition-colors duration-300 hover:bg-muted/20 md:grid-cols-1">
             <div
                 className={cn(
                     "-m-2 w-full rounded-xl bg-foreground/5 p-2 ring-1 ring-inset ring-foreground/10 lg:rounded-2xl",
@@ -80,7 +80,9 @@ function FeatureCard({
                     index % 2 === 0 ? "order-2" : "order-1",
                 )}
             >
-                <h3 className="text-2xl font-bold text-foreground">{title}</h3>
+                <h3 className="text-xl font-bold text-foreground sm:text-2xl">
+                    {title}
+                </h3>
                 <Balancer as="p" className="text-base text-muted-foreground">
                     {description}
                 </Balancer>

diff --git a/starterkits/saas/src/app/(web)/_components/general-components.tsx b/starterkits/saas/src/app/(web)/_components/general-components.tsx
@@ -40,13 +40,13 @@ export function WebPageHeader({
     return (
         <div className="flex flex-col items-center justify-center gap-5">
             {badge && (
-                <Badge>
+                <Badge size="md" variant="secondary">
                     <p className="text-center text-base">{badge}</p>
                 </Badge>
             )}
             <Balancer
                 as="h1"
-                className="max-w-2xl text-center font-heading text-5xl font-bold leading-none sm:text-5xl"
+                className="max-w-2xl text-center font-heading text-4xl font-bold leading-none sm:text-5xl"
             >
                 {title}
             </Balancer>

diff --git a/starterkits/saas/src/app/(web)/_components/promotion.tsx b/starterkits/saas/src/app/(web)/_components/promotion.tsx
@@ -3,10 +3,16 @@ 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">
+            <Balancer
+                as="h2"
+                className="text-center font-heading text-3xl 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">
+            <Balancer
+                as="p"
+                className="text-center text-base leading-relaxed text-background/70 sm:text-xl"
+            >
                 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,

diff --git a/starterkits/saas/src/app/(web)/_components/testimonials.tsx b/starterkits/saas/src/app/(web)/_components/testimonials.tsx
@@ -6,8 +6,10 @@ export function Testimonials() {
     return (
         <section className="flex flex-col items-center justify-center gap-20">
             <div className="grid gap-3 ">
-                <h2 className="text-center text-3xl font-bold">Testimonials</h2>
-                <p className="text-center text-xl text-muted-foreground">
+                <h2 className="text-center text-2xl font-bold sm:text-3xl">
+                    Testimonials
+                </h2>
+                <p className="text-center text-base text-muted-foreground sm:text-xl">
                     People have said...
                 </p>
             </div>

diff --git a/starterkits/saas/src/app/(web)/page.tsx b/starterkits/saas/src/app/(web)/page.tsx
@@ -23,7 +23,7 @@ export default async function HomePage() {
             >
                 <Balancer
                     as="p"
-                    className="text-center text-lg text-muted-foreground"
+                    className="text-center text-base text-muted-foreground sm:text-lg"
                 >
                     Elevate your development game with Rapidlaunch! Launch your
                     apps faster with our SaaS starterkits, components, building