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", diff --git a/apps/landing/app/globals.css b/apps/landing/app/globals.css index a8d99722c1..aae3fe5c23 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; } } @@ -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; 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 ( - + - - {children} - +
+ + {children} + +
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 ( -
- {/* Static dot-grid background — SSR-safe, zero JS, zero layout shift */} -
-
- - - - - - - -
-
+
+ + + + + + + +
); } 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, 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 (
-
- -
- -
+
+ {/* Logo */} +
+ + + {siteConfig.name} + +
+ + {/* Desktop navigation – Apple style: centered, rounded-full hover */} +