feat(landing): replicate Apple/SwiftUI style from guides app on landing page

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",

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;
   }
 }
@@ -80,9 +79,68 @@
   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 +158,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;

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>

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>
   );
 }