Act as an expert frontend developer and UI/UX designer. I need you to build a premium, modern landing page for a product called "Waywarer".

The Product: A beautifully designed GPS wristband built for dementia patients to get them to safety if they wander. It looks like a premium fashion watch, not a medical bracelet (slim metal casing, interchangeable bands, no clinical branding). It features "safe zones" managed via a companion app, and a single SOS button for emergencies.

Design System & Vibe:

• Vibe: Premium, dignified, warm, and trustworthy. It should feel like a high-end fashion or lifestyle brand, absolutely NOT clinical or medical.
• Typography: Use 'Playfair Display' (serif) for large, elegant headings and 'Inter' (sans-serif) for clean, readable body text.
• Color Palette:
  • Backgrounds: Warm off-whites (e.g., #FAFAF9, #F5F5F4) and deep charcoal/ink for dark sections (#1C1917).
  • Text: Deep charcoal for primary text, muted taupe/stone for secondary text.
  • Accents: Emerald green for "safe/active" states and subtle orange for alerts.
• Tech Stack: React, Tailwind CSS, Framer Motion (for entrance animations), and Lucide React (for icons).

Page Structure & Requirements:

1. Navigation:
   • Serif logo ("Waywarer").
   • Simple links (Features, The App).
   • Dark pill-shaped "Pre-order Now" button.
2. Hero Section (Split Layout):
   • Left: A small "Now taking pre-orders" badge with a green pulsing dot. A massive serif headline: "Safety that doesn't look like a medical device." A descriptive subheadline. Two CTA buttons ("Reserve Yours" and "Learn More").
   • Right: Use this exact image: https://i.ibb.co/sJwp71Z0/Presentation-Newsletter-2.jpg (make sure it has rounded corners). Overlap a floating white "Live Status: Safe Zone Active" badge on the bottom left of the image.
   • Animate this section in using Framer Motion (fade up).
3. Features Section (3-Column Grid):
   • Centered serif section header: "Dignity meets security."
   • 3 feature cards with subtle borders and hover shadows.
   • Card 1: Premium Fashion Design (Watch icon).
   • Card 2: Smart Safe Zones (Shield icon).
   • Card 3: Emergency SOS (PhoneCall icon).
4. The App Section (Dark Mode):
   • Background: Deep charcoal (#1C1917).
   • Left side: Build an abstract, CSS-only representation of a smartphone UI. It should show a dark-themed app interface with a "Dad's Location" header, a stylized map (using a radial gradient grid), a green "safe zone" circle, a location pin, and status cards for Battery (84%) and Alerts.
   • Right side: Serif headline: "Always connected. Always informed." A bulleted list of app features (push notifications, GPS tracking, family sharing, 5+ day battery) using custom styled bullet points.
5. Bottom CTA & Footer:
   • Warm off-white background.
   • Centered serif headline: "Give them independence. Give yourself peace of mind."
   • An email input field and a dark "Join Waitlist" submit button.
   • Simple footer with copyright and basic links (Privacy, Terms, Contact).

Please write the complete React component code (e.g., App.tsx) and any necessary CSS imports for the fonts.