Improve web landing page design and UX

- Add FAQ section with accordion-style questions
- Enhance hero with stronger copy and App Store badge
- Add hover animations to features and phone mockups
- Add pricing display (£4.99/month) to Pro section
- Add step icons to How It Works section
- Improve accessibility with focus states and reduced-motion
- Add exit animation to mobile navigation menu

🤖 Generated with [Claude Code](https://claude.com/claude-code)

apps/web/app/globals.css

@@ -158,3 +158,60 @@ body {
 .animate-pulse-glow {
   animation: pulse-glow 4s ease-in-out infinite;
 }
+
+/* Focus states for accessibility */
+.btn-primary:focus-visible,
+.btn-secondary:focus-visible {
+  outline: none;
+  ring: 2px;
+  ring-offset: 2px;
+  ring-color: rgba(233, 69, 96, 0.8);
+  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--primary);
+}
+
+a:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+button:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+
+  .animate-float,
+  .animate-pulse-glow {
+    animation: none;
+  }
+}
+
+/* Card tilt effect */
+.card-tilt {
+  transition: transform 0.3s ease;
+  transform-style: preserve-3d;
+}
+
+.card-tilt:hover {
+  transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) translateY(-4px);
+}
+
+/* Phone tilt effect */
+.phone-tilt {
+  transition: transform 0.4s ease;
+  transform-style: preserve-3d;
+}
+
+.phone-tilt:hover {
+  transform: perspective(1000px) rotateY(-8deg) rotateX(4deg) scale(1.02);
+}

apps/web/app/page.tsx

@@ -3,6 +3,7 @@ import Hero from '@/components/Hero'
 import Features from '@/components/Features'
 import HowItWorks from '@/components/HowItWorks'
 import Pricing from '@/components/Pricing'
+import FAQ from '@/components/FAQ'
 import CTA from '@/components/CTA'
 import Footer from '@/components/Footer'
 
@@ -14,6 +15,7 @@ export default function Home() {
       <Features />
       <HowItWorks />
       <Pricing />
+      <FAQ />
       <CTA />
       <Footer />
     </main>