Improve mobile storefront layout, navigation, and product browsing.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/home/AboutSection.tsx

@@ -20,7 +20,7 @@ export default function AboutSection({
   imageSecondary = ABOUT.imageSecondary,
 }: AboutSectionProps) {
   return (
-    <section id="about" dir="rtl" className="scroll-mt-24 bg-white py-16 lg:py-24">
+    <section id="about" dir="rtl" className="scroll-mt-24 bg-background py-16 lg:py-24">
       <div className="mx-auto grid max-w-[1200px] items-center gap-12 px-4 sm:px-6 lg:grid-cols-2 lg:gap-16 lg:px-8">
         <div className="relative mx-auto w-full max-w-[520px] lg:mx-0">
           <div
@@ -64,7 +64,7 @@ export default function AboutSection({
           <p className="mt-4 text-base font-medium text-ink sm:text-lg">
             {lead}
           </p>
-          <p className="mt-4 text-sm font-light leading-8 text-ink/75 sm:text-[15px] sm:leading-8">
+          <p className="mt-4 text-justify text-sm font-light leading-8 text-ink/75 sm:text-[15px] sm:leading-8">
             {body}
           </p>
         </div>