feat: make the landing page responsive and works on mobile

src/app/[locale]/(auth)/dashboard/layout.tsx

@@ -49,7 +49,7 @@ export default function DashboardLayout(props: {
             </div>
 
             <nav className="ml-3">
-              <ul className="flex flex-row items-center gap-x-3 text-lg font-medium [&_li:hover]:opacity-100 [&_li]:opacity-75">
+              <ul className="flex flex-row items-center gap-x-3 text-lg font-medium [&_a:hover]:opacity-100 [&_a]:opacity-75">
                 <li>
                   <ActiveLink href="/dashboard">{t('home')}</ActiveLink>
                 </li>

src/components/ToggleMenuButton.tsx

@@ -0,0 +1,33 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
+type IToggleMenuButtonProps = {
+  onClick: () => void;
+};
+
+/**
+ * A toggle button to show/hide component in small screen.
+ * @component
+ * @params props - Component props.
+ * @param props.onClick - Function to run when the button is clicked.
+ */
+const ToggleMenuButton = (props: IToggleMenuButtonProps) => (
+  <button
+    className="rounded-md p-2 text-gray-900 hover:bg-white"
+    onClick={props.onClick}
+    type="button"
+  >
+    <svg
+      className="size-6 stroke-current"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      strokeWidth="1.5"
+      fill="none"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M0 0h24v24H0z" stroke="none" />
+      <path d="M4 6h16M4 12h16M4 18h16" />
+    </svg>
+  </button>
+);
+
+export { ToggleMenuButton };

src/components/ui/accordion.tsx

@@ -28,7 +28,7 @@ const AccordionTrigger = React.forwardRef<
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        'flex flex-1 items-center justify-between py-5 text-lg font-medium transition-all hover:no-underline [&[data-state=open]>svg]:rotate-90',
+        'flex flex-1 items-center justify-between py-5 text-left text-lg font-medium transition-all hover:no-underline [&[data-state=open]>svg]:rotate-90',
         className,
       )}
       {...props}

src/features/billing/PricingInformation.tsx

@@ -11,7 +11,7 @@ const PricingInformation = (props: {
   const t = useTranslations('PricingPlan');
 
   return (
-    <div className="grid grid-cols-3 gap-x-6">
+    <div className="grid grid-cols-1 gap-x-6 gap-y-8 md:grid-cols-3">
       {PricingPlanList.map((plan) => (
         <PricingCard
           key={plan.id}

src/features/landing/CenteredFooter.tsx

@@ -15,15 +15,15 @@ const CenteredFooter = (props: {
     <div className="flex flex-col items-center text-center">
       {props.logo}
 
-      <ul className="mt-4 flex flex-row gap-x-8 text-lg [&_li:hover]:opacity-100 [&_li]:opacity-60">
+      <ul className="mt-4 flex gap-x-8 text-lg max-sm:flex-col [&_a:hover]:opacity-100 [&_a]:opacity-60">
         {props.children}
       </ul>
 
       <ul className="mt-4 flex flex-row gap-x-5 text-muted-foreground [&_svg:hover]:text-primary [&_svg:hover]:opacity-100 [&_svg]:size-5 [&_svg]:fill-current [&_svg]:opacity-60">
         {props.iconList}
       </ul>
 
-      <div className="mt-6 flex w-full justify-between border-t pt-3 text-sm text-muted-foreground">
+      <div className="mt-6 flex w-full items-center justify-between gap-y-2 border-t pt-3 text-sm text-muted-foreground max-md:flex-col">
         <div>
           © Copyright {new Date().getFullYear()} {props.name}.{' '}
           {t.rich('designed_by', {

src/features/landing/CenteredHero.tsx

@@ -29,7 +29,7 @@ const CenteredHero = (props: {
       {props.description}
     </div>
 
-    <div className="mt-8 flex flex-row justify-center gap-x-5">
+    <div className="mt-8 flex justify-center gap-x-5 gap-y-3 max-sm:flex-col">
       {props.buttons}
     </div>
   </>

src/features/landing/CenteredMenu.tsx

@@ -1,25 +1,48 @@
+'use client';
+
 import Link from 'next/link';
 
+import { ToggleMenuButton } from '@/components/ToggleMenuButton';
+import { useMenu } from '@/hooks/UseMenu';
+import { cn } from '@/utils/Helpers';
+
 const CenteredMenu = (props: {
   logo: React.ReactNode;
   children: React.ReactNode;
   rightMenu: React.ReactNode;
-}) => (
-  <div className="flex items-center justify-between">
-    <Link href="/">{props.logo}</Link>
-
-    <nav>
-      <ul className="flex flex-row items-center gap-x-6 text-lg font-medium [&_li:hover]:opacity-100 [&_li]:opacity-60">
-        {props.children}
-      </ul>
-    </nav>
-
-    <div>
-      <ul className="flex flex-row items-center gap-x-4 text-lg font-medium [&_li:not(:last-child):hover]:opacity-100 [&_li:not(:last-child)]:opacity-60">
-        {props.rightMenu}
-      </ul>
+}) => {
+  const { showMenu, handleToggleMenu } = useMenu();
+
+  const navClass = cn('max-lg:w-full max-lg:bg-secondary max-lg:p-5', {
+    'max-lg:hidden': !showMenu,
+  });
+
+  return (
+    <div className="flex flex-wrap items-center justify-between">
+      <Link href="/">{props.logo}</Link>
+
+      <div className="lg:hidden">
+        <ToggleMenuButton onClick={handleToggleMenu} />
+      </div>
+
+      <nav className={cn('rounded-t max-lg:mt-2', navClass)}>
+        <ul className="flex gap-x-6 gap-y-1 text-lg font-medium max-lg:flex-col [&_a:hover]:opacity-100 [&_a]:opacity-60 max-lg:[&_a]:inline-block max-lg:[&_a]:w-full">
+          {props.children}
+        </ul>
+      </nav>
+
+      <div
+        className={cn(
+          'rounded-b max-lg:border-t max-lg:border-border',
+          navClass,
+        )}
+      >
+        <ul className="flex flex-row items-center gap-x-4 text-lg font-medium [&_li:not(:last-child):hover]:opacity-100 [&_li:not(:last-child)]:opacity-60">
+          {props.rightMenu}
+        </ul>
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 export { CenteredMenu };

src/features/landing/LogoCloud.tsx

@@ -4,7 +4,7 @@ const LogoCloud = (props: { text: string; children: React.ReactNode }) => (
       {props.text}
     </div>
 
-    <div className="mt-6 grid grid-cols-5 place-items-center gap-x-3 [&_img:hover]:opacity-100 [&_img]:opacity-60">
+    <div className="mt-6 grid grid-cols-2 place-items-center gap-x-3 gap-y-6 md:grid-cols-5 [&_a:hover]:opacity-100 [&_a]:opacity-60">
       {props.children}
     </div>
   </>

src/hooks/UseMenu.ts

@@ -0,0 +1,19 @@
+import { useState } from 'react';
+
+/**
+ * React Hook to toggle element. Mostly used for responsive menu.
+ * @hook
+ */
+export const useMenu = () => {
+  const [showMenu, setShowMenu] = useState(false);
+
+  const handleToggleMenu = () => {
+    setShowMenu((prevState) => !prevState);
+  };
+
+  const handleClose = () => {
+    setShowMenu(false);
+  };
+
+  return { showMenu, handleToggleMenu, handleClose };
+};

src/templates/Features.tsx

@@ -14,7 +14,7 @@ const Features = () => {
         title={t('section_title')}
         description={t('section_description')}
       >
-        <div className="grid grid-cols-3 gap-x-3 gap-y-8">
+        <div className="grid grid-cols-1 gap-x-3 gap-y-8 md:grid-cols-3">
           <FeatureCard
             icon={
               <svg

src/templates/Sponsors.tsx

@@ -28,7 +28,7 @@ const Sponsors = () => (
           src="/assets/images/turso-dark.png"
           alt="Turso"
           width="128"
-          height="32"
+          height="29"
         />
       </a>