feat: add the phone to the landing

index.html

@@ -12,8 +12,23 @@
         <h1 class="hero-title">Showcase your journey</h1>
         <p>Pick the countries you’ve visited and seamlessly create your personalized wallpaper.</p>
         <p>Download your customized wallpapers and share them with friends and family to showcase your unique travel achievements.</p>
-        <button type="button" class="start to-app">Start crafting</button>
       </header>
+      <div class="demo">
+        <svg class="demo-pic" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1419 2796" width="320">
+          <image xlink:href="./background.png" x="100" y="100" width="1219" height="2596" clip-path="url(#clip)" />
+          <image xlink:href="./phone.png" x="0" y="0" width="1419" height="2796"/>
+          <text x="709" y="800" text-anchor="middle" fill="#fff" font-size="360" font-family="inherit" font-weight="bold">
+            09:41
+          </text>
+          <defs>
+            <rect id="rect" x="100" y="100" width="1219" height="2596" rx="120" ry="120" />
+            <clipPath id="clip">
+              <use xlink:href="#rect"/>
+            </clipPath>
+          </defs>
+        </svg>
+      </div>
+      <button type="button" class="start to-app">Start crafting</button>
     </main>
     <div class="app">
       <button type="button" aria-controls="sidebar" aria-expanded="false" aria-label="Open settings" aria-haspopup="true" class="sidebar-control">

src/landing/Landing.css

@@ -14,6 +14,7 @@
     transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
     display: flex;
     flex-direction: column;
+    align-items: center;
 }
 
 .landing.hidden {
@@ -22,7 +23,7 @@
 
 .hero {
     max-width: 600px;
-    margin: auto;
+    margin: 36px auto;
 }
 
 .hero p {
@@ -57,3 +58,13 @@
     background-image: linear-gradient(to top left, #f43b47 0%, #453a94 100%);
     color: #fff;
 }
+
+.demo {
+    max-width: 80%;
+    margin: 0 auto;
+    flex-basis: content;
+}
+
+.demo-pic {
+    max-width: 100%;
+}