From 618e2386bf025ad98bbf1c041a5333faa1c36540 Mon Sep 17 00:00:00 2001
From: Richie McIlroy <33632126+richiemcilroy@users.noreply.github.com>
Date: Thu, 14 Nov 2024 10:43:38 +0000
Subject: [PATCH] feat: Footer mobile design

---
 apps/web/components/Footer.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/apps/web/components/Footer.tsx b/apps/web/components/Footer.tsx
index 3e32b545..57fd820f 100644
--- a/apps/web/components/Footer.tsx
+++ b/apps/web/components/Footer.tsx
@@ -19,18 +19,20 @@ export const Footer = () => {
     return null;
 
   return (
-    <footer>
+    <footer className="p-5">
       <div
         style={{ boxShadow: "0px 2px 8px rgba(18, 22, 31, 0.02)" }}
-        className="wrapper bg-gray-100 border-[1px] border-gray-200 p-8 lg:p-12 rounded-[20px] mb-10 relative overflow-hidden"
+        className="mx-auto max-w-[1400px] bg-gray-100 border-[1px] border-gray-200 p-8 lg:p-12 rounded-[20px] mb-10 relative overflow-hidden"
       >
-        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start justify-between z-10 relative">
-          <div className="space-y-4 col-span-12 lg:col-span-6">
+        <div className="sm:grid space-y-8 sm:space-y-0 grid-cols-1 lg:grid-cols-12 gap-8 sm:items-start sm:justify-between z-10 relative">
+          <div className="space-y-2 sm:space-y-4 col-span-12 lg:col-span-6">
             <Logo showBeta={true} className="w-[104px] h-auto" />
-            <p className="text-gray-500 max-w-md">
-              Cap is the open source alternative to Loom. Lightweight, powerful,
-              and stunning. Record and share in seconds.
-            </p>
+            <div className="w-full">
+              <p className="text-gray-500">
+                Cap is the open source alternative to Loom. Lightweight,
+                powerful, and stunning. Record and share in seconds.
+              </p>
+            </div>
             <p className="text-gray-400">
               © Cap Software, Inc. {new Date().getFullYear()}.
             </p>