From 1da5a79f39b0c55f3d2dd0e3a2ec75c8fb7e735a Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 11 Apr 2026 05:59:49 +0000
Subject: [PATCH 1/7] feat(landing): replicate guides Apple/SwiftUI style on
 landing page

Agent-Logs-Url: https://github.com/PackRat-AI/PackRat/sessions/2b7dec9c-b050-4f2b-9f3e-4f9d6672403f
---
 apps/landing/app/globals.css                  | 130 +++++++----
 apps/landing/app/layout.tsx                   |  19 +-
 apps/landing/app/page.tsx                     |  22 +-
 apps/landing/components/main-nav.tsx          | 143 +++++++------
 apps/landing/components/sections/download.tsx | 201 +++++++-----------
 apps/landing/components/sections/faq.tsx      |  87 +++-----
 .../components/sections/feature-section.tsx   | 105 ++++-----
 .../components/sections/how-it-works.tsx      |  53 ++---
 .../sections/integration-section.tsx          |  43 +---
 .../components/sections/landing-hero.tsx      | 124 +++++------
 .../components/sections/testimonials.tsx      |  94 ++++----
 apps/landing/components/site-footer.tsx       |  72 +++----
 apps/landing/tailwind.config.js               |  41 +++-
 13 files changed, 518 insertions(+), 616 deletions(-)

diff --git a/apps/landing/app/globals.css b/apps/landing/app/globals.css
index a8d99722c1..11ce06c602 100644
--- a/apps/landing/app/globals.css
+++ b/apps/landing/app/globals.css
@@ -1,25 +1,24 @@
-@import url("../styles/noise-texture.css");
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer base {
   :root {
+    /* Apple-inspired color palette */
     --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+    --foreground: 240 10% 3.9%;
 
     --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+    --card-foreground: 240 10% 3.9%;
 
     --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
+    --popover-foreground: 240 10% 3.9%;
 
-    --primary: 180 70% 25%;
-    --primary-foreground: 210 40% 98%;
+    --primary: 211 100% 50%;
+    --primary-foreground: 0 0% 100%;
 
-    --secondary: 24.6 95% 53.1%;
-    --secondary-foreground: 0 0% 100%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
 
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
@@ -28,44 +27,44 @@
     --accent-foreground: 222.2 47.4% 11.2%;
 
     --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
+    --destructive-foreground: 0 0% 100%;
 
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
+    --ring: 211 100% 50%;
 
     --radius: 0.5rem;
     --device-notch-color: #1e293b;
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
 
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
 
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
 
-    --primary: 180 70% 40%;
-    --primary-foreground: 222.2 47.4% 11.2%;
+    --primary: 211 100% 50%;
+    --primary-foreground: 0 0% 98%;
 
-    --secondary: 24.6 95% 53.1%;
-    --secondary-foreground: 0 0% 100%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
 
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
 
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
 
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
+    --destructive-foreground: 0 0% 98%;
 
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 211 100% 50%;
     --device-notch-color: #000000;
   }
 }
@@ -76,13 +75,75 @@
   }
   body {
     @apply bg-background text-foreground;
+    font-feature-settings:
+      "ss01" 1,
+      "ss03" 1;
   }
   html {
     scroll-behavior: smooth;
   }
+
+  /* Apple-style typography */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply font-medium tracking-tight;
+  }
+
+  h1 {
+    letter-spacing: -0.025em;
+  }
+
+  h2 {
+    letter-spacing: -0.025em;
+  }
+
+  h3 {
+    letter-spacing: -0.015em;
+  }
+
+  /* Apple-style smooth transitions */
+  a,
+  button {
+    @apply transition-all duration-200;
+  }
 }
 
-/* Additional styles for scrollbar */
+/* Apple-style component helpers */
+.apple-card {
+  @apply rounded-2xl border border-border/40 bg-card shadow-apple;
+}
+
+.apple-button {
+  @apply rounded-full font-medium transition-all duration-200 ease-in-out;
+}
+
+.apple-button-primary {
+  @apply bg-primary text-primary-foreground hover:bg-primary/90;
+}
+
+.apple-badge {
+  @apply inline-flex items-center rounded-full bg-blue-50 dark:bg-blue-950/30 text-primary dark:text-blue-400 py-1 px-4 text-sm font-medium;
+}
+
+.apple-gradient-bg {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(234, 238, 242, 1) 100%);
+}
+
+.dark .apple-gradient-bg {
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(20, 22, 25, 1) 100%);
+}
+
+/* Apple-style blur effects */
+.apple-blur {
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+}
+
+/* Scrollbar */
 ::-webkit-scrollbar {
   width: 10px;
 }
@@ -100,14 +161,7 @@
   background: hsl(var(--muted-foreground) / 0.5);
 }
 
-/* Smooth transitions */
-.transition-all {
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 300ms;
-}
-
-/* Static animations for fade-in effects */
+/* Fade-in animations */
 @keyframes fadeIn {
   from {
     opacity: 0;
diff --git a/apps/landing/app/layout.tsx b/apps/landing/app/layout.tsx
index 050b5e591d..24f3ffbf27 100644
--- a/apps/landing/app/layout.tsx
+++ b/apps/landing/app/layout.tsx
@@ -2,12 +2,17 @@ import MainNav from 'landing-app/components/main-nav';
 import SiteFooter from 'landing-app/components/site-footer';
 import { ThemeProvider } from 'landing-app/components/theme-provider';
 import { siteConfig } from 'landing-app/config/site';
+import { cn } from 'landing-app/lib/utils';
 import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
+import { Mona_Sans as FontSans } from 'next/font/google';
 import type React from 'react';
 import './globals.css';
 
-const inter = Inter({ subsets: ['latin'], display: 'swap' });
+const fontSans = FontSans({
+  subsets: ['latin'],
+  variable: '--font-sans',
+  weight: ['400', '500', '600', '700'],
+});
 
 export const metadata: Metadata = {
   title: {
@@ -61,16 +66,18 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={inter.className}>
+      <body className={cn('min-h-screen bg-background font-sans antialiased', fontSans.variable)}>
         <ThemeProvider
           attribute="class"
           defaultTheme="system"
           enableSystem
           disableTransitionOnChange
         >
-          <MainNav />
-          {children}
-          <SiteFooter />
+          <div className="flex min-h-screen flex-col">
+            <MainNav />
+            {children}
+            <SiteFooter />
+          </div>
         </ThemeProvider>
       </body>
     </html>
diff --git a/apps/landing/app/page.tsx b/apps/landing/app/page.tsx
index 8be09b0506..8daa5bb085 100644
--- a/apps/landing/app/page.tsx
+++ b/apps/landing/app/page.tsx
@@ -8,18 +8,14 @@ import TestimonialsSection from 'landing-app/components/sections/testimonials';
 
 export default function Home() {
   return (
-    <div className="relative flex min-h-screen flex-col">
-      {/* Static dot-grid background — SSR-safe, zero JS, zero layout shift */}
-      <div className="absolute inset-0 -z-10 [background-image:radial-gradient(hsl(var(--foreground)/0.07)_1px,transparent_1px)] [background-size:40px_40px]" />
-      <main className="flex-1">
-        <LandingHero />
-        <FeatureSection />
-        <HowItWorksSection />
-        <IntegrationSection />
-        <TestimonialsSection />
-        <DownloadSection />
-        <FaqSection />
-      </main>
-    </div>
+    <main className="flex-1">
+      <LandingHero />
+      <FeatureSection />
+      <HowItWorksSection />
+      <IntegrationSection />
+      <TestimonialsSection />
+      <DownloadSection />
+      <FaqSection />
+    </main>
   );
 }
diff --git a/apps/landing/components/main-nav.tsx b/apps/landing/components/main-nav.tsx
index bb4669d7af..bb958dc067 100644
--- a/apps/landing/components/main-nav.tsx
+++ b/apps/landing/components/main-nav.tsx
@@ -1,8 +1,6 @@
 'use client';
 
 import { ThemeToggle } from 'landing-app/components/theme-toggle';
-import { Button } from 'landing-app/components/ui/button';
-import GradientText from 'landing-app/components/ui/gradient-text';
 import { Sheet, SheetContent, SheetTrigger } from 'landing-app/components/ui/sheet';
 import { siteConfig } from 'landing-app/config/site';
 import { cn } from 'landing-app/lib/utils';
@@ -16,18 +14,13 @@ export default function MainNav() {
   const [isScrolled, setIsScrolled] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
 
-  // Handle scroll events to update active section and navbar style
   useEffect(() => {
     const handleScroll = () => {
       setIsScrolled(window.scrollY > 10);
 
-      // Find the current active section based on scroll position
       const sections = siteConfig.mainNav.map((item) => item.href.substring(1));
-
-      // Get all section elements
       const sectionElements = sections.map((id) => document.getElementById(id)).filter(Boolean);
 
-      // Find the section that is currently in view
       const currentSection = sectionElements.find((element) => {
         if (!element) return false;
         const rect = element.getBoundingClientRect();
@@ -37,20 +30,18 @@ export default function MainNav() {
       if (currentSection) {
         setActiveSection(`#${currentSection.id}`);
       } else if (window.scrollY < 100) {
-        setActiveSection(''); // At the top of the page
+        setActiveSection('');
       }
     };
 
     window.addEventListener('scroll', handleScroll);
-    handleScroll(); // Initialize on mount
+    handleScroll();
 
     return () => window.removeEventListener('scroll', handleScroll);
   }, []);
 
-  // Handle smooth scrolling when clicking on navigation links
   const scrollToSection = (e: React.MouseEvent<HTMLAnchorElement>, href: string) => {
     if (href.startsWith('http')) {
-      // External link → open in a new tab
       e.preventDefault();
       window.open(href, '_blank', 'noopener,noreferrer');
       return;
@@ -70,82 +61,91 @@ export default function MainNav() {
   return (
     <header
       className={cn(
-        'sticky top-0 z-40 w-full transition-all duration-300',
+        'sticky top-0 z-50 w-full transition-all duration-300',
         isScrolled
-          ? 'bg-background/90 shadow-sm backdrop-blur-xl border-b border-border/40 py-2'
-          : 'bg-transparent py-4',
+          ? 'bg-background/80 backdrop-blur-xl border-b border-border/40 py-2'
+          : 'bg-background py-4',
       )}
     >
-      <div className="container flex items-center justify-between px-4 md:px-8 lg:px-12">
-        <Link href="/" className="flex items-center gap-2 z-10">
-          <div className="relative">
-            <Backpack className="h-8 w-8 text-primary" />
-            <div className="absolute -inset-1.5 rounded-full blur-lg opacity-30 -z-10 bg-primary"></div>
+      <div className="container flex h-10 items-center">
+        {/* Logo */}
+        <div className="flex items-center mr-6">
+          <Link href="/" className="flex items-center gap-2">
+            <Backpack className="h-5 w-5 text-apple-blue" />
+            <span className="text-lg font-semibold">{siteConfig.name}</span>
+          </Link>
+        </div>
+
+        {/* Desktop navigation – Apple style: centered, rounded-full hover */}
+        <nav className="hidden md:flex flex-1 justify-center">
+          <div className="flex space-x-1">
+            {siteConfig.mainNav.map((item) => (
+              <Link
+                key={item.href}
+                href={item.href}
+                onClick={(e) => scrollToSection(e, item.href)}
+                className={cn(
+                  'px-3 py-2 text-sm font-medium rounded-full hover:bg-black/5 dark:hover:bg-white/10 transition-colors',
+                  activeSection === item.href
+                    ? 'text-apple-blue font-semibold'
+                    : 'text-foreground/80',
+                )}
+              >
+                {item.title}
+              </Link>
+            ))}
           </div>
-          <GradientText className="text-xl font-bold">{siteConfig.name}</GradientText>
-        </Link>
-
-        {/* Desktop Navigation */}
-        <nav className="hidden md:flex items-center gap-6">
-          {siteConfig.mainNav.map((item) => (
-            <Link
-              key={item.href}
-              href={item.href}
-              onClick={(e) => scrollToSection(e, item.href)}
-              className={cn(
-                'text-sm font-medium tracking-wide transition-colors hover:text-primary relative pb-0.5',
-                activeSection === item.href
-                  ? 'text-primary after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:rounded-full after:bg-primary'
-                  : 'text-muted-foreground',
-              )}
-            >
-              {item.title}
-            </Link>
-          ))}
         </nav>
 
-        <div className="flex items-center gap-4">
+        {/* Right side: theme toggle + CTA */}
+        <div className="flex items-center gap-2 ml-auto">
           <ThemeToggle />
 
-          <Button asChild className="hidden md:inline-flex" variant="default">
-            <Link
-              href={siteConfig.cta.primary.href}
-              onClick={(e) => scrollToSection(e, siteConfig.cta.primary.href)}
-            >
-              {siteConfig.cta.primary.text}
-            </Link>
-          </Button>
+          <Link
+            href={siteConfig.cta.primary.href}
+            onClick={(e) => scrollToSection(e, siteConfig.cta.primary.href)}
+            className="hidden md:inline-flex items-center gap-1.5 ml-2 px-4 py-1.5 rounded-full bg-apple-blue text-white text-sm font-medium hover:bg-apple-blue/90 transition-colors"
+          >
+            {siteConfig.cta.primary.text}
+          </Link>
 
-          {/* Mobile menu using Sheet component */}
+          {/* Mobile hamburger */}
           <Sheet open={isOpen} onOpenChange={setIsOpen}>
             <SheetTrigger asChild>
-              <Button variant="ghost" size="icon" className="md:hidden">
-                <Menu className="h-6 w-6" />
-                <span className="sr-only">Toggle menu</span>
-              </Button>
+              <button
+                type="button"
+                className="md:hidden ml-1 p-2 rounded-full hover:bg-black/5 dark:hover:bg-white/10 transition-colors"
+                aria-label="Open menu"
+              >
+                <Menu className="h-5 w-5" />
+              </button>
             </SheetTrigger>
-            <SheetContent side="right" className="w-[80vw] sm:w-[350px] pr-0">
+            <SheetContent side="right" className="w-[280px] sm:w-[350px]">
               <div className="flex flex-col h-full">
-                <div className="flex justify-between items-center mb-8 pr-6">
+                <div className="flex justify-between items-center mb-8">
                   <div className="flex items-center gap-2">
-                    <Backpack className="h-6 w-6 text-primary" />
-                    <GradientText className="text-lg font-bold">{siteConfig.name}</GradientText>
+                    <Backpack className="h-5 w-5 text-apple-blue" />
+                    <span className="text-lg font-semibold">{siteConfig.name}</span>
                   </div>
-                  <Button variant="ghost" size="icon" onClick={() => setIsOpen(false)}>
+                  <button
+                    type="button"
+                    className="p-2 rounded-full hover:bg-black/5 dark:hover:bg-white/10"
+                    onClick={() => setIsOpen(false)}
+                    aria-label="Close menu"
+                  >
                     <X className="h-5 w-5" />
-                    <span className="sr-only">Close menu</span>
-                  </Button>
+                  </button>
                 </div>
 
-                <nav className="flex flex-col gap-6 pr-6">
+                <nav className="flex flex-col gap-2">
                   {siteConfig.mainNav.map((item) => (
                     <Link
                       key={item.href}
                       href={item.href}
                       onClick={(e) => scrollToSection(e, item.href)}
                       className={cn(
-                        'text-lg font-medium py-2 border-b border-border/20 transition-colors hover:text-primary',
-                        activeSection === item.href && 'text-primary font-semibold',
+                        'px-3 py-2 text-base font-medium rounded-full hover:bg-black/5 dark:hover:bg-white/10 transition-colors',
+                        activeSection === item.href ? 'text-apple-blue font-semibold' : '',
                       )}
                     >
                       {item.title}
@@ -153,15 +153,14 @@ export default function MainNav() {
                   ))}
                 </nav>
 
-                <div className="mt-auto mb-8 pr-6">
-                  <Button asChild className="w-full" variant="default">
-                    <Link
-                      href={siteConfig.cta.primary.href}
-                      onClick={(e) => scrollToSection(e, siteConfig.cta.primary.href)}
-                    >
-                      {siteConfig.cta.primary.text}
-                    </Link>
-                  </Button>
+                <div className="mt-auto mb-6">
+                  <Link
+                    href={siteConfig.cta.primary.href}
+                    onClick={(e) => scrollToSection(e, siteConfig.cta.primary.href)}
+                    className="flex items-center justify-center w-full px-4 py-2.5 rounded-full bg-apple-blue text-white text-sm font-medium hover:bg-apple-blue/90 transition-colors"
+                  >
+                    {siteConfig.cta.primary.text}
+                  </Link>
                 </div>
               </div>
             </SheetContent>
diff --git a/apps/landing/components/sections/download.tsx b/apps/landing/components/sections/download.tsx
index 6b766c9cee..5b4137f741 100644
--- a/apps/landing/components/sections/download.tsx
+++ b/apps/landing/components/sections/download.tsx
@@ -1,151 +1,100 @@
-import AnimatedGradientBorder from 'landing-app/components/ui/animated-gradient-border';
-import { Button } from 'landing-app/components/ui/button';
-import GradientBackground from 'landing-app/components/ui/gradient-background';
+'use client';
+
 import { siteConfig } from 'landing-app/config/site';
 import { Apple, Check, Store } from 'lucide-react';
 import Image from 'next/image';
 import Link from 'next/link';
+import type React from 'react';
 
 export default function DownloadSection() {
+  const scrollToSection = (e: React.MouseEvent<HTMLAnchorElement>, href: string) => {
+    e.preventDefault();
+    const targetId = href.substring(1);
+    const element = document.getElementById(targetId);
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth' });
+    }
+  };
+
   return (
     <section id="download" className="py-20 md:py-28 lg:py-36 relative overflow-hidden">
-      {/* Background decoration */}
-      <div className="absolute inset-0 -z-10 bg-primary/5 dark:bg-primary/10"></div>
-      <GradientBackground variant="mesh" />
-
-      <div className="container px-4 md:px-8 lg:px-12">
-        <AnimatedGradientBorder
-          borderWidth={1}
-          colors={['hsl(var(--primary))', 'hsl(var(--secondary))', 'hsl(var(--primary))']}
-          className="rounded-2xl md:rounded-[40px] shadow-2xl overflow-hidden relative border animate-fade-in"
-        >
-          <div className="rounded-2xl md:rounded-[40px] bg-card shadow-2xl overflow-hidden relative">
-            {/* Background gradient */}
-            <div className="absolute inset-0 -z-10 opacity-5 bg-gradient-to-br from-primary via-primary/80 to-primary/60"></div>
+      {/* Subtle Apple-style background gradient */}
+      <div className="absolute inset-0 -z-10 bg-gradient-to-b from-blue-50 to-white dark:from-blue-950/20 dark:to-background" />
 
-            <div className="grid lg:grid-cols-2 items-center gap-8 md:gap-12 p-6 md:p-8 lg:p-12">
-              <div className="space-y-4 md:space-y-6 max-w-xl">
-                <div className="inline-flex items-center rounded-full py-1 px-4 text-sm font-medium border shadow-sm text-secondary border-secondary/30">
-                  <span className="mr-1.5 h-2 w-2 rounded-full animate-pulse bg-secondary"></span>
-                  Get Started Today
-                </div>
+      <div className="container">
+        <div className="apple-card overflow-hidden">
+          <div className="grid lg:grid-cols-2 items-center gap-8 md:gap-12 p-6 md:p-8 lg:p-12">
+            {/* Text content */}
+            <div className="space-y-4 md:space-y-6 max-w-xl">
+              <div className="apple-badge">
+                <span className="mr-1.5 h-2 w-2 rounded-full animate-pulse bg-apple-blue inline-block" />
+                Get Started Today
+              </div>
 
-                <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold tracking-tight text-foreground">
-                  {siteConfig.download.title}
-                </h2>
+              <h2 className="text-2xl md:text-3xl lg:text-4xl font-semibold tracking-tight">
+                {siteConfig.download.title}
+              </h2>
 
-                <p className="text-base md:text-lg text-muted-foreground">
-                  {siteConfig.download.subtitle}
-                </p>
+              <p className="text-base md:text-lg text-muted-foreground">
+                {siteConfig.download.subtitle}
+              </p>
 
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 md:gap-4">
-                  {/* Modified features list to remove pricing references */}
-                  <div className="flex items-start">
-                    <div className="mr-2 mt-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary/15">
-                      <Check className="h-3 w-3 text-primary" />
-                    </div>
-                    <span className="text-sm text-muted-foreground">Free to use</span>
-                  </div>
-                  <div className="flex items-start">
-                    <div className="mr-2 mt-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary/15">
-                      <Check className="h-3 w-3 text-primary" />
-                    </div>
-                    <span className="text-sm text-muted-foreground">Offline access</span>
-                  </div>
-                  <div className="flex items-start">
-                    <div className="mr-2 mt-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary/15">
-                      <Check className="h-3 w-3 text-primary" />
-                    </div>
-                    <span className="text-sm text-muted-foreground">Regular updates</span>
-                  </div>
-                  <div className="flex items-start">
-                    <div className="mr-2 mt-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary/15">
-                      <Check className="h-3 w-3 text-primary" />
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 md:gap-4">
+                {['Free to use', 'Offline access', 'Regular updates', 'Community support'].map(
+                  (item) => (
+                    <div key={item} className="flex items-start gap-2">
+                      <div className="mt-1 flex h-5 w-5 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/20 flex-shrink-0">
+                        <Check className="h-3 w-3 text-apple-blue" />
+                      </div>
+                      <span className="text-sm text-muted-foreground">{item}</span>
                     </div>
-                    <span className="text-sm text-muted-foreground">Community support</span>
-                  </div>
-                </div>
+                  ),
+                )}
+              </div>
 
-                <div className="flex flex-col sm:flex-row gap-4 pt-4">
-                  <Button asChild size="lg" className="group relative overflow-hidden">
-                    <Link
-                      href={siteConfig.download.appStoreLink}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      <div className="absolute inset-0 w-full h-full transition-all duration-300 ease-out translate-y-full group-hover:translate-y-0 bg-black/10 dark:bg-white/10"></div>
-                      <Apple className="mr-2 h-5 w-5" />
-                      App Store
-                    </Link>
-                  </Button>
+              <div className="flex flex-col sm:flex-row gap-3 pt-4">
+                <Link
+                  href={siteConfig.download.appStoreLink}
+                  onClick={(e) => scrollToSection(e, siteConfig.download.appStoreLink)}
+                  className="inline-flex items-center justify-center gap-2 rounded-full bg-apple-blue text-white px-8 h-12 text-sm font-medium hover:bg-apple-blue/90 transition-colors"
+                >
+                  <Apple className="h-5 w-5" />
+                  App Store
+                </Link>
 
-                  <Button asChild size="lg" variant="outline" className="group">
-                    <Link
-                      href={siteConfig.download.googlePlayLink}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      <Store className="mr-2 h-5 w-5" />
-                      Google Play
-                    </Link>
-                  </Button>
-                </div>
+                <Link
+                  href={siteConfig.download.googlePlayLink}
+                  onClick={(e) => scrollToSection(e, siteConfig.download.googlePlayLink)}
+                  className="inline-flex items-center justify-center gap-2 rounded-full border border-border bg-background px-8 h-12 text-sm font-medium hover:bg-black/5 dark:hover:bg-white/10 transition-colors"
+                >
+                  <Store className="h-5 w-5" />
+                  Google Play
+                </Link>
               </div>
+            </div>
 
-              <div className="relative mx-auto lg:mx-0">
-                <div className="relative mx-auto max-w-[220px] md:max-w-[280px]">
-                  <div
-                    className="relative overflow-hidden rounded-[30px] md:rounded-[40px] border-[10px] md:border-[14px] bg-white aspect-[9/19.5] shadow-2xl shadow-black/20"
-                    style={{ borderColor: '#1E293B' }}
-                  >
-                    <div className="absolute top-0 left-1/2 z-10 h-4 md:h-6 w-24 md:w-36 -translate-x-1/2 rounded-b-3xl bg-black"></div>
-                    <div className="absolute inset-0 overflow-hidden pt-4 md:pt-5">
-                      <Image
-                        width={522}
-                        height={1024}
-                        src={siteConfig.download.image || '/placeholder.svg'}
-                        alt="PackRat App"
-                        className="object-cover w-full h-full"
-                      />
-                      <div className="absolute inset-0 bg-gradient-to-br from-white/10 via-transparent to-transparent opacity-80"></div>
-                      <div className="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent"></div>
-                    </div>
+            {/* Phone mockup */}
+            <div className="relative mx-auto lg:mx-0">
+              <div className="relative mx-auto max-w-[220px] md:max-w-[280px]">
+                <div
+                  className="relative overflow-hidden rounded-[30px] md:rounded-[40px] border-[10px] md:border-[14px] bg-white aspect-[9/19.5] shadow-apple-lg"
+                  style={{ borderColor: '#1E293B' }}
+                >
+                  <div className="absolute top-0 left-1/2 z-10 h-4 md:h-6 w-24 md:w-36 -translate-x-1/2 rounded-b-3xl bg-black" />
+                  <div className="absolute inset-0 overflow-hidden pt-4 md:pt-5">
+                    <Image
+                      width={522}
+                      height={1024}
+                      src={siteConfig.download.image || '/placeholder.svg'}
+                      alt="PackRat App"
+                      className="object-cover w-full h-full"
+                    />
                   </div>
                 </div>
-
-                {/* Decorative elements - only visible on larger screens */}
-                <div className="absolute bottom-1/2 -left-12 transform -translate-x-1/2 translate-y-1/2 rotate-90 hidden lg:block">
-                  <svg
-                    width="120"
-                    height="120"
-                    viewBox="0 0 120 120"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                    className="opacity-10 text-primary"
-                    aria-hidden="true"
-                    focusable="false"
-                  >
-                    <circle cx="60" cy="60" r="59.5" stroke="currentColor" strokeDasharray="4 4" />
-                  </svg>
-                </div>
-                <div className="absolute -top-10 -right-10 hidden lg:block">
-                  <svg
-                    width="80"
-                    height="80"
-                    viewBox="0 0 80 80"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                    className="opacity-20 text-secondary"
-                    aria-hidden="true"
-                    focusable="false"
-                  >
-                    <path d="M80 0H0V80H80V0Z" fill="currentColor" />
-                  </svg>
-                </div>
               </div>
             </div>
           </div>
-        </AnimatedGradientBorder>
+        </div>
       </div>
     </section>
   );
diff --git a/apps/landing/components/sections/faq.tsx b/apps/landing/components/sections/faq.tsx
index 489ee0f756..e207a03742 100644
--- a/apps/landing/components/sections/faq.tsx
+++ b/apps/landing/components/sections/faq.tsx
@@ -4,16 +4,10 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from 'landing-app/components/ui/accordion';
-import { CardContent } from 'landing-app/components/ui/card';
-import GradientBackground from 'landing-app/components/ui/gradient-background';
-import GradientBorderCard from 'landing-app/components/ui/gradient-border-card';
-import GradientText from 'landing-app/components/ui/gradient-text';
 import { siteConfig } from 'landing-app/config/site';
 
 export default function FaqSection() {
-  // Filter out any pricing-related FAQs or modify them
   const faqs = siteConfig.faqs.map((faq) => {
-    // If the FAQ is about pricing, modify it to mention the app is free
     if (
       faq.question.toLowerCase().includes('free') ||
       faq.question.toLowerCase().includes('price') ||
@@ -30,19 +24,10 @@ export default function FaqSection() {
 
   return (
     <section id="faq" className="py-20 md:py-28 lg:py-36 relative overflow-hidden">
-      {/* Background pattern */}
-      <GradientBackground variant="mesh" />
-
-      <div className="container px-4 md:px-8 lg:px-12">
+      <div className="container">
         <div className="mx-auto max-w-3xl text-center mb-12 md:mb-16">
-          <GradientBorderCard
-            className="inline-block py-1 px-4 text-sm font-medium mb-4"
-            containerClassName="inline-block"
-            gradientClassName="bg-gradient-to-r from-primary via-secondary to-primary"
-          >
-            <GradientText>Got Questions?</GradientText>
-          </GradientBorderCard>
-          <h2 className="text-2xl md:text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
+          <div className="apple-badge mb-4">Got Questions?</div>
+          <h2 className="text-2xl md:text-3xl font-semibold tracking-tight sm:text-4xl">
             Frequently Asked Questions
           </h2>
           <p className="mt-6 text-base md:text-lg text-muted-foreground max-w-2xl mx-auto">
@@ -52,12 +37,12 @@ export default function FaqSection() {
         </div>
 
         <div className="mx-auto max-w-3xl">
-          <GradientBorderCard className="bg-card/80 backdrop-blur-sm">
+          <div className="apple-card">
             <Accordion type="single" collapsible className="w-full">
               {faqs.map((faq, index) => (
                 <div key={faq.question}>
-                  <AccordionItem value={`item-${index}`} className="border-b border-border">
-                    <AccordionTrigger className="text-base md:text-lg font-medium text-foreground hover:text-primary transition-colors py-4 px-1">
+                  <AccordionItem value={`item-${index}`} className="border-b border-border/40">
+                    <AccordionTrigger className="text-base md:text-lg font-medium text-foreground hover:text-apple-blue transition-colors py-4 px-1">
                       {faq.question}
                     </AccordionTrigger>
                     <AccordionContent className="text-sm md:text-base text-muted-foreground px-1 pb-4">
@@ -67,41 +52,37 @@ export default function FaqSection() {
                 </div>
               ))}
             </Accordion>
-          </GradientBorderCard>
+          </div>
 
           <div className="mt-10 md:mt-12 text-center">
-            <GradientBorderCard className="bg-card/80 backdrop-blur-sm">
-              <CardContent className="p-4 md:p-6 space-y-3 md:space-y-4">
-                <h3 className="text-base md:text-lg font-medium text-foreground">
-                  Still have questions?
-                </h3>
-                <p className="text-sm md:text-base text-muted-foreground">
-                  Can't find the answer you're looking for? Please reach out to our customer support
-                  team.
-                </p>
-                <a
-                  href="mailto:support@packratai.com"
-                  className="inline-flex items-center text-sm font-medium transition-colors text-primary"
+            <div className="apple-card p-4 md:p-6 space-y-3 md:space-y-4">
+              <h3 className="text-base md:text-lg font-medium text-foreground">
+                Still have questions?
+              </h3>
+              <p className="text-sm md:text-base text-muted-foreground">
+                Can't find the answer you're looking for? Please reach out to our customer support
+                team.
+              </p>
+              <a
+                href="mailto:support@packratai.com"
+                className="inline-flex items-center gap-1 text-sm font-medium text-apple-blue hover:underline"
+              >
+                Contact support
+                <svg
+                  className="h-4 w-4"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
                 >
-                  <GradientText gradient="bg-gradient-to-r from-primary via-secondary to-primary bg-[length:200%_100%] animate-gradient">
-                    Contact support
-                  </GradientText>
-                  <svg
-                    className="ml-1 h-4 w-4"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                  >
-                    <title>Chevron right icon</title>
-                    <path
-                      fillRule="evenodd"
-                      d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
-                      clipRule="evenodd"
-                    />
-                  </svg>
-                </a>
-              </CardContent>
-            </GradientBorderCard>
+                  <title>Chevron right icon</title>
+                  <path
+                    fillRule="evenodd"
+                    d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              </a>
+            </div>
           </div>
         </div>
       </div>
diff --git a/apps/landing/components/sections/feature-section.tsx b/apps/landing/components/sections/feature-section.tsx
index eff874f21b..442ff2d904 100644
--- a/apps/landing/components/sections/feature-section.tsx
+++ b/apps/landing/components/sections/feature-section.tsx
@@ -1,9 +1,5 @@
-import { Button } from 'landing-app/components/ui/button';
 import DeviceMockup from 'landing-app/components/ui/device-mockup';
 import FeatureCard from 'landing-app/components/ui/feature-card';
-import GradientBackground from 'landing-app/components/ui/gradient-background';
-import GradientBorderCard from 'landing-app/components/ui/gradient-border-card';
-import GradientText from 'landing-app/components/ui/gradient-text';
 import { siteConfig } from 'landing-app/config/site';
 import { Check, ChevronRight } from 'lucide-react';
 import Link from 'next/link';
@@ -11,28 +7,14 @@ import Link from 'next/link';
 export default function FeatureSection() {
   return (
     <section id="features" className="py-20 md:py-28 lg:py-36 relative overflow-hidden">
-      {/* Background decorations */}
-      <GradientBackground variant="mesh" />
-      <div className="absolute -top-40 -left-40 w-[600px] h-[600px] rounded-full bg-gradient-to-br from-primary-50/30 via-primary-100/20 to-transparent blur-3xl dark:from-primary-900/20 dark:via-primary-800/10"></div>
-      <div className="absolute top-1/4 right-0 w-1/3 h-1/3 bg-gradient-to-tl from-secondary-100/20 via-secondary-50/10 to-transparent blur-3xl dark:from-secondary-900/20 dark:via-secondary-800/10"></div>
-
-      <div className="container px-4 md:px-8 lg:px-12">
+      <div className="container">
         <div className="mx-auto max-w-3xl text-center mb-12 md:mb-20">
-          <GradientBorderCard
-            className="inline-block py-1 px-4 text-sm font-medium mb-4"
-            containerClassName="inline-block"
-            gradientClassName="bg-gradient-to-r from-primary via-secondary to-primary"
-          >
-            <GradientText>Powerful Features</GradientText>
-          </GradientBorderCard>
-          <h2 className="text-2xl md:text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
-            Everything you need for your
-            <GradientText
-              className="block mt-1"
-              gradient="bg-gradient-to-r from-primary via-secondary to-primary bg-[length:200%_100%] animate-gradient"
-            >
+          <div className="apple-badge mb-4">Powerful Features</div>
+          <h2 className="text-2xl md:text-3xl font-semibold tracking-tight sm:text-4xl">
+            Everything you need for your{' '}
+            <span className="bg-clip-text text-transparent bg-gradient-to-r from-apple-blue to-blue-400">
               outdoor adventures
-            </GradientText>
+            </span>
           </h2>
           <p className="mt-6 text-base md:text-lg lg:text-xl text-muted-foreground max-w-2xl mx-auto">
             PackRat combines powerful features to make your outdoor trips more organized and
@@ -42,16 +24,13 @@ export default function FeatureSection() {
 
         <div className="grid gap-12 md:gap-16">
           {/* Feature showcase 1 */}
-          <GradientBorderCard
-            className="p-0 overflow-hidden bg-card/80 backdrop-blur-sm"
-            interactive={false}
-          >
+          <div className="apple-card p-0 overflow-hidden">
             <div className="grid gap-8 md:grid-cols-2 items-center p-6 md:p-8">
               <div className="order-2 md:order-1">
                 <div className="space-y-4 md:space-y-6">
-                  <div className="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-primary/15 dark:bg-primary/10">
+                  <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/20">
                     <svg
-                      className="w-6 h-6 text-primary"
+                      className="w-6 h-6 text-apple-blue"
                       fill="none"
                       viewBox="0 0 24 24"
                       stroke="currentColor"
@@ -65,7 +44,7 @@ export default function FeatureSection() {
                       />
                     </svg>
                   </div>
-                  <h3 className="text-xl md:text-2xl font-bold tracking-tight text-foreground">
+                  <h3 className="text-xl md:text-2xl font-semibold text-foreground">
                     {siteConfig.features[0].title}
                   </h3>
                   <p className="text-base md:text-lg leading-relaxed text-muted-foreground">
@@ -73,15 +52,15 @@ export default function FeatureSection() {
                   </p>
                   <ul className="space-y-2">
                     <li className="flex items-center">
-                      <Check className="w-5 h-5 mr-2 text-primary flex-shrink-0" />
+                      <Check className="w-5 h-5 mr-2 text-apple-blue flex-shrink-0" />
                       <span>Customizable packing templates</span>
                     </li>
                     <li className="flex items-center">
-                      <Check className="w-5 h-5 mr-2 text-primary flex-shrink-0" />
+                      <Check className="w-5 h-5 mr-2 text-apple-blue flex-shrink-0" />
                       <span>Weather-based recommendations</span>
                     </li>
                     <li className="flex items-center">
-                      <Check className="w-5 h-5 mr-2 text-primary flex-shrink-0" />
+                      <Check className="w-5 h-5 mr-2 text-apple-blue flex-shrink-0" />
                       <span>Weight and space optimization</span>
                     </li>
                   </ul>
@@ -95,14 +74,10 @@ export default function FeatureSection() {
                 />
               </div>
             </div>
-          </GradientBorderCard>
+          </div>
 
           {/* Feature showcase 2 */}
-          <GradientBorderCard
-            className="p-0 overflow-hidden bg-card/80 backdrop-blur-sm"
-            interactive={false}
-            gradientClassName="bg-gradient-to-r from-secondary via-primary to-secondary"
-          >
+          <div className="apple-card p-0 overflow-hidden">
             <div className="grid gap-8 md:grid-cols-2 items-center p-6 md:p-8">
               <div className="flex justify-center">
                 <DeviceMockup
@@ -113,9 +88,9 @@ export default function FeatureSection() {
               </div>
               <div>
                 <div className="space-y-4 md:space-y-6">
-                  <div className="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-secondary/15 dark:bg-secondary/10">
+                  <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-green-100 dark:bg-green-900/20">
                     <svg
-                      className="w-6 h-6 text-secondary"
+                      className="w-6 h-6 text-apple-green"
                       fill="none"
                       viewBox="0 0 24 24"
                       stroke="currentColor"
@@ -129,7 +104,7 @@ export default function FeatureSection() {
                       />
                     </svg>
                   </div>
-                  <h3 className="text-xl md:text-2xl font-bold tracking-tight text-foreground">
+                  <h3 className="text-xl md:text-2xl font-semibold text-foreground">
                     {siteConfig.features[1].title}
                   </h3>
                   <p className="text-base md:text-lg leading-relaxed text-muted-foreground">
@@ -137,34 +112,31 @@ export default function FeatureSection() {
                   </p>
                   <ul className="space-y-2">
                     <li className="flex items-center">
-                      <Check className="w-5 h-5 mr-2 text-secondary flex-shrink-0" />
+                      <Check className="w-5 h-5 mr-2 text-apple-green flex-shrink-0" />
                       <span>Offline map downloads</span>
                     </li>
                     <li className="flex items-center">
-                      <Check className="w-5 h-5 mr-2 text-secondary flex-shrink-0" />
+                      <Check className="w-5 h-5 mr-2 text-apple-green flex-shrink-0" />
                       <span>GPS tracking and waypoints</span>
                     </li>
                     <li className="flex items-center">
-                      <Check className="w-5 h-5 mr-2 text-secondary flex-shrink-0" />
+                      <Check className="w-5 h-5 mr-2 text-apple-green flex-shrink-0" />
                       <span>Elevation profiles and difficulty ratings</span>
                     </li>
                   </ul>
                 </div>
               </div>
             </div>
-          </GradientBorderCard>
+          </div>
 
           {/* Feature showcase 3 */}
-          <GradientBorderCard
-            className="p-0 overflow-hidden bg-card/80 backdrop-blur-sm"
-            interactive={false}
-          >
+          <div className="apple-card p-0 overflow-hidden">
             <div className="grid gap-8 md:grid-cols-2 items-center p-6 md:p-8">
               <div className="order-2 md:order-1">
                 <div className="space-y-4 md:space-y-6">
-                  <div className="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-primary/15 dark:bg-primary/10">
+                  <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-purple-100 dark:bg-purple-900/20">
                     <svg
-                      className="w-6 h-6 text-primary"
+                      className="w-6 h-6 text-apple-purple"
                       fill="none"
                       viewBox="0 0 24 24"
                       stroke="currentColor"
@@ -178,7 +150,7 @@ export default function FeatureSection() {
                       />
                     </svg>
                   </div>
-                  <h3 className="text-xl md:text-2xl font-bold tracking-tight text-foreground">
+                  <h3 className="text-xl md:text-2xl font-semibold text-foreground">
                     {siteConfig.features[2]?.title}
                   </h3>
                   <p className="text-base md:text-lg leading-relaxed text-muted-foreground">
@@ -186,25 +158,26 @@ export default function FeatureSection() {
                   </p>
                   <ul className="space-y-2">
                     <li className="flex items-center">
-                      <Check className="w-5 h-5 mr-2 text-primary flex-shrink-0" />
+                      <Check className="w-5 h-5 mr-2 text-apple-purple flex-shrink-0" />
                       <span>Destination highlights and recommendations</span>
                     </li>
                     <li className="flex items-center">
-                      <Check className="w-5 h-5 mr-2 text-primary flex-shrink-0" />
+                      <Check className="w-5 h-5 mr-2 text-apple-purple flex-shrink-0" />
                       <span>Safety and survival tips</span>
                     </li>
                     <li className="flex items-center">
-                      <Check className="w-5 h-5 mr-2 text-primary flex-shrink-0" />
+                      <Check className="w-5 h-5 mr-2 text-apple-purple flex-shrink-0" />
                       <span>Expert gear recommendations</span>
                     </li>
                   </ul>
                   <div className="pt-4">
-                    <Button asChild variant="outline" size="lg" className="group">
-                      <Link href={siteConfig.cta.tertiary.href}>
-                        {siteConfig.cta.tertiary.text}
-                        <ChevronRight className="ml-1 h-4 w-4 transition-transform group-hover:translate-x-1" />
-                      </Link>
-                    </Button>
+                    <Link
+                      href={siteConfig.cta.tertiary.href}
+                      className="inline-flex items-center gap-1 text-sm font-medium text-apple-blue hover:underline"
+                    >
+                      {siteConfig.cta.tertiary.text}
+                      <ChevronRight className="h-4 w-4" />
+                    </Link>
                   </div>
                 </div>
               </div>
@@ -212,19 +185,19 @@ export default function FeatureSection() {
                 <DeviceMockup image="/images/features/guides-ios.png" alt="Guides" showReflection />
               </div>
             </div>
-          </GradientBorderCard>
+          </div>
 
           {/* Other features grid */}
           <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
             {siteConfig.features.slice(3).map((feature) => (
-              <GradientBorderCard key={feature.id}>
+              <div key={feature.id} className="apple-card">
                 <FeatureCard
                   title={feature.title}
                   description={feature.description}
                   icon={feature.icon}
                   color={feature.color}
                 />
-              </GradientBorderCard>
+              </div>
             ))}
           </div>
         </div>
diff --git a/apps/landing/components/sections/how-it-works.tsx b/apps/landing/components/sections/how-it-works.tsx
index 3c083ca964..b629cf7dda 100644
--- a/apps/landing/components/sections/how-it-works.tsx
+++ b/apps/landing/components/sections/how-it-works.tsx
@@ -1,38 +1,19 @@
-import GradientBorderCard from 'landing-app/components/ui/gradient-border-card';
-import GradientText from 'landing-app/components/ui/gradient-text';
 import { siteConfig } from 'landing-app/config/site';
 import { LucideIcon } from 'landing-app/lib/icons';
 import { assertDefined } from 'landing-app/lib/typeAssertions';
 
 export default function HowItWorksSection() {
-  // Icons for each step
   const stepIcons = ['Download', 'Map', 'Backpack'];
 
   return (
     <section
       id="how-it-works"
-      className="py-20 md:py-28 lg:py-36 relative overflow-hidden bg-muted"
+      className="py-20 md:py-28 lg:py-36 relative overflow-hidden bg-apple-gray-light dark:bg-gray-900/20"
     >
-      {/* Background patterns */}
-      <div className="absolute inset-0 overflow-hidden opacity-5 -z-10">
-        <div className="absolute top-0 left-0 w-full h-full">
-          <div className="absolute top-0 right-0 w-1/3 h-1/3 bg-gradient-to-bl from-foreground/20 to-transparent blur-3xl"></div>
-          <div className="h-full w-full bg-[radial-gradient(#000000_1px,transparent_1px)] dark:bg-[radial-gradient(#ffffff_1px,transparent_1px)] [background-size:20px_20px]"></div>
-        </div>
-      </div>
-
-      <div className="container px-4 md:px-8 lg:px-12">
+      <div className="container">
         <div className="mx-auto max-w-3xl text-center mb-12 md:mb-20">
-          <GradientBorderCard
-            className="inline-block py-1 px-4 text-sm font-medium mb-4"
-            containerClassName="inline-block"
-            gradientClassName="bg-gradient-to-r from-orange-500 to-orange-300 dark:from-orange-400 dark:to-orange-200"
-          >
-            <GradientText gradient="bg-gradient-to-r from-orange-500 to-orange-300 dark:from-orange-400 dark:to-orange-200">
-              Simple Process
-            </GradientText>
-          </GradientBorderCard>
-          <h2 className="text-2xl md:text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
+          <div className="apple-badge mb-4">Simple Process</div>
+          <h2 className="text-2xl md:text-3xl font-semibold tracking-tight sm:text-4xl">
             {siteConfig.howItWorks.title}
           </h2>
           <p className="mt-6 text-base md:text-lg lg:text-xl text-muted-foreground max-w-2xl mx-auto">
@@ -40,10 +21,10 @@ export default function HowItWorksSection() {
           </p>
         </div>
 
-        {/* Fixed stepper layout */}
+        {/* Step cards */}
         <div className="relative">
-          {/* Connected line that properly shows the flow - visible only on larger screens */}
-          <div className="absolute left-1/2 top-12 h-[calc(100%-5rem)] w-[2px] -translate-x-1/2 bg-gradient-to-b from-orange-300 via-orange-300 to-transparent lg:left-1/2 lg:top-1/2 lg:h-[2px] lg:w-[calc(100%-15rem)] lg:-translate-y-1/2 lg:bg-gradient-to-r hidden md:block" />
+          {/* Connector line – visible on large screens */}
+          <div className="absolute left-1/2 top-12 h-[calc(100%-5rem)] w-[2px] -translate-x-1/2 bg-gradient-to-b from-apple-blue/30 via-apple-blue/20 to-transparent lg:left-1/2 lg:top-1/2 lg:h-[2px] lg:w-[calc(100%-15rem)] lg:-translate-y-1/2 lg:bg-gradient-to-r hidden md:block" />
 
           <div className="grid gap-8 md:gap-12 lg:gap-16 lg:grid-cols-3">
             {siteConfig.howItWorks.steps.map((step, index) => {
@@ -53,27 +34,21 @@ export default function HowItWorksSection() {
 
               return (
                 <div key={step.number} className="relative flex flex-col items-center text-center">
-                  {/* Step number indicator with fixed styling */}
+                  {/* Step number circle */}
                   <div className="relative mb-6 md:mb-8">
-                    <div className="absolute -inset-3 rounded-full bg-gradient-to-r from-orange-300 to-orange-400 opacity-30 blur-md" />
-                    <div className="relative z-10 flex h-14 w-14 md:h-16 md:w-16 items-center justify-center rounded-full border-2 border-orange-300 bg-background">
-                      <GradientText
-                        className="text-xl md:text-2xl font-bold"
-                        gradient="bg-gradient-to-r from-orange-400 to-orange-500"
-                      >
-                        {step.number}
-                      </GradientText>
+                    <div className="relative z-10 flex h-14 w-14 md:h-16 md:w-16 items-center justify-center rounded-full bg-apple-blue text-white shadow-apple">
+                      <span className="text-xl md:text-2xl font-semibold">{step.number}</span>
                     </div>
                   </div>
 
-                  <div className="bg-card/80 backdrop-blur-sm rounded-xl border border-border/40 p-4 md:p-6 w-full h-full">
+                  <div className="apple-card p-4 md:p-6 w-full h-full">
                     <div className="flex flex-col items-center h-full">
                       {Icon && (
-                        <div className="mb-4 p-3 rounded-full bg-orange-100 dark:bg-orange-900/20">
-                          <Icon className="h-6 w-6 md:h-8 md:w-8 text-orange-500" />
+                        <div className="mb-4 p-3 rounded-full bg-blue-100 dark:bg-blue-900/20">
+                          <Icon className="h-6 w-6 md:h-8 md:w-8 text-apple-blue" />
                         </div>
                       )}
-                      <h3 className="text-lg md:text-xl font-bold text-foreground mb-2 md:mb-3">
+                      <h3 className="text-lg md:text-xl font-semibold text-foreground mb-2 md:mb-3">
                         {step.title}
                       </h3>
                       <p className="text-sm md:text-base text-muted-foreground">
diff --git a/apps/landing/components/sections/integration-section.tsx b/apps/landing/components/sections/integration-section.tsx
index b81d20e5b4..f6413bde58 100644
--- a/apps/landing/components/sections/integration-section.tsx
+++ b/apps/landing/components/sections/integration-section.tsx
@@ -1,25 +1,13 @@
-import GradientBackground from 'landing-app/components/ui/gradient-background';
-import GradientBorderCard from 'landing-app/components/ui/gradient-border-card';
-import GradientText from 'landing-app/components/ui/gradient-text';
 import { siteConfig } from 'landing-app/config/site';
 import { LucideIcon } from 'landing-app/lib/icons';
 
 export default function IntegrationSection() {
   return (
     <section id="integrations" className="py-20 md:py-28 lg:py-36 relative overflow-hidden">
-      {/* Background pattern */}
-      <GradientBackground variant="mesh" />
-
-      <div className="container px-4 md:px-8 lg:px-12">
+      <div className="container">
         <div className="mx-auto max-w-3xl text-center mb-12 md:mb-16">
-          <GradientBorderCard
-            className="inline-block py-1 px-4 text-sm font-medium mb-4"
-            containerClassName="inline-block"
-            gradientClassName="bg-gradient-to-r from-primary via-secondary to-primary"
-          >
-            <GradientText>Powerful Ecosystem</GradientText>
-          </GradientBorderCard>
-          <h2 className="text-2xl md:text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
+          <div className="apple-badge mb-4">Powerful Ecosystem</div>
+          <h2 className="text-2xl md:text-3xl font-semibold tracking-tight sm:text-4xl">
             {siteConfig.integrations.title}
           </h2>
           <p className="mt-6 text-base md:text-lg text-muted-foreground max-w-2xl mx-auto">
@@ -32,25 +20,21 @@ export default function IntegrationSection() {
             const Icon = LucideIcon(integration.icon);
 
             return (
-              <GradientBorderCard
-                key={integration.id}
-                className="h-full bg-card/80 backdrop-blur-sm"
-                gradientClassName={`bg-gradient-to-br from-[${integration.color}] to-transparent`}
-              >
+              <div key={integration.id} className="apple-card h-full">
                 <div className="flex items-center gap-4 mb-4">
                   <div
-                    className="flex h-10 w-10 md:h-12 md:w-12 items-center justify-center rounded-xl transition-colors duration-200"
+                    className="flex h-10 w-10 md:h-12 md:w-12 items-center justify-center rounded-full"
                     style={{ background: `${integration.color}15` }}
                   >
                     {Icon && (
                       <Icon
-                        className="h-5 w-5 md:h-6 md:w-6 transition-transform duration-300 group-hover:scale-110"
+                        className="h-5 w-5 md:h-6 md:w-6"
                         style={{ color: integration.color }}
                       />
                     )}
                   </div>
                   <div>
-                    <h3 className="text-base md:text-lg font-bold text-foreground">
+                    <h3 className="text-base md:text-lg font-semibold text-foreground">
                       {integration.name}
                     </h3>
                     <p className="text-xs md:text-sm text-muted-foreground">
@@ -63,7 +47,7 @@ export default function IntegrationSection() {
                   {(integration.features ?? []).map((feature) => (
                     <div
                       key={feature}
-                      className="h-6 md:h-8 rounded-full px-2 md:px-3 flex items-center text-xs font-medium"
+                      className="h-6 md:h-7 rounded-full px-2 md:px-3 flex items-center text-xs font-medium"
                       style={{
                         background: `${integration.color}10`,
                         color: integration.color,
@@ -73,18 +57,13 @@ export default function IntegrationSection() {
                     </div>
                   ))}
                 </div>
-              </GradientBorderCard>
+              </div>
             );
           })}
         </div>
 
-        <div className="mt-12 md:mt-16 text-center">
-          <GradientText
-            className="text-base md:text-lg font-medium"
-            gradient="bg-gradient-to-r from-primary via-secondary to-primary bg-[length:200%_100%] animate-gradient"
-          >
-            More integrations on the way — stay tuned!
-          </GradientText>
+        <div className="mt-12 md:mt-16 text-center text-base md:text-lg font-medium text-muted-foreground">
+          More integrations on the way — stay tuned!
         </div>
       </div>
     </section>
diff --git a/apps/landing/components/sections/landing-hero.tsx b/apps/landing/components/sections/landing-hero.tsx
index 11fdd9041f..3239bb604d 100644
--- a/apps/landing/components/sections/landing-hero.tsx
+++ b/apps/landing/components/sections/landing-hero.tsx
@@ -1,23 +1,17 @@
 'use client';
 
 import { motion } from 'framer-motion';
-import { Button } from 'landing-app/components/ui/button';
 import DeviceMockup from 'landing-app/components/ui/device-mockup';
-import GlassCard from 'landing-app/components/ui/glass-card';
-import GradientBackground from 'landing-app/components/ui/gradient-background';
-import GradientText from 'landing-app/components/ui/gradient-text';
 import { siteConfig } from 'landing-app/config/site';
-import { ArrowRight, ChevronRight, Download, Star } from 'lucide-react';
+import { ArrowRight, Download, Star } from 'lucide-react';
 import Link from 'next/link';
 import type React from 'react';
 
 export default function LandingHero() {
-  // Handle smooth scrolling when clicking on navigation links
   const scrollToSection = (e: React.MouseEvent<HTMLAnchorElement>, href: string) => {
     e.preventDefault();
     const targetId = href.substring(1);
     const element = document.getElementById(targetId);
-
     if (element) {
       element.scrollIntoView({ behavior: 'smooth' });
     }
@@ -27,10 +21,7 @@ export default function LandingHero() {
     hidden: { opacity: 0 },
     visible: {
       opacity: 1,
-      transition: {
-        staggerChildren: 0.1,
-        delayChildren: 0.2,
-      },
+      transition: { staggerChildren: 0.1, delayChildren: 0.2 },
     },
   };
 
@@ -38,83 +29,74 @@ export default function LandingHero() {
     hidden: { y: 20 },
     visible: {
       y: 0,
-      transition: {
-        type: 'spring' as const,
-        stiffness: 100,
-        damping: 10,
-      },
+      opacity: 1,
+      transition: { type: 'spring' as const, stiffness: 100, damping: 10 },
     },
   };
 
   return (
-    <section className="relative py-16 overflow-hidden md:py-24 lg:py-32">
-      {/* Background decoration */}
-      <GradientBackground variant="mesh" />
-
-      {/* Decorative elements */}
-      <div className="absolute top-20 -left-20 w-[400px] h-[400px] rounded-full opacity-20 blur-3xl -z-10 bg-primary/50 dark:bg-primary/30"></div>
+    <section className="relative py-24 overflow-hidden">
+      {/* Subtle gradient background – Apple style */}
+      <div className="absolute inset-0 bg-gradient-to-b from-blue-50 to-white dark:from-blue-950/20 dark:to-background -z-10" />
 
-      <div className="absolute bottom-0 right-0 w-[300px] h-[300px] rounded-full opacity-10 blur-3xl -z-10 bg-secondary/50 dark:bg-secondary/30"></div>
-
-      <div className="container px-4 md:px-8 lg:px-12">
+      <div className="container">
         <div className="grid gap-12 lg:grid-cols-2 lg:gap-16 items-center">
+          {/* Text column */}
           <motion.div
             className="space-y-6 max-w-2xl"
             variants={containerVariants}
             initial="hidden"
             animate="visible"
           >
+            {/* Badge */}
             <motion.div variants={itemVariants}>
-              <GlassCard className="inline-flex items-center py-1.5 px-4 text-sm font-medium">
-                <span className="mr-1.5 h-2 w-2 rounded-full animate-pulse bg-primary"></span>
-                <GradientText>{siteConfig.hero.badge}</GradientText>
-              </GlassCard>
+              <div className="apple-badge">
+                <span className="mr-1.5 h-2 w-2 rounded-full bg-apple-blue animate-pulse inline-block" />
+                {siteConfig.hero.badge}
+              </div>
             </motion.div>
 
+            {/* Heading */}
             <motion.h1
-              className="text-3xl font-extrabold tracking-tight md:text-4xl lg:text-5xl xl:text-6xl max-w-screen-sm"
+              className="text-4xl font-semibold tracking-tight sm:text-5xl md:text-6xl"
               variants={itemVariants}
             >
               <span className="block text-foreground">{siteConfig.hero.titleLine1}</span>
-              <GradientText
-                className="block mt-1"
-                gradient="bg-gradient-to-r from-primary via-secondary to-primary bg-[length:200%_100%] animate-gradient"
-              >
+              <span className="block mt-1 bg-clip-text text-transparent bg-gradient-to-r from-apple-blue to-blue-400">
                 {siteConfig.hero.titleLine2}
-              </GradientText>
+              </span>
             </motion.h1>
 
+            {/* Subtitle */}
             <motion.p
-              className="text-lg md:text-xl text-muted-foreground max-w-xl"
+              className="text-xl text-muted-foreground font-medium max-w-xl"
               variants={itemVariants}
             >
               {siteConfig.hero.subtitle}
             </motion.p>
 
-            <motion.div className="flex flex-col sm:flex-row gap-4" variants={itemVariants}>
-              <Button asChild size="lg" className="group relative overflow-hidden">
-                <Link
-                  href={siteConfig.cta.primary.href}
-                  onClick={(e) => scrollToSection(e, siteConfig.cta.primary.href)}
-                >
-                  <div className="absolute inset-0 w-full h-full transition-all duration-300 ease-out translate-y-full group-hover:translate-y-0 bg-black/10 dark:bg-white/10"></div>
-                  <Download className="mr-2 h-5 w-5" />
-                  {siteConfig.cta.primary.text}
-                  <ArrowRight className="ml-2 h-4 w-4 opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200" />
-                </Link>
-              </Button>
-
-              <Button asChild variant="outline" size="lg" className="group">
-                <Link
-                  href={siteConfig.cta.secondary.href}
-                  onClick={(e) => scrollToSection(e, siteConfig.cta.secondary.href)}
-                >
-                  {siteConfig.cta.secondary.text}
-                  <ChevronRight className="ml-1 h-4 w-4 transition-transform group-hover:translate-x-1" />
-                </Link>
-              </Button>
+            {/* CTA buttons */}
+            <motion.div className="flex flex-col sm:flex-row gap-3" variants={itemVariants}>
+              <Link
+                href={siteConfig.cta.primary.href}
+                onClick={(e) => scrollToSection(e, siteConfig.cta.primary.href)}
+                className="inline-flex items-center justify-center gap-2 rounded-full bg-apple-blue text-white px-8 h-12 text-sm font-medium hover:bg-apple-blue/90 transition-colors"
+              >
+                <Download className="h-4 w-4" />
+                {siteConfig.cta.primary.text}
+                <ArrowRight className="h-4 w-4 opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200" />
+              </Link>
+
+              <Link
+                href={siteConfig.cta.secondary.href}
+                onClick={(e) => scrollToSection(e, siteConfig.cta.secondary.href)}
+                className="inline-flex items-center justify-center gap-2 rounded-full border border-border bg-background px-8 h-12 text-sm font-medium hover:bg-black/5 dark:hover:bg-white/10 transition-colors"
+              >
+                {siteConfig.cta.secondary.text}
+              </Link>
             </motion.div>
 
+            {/* Social proof */}
             {siteConfig.hero.socialProof && (
               <motion.p
                 className="text-xs text-muted-foreground flex items-center gap-1"
@@ -125,6 +107,7 @@ export default function LandingHero() {
               </motion.p>
             )}
 
+            {/* Stats */}
             <motion.div
               className="flex flex-col sm:flex-row items-center gap-6 pt-4"
               variants={itemVariants}
@@ -133,9 +116,9 @@ export default function LandingHero() {
                 {siteConfig.testimonials.items.slice(0, 4).map((user) => (
                   <div
                     key={user.id}
-                    className="w-10 h-10 rounded-full border-2 border-background flex items-center justify-center overflow-hidden bg-primary/20"
+                    className="w-10 h-10 rounded-full border-2 border-background flex items-center justify-center overflow-hidden bg-blue-100 dark:bg-blue-900/30"
                   >
-                    <span className="text-xs font-bold text-primary">{user.initials}</span>
+                    <span className="text-xs font-bold text-apple-blue">{user.initials}</span>
                   </div>
                 ))}
               </div>
@@ -143,7 +126,7 @@ export default function LandingHero() {
               <div className="grid grid-cols-3 gap-4">
                 {siteConfig.hero.stats.map((stat) => (
                   <div key={stat.label} className="text-center">
-                    <div className="text-xl font-bold text-primary">{stat.value}</div>
+                    <div className="text-xl font-bold text-apple-blue">{stat.value}</div>
                     <div className="text-xs text-muted-foreground">{stat.label}</div>
                   </div>
                 ))}
@@ -151,6 +134,7 @@ export default function LandingHero() {
             </motion.div>
           </motion.div>
 
+          {/* Device mockup column */}
           <motion.div
             className="relative mx-auto lg:mx-0"
             initial={{ scale: 0.95 }}
@@ -165,17 +149,17 @@ export default function LandingHero() {
               showGradient
             />
 
-            {/* Floating UI elements - only show on larger screens */}
+            {/* Floating cards – Apple style: clean card with subtle shadow */}
             <motion.div
               className="absolute top-[10%] -left-16 hidden lg:block"
               initial={{ x: -20 }}
               animate={{ x: 0 }}
               transition={{ duration: 0.5, delay: 0.6 }}
             >
-              <GlassCard className="p-3 shadow-lg">
+              <div className="apple-card p-3">
                 <div className="flex items-center gap-2">
-                  <div className="w-8 h-8 rounded-full flex items-center justify-center bg-secondary">
-                    <Star className="w-4 h-4 text-secondary-foreground" />
+                  <div className="w-8 h-8 rounded-full flex items-center justify-center bg-amber-100 dark:bg-amber-900/30">
+                    <Star className="w-4 h-4 text-amber-500" />
                   </div>
                   <div>
                     <div className="text-xs font-medium">App Store Rating</div>
@@ -186,7 +170,7 @@ export default function LandingHero() {
                     </div>
                   </div>
                 </div>
-              </GlassCard>
+              </div>
             </motion.div>
 
             <motion.div
@@ -195,17 +179,17 @@ export default function LandingHero() {
               animate={{ x: 0 }}
               transition={{ duration: 0.5, delay: 0.8 }}
             >
-              <GlassCard className="p-3 shadow-lg">
+              <div className="apple-card p-3">
                 <div className="flex items-center gap-2">
-                  <div className="w-8 h-8 rounded-full flex items-center justify-center bg-primary">
-                    <Download className="w-4 h-4 text-primary-foreground" />
+                  <div className="w-8 h-8 rounded-full flex items-center justify-center bg-blue-100 dark:bg-blue-900/30">
+                    <Download className="w-4 h-4 text-apple-blue" />
                   </div>
                   <div>
                     <div className="text-xs font-medium">Downloads</div>
                     <div className="text-sm font-bold">10,000+</div>
                   </div>
                 </div>
-              </GlassCard>
+              </div>
             </motion.div>
           </motion.div>
         </div>
diff --git a/apps/landing/components/sections/testimonials.tsx b/apps/landing/components/sections/testimonials.tsx
index 44d5a04c04..d286bd1d0f 100644
--- a/apps/landing/components/sections/testimonials.tsx
+++ b/apps/landing/components/sections/testimonials.tsx
@@ -1,29 +1,17 @@
 import { Avatar, AvatarFallback } from 'landing-app/components/ui/avatar';
-import GradientBackground from 'landing-app/components/ui/gradient-background';
-import GradientBorderCard from 'landing-app/components/ui/gradient-border-card';
-import GradientText from 'landing-app/components/ui/gradient-text';
 import { siteConfig } from 'landing-app/config/site';
-import { Star } from 'lucide-react';
+import { QuoteIcon } from 'lucide-react';
 
 export default function TestimonialsSection() {
   return (
     <section
       id="testimonials"
-      className="py-20 md:py-28 lg:py-36 relative overflow-hidden bg-muted/50"
+      className="py-20 md:py-28 lg:py-36 relative overflow-hidden bg-apple-gray-light dark:bg-gray-900/20"
     >
-      {/* Background pattern */}
-      <GradientBackground variant="mesh" />
-
-      <div className="container px-4 md:px-8 lg:px-12">
+      <div className="container">
         <div className="mx-auto max-w-3xl text-center mb-12 md:mb-16">
-          <GradientBorderCard
-            className="inline-block py-1 px-4 text-sm font-medium mb-4"
-            containerClassName="inline-block"
-            gradientClassName="bg-gradient-to-r from-primary via-secondary to-primary"
-          >
-            <GradientText>Customer Stories</GradientText>
-          </GradientBorderCard>
-          <h2 className="text-2xl md:text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
+          <div className="apple-badge mb-4">Customer Stories</div>
+          <h2 className="text-2xl md:text-3xl font-semibold tracking-tight sm:text-4xl">
             {siteConfig.testimonials.title}
           </h2>
           <p className="mt-6 text-base md:text-lg leading-relaxed text-muted-foreground max-w-2xl mx-auto">
@@ -31,55 +19,53 @@ export default function TestimonialsSection() {
           </p>
         </div>
 
-        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-          {siteConfig.testimonials.items.slice(0, 3).map((testimonial) => (
-            <GradientBorderCard
-              key={testimonial.id}
-              className="h-full bg-card/80 backdrop-blur-sm flex flex-col"
-            >
-              {/* Typographic opening quote */}
-              <div className="text-5xl leading-none text-primary/20 font-serif mb-2 select-none">
-                &ldquo;
+        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+          {siteConfig.testimonials.items.map((testimonial) => (
+            <div key={testimonial.id} className="apple-card h-full relative">
+              <QuoteIcon className="absolute -top-4 -left-4 h-8 w-8 md:h-10 md:w-10 rotate-180 opacity-10 text-apple-blue" />
+
+              <div className="flex items-center gap-3 md:gap-4 mb-4 md:mb-6">
+                <Avatar className="h-12 w-12 md:h-14 md:w-14 border-2 border-border/20">
+                  <AvatarFallback className="bg-blue-100 dark:bg-blue-900/30 text-apple-blue font-bold text-sm md:text-base">
+
+                    {testimonial.initials}
+                  </AvatarFallback>
+                </Avatar>
+                <div>
+                  <h4 className="font-semibold text-foreground text-sm md:text-base">
+                    {testimonial.name}
+                  </h4>
+                  <p className="text-xs md:text-sm text-muted-foreground">{testimonial.role}</p>
+                </div>
               </div>
 
-              <p className="text-sm md:text-base leading-relaxed text-muted-foreground flex-1 mb-6">
-                {testimonial.content}
+              <p className="text-sm md:text-base text-muted-foreground relative line-clamp-4 mb-4">
+                "{testimonial.content}"
               </p>
 
-              {/* Stars */}
-              <div className="flex gap-0.5 mb-4">
-                {Array.from({ length: testimonial.rating }).map((_, i) => (
-                  <Star
+              <div className="mt-4 md:mt-6 flex">
+                {Array.from({ length: 5 }).map((_, i) => (
+                  <svg
                     // biome-ignore lint/suspicious/noArrayIndexKey: ignore
                     key={i}
-                    className="w-4 h-4 text-amber-400 fill-amber-400"
+                    className={`w-4 h-4 md:w-5 md:h-5 ${
+                      i < testimonial.rating ? 'text-amber-400' : 'text-gray-300 dark:text-gray-600'
+                    }`}
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
                     aria-hidden="true"
-                  />
+                    focusable="false"
+                  >
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+                  </svg>
                 ))}
               </div>
-
-              <div className="flex items-center gap-3">
-                <Avatar className="h-10 w-10 border-2 border-primary/20">
-                  <AvatarFallback className="bg-primary/10 text-primary font-bold text-sm">
-                    {testimonial.initials}
-                  </AvatarFallback>
-                </Avatar>
-                <div>
-                  <div className="font-semibold text-foreground text-sm">{testimonial.name}</div>
-                  <GradientText className="text-xs">{testimonial.role}</GradientText>
-                </div>
-              </div>
-            </GradientBorderCard>
+            </div>
           ))}
         </div>
 
-        <div className="mt-12 md:mt-16 text-center">
-          <GradientText
-            className="text-base md:text-lg font-medium"
-            gradient="bg-gradient-to-r from-primary via-secondary to-primary bg-[length:200%_100%] animate-gradient"
-          >
-            Join thousands of happy users today!
-          </GradientText>
+        <div className="mt-12 md:mt-16 text-center text-base md:text-lg font-medium text-apple-blue">
+          Join thousands of happy users today!
         </div>
       </div>
     </section>
diff --git a/apps/landing/components/site-footer.tsx b/apps/landing/components/site-footer.tsx
index 983ef369d0..50f4f2ffbb 100644
--- a/apps/landing/components/site-footer.tsx
+++ b/apps/landing/components/site-footer.tsx
@@ -1,7 +1,5 @@
 'use client';
 
-import GradientBorderCard from 'landing-app/components/ui/gradient-border-card';
-import GradientText from 'landing-app/components/ui/gradient-text';
 import { siteConfig } from 'landing-app/config/site';
 import { LucideIcon, TikTokIcon } from 'landing-app/lib/icons';
 import { Backpack } from 'lucide-react';
@@ -9,35 +7,24 @@ import Link from 'next/link';
 import type React from 'react';
 
 export default function SiteFooter() {
-  // Handle smooth scrolling when clicking on navigation links
   const scrollToSection = (e: React.MouseEvent<HTMLAnchorElement>, href: string) => {
     e.preventDefault();
     const targetId = href.substring(1);
     const element = document.getElementById(targetId);
-
     if (element) {
       element.scrollIntoView({ behavior: 'smooth' });
     }
   };
 
   return (
-    <footer className="border-t py-10 md:py-14 lg:py-16 relative border-border">
-      {/* Background pattern */}
-      <div className="absolute inset-0 -z-10">
-        <div className="absolute inset-0 opacity-5 bg-gradient-mesh"></div>
-      </div>
-
-      <div className="container px-4 md:px-8 lg:px-12">
+    <footer className="border-t border-border/40 py-10 md:py-14 lg:py-16 bg-apple-gray-light dark:bg-gray-900/20">
+      <div className="container">
         <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
+          {/* Brand column */}
           <div>
             <div className="flex items-center gap-2 mb-4">
-              <Backpack className="h-6 w-6 text-primary" />
-              <GradientText
-                className="text-lg font-bold"
-                gradient="bg-gradient-to-r from-primary via-secondary to-primary bg-[length:200%_100%] animate-gradient"
-              >
-                {siteConfig.name}
-              </GradientText>
+              <Backpack className="h-5 w-5 text-apple-blue" />
+              <span className="text-lg font-semibold">{siteConfig.name}</span>
             </div>
             <p className="text-sm text-muted-foreground mb-6">
               Your ultimate companion for outdoor adventures.
@@ -45,41 +32,34 @@ export default function SiteFooter() {
             <div className="flex gap-4">
               {siteConfig.social.map((item) => {
                 const Icon = item.icon !== 'TikTok' ? LucideIcon(item.icon) : null;
-
                 return (
-                  <GradientBorderCard
+                  <Link
                     key={item.name}
-                    className="p-2 bg-card/80"
-                    containerClassName="w-fit h-fit"
+                    href={item.href}
+                    className="text-gray-500 hover:text-apple-blue transition-colors"
                   >
-                    <Link
-                      href={item.href}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-muted-foreground hover:text-primary transition-colors"
-                    >
-                      <span className="sr-only">{item.name}</span>
-                      {item.icon === 'TikTok' ? (
-                        <TikTokIcon className="h-5 w-5" />
-                      ) : (
-                        Icon && <Icon className="h-5 w-5" />
-                      )}
-                    </Link>
-                  </GradientBorderCard>
+                    <span className="sr-only">{item.name}</span>
+                    {item.icon === 'TikTok' ? (
+                      <TikTokIcon className="h-5 w-5" />
+                    ) : (
+                      Icon && <Icon className="h-5 w-5" />
+                    )}
+                  </Link>
                 );
               })}
             </div>
           </div>
 
+          {/* Product links */}
           <div className="lg:ml-auto">
-            <h3 className="font-medium text-foreground mb-4">Product</h3>
+            <h3 className="text-sm font-semibold mb-4">Product</h3>
             <ul className="space-y-3">
               {siteConfig.footerLinks.product.map((item) => (
                 <li key={item.title}>
                   <Link
                     href={item.href}
                     onClick={(e) => item.href.startsWith('#') && scrollToSection(e, item.href)}
-                    className="text-sm text-muted-foreground hover:text-primary transition-colors"
+                    className="text-sm text-muted-foreground hover:text-apple-blue transition-colors"
                   >
                     {item.title}
                   </Link>
@@ -88,15 +68,16 @@ export default function SiteFooter() {
             </ul>
           </div>
 
+          {/* Company links */}
           <div>
-            <h3 className="font-medium text-foreground mb-4">Company</h3>
+            <h3 className="text-sm font-semibold mb-4">Company</h3>
             <ul className="space-y-3">
               {siteConfig.footerLinks.company.map((item) => (
                 <li key={item.title}>
                   <Link
                     href={item.href}
                     onClick={(e) => item.href.startsWith('#') && scrollToSection(e, item.href)}
-                    className="text-sm text-muted-foreground hover:text-primary transition-colors"
+                    className="text-sm text-muted-foreground hover:text-apple-blue transition-colors"
                   >
                     {item.title}
                   </Link>
@@ -105,15 +86,16 @@ export default function SiteFooter() {
             </ul>
           </div>
 
+          {/* Legal links */}
           <div>
-            <h3 className="font-medium text-foreground mb-4">Legal</h3>
+            <h3 className="text-sm font-semibold mb-4">Legal</h3>
             <ul className="space-y-3">
               {siteConfig.footerLinks.legal.map((item) => (
                 <li key={item.title}>
                   <Link
                     href={item.href}
                     onClick={(e) => item.href.startsWith('#') && scrollToSection(e, item.href)}
-                    className="text-sm text-muted-foreground hover:text-primary transition-colors"
+                    className="text-sm text-muted-foreground hover:text-apple-blue transition-colors"
                   >
                     {item.title}
                   </Link>
@@ -123,10 +105,8 @@ export default function SiteFooter() {
           </div>
         </div>
 
-        <div className="mt-10 md:mt-12 pt-6 text-center relative">
-          {/* Gradient separator */}
-          <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-border to-transparent" />
-          <p className="text-sm text-muted-foreground">
+        <div className="mt-10 md:mt-12 border-t border-gray-200 dark:border-gray-800 pt-6 text-center text-sm text-gray-500">
+          <p>
             © {new Date().getFullYear()} {siteConfig.name}. All rights reserved.
           </p>
         </div>
diff --git a/apps/landing/tailwind.config.js b/apps/landing/tailwind.config.js
index 9ab69e95a9..dabd0de129 100644
--- a/apps/landing/tailwind.config.js
+++ b/apps/landing/tailwind.config.js
@@ -1,3 +1,5 @@
+const { fontFamily } = require('tailwindcss/defaultTheme');
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: ['class'],
@@ -11,7 +13,11 @@ module.exports = {
   theme: {
     container: {
       center: true,
-      padding: '2rem',
+      padding: {
+        DEFAULT: '1rem',
+        sm: '1.5rem',
+        lg: '2rem',
+      },
       screens: {
         '2xl': '1400px',
       },
@@ -51,11 +57,38 @@ module.exports = {
           DEFAULT: 'hsl(var(--card))',
           foreground: 'hsl(var(--card-foreground))',
         },
+        // Apple UI colors
+        apple: {
+          blue: '#007AFF',
+          indigo: '#5856D6',
+          purple: '#AF52DE',
+          pink: '#FF2D55',
+          red: '#FF3B30',
+          orange: '#FF9500',
+          yellow: '#FFCC00',
+          green: '#34C759',
+          teal: '#5AC8FA',
+          gray: {
+            light: '#F5F5F7',
+            medium: '#86868B',
+            dark: '#1D1D1F',
+          },
+        },
       },
       borderRadius: {
         lg: 'var(--radius)',
         md: 'calc(var(--radius) - 2px)',
         sm: 'calc(var(--radius) - 4px)',
+        xl: '1rem',
+        '2xl': '1.25rem',
+      },
+      fontFamily: {
+        sans: ['var(--font-sans)', ...fontFamily.sans],
+      },
+      boxShadow: {
+        'apple-sm': '0 2px 6px rgba(0, 0, 0, 0.05)',
+        apple: '0 4px 12px rgba(0, 0, 0, 0.08)',
+        'apple-lg': '0 12px 24px rgba(0, 0, 0, 0.12)',
       },
       keyframes: {
         'accordion-down': {
@@ -66,10 +99,16 @@ module.exports = {
           from: { height: 'var(--radix-accordion-content-height)' },
           to: { height: 0 },
         },
+        gradient: {
+          '0%': { backgroundPosition: '0% 50%' },
+          '50%': { backgroundPosition: '100% 50%' },
+          '100%': { backgroundPosition: '0% 50%' },
+        },
       },
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out',
+        gradient: 'gradient 8s ease infinite',
       },
     },
   },

From 45226ee7154e71a71e8415cb088110fa990b28bc Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 11 Apr 2026 06:02:13 +0000
Subject: [PATCH 2/7] fix: add group class to hero CTA link, remove
 font-feature-settings

Agent-Logs-Url: https://github.com/PackRat-AI/PackRat/sessions/2b7dec9c-b050-4f2b-9f3e-4f9d6672403f
---
 apps/landing/app/globals.css                      | 3 ---
 apps/landing/components/sections/landing-hero.tsx | 2 +-
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/apps/landing/app/globals.css b/apps/landing/app/globals.css
index 11ce06c602..aae3fe5c23 100644
--- a/apps/landing/app/globals.css
+++ b/apps/landing/app/globals.css
@@ -75,9 +75,6 @@
   }
   body {
     @apply bg-background text-foreground;
-    font-feature-settings:
-      "ss01" 1,
-      "ss03" 1;
   }
   html {
     scroll-behavior: smooth;
diff --git a/apps/landing/components/sections/landing-hero.tsx b/apps/landing/components/sections/landing-hero.tsx
index 3239bb604d..5ed3f42710 100644
--- a/apps/landing/components/sections/landing-hero.tsx
+++ b/apps/landing/components/sections/landing-hero.tsx
@@ -80,7 +80,7 @@ export default function LandingHero() {
               <Link
                 href={siteConfig.cta.primary.href}
                 onClick={(e) => scrollToSection(e, siteConfig.cta.primary.href)}
-                className="inline-flex items-center justify-center gap-2 rounded-full bg-apple-blue text-white px-8 h-12 text-sm font-medium hover:bg-apple-blue/90 transition-colors"
+                className="group inline-flex items-center justify-center gap-2 rounded-full bg-apple-blue text-white px-8 h-12 text-sm font-medium hover:bg-apple-blue/90 transition-colors"
               >
                 <Download className="h-4 w-4" />
                 {siteConfig.cta.primary.text}

From f0ae208f93baa325e6e30b01b1ec5bdb6af7376e Mon Sep 17 00:00:00 2001
From: Andrew Bierman <abbierman101@gmail.com>
Date: Sat, 11 Apr 2026 07:44:25 -0600
Subject: [PATCH 3/7] style(landing): remove stray whitespace in testimonials
 rebase

---
 apps/landing/components/sections/testimonials.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/landing/components/sections/testimonials.tsx b/apps/landing/components/sections/testimonials.tsx
index d286bd1d0f..c33f64c59d 100644
--- a/apps/landing/components/sections/testimonials.tsx
+++ b/apps/landing/components/sections/testimonials.tsx
@@ -27,7 +27,6 @@ export default function TestimonialsSection() {
               <div className="flex items-center gap-3 md:gap-4 mb-4 md:mb-6">
                 <Avatar className="h-12 w-12 md:h-14 md:w-14 border-2 border-border/20">
                   <AvatarFallback className="bg-blue-100 dark:bg-blue-900/30 text-apple-blue font-bold text-sm md:text-base">
-
                     {testimonial.initials}
                   </AvatarFallback>
                 </Avatar>

From 3311f80b73d2979163e36e2e894911b327a23242 Mon Sep 17 00:00:00 2001
From: Andrew Bierman <abbierman101@gmail.com>
Date: Sat, 11 Apr 2026 07:46:12 -0600
Subject: [PATCH 4/7] fix(landing): restore opacity:0 on hero itemVariants
 hidden state

Prevents flash of content before motion animation starts.
---
 apps/landing/components/sections/landing-hero.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/landing/components/sections/landing-hero.tsx b/apps/landing/components/sections/landing-hero.tsx
index 5ed3f42710..978724f6b2 100644
--- a/apps/landing/components/sections/landing-hero.tsx
+++ b/apps/landing/components/sections/landing-hero.tsx
@@ -26,7 +26,7 @@ export default function LandingHero() {
   };
 
   const itemVariants = {
-    hidden: { y: 20 },
+    hidden: { y: 20, opacity: 0 },
     visible: {
       y: 0,
       opacity: 1,

From 46e5639de6fd9eb52fb67d2405a699fb739c5749 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 11 Apr 2026 14:29:37 +0000
Subject: [PATCH 5/7] fix(landing): fix responsive design issues across all
 sections
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- download: remove scrollToSection from external App Store / Google Play links
  (was calling preventDefault, breaking navigation); use target="_blank" instead.
  Also center text/buttons on mobile (mx-auto lg:mx-0 / text-center lg:text-left)
- landing-hero: center hero content on mobile — add mx-auto lg:mx-0,
  text-center lg:text-left, justify-center lg:justify-start to text column,
  CTA buttons, social proof, and stats row
- how-it-works: fix connector line — was showing as vertical on md (single-col)
  when it should only appear on lg (3-col). Simplified to horizontal-only,
  hidden lg:block, aligned to top of step circles (top-8, 16.67% inset)
- testimonials: fix quote icon overflow — moved from absolute -top-4 -left-4
  (overflowed outside card, caused horizontal scroll on mobile) to top-3 left-3
  inside the card; add overflow-hidden to card
- feature-section: remove double-card wrapping on FeatureCard — FeatureCard
  already has rounded-2xl + bg-card + shadow-lg; outer apple-card created
  double shadow/border layering
- site-footer: remove lg:ml-auto from Product column (unintended right-shift in
  4-col grid layout)

Agent-Logs-Url: https://github.com/PackRat-AI/PackRat/sessions/f67a56d2-5772-4615-8674-a676e0e3f9f9

Co-authored-by: andrew-bierman <94939237+andrew-bierman@users.noreply.github.com>
---
 apps/landing/components/sections/download.tsx | 26 ++++++-------------
 .../components/sections/feature-section.tsx   | 15 +++++------
 .../components/sections/how-it-works.tsx      |  4 +--
 .../components/sections/landing-hero.tsx      | 15 ++++++-----
 .../components/sections/testimonials.tsx      |  4 +--
 apps/landing/components/site-footer.tsx       |  2 +-
 6 files changed, 29 insertions(+), 37 deletions(-)

diff --git a/apps/landing/components/sections/download.tsx b/apps/landing/components/sections/download.tsx
index 5b4137f741..3ae50f6504 100644
--- a/apps/landing/components/sections/download.tsx
+++ b/apps/landing/components/sections/download.tsx
@@ -1,21 +1,9 @@
-'use client';
-
 import { siteConfig } from 'landing-app/config/site';
 import { Apple, Check, Store } from 'lucide-react';
 import Image from 'next/image';
 import Link from 'next/link';
-import type React from 'react';
 
 export default function DownloadSection() {
-  const scrollToSection = (e: React.MouseEvent<HTMLAnchorElement>, href: string) => {
-    e.preventDefault();
-    const targetId = href.substring(1);
-    const element = document.getElementById(targetId);
-    if (element) {
-      element.scrollIntoView({ behavior: 'smooth' });
-    }
-  };
-
   return (
     <section id="download" className="py-20 md:py-28 lg:py-36 relative overflow-hidden">
       {/* Subtle Apple-style background gradient */}
@@ -25,8 +13,8 @@ export default function DownloadSection() {
         <div className="apple-card overflow-hidden">
           <div className="grid lg:grid-cols-2 items-center gap-8 md:gap-12 p-6 md:p-8 lg:p-12">
             {/* Text content */}
-            <div className="space-y-4 md:space-y-6 max-w-xl">
-              <div className="apple-badge">
+            <div className="space-y-4 md:space-y-6 max-w-xl mx-auto lg:mx-0 text-center lg:text-left">
+              <div className="apple-badge mx-auto lg:mx-0 w-fit">
                 <span className="mr-1.5 h-2 w-2 rounded-full animate-pulse bg-apple-blue inline-block" />
                 Get Started Today
               </div>
@@ -39,7 +27,7 @@ export default function DownloadSection() {
                 {siteConfig.download.subtitle}
               </p>
 
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 md:gap-4">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 md:gap-4 text-left">
                 {['Free to use', 'Offline access', 'Regular updates', 'Community support'].map(
                   (item) => (
                     <div key={item} className="flex items-start gap-2">
@@ -52,10 +40,11 @@ export default function DownloadSection() {
                 )}
               </div>
 
-              <div className="flex flex-col sm:flex-row gap-3 pt-4">
+              <div className="flex flex-col sm:flex-row justify-center lg:justify-start gap-3 pt-4">
                 <Link
                   href={siteConfig.download.appStoreLink}
-                  onClick={(e) => scrollToSection(e, siteConfig.download.appStoreLink)}
+                  target="_blank"
+                  rel="noopener noreferrer"
                   className="inline-flex items-center justify-center gap-2 rounded-full bg-apple-blue text-white px-8 h-12 text-sm font-medium hover:bg-apple-blue/90 transition-colors"
                 >
                   <Apple className="h-5 w-5" />
@@ -64,7 +53,8 @@ export default function DownloadSection() {
 
                 <Link
                   href={siteConfig.download.googlePlayLink}
-                  onClick={(e) => scrollToSection(e, siteConfig.download.googlePlayLink)}
+                  target="_blank"
+                  rel="noopener noreferrer"
                   className="inline-flex items-center justify-center gap-2 rounded-full border border-border bg-background px-8 h-12 text-sm font-medium hover:bg-black/5 dark:hover:bg-white/10 transition-colors"
                 >
                   <Store className="h-5 w-5" />
diff --git a/apps/landing/components/sections/feature-section.tsx b/apps/landing/components/sections/feature-section.tsx
index 442ff2d904..372f627c30 100644
--- a/apps/landing/components/sections/feature-section.tsx
+++ b/apps/landing/components/sections/feature-section.tsx
@@ -190,14 +190,13 @@ export default function FeatureSection() {
           {/* Other features grid */}
           <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
             {siteConfig.features.slice(3).map((feature) => (
-              <div key={feature.id} className="apple-card">
-                <FeatureCard
-                  title={feature.title}
-                  description={feature.description}
-                  icon={feature.icon}
-                  color={feature.color}
-                />
-              </div>
+              <FeatureCard
+                key={feature.id}
+                title={feature.title}
+                description={feature.description}
+                icon={feature.icon}
+                color={feature.color}
+              />
             ))}
           </div>
         </div>
diff --git a/apps/landing/components/sections/how-it-works.tsx b/apps/landing/components/sections/how-it-works.tsx
index b629cf7dda..5f392c7e90 100644
--- a/apps/landing/components/sections/how-it-works.tsx
+++ b/apps/landing/components/sections/how-it-works.tsx
@@ -23,8 +23,8 @@ export default function HowItWorksSection() {
 
         {/* Step cards */}
         <div className="relative">
-          {/* Connector line – visible on large screens */}
-          <div className="absolute left-1/2 top-12 h-[calc(100%-5rem)] w-[2px] -translate-x-1/2 bg-gradient-to-b from-apple-blue/30 via-apple-blue/20 to-transparent lg:left-1/2 lg:top-1/2 lg:h-[2px] lg:w-[calc(100%-15rem)] lg:-translate-y-1/2 lg:bg-gradient-to-r hidden md:block" />
+          {/* Connector line – visible on large screens only (when 3-col grid is active) */}
+          <div className="absolute left-[16.67%] right-[16.67%] top-8 h-[2px] bg-gradient-to-r from-apple-blue/40 via-apple-blue/20 to-apple-blue/40 hidden lg:block" />
 
           <div className="grid gap-8 md:gap-12 lg:gap-16 lg:grid-cols-3">
             {siteConfig.howItWorks.steps.map((step, index) => {
diff --git a/apps/landing/components/sections/landing-hero.tsx b/apps/landing/components/sections/landing-hero.tsx
index 978724f6b2..18ea36eed7 100644
--- a/apps/landing/components/sections/landing-hero.tsx
+++ b/apps/landing/components/sections/landing-hero.tsx
@@ -43,14 +43,14 @@ export default function LandingHero() {
         <div className="grid gap-12 lg:grid-cols-2 lg:gap-16 items-center">
           {/* Text column */}
           <motion.div
-            className="space-y-6 max-w-2xl"
+            className="space-y-6 max-w-2xl mx-auto lg:mx-0 text-center lg:text-left"
             variants={containerVariants}
             initial="hidden"
             animate="visible"
           >
             {/* Badge */}
             <motion.div variants={itemVariants}>
-              <div className="apple-badge">
+              <div className="apple-badge mx-auto lg:mx-0 w-fit">
                 <span className="mr-1.5 h-2 w-2 rounded-full bg-apple-blue animate-pulse inline-block" />
                 {siteConfig.hero.badge}
               </div>
@@ -69,14 +69,17 @@ export default function LandingHero() {
 
             {/* Subtitle */}
             <motion.p
-              className="text-xl text-muted-foreground font-medium max-w-xl"
+              className="text-xl text-muted-foreground font-medium max-w-xl mx-auto lg:mx-0"
               variants={itemVariants}
             >
               {siteConfig.hero.subtitle}
             </motion.p>
 
             {/* CTA buttons */}
-            <motion.div className="flex flex-col sm:flex-row gap-3" variants={itemVariants}>
+            <motion.div
+              className="flex flex-col sm:flex-row justify-center lg:justify-start gap-3"
+              variants={itemVariants}
+            >
               <Link
                 href={siteConfig.cta.primary.href}
                 onClick={(e) => scrollToSection(e, siteConfig.cta.primary.href)}
@@ -99,7 +102,7 @@ export default function LandingHero() {
             {/* Social proof */}
             {siteConfig.hero.socialProof && (
               <motion.p
-                className="text-xs text-muted-foreground flex items-center gap-1"
+                className="text-xs text-muted-foreground flex items-center justify-center lg:justify-start gap-1"
                 variants={itemVariants}
               >
                 <Star className="w-3 h-3 text-amber-400 fill-amber-400 flex-shrink-0" />
@@ -109,7 +112,7 @@ export default function LandingHero() {
 
             {/* Stats */}
             <motion.div
-              className="flex flex-col sm:flex-row items-center gap-6 pt-4"
+              className="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-6 pt-4"
               variants={itemVariants}
             >
               <div className="flex -space-x-2">
diff --git a/apps/landing/components/sections/testimonials.tsx b/apps/landing/components/sections/testimonials.tsx
index c33f64c59d..bd1880a271 100644
--- a/apps/landing/components/sections/testimonials.tsx
+++ b/apps/landing/components/sections/testimonials.tsx
@@ -21,8 +21,8 @@ export default function TestimonialsSection() {
 
         <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
           {siteConfig.testimonials.items.map((testimonial) => (
-            <div key={testimonial.id} className="apple-card h-full relative">
-              <QuoteIcon className="absolute -top-4 -left-4 h-8 w-8 md:h-10 md:w-10 rotate-180 opacity-10 text-apple-blue" />
+            <div key={testimonial.id} className="apple-card h-full relative overflow-hidden">
+              <QuoteIcon className="absolute top-3 left-3 h-8 w-8 md:h-10 md:w-10 rotate-180 opacity-10 text-apple-blue" />
 
               <div className="flex items-center gap-3 md:gap-4 mb-4 md:mb-6">
                 <Avatar className="h-12 w-12 md:h-14 md:w-14 border-2 border-border/20">
diff --git a/apps/landing/components/site-footer.tsx b/apps/landing/components/site-footer.tsx
index 50f4f2ffbb..0e52ad3ddc 100644
--- a/apps/landing/components/site-footer.tsx
+++ b/apps/landing/components/site-footer.tsx
@@ -51,7 +51,7 @@ export default function SiteFooter() {
           </div>
 
           {/* Product links */}
-          <div className="lg:ml-auto">
+          <div>
             <h3 className="text-sm font-semibold mb-4">Product</h3>
             <ul className="space-y-3">
               {siteConfig.footerLinks.product.map((item) => (

From 2f7af4bcb17a93e1452dc28169413b8524ac0c81 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 11 Apr 2026 16:02:44 +0000
Subject: [PATCH 6/7] fix(landing): fix stretched images in device mockups
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- device-mockup.tsx: change aspect ratio from 9:16 to 9:19.5 — all app
  screenshots are 1170×2532 / 1290×2796 (modern iPhone proportions = 9:19.5).
  The 9:16 frame was making the phone look too "fat/wide", causing images to
  appear stretched/distorted relative to the actual phone shape.
- download.tsx: replace explicit width=522/height=1024 (wrong dimensions vs
  actual 1290×2796 image) with Next.js fill prop + object-cover object-top,
  consistent with DeviceMockup and the correct pattern for images inside a
  positioned container.

Agent-Logs-Url: https://github.com/PackRat-AI/PackRat/sessions/b72b0e51-2179-4367-a74f-ab11bb0ca490

Co-authored-by: andrew-bierman <94939237+andrew-bierman@users.noreply.github.com>
---
 apps/landing/components/sections/download.tsx | 5 ++---
 apps/landing/components/ui/device-mockup.tsx  | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/apps/landing/components/sections/download.tsx b/apps/landing/components/sections/download.tsx
index 3ae50f6504..71e38ab0e4 100644
--- a/apps/landing/components/sections/download.tsx
+++ b/apps/landing/components/sections/download.tsx
@@ -73,11 +73,10 @@ export default function DownloadSection() {
                   <div className="absolute top-0 left-1/2 z-10 h-4 md:h-6 w-24 md:w-36 -translate-x-1/2 rounded-b-3xl bg-black" />
                   <div className="absolute inset-0 overflow-hidden pt-4 md:pt-5">
                     <Image
-                      width={522}
-                      height={1024}
+                      fill
                       src={siteConfig.download.image || '/placeholder.svg'}
                       alt="PackRat App"
-                      className="object-cover w-full h-full"
+                      className="object-cover object-top"
                     />
                   </div>
                 </div>
diff --git a/apps/landing/components/ui/device-mockup.tsx b/apps/landing/components/ui/device-mockup.tsx
index 00a1509af7..e1081888bf 100644
--- a/apps/landing/components/ui/device-mockup.tsx
+++ b/apps/landing/components/ui/device-mockup.tsx
@@ -59,7 +59,7 @@ export default function DeviceMockup({
       <div
         className={cn(
           'relative w-full overflow-hidden rounded-[40px] border-[14px] bg-black transition-transform duration-500',
-          aspectRatio === 'portrait' ? 'aspect-[9/16]' : 'aspect-[16/9]',
+          aspectRatio === 'portrait' ? 'aspect-[9/19.5]' : 'aspect-[16/9]',
           showShadow && 'shadow-2xl shadow-black/20',
           isHovered && 'scale-[1.02]',
         )}

From 1ddeb52c1168838a35c3b2e6d3d572902448d045 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 11 Apr 2026 18:41:24 +0000
Subject: [PATCH 7/7] fix(deps): add he and @types/he to apps/expo/package.json

The development branch updated decodeHtmlEntities.ts to use the `he`
library (commit 9d059741a) but didn't add `he`/`@types/he` to
package.json. The PR merge CI test (which merges this branch into
development) therefore picks up the `import he from 'he'` in the merged
decodeHtmlEntities.ts but can't resolve the types, causing:

  apps/expo/lib/utils/decodeHtmlEntities.ts(1,16): error TS2307:
  Cannot find module 'he' or its corresponding type declarations.

Add he@^1.2.0 to dependencies and @types/he@^1.2.3 to devDependencies,
both inserted in alphabetical order to satisfy the sort-package-json CI
check.

Agent-Logs-Url: https://github.com/PackRat-AI/PackRat/sessions/218706e8-749c-45fb-83aa-066e280509c1

Co-authored-by: andrew-bierman <94939237+andrew-bierman@users.noreply.github.com>
---
 apps/expo/package.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/expo/package.json b/apps/expo/package.json
index 848f961879..d42acfe850 100644
--- a/apps/expo/package.json
+++ b/apps/expo/package.json
@@ -107,6 +107,7 @@
     "expo-updates": "~29.0.16",
     "expo-web-browser": "~15.0.10",
     "google-auth-library": "^10.1.0",
+    "he": "^1.2.0",
     "i": "^0.3.7",
     "i18next": "^25.8.18",
     "jotai": "^2.12.2",
@@ -136,6 +137,7 @@
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@biomejs/biome": "2.4.6",
+    "@types/he": "^1.2.3",
     "@types/react": "~19.0.10",
     "@types/ungap__structured-clone": "^1.2.0",
     "@typescript-eslint/eslint-plugin": "^7.7.0",