Improve donation page and docs banner for youtube

orchidsoftware · Oct 25, 2023 · b8860d1 · b8860d1
1 parent 81cf166
commit b8860d1
Show file tree

Hide file tree

Showing 8 changed files with 12,941 additions and 11 deletions.
diff --git a/public/css/app.css b/public/css/app.css
diff --git a/public/img/alexandr.jpg b/public/img/alexandr.jpg
diff --git a/public/img/next/confetti.svg b/public/img/next/confetti.svg
diff --git a/public/img/next/video.svg b/public/img/next/video.svg
diff --git a/public/js/app.js b/public/js/app.js
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
@@ -501,3 +501,50 @@ input[type="search"]::-webkit-search-results-decoration {
         }
     }
 }
+
+.love-confetti {
+    background: url("/img/next/confetti.svg");
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.card-back-rotate {
+    position: absolute!important;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: -2;
+    transform: rotate(350deg);
+    background: linear-gradient(315deg, rgba(202, 114, 183, 0.35) 0%, rgba(145, 70, 128, 0.35) 35.87%, rgba(63, 38, 96, 0.35) 82.29%);
+}
+
+.docs-banner {
+    @extend .d-none;
+    @extend .d-md-flex;
+    @extend .text-center;
+    @extend .text-md-start;
+    @extend .align-items-center;
+    @extend .gap-4;
+    @extend .bg-dark;
+    @extend .text-white;
+    @extend .px-5;
+    @extend .py-4;
+    @extend .mb-4;
+    @extend .shadow;
+    @extend .rounded-3;
+    @extend .position-relative;
+
+    label {
+        color: #CA72B7;
+    }
+
+    p {
+        line-height: 1.4;
+        margin-bottom: 0;
+    }
+
+    .btn-outline-primary {
+        border: 2px solid #C16EBB !important;
+    }
+}
diff --git a/resources/views/components/docs-banner.blade.php b/resources/views/components/docs-banner.blade.php
@@ -1,13 +1,13 @@
-<div class="d-none d-md-flex text-center text-md-start align-items-center gap-4 bg-dark text-white px-5 py-4 mb-4 shadow rounded-3 position-relative"
+<div class="d-none d-md-flex text-center text-md-start align-items-center gap-4 bg-dark text-white px-5 py-4 mb-4 shadow rounded-3 position-relative docs-banner"
      style="aspect-ratio: 4.5/1; background: radial-gradient(100% 100% at 0 0,#383546 0,#363343 23.78%,#312e3e 100%)">
 
-    <svg xmlns="http://www.w3.org/2000/svg" width="5rem" height="5rem" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
-        <path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"></path>
-    </svg>
+    <div class="col-md-2">
+        <img src="/img/next/video.svg" class="img-fluid">
+    </div>
 
     <div class="flex-grow-1 text-center text-lg-start pe-md-3">
-        <div class="opacity-50">Любите видеоуроки?</div>
-        <div style="line-height: 1.4;">Тогда обязательно посмотрите наши бесплатные видеоуроки на YouTube</div>
+        <label>Любите видеоуроки?</label>
+        <p>Тогда обязательно посмотрите наши бесплатные видеоуроки на YouTube</p>
     </div>
 
     <a href="https://www.youtube.com/playlist?list=PLM-y77GFP_D0ZtrNGXorSjlcO8KsFrcgJ" target="_blank" class="btn btn-outline-primary stretched-link">Смотреть</a>

diff --git a/resources/views/donations.blade.php b/resources/views/donations.blade.php
@@ -29,9 +29,16 @@
             </div>
         </div>
 
-        <div class="row g-4 g-xxl-5 g-lg-4 g-md-3">
+        <div class="row g-4 g-xxl-5 g-lg-4 g-md-3 love-confetti py-md-5">
+
+            <div class="col-12 col-xl-8 mx-auto position-relative py-md-5">
+
+
+
+                <div class="card shadow-sm position-relative card-feature overflow-hidden card-back-rotate ">
+                </div>
+
 
-            <div class="col-12 col-xl-8 mx-auto">
                 <div class="card shadow-sm h-100 position-relative card-feature overflow-hidden">