From 7260fbadcd48eb4b9e9756cdce11efa7c7226f73 Mon Sep 17 00:00:00 2001
From: Bruno Aseff <155178870+BrunoAseff@users.noreply.github.com>
Date: Sun, 2 Feb 2025 17:00:07 +0000
Subject: [PATCH 1/6] style: make footer responsive

---
 src/components/landing-page/Footer.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/landing-page/Footer.tsx b/src/components/landing-page/Footer.tsx
index 8d27ef7..683917a 100644
--- a/src/components/landing-page/Footer.tsx
+++ b/src/components/landing-page/Footer.tsx
@@ -4,23 +4,23 @@ import Logo from "../nova/Logo";
 
 export default function Footer() {
   return (
-    <div className="flex w-full justify-between border-t-[1px] border-accent pb-32 pt-6">
-      <div className="flex w-full flex-col items-start px-10">
+    <div className="flex w-full max-w-[100vw] flex-col justify-between border-t-[1px] border-accent pb-32 pt-6 md:flex-row">
+      <div className="flex w-full flex-col items-start px-4 md:px-10">
         <div className="w-full origin-left scale-50">
           <Logo />
         </div>
 
-        <p className="text-muted-foreground">© 2025, Nova Inc.</p>
+        <p className="mb-6 text-muted-foreground md:mb-0">© 2025, Nova Inc.</p>
       </div>
-      <div className="flex flex-col items-end gap-4 px-10">
+      <div className="flex flex-col items-start gap-4 px-4 md:items-end md:px-10">
         <LinkBtn className="cursor-pointer text-sm text-muted-foreground hover:text-secondary">
           <Link href="/privacy-policy">Privacy Policy</Link>
         </LinkBtn>
         <LinkBtn className="cursor-pointer text-sm text-muted-foreground hover:text-secondary">
           <Link href="/terms-of-service">Terms of Service</Link>
         </LinkBtn>
-        <div className="flex flex-col items-end justify-end text-sm text-muted-foreground">
-          <p className="font-semibold">Email</p>{" "}
+        <div className="flex flex-col items-start justify-end text-sm text-muted-foreground md:items-end">
+          <p className="font-semibold">Get in touch</p>{" "}
           <p>team.novaspaces@gmail.com</p>{" "}
         </div>
       </div>

From 95b31d704d1927a8ed97f7ee6e042cf319103885 Mon Sep 17 00:00:00 2001
From: Bruno Aseff <155178870+BrunoAseff@users.noreply.github.com>
Date: Sun, 2 Feb 2025 17:00:19 +0000
Subject: [PATCH 2/6] feat: add button to navbar

---
 src/components/landing-page/Nav.tsx | 87 +++++++++++++++--------------
 1 file changed, 46 insertions(+), 41 deletions(-)

diff --git a/src/components/landing-page/Nav.tsx b/src/components/landing-page/Nav.tsx
index 265ee0a..a4d2a48 100644
--- a/src/components/landing-page/Nav.tsx
+++ b/src/components/landing-page/Nav.tsx
@@ -49,52 +49,57 @@ export default function Nav() {
 
 function MobileNav() {
   return (
-    <nav className="fixed z-[98] flex w-full items-center justify-between border-b-[1px] border-secondary/10 bg-secondary/10 px-8 py-1 backdrop-blur-lg md:hidden">
+    <nav className="fixed z-[98] flex w-full items-center justify-between border-b-[1px] border-secondary/10 bg-secondary/10 px-2 py-1 backdrop-blur-lg md:hidden">
       <div className="w-full origin-left scale-50">
         <Logo />
       </div>
-      <Sheet>
-        <SheetTrigger>
-          <List className="text-foreground" size={32} />
-        </SheetTrigger>
-        <SheetContent className="z-[99] flex flex-col gap-10">
-          <SheetTitle className="text-transparent">
-            <div className="w-full origin-left scale-50">
-              <Logo />
-            </div>
-          </SheetTitle>
-          <ul className="mt-6 flex flex-col gap-6 text-base text-foreground">
-            <li>
-              <LinkBtn className="cursor-pointer text-foreground">
-                <SheetClose asChild>
-                  <Link href="#features">Features</Link>
-                </SheetClose>
-              </LinkBtn>
-            </li>
-            <li>
-              <LinkBtn className="cursor-pointer text-foreground">
+      <div className="flex items-center gap-3">
+        <Button className="block bg-secondary font-semibold md:hidden">
+          <Link href="/spaces">Try for free</Link>
+        </Button>
+        <Sheet>
+          <SheetTrigger>
+            <List className="text-foreground" size={32} />
+          </SheetTrigger>
+          <SheetContent className="z-[99] flex flex-col gap-10">
+            <SheetTitle className="text-transparent">
+              <div className="w-full origin-left scale-50">
+                <Logo />
+              </div>
+            </SheetTitle>
+            <ul className="mt-6 flex flex-col gap-6 text-base text-foreground">
+              <li>
+                <LinkBtn className="cursor-pointer text-foreground">
+                  <SheetClose asChild>
+                    <Link href="#features">Features</Link>
+                  </SheetClose>
+                </LinkBtn>
+              </li>
+              <li>
+                <LinkBtn className="cursor-pointer text-foreground">
+                  <SheetClose asChild>
+                    <Link href="#pricing">Pricing</Link>
+                  </SheetClose>
+                </LinkBtn>
+              </li>
+              <li>
+                <LinkBtn className="cursor-pointer text-foreground">
+                  <SheetClose asChild>
+                    <Link href="#footer">Contact</Link>
+                  </SheetClose>
+                </LinkBtn>
+              </li>
+            </ul>
+            <div className="flex items-center gap-2">
+              <Button className="bg-secondary font-semibold" asChild>
                 <SheetClose asChild>
-                  <Link href="#pricing">Pricing</Link>
+                  <Link href="/spaces">Go to Nova</Link>
                 </SheetClose>
-              </LinkBtn>
-            </li>
-            <li>
-              <LinkBtn className="cursor-pointer text-foreground">
-                <SheetClose asChild>
-                  <Link href="#footer">Contact</Link>
-                </SheetClose>
-              </LinkBtn>
-            </li>
-          </ul>
-          <div className="flex items-center gap-2">
-            <Button className="bg-secondary font-semibold" asChild>
-              <SheetClose asChild>
-                <Link href="/spaces">Go to Nova</Link>
-              </SheetClose>
-            </Button>
-          </div>
-        </SheetContent>
-      </Sheet>
+              </Button>
+            </div>
+          </SheetContent>
+        </Sheet>
+      </div>
     </nav>
   );
 }

From 46dbf75664e2344f79da869305a2c995db9741db Mon Sep 17 00:00:00 2001
From: Bruno Aseff <155178870+BrunoAseff@users.noreply.github.com>
Date: Sun, 2 Feb 2025 17:03:20 +0000
Subject: [PATCH 3/6] style: make pricing more responsive

---
 src/components/landing-page/Pricing.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/landing-page/Pricing.tsx b/src/components/landing-page/Pricing.tsx
index 1569689..bec6068 100644
--- a/src/components/landing-page/Pricing.tsx
+++ b/src/components/landing-page/Pricing.tsx
@@ -26,13 +26,15 @@ export default function Pricing() {
 
   return (
     <div className="flex w-full flex-col items-center justify-center">
-      <h1 className="my-10 text-4xl font-[500] text-foreground">Pricing</h1>
+      <h1 className="mb-10 mt-0 text-4xl font-[500] text-foreground md:mt-10">
+        Pricing
+      </h1>
 
       <div className="grid w-[90vw] grid-cols-1 items-stretch justify-center gap-4 md:grid-cols-2">
         <div className="z-50 flex rounded-2xl border-[1px] border-foreground/10 bg-background">
-          <div className="flex w-full flex-col items-center justify-between p-10">
+          <div className="flex w-full flex-col items-center justify-between p-8 md:p-10">
             <div className="w-full">
-              <Label className="flex w-full justify-between text-2xl font-[600]">
+              <Label className="flex w-full justify-between text-xl font-[600] md:text-2xl">
                 <p className="text-foreground">Nova</p>
                 <p>Free</p>
               </Label>
@@ -59,9 +61,9 @@ export default function Pricing() {
         </div>
 
         <div className="z-40 flex rounded-2xl border-[1px] border-secondary/20 bg-background">
-          <div className="flex w-full flex-col items-center justify-between p-10">
+          <div className="flex w-full flex-col items-center justify-between p-8 md:p-10">
             <div className="w-full">
-              <Label className="flex w-full justify-between bg-none text-2xl font-[600]">
+              <Label className="flex w-full justify-between bg-none text-xl font-[600] md:text-2xl">
                 <p className="bg-gradient-to-tl from-secondary via-secondary-smooth-500 to-secondary bg-clip-text text-transparent">
                   Supernova
                 </p>

From d1e615dbba984d3d35fad047547c36907fa33881 Mon Sep 17 00:00:00 2001
From: Bruno Aseff <155178870+BrunoAseff@users.noreply.github.com>
Date: Sun, 2 Feb 2025 17:19:41 +0000
Subject: [PATCH 4/6] style: fix appearance card

---
 src/components/landing-page/Cards/AppearanceCard.tsx | 6 +++---
 src/components/landing-page/Features.tsx             | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/landing-page/Cards/AppearanceCard.tsx b/src/components/landing-page/Cards/AppearanceCard.tsx
index fa708f1..21769fd 100644
--- a/src/components/landing-page/Cards/AppearanceCard.tsx
+++ b/src/components/landing-page/Cards/AppearanceCard.tsx
@@ -110,7 +110,7 @@ export default function AppearanceCard() {
   };
 
   return (
-    <div className="mb-3 w-full items-center justify-center rounded-2xl border-accent bg-accent-foreground">
+    <div className="w-full items-center justify-center rounded-2xl border-accent bg-accent-foreground">
       <RadioGroup
         className="flex w-full items-center justify-center gap-4"
         value={selectedTheme}
@@ -149,7 +149,7 @@ export default function AppearanceCard() {
         ))}
       </RadioGroup>
       <RadioGroup
-        className="mx-auto mt-4 grid w-fit scale-75 grid-cols-3 items-center justify-center gap-6 md:scale-90"
+        className="mx-auto mt-4 grid w-fit origin-left scale-75 grid-cols-3 items-center justify-center gap-x-24 md:scale-90 md:gap-6"
         value={selectedCustomTheme}
         onValueChange={handleCustomThemeChange}
       >
@@ -160,7 +160,7 @@ export default function AppearanceCard() {
               value={item.id}
               className="peer sr-only after:absolute after:inset-0"
             />
-            <div className="relative cursor-pointer overflow-hidden rounded-2xl border-2 border-input fill-foreground px-2 py-1 outline-offset-1 transition-colors peer-[:focus-visible]:outline peer-[:focus-visible]:outline-2 peer-[:focus-visible]:outline-ring/70 peer-data-[disabled]:cursor-not-allowed peer-data-[state=checked]:border-secondary peer-data-[state=checked]:bg-secondary-smooth-700/10 peer-data-[state=checked]:fill-secondary peer-data-[disabled]:opacity-50">
+            <div className="md:min-w-none relative min-w-28 cursor-pointer overflow-hidden rounded-2xl border-2 border-input fill-foreground px-2 py-1 outline-offset-1 transition-colors peer-[:focus-visible]:outline peer-[:focus-visible]:outline-2 peer-[:focus-visible]:outline-ring/70 peer-data-[disabled]:cursor-not-allowed peer-data-[state=checked]:border-secondary peer-data-[state=checked]:bg-secondary-smooth-700/10 peer-data-[state=checked]:fill-secondary peer-data-[disabled]:opacity-50">
               {item.icon}
             </div>
             <span className="group mt-2 flex items-center gap-1 text-secondary peer-data-[state=unchecked]:text-muted-foreground/70">
diff --git a/src/components/landing-page/Features.tsx b/src/components/landing-page/Features.tsx
index 80b3f16..0ac92f7 100644
--- a/src/components/landing-page/Features.tsx
+++ b/src/components/landing-page/Features.tsx
@@ -124,14 +124,14 @@ export default function Features() {
               return (
                 <CarouselItem
                   key={feature.id}
-                  className="basis-auto pl-4 md:pl-8"
+                  className="h-fit basis-auto pl-4 md:pl-8"
                 >
                   <div
                     className={`z-40 flex max-w-[90vw] flex-none flex-col items-start gap-4 rounded-2xl border border-accent/20 p-6 transition-all duration-300 md:w-fit md:max-w-none ${
                       index === selectedIndex ? "opacity-100" : "opacity-40"
                     } bg-accent-foreground`}
                   >
-                    <div className="flex w-full flex-col gap-1">
+                    <div className="flex max-w-none flex-col gap-1 md:max-w-[35vw]">
                       <h1 className="text-base font-medium md:text-xl">
                         {feature.title}
                       </h1>

From 73ec271c6bca0312514e2aadf197c86cd4970d7d Mon Sep 17 00:00:00 2001
From: Bruno Aseff <155178870+BrunoAseff@users.noreply.github.com>
Date: Sun, 2 Feb 2025 17:22:42 +0000
Subject: [PATCH 5/6] feat: cap background images

---
 .../landing-page/Cards/BackgroundCard.tsx     | 24 ++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/components/landing-page/Cards/BackgroundCard.tsx b/src/components/landing-page/Cards/BackgroundCard.tsx
index 02e70e4..13fdfe3 100644
--- a/src/components/landing-page/Cards/BackgroundCard.tsx
+++ b/src/components/landing-page/Cards/BackgroundCard.tsx
@@ -1,4 +1,5 @@
 import Image from "next/image";
+import { useEffect, useState } from "react";
 
 const FEATURED_BACKGROUNDS = [
   {
@@ -40,11 +41,32 @@ const FEATURED_BACKGROUNDS = [
 ] as const;
 
 export const BackgroundCard = () => {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+
+    // Initial check
+    checkMobile();
+
+    // Add resize listener
+    window.addEventListener("resize", checkMobile);
+
+    // Cleanup
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+
+  const displayedBackgrounds = isMobile
+    ? FEATURED_BACKGROUNDS.slice(0, 6)
+    : FEATURED_BACKGROUNDS;
+
   return (
     <div className="mb-3 w-full min-w-[300px] items-center justify-center rounded-2xl border-accent bg-accent-foreground md:min-w-[640px]">
       <div className="relative">
         <div className="grid grid-cols-2 gap-6 pb-[1.5rem] md:grid-cols-3">
-          {FEATURED_BACKGROUNDS.map((background) => (
+          {displayedBackgrounds.map((background) => (
             <div
               key={background.url}
               className="relative aspect-[5/3] overflow-hidden rounded-2xl"

From fe637eeacc22a59afbb2d64a8f37dc35f4cef9e5 Mon Sep 17 00:00:00 2001
From: Bruno Aseff <155178870+BrunoAseff@users.noreply.github.com>
Date: Sun, 2 Feb 2025 17:35:20 +0000
Subject: [PATCH 6/6] fix: change carousel height

---
 src/components/landing-page/Features.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/landing-page/Features.tsx b/src/components/landing-page/Features.tsx
index 0ac92f7..ff281b3 100644
--- a/src/components/landing-page/Features.tsx
+++ b/src/components/landing-page/Features.tsx
@@ -124,7 +124,7 @@ export default function Features() {
               return (
                 <CarouselItem
                   key={feature.id}
-                  className="h-fit basis-auto pl-4 md:pl-8"
+                  className="basis-auto pl-4 md:pl-8"
                 >
                   <div
                     className={`z-40 flex max-w-[90vw] flex-none flex-col items-start gap-4 rounded-2xl border border-accent/20 p-6 transition-all duration-300 md:w-fit md:max-w-none ${