Update prototype layout and flow view

app/app.vue

@@ -228,15 +228,31 @@
 
             <section id="prototype" class="slide">
               <div class="slide-top"><span class="slide-num">07</span><span class="slide-label">Прототип</span></div>
-              <div class="slide-head">
+              <div class="grid gap-10 lg:grid-cols-[1.6fr_0.7fr] items-start">
-                <h2 class="slide-title">Один экран — один смысл</h2>
+                <div>
-                <p class="slide-preamble">
+                  <div class="slide-head">
-                  Посмотрите прототип: мы подготовили сценарий, который показывает, как пользователь проходит
+                    <h2 class="slide-title">Принцип проектирования сценария</h2>
-                  путь от объекта до понятной сметы, этапов и уведомлений. Окунитесь в то, как это может выглядеть.
+                    <p class="slide-preamble">
-                </p>
+                      Мы закладываем идею «один экран — одно полезное действие». Пользователь всегда понимает,
-              </div>
+                      на каком этапе он находится, что уже сделано и что нужно сделать дальше.
-              <div class="slide-main items-end">
+                    </p>
-                <div class="relative flex w-full justify-end">
+                  </div>
+                  <div class="grid gap-5">
+                    <div class="glass-card rounded-3xl p-5 shadow-soft">
+                      <div class="text-xs font-semibold text-neutral/60">Принцип 01</div>
+                      <div class="mt-2 font-display text-xl">Один экран — одно действие</div>
+                    </div>
+                    <div class="glass-card rounded-3xl p-5 shadow-soft lg:translate-x-6">
+                      <div class="text-xs font-semibold text-neutral/60">Принцип 02</div>
+                      <div class="mt-2 font-display text-xl">Полный контекст этапа</div>
+                    </div>
+                    <div class="glass-card rounded-3xl p-5 shadow-soft lg:translate-x-12">
+                      <div class="text-xs font-semibold text-neutral/60">Принцип 03</div>
+                      <div class="mt-2 font-display text-xl">Прозрачные переходы</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="relative flex w-full justify-center">
                   <div class="iphone-frame shadow-glow">
                     <span class="iphone-button iphone-button--mute" aria-hidden="true"></span>
                     <span class="iphone-button iphone-button--vol-up" aria-hidden="true"></span>
@@ -716,6 +732,7 @@ html {
   margin-bottom: 1.5rem;
 }
 
+
 .slide-main {
   flex: 1;
   display: flex;