added navbar sol

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

Hide file tree

Showing 8 changed files with 682 additions and 0 deletions.
diff --git a/components/navbar/navbarsol1.html b/components/navbar/navbarsol1.html
@@ -0,0 +1,84 @@
+<section class="overflow-hidden">
+    <div class="container px-4 mx-auto">
+      <div class="flex items-center justify-between py-6">
+        <div class="flex items-center gap-10">
+          <a href="#">
+            <img src="https://shuffle.dev/solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
+          </a>
+          <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>
+        <div class="hidden lg:flex gap-4"><a class="py-3 px-5 rounded-full border border-gray-200 shadow text-sm font-semibold hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">Login</a><a class="py-3 px-5 rounded-full bg-orange-500 border border-orange-600 shadow text-sm font-semibold text-white hover:bg-orange-600 focus:ring focus:ring-orange-200 transition duration-200" href="#">Get Started</a></div>
+        <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>
+          <div class="flex flex-col items-center gap-6"><a class="w-full text-center py-3 px-5 rounded-full border border-gray-200 shadow text-sm font-semibold hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">Login</a><a class="w-full text-center py-3 px-5 rounded-full bg-orange-500 border border-orange-600 shadow text-sm font-semibold text-white hover:bg-orange-600 focus:ring focus:ring-orange-200 transition duration-200" href="#">Get Started</a></div>
+        </nav>
+      </div>
+    </div>
+  </section>
diff --git a/components/navbar/navbarsol2.html b/components/navbar/navbarsol2.html
@@ -0,0 +1,84 @@
+<section class="overflow-hidden">
+    <div class="border-b border-gray-100">
+      <div class="container px-4 mx-auto">
+        <div class="flex items-center justify-between py-6">
+          <a href="#">
+            <img src="https://shuffle.dev/solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
+          </a>
+          <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>
+          <a class="hidden lg:inline-block 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>
+          <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>
+    </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>
+  </section>
diff --git a/components/navbar/navbarsol3.html b/components/navbar/navbarsol3.html
@@ -0,0 +1,84 @@
+<section class="bg-purple-900 overflow-hidden">
+    <div class="container px-4 mx-auto">
+      <div class="flex items-center justify-between py-6">
+        <div class="flex items-center gap-10">
+          <a href="#">
+            <img src="https://shuffle.dev/solstice-assets/images/logos/solstice-logo-light.svg" alt="">
+          </a>
+          <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>
+        <div class="hidden lg:flex gap-4"><a class="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="#">Login</a><a class="py-3 px-5 rounded-full bg-orange-500 border border-orange-600 shadow text-sm font-semibold text-white hover:bg-orange-600 focus:ring focus:ring-orange-200 transition duration-200" href="#">Get Started</a></div>
+        <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>
+          <div class="flex flex-col items-center gap-6"><a class="w-full text-center 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="#">Login</a><a class="w-full text-center py-3 px-5 rounded-full bg-orange-500 border border-orange-600 shadow text-sm font-semibold text-white hover:bg-orange-600 focus:ring focus:ring-orange-200 transition duration-200" href="#">Get Started</a></div>
+        </nav>
+      </div>
+    </div>
+  </section>