added headre

besoeasy · Dec 7, 2023 · f167603 · f167603
1 parent bbc7004
commit f167603
Show file tree

Hide file tree

Showing 10 changed files with 1,143 additions and 0 deletions.
diff --git a/components/headers/hadsol6.html b/components/headers/hadsol6.html
@@ -0,0 +1,104 @@
+<section class="overflow-hidden pb-24 bg-purple-900">
+    <div class="container px-4 mx-auto">
+      <div class="flex items-center justify-between py-6">
+        <div class="flex items-center gap-6">
+          <div class="pr-6 border-r-2 border-transparent lg:border-purple-400">
+            <a href="#">
+              <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32" fill="none">
+                <rect width="32" height="32" rx="8" fill="white"></rect>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M28 14L28 9C28 8.44772 27.5523 8 27 8L24 8C23.4477 8 23 8.44772 23 9L23 13C23 16.3137 20.3137 19 17 19L13 19C12.4477 19 12 19.4477 12 20L12 23C12 23.5523 12.4477 24 13 24L18 24C23.5228 24 28 19.5228 28 14Z" fill="#530031"></path>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M4 18L4 23C4 23.5523 4.44772 24 5 24L8 24C8.55228 24 9 23.5523 9 23L9 19C9 15.6863 11.6863 13 15 13L19 13C19.5523 13 20 12.5523 20 12L20 9C20 8.44771 19.5523 8 19 8L14 8C8.47715 8 4 12.4772 4 18Z" fill="#530031"></path>
+              </svg>
+            </a>
+          </div>
+          <ul class="hidden lg:flex items-center gap-8">
+            <li>
+              <a class="flex items-center flex-wrap gap-2 group" href="#">
+                <span class="text-white group-hover:text-opacity-70 transition duration-200">Platform</span>
+                <div class="text-white group-hover:text-opacity-70 transition duration-200">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16" fill="none">
+                    <path d="M13 5.5L8 10.5L3 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                  </svg>
+                </div>
+              </a>
+            </li>
+            <li class="text-white hover:text-opacity-70 transition duration-200"><a href="#">Features</a></li>
+            <li class="text-white hover:text-opacity-70 transition duration-200"><a href="#">Community</a></li>
+            <li>
+              <a class="flex items-center flex-wrap gap-2 group" href="#">
+                <span class="text-white group-hover:text-opacity-70 transition duration-200">Resources</span>
+                <div class="text-white group-hover:text-opacity-70 transition duration-200">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16" fill="none">
+                    <path d="M13 5.5L8 10.5L3 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                  </svg>
+                </div>
+              </a>
+            </li>
+          </ul>
+        </div>
+        <a class="hidden lg:inline-block py-3 px-5 rounded-full bg-purple-900 border border-purple-700 shadow text-sm font-semibold text-white hover:bg-purple-800 focus:ring focus:ring-purple-800 transition duration-200" href="#">Get Started</a>
+        <div class="lg:hidden">
+          <a href="#">
+            <svg class="navbar-burger text-orange-500" width="51" height="51" viewbox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <rect width="56" height="56" rx="28" fill="currentColor"></rect>
+              <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+            </svg>
+          </a>
+        </div>
+      </div>
+      <div class="hidden navbar-menu fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50">
+        <div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-80"></div>
+        <nav class="relative z-10 px-9 py-8 h-full overflow-y-auto bg-white flex flex-col justify-between">
+          <div class="flex items-center justify-between">
+            <a href="#">
+              <img src="https://shuffle.dev/solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
+            </a>
+            <a class="navbar-burger" href="#">
+              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+              </svg>
+            </a>
+          </div>
+          <ul class="flex flex-col gap-12 py-12">
+            <li>
+              <a class="flex items-center flex-wrap gap-2 group" href="#">
+                <span class="group-hover:text-opacity-70 transition duration-200">Platform</span>
+                <div class="group-hover:text-opacity-70 transition duration-200">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16" fill="none">
+                    <path d="M13 5.5L8 10.5L3 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                  </svg>
+                </div>
+              </a>
+            </li>
+            <li class="hover:text-opacity-70 transition duration-200"><a href="#">Features</a></li>
+            <li class="hover:text-opacity-70 transition duration-200"><a href="#">Community</a></li>
+            <li>
+              <a class="flex items-center flex-wrap gap-2 group" href="#">
+                <span class="group-hover:text-opacity-70 transition duration-200">Resources</span>
+                <div class="group-hover:text-opacity-70 transition duration-200">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16" fill="none">
+                    <path d="M13 5.5L8 10.5L3 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                  </svg>
+                </div>
+              </a>
+            </li>
+          </ul>
+          <a class="block text-center py-3 px-5 rounded-full bg-white border border-gray-200 shadow text-sm font-semibold hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">Get Started</a>
+        </nav>
+      </div>
+      <h1 class="mt-12 mb-6 text-center text-5xl lg:text-7xl text-white font-bold font-heading max-w-2xl mx-auto">Unlock collective knowledge</h1>
+      <p class="text-orange-50 text-lg text-center mb-10 max-w-xl mx-auto">Fuel your curiosity, expand your horizons, and achieve greatness by joining a vibrant community of learners.</p>
+      <div class="flex justify-center mb-24"><a class="w-full sm:w-auto text-center h-16 inline-flex items-center justify-center py-4 px-6 rounded-full bg-orange-500 border border-orange-600 shadow font-bold font-heading text-white hover:bg-orange-600 focus:ring focus:ring-orange-200 transition duration-200" href="#">Study Together Now</a></div>
+      <div class="flex flex-wrap">
+        <div class="w-full lg:w-1/3 p-4">
+          <img class="mx-auto h-full" src="https://shuffle.dev/solstice-assets/images/hero/summary-tile-primary.png" alt="">
+        </div>
+        <div class="w-full lg:w-1/3 p-4">
+          <img class="mx-auto h-full" src="https://shuffle.dev/solstice-assets/images/hero/timer-tile-primary2.png" alt="">
+        </div>
+        <div class="w-full lg:w-1/3 p-4">
+          <img class="mx-auto h-full" src="https://shuffle.dev/solstice-assets/images/hero/todos-tile-primary.png" alt="">
+        </div>
+      </div>
+    </div>
+  </section>
diff --git a/components/headers/headsol1.html b/components/headers/headsol1.html
@@ -0,0 +1,104 @@
+<section class="overflow-hidden pb-24">
+    <div class="container px-4 mx-auto">
+      <div class="flex items-center justify-between py-6">
+        <div class="flex items-center gap-6">
+          <div class="pr-6 border-r-2 border-transparent lg:border-gray-200">
+            <a href="#">
+              <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32" fill="none">
+                <rect width="32" height="32" rx="8" fill="#282828"></rect>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M28 14L28 9C28 8.44772 27.5523 8 27 8L24 8C23.4477 8 23 8.44772 23 9L23 13C23 16.3137 20.3137 19 17 19L13 19C12.4477 19 12 19.4477 12 20L12 23C12 23.5523 12.4477 24 13 24L18 24C23.5228 24 28 19.5228 28 14Z" fill="white"></path>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M4 18L4 23C4 23.5523 4.44772 24 5 24L8 24C8.55228 24 9 23.5523 9 23L9 19C9 15.6863 11.6863 13 15 13L19 13C19.5523 13 20 12.5523 20 12L20 9C20 8.44771 19.5523 8 19 8L14 8C8.47715 8 4 12.4772 4 18Z" fill="white"></path>
+              </svg>
+            </a>
+          </div>
+          <ul class="hidden lg:flex items-center gap-8">
+            <li>
+              <a class="flex items-center flex-wrap gap-2 group" href="#">
+                <span class="group-hover:text-opacity-70 transition duration-200">Platform</span>
+                <div class="group-hover:text-opacity-70 transition duration-200">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16" fill="none">
+                    <path d="M13 5.5L8 10.5L3 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                  </svg>
+                </div>
+              </a>
+            </li>
+            <li class="hover:text-opacity-70 transition duration-200"><a href="#">Features</a></li>
+            <li class="hover:text-opacity-70 transition duration-200"><a href="#">Community</a></li>
+            <li>
+              <a class="flex items-center flex-wrap gap-2 group" href="#">
+                <span class="group-hover:text-opacity-70 transition duration-200">Resources</span>
+                <div class="group-hover:text-opacity-70 transition duration-200">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16" fill="none">
+                    <path d="M13 5.5L8 10.5L3 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                  </svg>
+                </div>
+              </a>
+            </li>
+          </ul>
+        </div>
+        <a class="hidden lg:inline-block py-3 px-5 rounded-full bg-purple-900 border border-purple-700 shadow text-sm font-semibold text-white hover:bg-purple-800 focus:ring focus:ring-purple-800 transition duration-200" href="#">Get Started</a>
+        <div class="lg:hidden">
+          <a href="#">
+            <svg class="navbar-burger text-orange-500" width="51" height="51" viewbox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <rect width="56" height="56" rx="28" fill="currentColor"></rect>
+              <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+            </svg>
+          </a>
+        </div>
+      </div>
+      <div class="hidden navbar-menu fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50">
+        <div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-80"></div>
+        <nav class="relative z-10 px-9 py-8 h-full overflow-y-auto bg-white flex flex-col justify-between">
+          <div class="flex items-center justify-between">
+            <a href="#">
+              <img src="https://shuffle.dev/solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
+            </a>
+            <a class="navbar-burger" href="#">
+              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+              </svg>
+            </a>
+          </div>
+          <ul class="flex flex-col gap-12 py-12">
+            <li>
+              <a class="flex items-center flex-wrap gap-2 group" href="#">
+                <span class="group-hover:text-opacity-70 transition duration-200">Platform</span>
+                <div class="group-hover:text-opacity-70 transition duration-200">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16" fill="none">
+                    <path d="M13 5.5L8 10.5L3 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                  </svg>
+                </div>
+              </a>
+            </li>
+            <li class="hover:text-opacity-70 transition duration-200"><a href="#">Features</a></li>
+            <li class="hover:text-opacity-70 transition duration-200"><a href="#">Community</a></li>
+            <li>
+              <a class="flex items-center flex-wrap gap-2 group" href="#">
+                <span class="group-hover:text-opacity-70 transition duration-200">Resources</span>
+                <div class="group-hover:text-opacity-70 transition duration-200">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16" fill="none">
+                    <path d="M13 5.5L8 10.5L3 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                  </svg>
+                </div>
+              </a>
+            </li>
+          </ul>
+          <a class="block text-center py-3 px-5 rounded-full bg-white border border-gray-200 shadow text-sm font-semibold hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">Get Started</a>
+        </nav>
+      </div>
+      <h1 class="mt-12 mb-6 text-center text-5xl lg:text-7xl font-bold font-heading max-w-2xl mx-auto">Unlock collective knowledge</h1>
+      <p class="text-gray-600 text-lg text-center mb-10 max-w-xl mx-auto">Fuel your curiosity, expand your horizons, and achieve greatness by joining a vibrant community of learners.</p>
+      <div class="flex justify-center mb-24"><a class="w-full sm:w-auto text-center h-16 inline-flex items-center justify-center py-4 px-6 rounded-full bg-orange-500 border border-orange-600 shadow font-bold font-heading text-white hover:bg-orange-600 focus:ring focus:ring-orange-200 transition duration-200" href="#">Study Together Now</a></div>
+      <div class="flex flex-wrap">
+        <div class="w-full lg:w-1/3 p-4">
+          <img class="mx-auto h-full" src="https://shuffle.dev/solstice-assets/images/hero/summary-tile-secondary.png" alt="">
+        </div>
+        <div class="w-full lg:w-1/3 p-4">
+          <img class="mx-auto h-full" src="https://shuffle.dev/solstice-assets/images/hero/timer-tile-primary.png" alt="">
+        </div>
+        <div class="w-full lg:w-1/3 p-4">
+          <img class="mx-auto h-full" src="https://shuffle.dev/solstice-assets/images/hero/todos-tile-primary2.png" alt="">
+        </div>
+      </div>
+    </div>
+  </section>