Build a modern, premium SaaS landing page for a laundry pickup and delivery service called 'Washionic'.
Design System & Aesthetic: Strictly follow Apple's Human Interface Guidelines (Cupertino style). Use heavy 'Glassmorphism' (frosted glass effects with backdrop blur), ultra-clean white space, smooth squircle rounded corners, and subtle, elegant drop shadows. Use a clean sans-serif font similar to Apple's San Francisco. The color theme should be stark white, deep iOS blue accents, and light silver/grays.
Include:
A clean header with the Washionic logo text.
A Hero Section with a bold headline: 'Premium Laundry, Delivered to Your Door' and a clear subheadline.
A massive, highly visible 'Schedule a Pickup' button.
A 'How it Works' section with 3 simple steps and modern, thin-line Apple-style icons.
Technical constraints:
Must be perfectly mobile-responsive.
Single page only. Do not add multiple pages.
Built using React and Tailwind CSS
I'll build a premium Apple-style landing page for Washionic with glassmorphism effects. Let me first save your logo image and then read the existing files to understand the project structure.
Now let me update the layout with proper metadata and Inter font for that Apple-style feel, update the globals.css with iOS blue accent colors, and create the landing page with all components:
Now let me create the component files for the landing page:
Now let me create the main page that brings all components together:
I've built a premium Apple-style landing page for Washionic with the following features:
Design System:
- Glassmorphism: Heavy use of
backdrop-blur-xl,bg-white/70, andborder-white/60for frosted glass effects on the header, hero card, and step cards - Cupertino Aesthetic: Ultra-clean white space, iOS blue accent color (
oklch(0.55 0.22 255)), light silver/grays, and smooth squircle corners withrounded-[2rem]androunded-full - San Francisco-style Font: Using Inter, which closely matches Apple's SF Pro
Components:
- Header: Floating glassmorphism navbar with logo, navigation links, and CTA button
- Hero Section: Bold headline "Premium Laundry, Delivered to Your Door", gradient text effect, tagline, massive "Schedule a Pickup" button with icon and shadow effects, logo showcase in glass card, and trust indicators
- How It Works: Three-step process with thin-line Lucide icons (CalendarCheck, Sparkles, Truck), step numbers, glass cards with hover animations, and connecting lines on desktop
- Footer: Clean, minimal footer with logo and copyright
Mobile Responsive: All components adapt beautifully to mobile screens using Tailwind's responsive classes (md:, lg:, sm:).
The current implementation handles varying mobile sizes well, but I can improve a few areas for very small screens (below 375px) and add smoother scaling. Let me enhance the responsive behavior:
I've enhanced the responsive behavior across all components. Here's how the page now handles varying mobile sizes:
Breakpoint Strategy:
- Extra small (< 640px): Compact padding, smaller typography (text-xs, text-sm, text-base), reduced spacing, smaller buttons, 2-column grid on "How It Works"
- Small (640px - 768px): Medium sizing with
sm:classes for comfortable touch targets - Medium (768px+): Full desktop experience with
md:classes
Key Improvements:
- Header: Smaller margins, padding, logo, and a shorter "Start" button text on tiny screens
- Hero: Headline scales from
text-3xltotext-7xl, buttons have proper touch targets at all sizes, logo card shrinks gracefully - How It Works: Cards use a 2-column grid on small screens before going 3-column on desktop, with smaller icons and text on mobile
- Trust indicators: Smaller gaps and font sizes on mobile to prevent overflow
The page now adapts smoothly from 320px (iPhone SE) up to large desktop screens.