feat: refine homepage structure and visual presentation

home-qa-comparison.html

@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>WanderQ Homepage Structure QA</title>
+    <style>
+      * { box-sizing: border-box; }
+      html, body { margin: 0; background: #111a15; font-family: Arial, sans-serif; }
+      body { width: 1480px; padding: 20px; }
+      header { display: flex; justify-content: space-between; padding: 18px 4px; color: #f3efe5; font-size: 18px; letter-spacing: .08em; }
+      main { display: grid; grid-template-columns: repeat(2, 720px); gap: 20px; align-items: start; }
+      section { overflow: hidden; background: #f3efe5; }
+      .source img, .segment img { display: block; width: 720px; }
+      .source { height: 1164px; }
+      .source img { height: 1164px; }
+      .implementation { height: 1164px; }
+      .segment { position: relative; overflow: hidden; width: 720px; }
+      .segment img { position: absolute; left: 0; top: 0; height: 500px; }
+      .segment-one { height: 500px; }
+      .segment-two { height: 450px; }
+      .segment-two img { top: -50px; }
+      .segment-three { height: 214px; }
+      .segment-three img { top: -175px; }
+    </style>
+  </head>
+  <body>
+    <header><span>SOURCE STRUCTURE</span><span>IMPLEMENTED HOMEPAGE</span></header>
+    <main>
+      <section class="source"><img src="/figma-home-structure-preview.png" alt="Approved homepage structure" /></section>
+      <section class="implementation">
+        <div class="segment segment-one"><img src="/home-qa-desktop-01-hero.png" alt="Implemented hero" /></div>
+        <div class="segment segment-two"><img src="/home-qa-desktop-02-transition.png" alt="Implemented transition" /></div>
+        <div class="segment segment-three"><img src="/home-qa-desktop-03-experiences.png" alt="Implemented experience cards" /></div>
+      </section>
+    </main>
+  </body>
+</html>