fix(mobile): check for responsiveness, add scrollarea support

apps/client/src/pages/home/components/footer.tsx

@@ -7,10 +7,10 @@ import { Logo } from "@/client/components/logo";
 import { ThemeSwitch } from "@/client/components/theme-switch";
 
 export const Footer = () => (
-  <footer className="fixed inset-x-0 bottom-0 -z-50 h-[400px] bg-background">
+  <footer className="bg-background">
     <Separator />
 
-    <div className="container grid py-6 sm:grid-cols-3 lg:grid-cols-4">
+    <div className="container grid py-12 sm:grid-cols-3 lg:grid-cols-4">
       <div className="flex flex-col gap-y-2">
         <Logo size={96} className="-ml-2" />
 
@@ -24,7 +24,7 @@ export const Footer = () => (
       </div>
 
       <div className="relative col-start-4">
-        <div className="absolute bottom-0 right-0 space-x-2">
+        <div className="absolute bottom-0 right-0 lg:space-x-2">
           <LocaleSwitch />
           <ThemeSwitch />
         </div>

apps/client/src/pages/home/layout.tsx

@@ -1,12 +1,13 @@
+import { ScrollArea } from "@reactive-resume/ui";
 import { Outlet } from "react-router-dom";
 
 import { Footer } from "./components/footer";
 import { Header } from "./components/header";
 
 export const HomeLayout = () => (
-  <>
+  <ScrollArea orientation="vertical" className="h-screen">
     <Header />
     <Outlet />
     <Footer />
-  </>
+  </ScrollArea>
 );

apps/client/src/pages/home/page.tsx

@@ -12,7 +12,7 @@ import { SupportSection } from "./sections/support";
 import { TestimonialsSection } from "./sections/testimonials";
 
 export const HomePage = () => (
-  <main className="relative isolate mb-[400px] overflow-hidden bg-background">
+  <main className="relative isolate bg-background">
     <Helmet>
       <title>
         {t`Reactive Resume`} - {t`A free and open-source resume builder`}

apps/client/src/pages/home/sections/faq/index.tsx

@@ -226,32 +226,31 @@ const Question5 = () => (
   </AccordionItem>
 );
 
-export const FAQSection = () => {
-  return (
-    <section id="faq" className="container relative py-24 sm:py-32">
-      <div className="grid gap-12 lg:grid-cols-3">
-        <div className="col-span-1 space-y-6">
-          <h2 className="text-3xl font-bold">Frequently Asked Questions</h2>
+export const FAQSection = () => (
+  <section id="faq" className="container relative py-24 sm:py-32">
+    <div className="grid gap-12 lg:grid-cols-3">
+      <div className="space-y-6">
+        <h2 className="text-4xl font-bold">Frequently Asked Questions</h2>
 
-          <p className="text-base leading-loose">
-            Here are some questions I often get asked about Reactive Resume.
-          </p>
+        <p className="text-base leading-loose">
+          Here are some questions I often get asked about Reactive Resume.
+        </p>
 
-          <p className="text-sm leading-loose">
-            Unfortunately, this section is available only in English, as I do not want to burden
-            translators with having to translate these large paragraphs of text.
-          </p>
-        </div>
-        <div className="col-span-2">
-          <Accordion collapsible type="single">
-            <Question1 />
-            <Question2 />
-            <Question3 />
-            <Question4 />
-            <Question5 />
-          </Accordion>
-        </div>
+        <p className="text-sm leading-loose">
+          Unfortunately, this section is available only in English, as I do not want to burden
+          translators with having to translate these large paragraphs of text.
+        </p>
       </div>
-    </section>
-  );
-};
+
+      <div className="col-span-2">
+        <Accordion collapsible type="single">
+          <Question1 />
+          <Question2 />
+          <Question3 />
+          <Question4 />
+          <Question5 />
+        </Accordion>
+      </div>
+    </div>
+  </section>
+);

apps/client/src/pages/home/sections/sample-resumes/index.tsx

@@ -1,4 +1,4 @@
-import { t } from "@lingui/macro";
+import { t, Trans } from "@lingui/macro";
 import { motion } from "framer-motion";
 
 const resumes = [
@@ -13,9 +13,17 @@ export const SampleResumesSection = () => (
     <div className="container flex flex-col gap-12 lg:min-h-[600px] lg:flex-row lg:items-start">
       <div className="space-y-4 lg:mt-16 lg:basis-96">
         <h2 className="text-4xl font-bold">{t`Sample Resumes`}</h2>
-        <p className="text-base leading-relaxed">
-          {t`Have a look at some of the resume created to showcase the templates available on Reactive Resume. They also serve some great examples to help guide the creation of your own resume.`}
-        </p>
+
+        <Trans>
+          <p className="leading-relaxed">
+            Have a look at some of the resume created to showcase the templates available on
+            Reactive Resume.
+          </p>
+
+          <p className="leading-relaxed">
+            They could also serve as examples to help guide the creation of your next resume.
+          </p>
+        </Trans>
       </div>
 
       <div className="w-full overflow-hidden lg:absolute lg:right-0 lg:max-w-[55%]">