Adding final updates to auth website

thedevdojo · Jun 4, 2024 · dcebd79 · dcebd79
1 parent 87ea860
commit dcebd79
Show file tree

Hide file tree

Showing 13 changed files with 93 additions and 68 deletions.
diff --git a/includes/docs-sidebar.html b/includes/docs-sidebar.html
diff --git a/includes/docs/section-header.html b/includes/docs/section-header.html
@@ -1,5 +1,5 @@
 <If condition="frontmatter.home == true">
-    <div class="flex relative flex-col pb-8">
+    <div class="flex relative flex-col sm:pb-8">
 
         <div class="flex relative flex-col">
             <h1 class="font-book font-styling text-white w-full font-rota mb-5 md:mb-3 lg:mb-6 text-left text-[2rem] lg:text-[2.5rem]  tracking-tight leading-[90%] xl:mt-0 mt-2 font-gradient">Welcome to the Auth Docs</h1>

diff --git a/includes/header.html b/includes/header.html
@@ -134,12 +134,14 @@
 
                 </div>
                 <div  class="flex relative items-center space-x-3 font-medium leading-10 md:flex-grow-0 md:flex-shrink-0 md:mt-0 md:text-right lg:flex-grow-0 lg:flex-shrink-0">
-                    <button @click="mobileMenu=!mobileMenu; $el.classList.add('scale-90'); setTimeout(function(){ $el.classList.remove('scale-90') }, 100)" class="block p-2 h-full rounded-lg duration-100 ease-out group md:hidden hover:bg-neutral-800/70">
-                        <div :class="{ '' : !mobileMenu, 'rotate-[0deg] scale-90 -translate-y-px origin-center' : mobileMenu }" class="flex flex-col justify-around items-end w-4 h-4 transition-all duration-300 linear">
-                            <div :class="{ 'w-full group-hover:w-2/3 -translate-x-px' : !mobileMenu, 'rotate-[45deg] w-full translate-y-1.5' : mobileMenu }" class="h-[2px] flex-shrink-0 rounded-lg transition-all linear duration-200 bg-zinc-100"></div>
-                            <div :class="{ 'opacity-100 w-1/2 group-hover:w-full -translate-x-px' : !mobileMenu, 'opacity-0' : mobileMenu }" class="h-[2px] flex-shrink-0 rounded-lg transition-all linear duration-200 bg-zinc-100 opacity-100"></div>
-                            <div :class="{ 'group-hover:w-1/2 w-2/3 -translate-x-px' : !mobileMenu, '-rotate-[45deg] w-full -translate-y-1' : mobileMenu }" class="h-[2px] flex-shrink-0 rounded-lg transition-all linear duration-200 bg-zinc-100"></div>
-                            </div>
+                    <button @click="leftSidebar=!leftSidebar; $el.classList.add('scale-90'); setTimeout(function(){ $el.classList.remove('scale-90') }, 100)" class="block p-2 h-full rounded-lg duration-100 ease-out group md:hidden hover:bg-neutral-800/70">
+                        <div class="flex flex-col justify-center items-center w-6 h-6 transition-all duration-300 linear">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-full h-full text-white currentColor">
+                                <path fill-rule="evenodd" d="M3 9a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 9Zm0 6.75a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd" />
+                              </svg>
+
+
+                        </div>
                     </button>
                     <div :class="{ 'flex' : mobile, 'hidden md:flex' : !mobile }" class="hidden relative z-20 flex-col justify-center pr-5 mt-4 space-y-8 md:pr-3 lg:pr-0 md:flex-row md:space-y-0 md:items-center md:space-x-6 md:mt-0 md:flex">
                         <a href="https://github.com/thedevdojo/auth" target="_blank" class="px-5 font-medium group text-black bg-white flex text-sm h-10 items-center rounded-lg shadow-xl cursor-pointer hover:bg-[#c9fd02]">

diff --git a/includes/home/browser-tab-pages.html b/includes/home/browser-tab-pages.html
@@ -1,14 +1,14 @@
-<section class="overflow-hidden relative py-24 lg:pt-32 lg:pb-10">
+<section class="overflow-hidden relative px-6 py-24 md:px-8 lg:pt-32 lg:pb-10">
     <div class="mx-auto">
-        <div class="mx-auto mb-12 text-center md:max-w-3xl">
+        <div class="mx-auto mb-12 text-left md:text-center md:max-w-3xl">
             <span class="inline-block mb-4 text-sm font-medium tracking-tighter uppercase text-[#a9fd02]">Premium Authentication Experience</span>
-            <h2 class="text-5xl font-normal text-white md:text-6xl md:leading-tight font-rota">Plug-and-Play Authentication Pages for Your Application</h2>
+            <h2 class="text-4xl font-normal text-white md:text-6xl md:leading-tight font-rota">Plug-and-Play Auth<span class="hidden md:inline">entication</span> Pages for Your App<span class="hidden md:inline">lication</span></h2>
         </div>
         <div class="flex relative justify-center items-center py-0 w-full">
             <div class="overflow-hidden absolute inset-0 z-10 w-full h-full">
                 <div class="absolute inset-0 z-30 w-full bg-gradient-to-b from-black to-black via-zinc-900"></div>
             </div>
-            <div class="px-6 mx-auto w-full max-w-6xl md:px-8 h-[740px] z-40 mb-20">
+            <div class="mx-auto w-full max-w-6xl h-[700px] md:h-[740px] z-40 md:mb-20">
                 <browser-el x-data="{ 
                         interacted: false,
                         active: 'login',
@@ -69,7 +69,7 @@ <h2 class="text-5xl font-normal text-white md:text-6xl md:leading-tight font-rot
                             <div class="w-2.5 h-2.5 bg-yellow-500 rounded-full"></div>
                             <div class="w-2.5 h-2.5 bg-green-500 rounded-full"></div>
                         </div>
-                        <nav class="flex items-center pt-1.5 space-x-1 w-auto w-full h-full font-medium">
+                        <nav class="flex items-center pt-1.5 space-x-1 w-auto w-full h-full font-medium no-scrollbar" style="overflow-x:scroll">
                             <include src="home/tab.html" title="login"></include>
                             <include src="home/tab.html" title="register" marker="true"></include>
                             <include src="home/tab.html" title="verify"></include>
@@ -97,7 +97,7 @@ <h2 class="text-5xl font-normal text-white md:text-6xl md:leading-tight font-rot
 
                         </div>
                     </div>
-                    <div class="flex flex-1 justify-center items-center w-full bg-white rounded-b-xl border border-t-0 border-zinc-100">
+                    <div class="flex flex-1 justify-center items-center py-20 w-full bg-white rounded-b-xl border border-t-0 md:py-0 border-zinc-100">
                         <div x-show="active=='login'" x-transition:enter="transition ease-out delay-200 duration-300" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90" class="absolute -translate-y-4">
                             <img x-bind:src="'{ url('/assets/images/screens/login.jpg') }'" class="w-full max-w-[400px] rounded-lg" />
                         </div>

diff --git a/includes/home/customize.html b/includes/home/customize.html
@@ -1,52 +1,52 @@
-<section class="overflow-hidden relative py-20 lg:pt-32 lg:pb-10">
+<section class="overflow-hidden relative pt-20 pb-10 sm:py-20 lg:pt-32 lg:pb-10">
     <div class="container px-6 mx-auto max-w-6xl lg:px-8">
-        <div class="mx-auto mb-12 text-center md:max-w-4xl">
+        <div class="mx-auto mb-12 text-left md:text-center md:max-w-4xl">
             <span class="inline-block mb-4 text-sm font-medium tracking-tighter uppercase text-[#a9fd02]">Easily make it your own</span>
-            <h2 class="text-5xl font-normal text-white md:text-6xl md:leading-tight font-rota">Customize and Configure<br> With Just a Few Clicks</h2>
+            <h2 class="text-4xl font-normal text-white md:text-6xl md:leading-tight font-rota">Customize and Configure<br> With Just a Few Clicks</h2>
         </div>
 
-        <div class="overflow-hidden relative px-16 py-24 mb-10 rounded-xl border border-zinc-700 bg-zinc-950 radial-background">
+        <div class="overflow-hidden relative px-16 pt-16 mb-10 rounded-xl border sm:pt-24 md:py-24 border-zinc-700 bg-zinc-950 radial-background">
             <div class="mx-auto max-w-6xl">
                 <div class="flex relative z-10 flex-wrap items-start -m-8">
-                    <div class="p-8 w-full md:w-1/3">
+                    <div class="pb-3 w-full sm:pb-10 md:p-8 md:w-1/2 lg:w-1/3">
                         <div class="mx-auto max-w-md text-left">
                             <div class="flex relative justify-center items-center p-px mb-5 w-10 h-10 rounded-lg border border-zinc-600">
                                 <div class="absolute hover:scale-[1.03] z-10 ease-out mb-0 flex items-center justify-center duration-300 bg-pink-200 rounded-lg w-10 h-10 sm:max-w-sm [background:linear-gradient(45deg,#090912,theme(colors.black)_50%,#090912)_padding-box,conic-gradient(from_var(--border-angle),theme(colors.slate.900/.48)_80%,_#75a522_86%,_#bcfb4f_90%,_#75a522_94%,_theme(colors.slate.900/.48))_border-box] border border-transparent animate-border"></div>
                                 <div class="flex absolute z-20 justify-center items-center w-full h-full bg-gradient-to-br rounded-md from-zinc-700 via-zinc-900 to-zinc-800"></div>
                                 <svg class="relative z-30 flex-shrink-0 w-5 h-5 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="none"><path d="M3.62356 10.3796L9.37156 4.62898C10.5457 3.45434 12.4507 3.45712 13.6213 4.63518L17.3865 8.42408C18.5538 9.59873 18.5485 11.497 17.3747 12.6652L11.6218 18.3903C10.449 19.5574 8.55278 19.5547 7.38336 18.3843L3.62313 14.6208C2.4526 13.4493 2.4528 11.5509 3.62356 10.3796Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4.74951 2.75L11.2495 9.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M18.9503 14.7835C18.9728 14.7467 19.0262 14.7466 19.0488 14.7834L20.9184 17.8213C21.3632 18.5442 21.363 19.456 20.9178 20.1787C20.0388 21.6054 17.9639 21.6032 17.0876 20.1749C16.6452 19.454 16.6449 18.5457 17.0869 17.8245L18.9503 14.7835Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
                             </div>
-                            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter-xl font-rota">Personalize to <br> Match Your Brand</h2>
+                            <h2 class="mb-2 text-2xl font-bold text-white sm:mb-6 sm:text-3xl md:text-4xl tracking-tighter-xl font-rota">Personalize to <br class="hidden md:block"> Match Your Brand</h2>
                             <p class="text-white text-opacity-60">Update your authentication pages with your colors and logo to seamlessly reflect your brand identity.</p>
                         </div>
                     </div>
-                    <div class="p-8 pt-5 pl-14 w-full h-full md:w-1/2">
-                        <img class="mx-auto md:mr-0 max-w-[300px] -translate-x-12 absolute rounded-xl" src="{ url('/assets/images/auth-screens/digital-ocean.jpg') }" alt="">
-                        <img class="mx-auto md:mr-0 max-w-[300px]  translate-x-[338px] shadow-xl rounded-xl absolute" src="{ url('/assets/images/auth-screens/openai.jpg') }" alt="">
-                        <img class="mx-auto md:mr-0 max-w-[300px] scale-[1.02] translate-x-[150px] shadow-xl -translate-y-10 rounded-xl absolute" src="{ url('/assets/images/auth-screens/starbucks.jpg') }" alt="">
+                    <div class="flex justify-center items-center p-0 pt-5 w-full h-auto translate-y-16 md:translate-y-0 md:pl-14 md:block md:w-1/2 lg:w-1/2 md:h-full">
+                        <img class="mx-auto md:mr-0 max-w-[300px] sm:block hidden -translate-x-20 md:-translate-x-12 absolute rounded-xl" src="{ url('/assets/images/auth-screens/digital-ocean.jpg') }" alt="">
+                        <img class="mx-auto md:mr-0 max-w-[300px] hidden sm:block translate-x-20 md:translate-x-[338px] shadow-xl rounded-xl absolute" src="{ url('/assets/images/auth-screens/openai.jpg') }" alt="">
+                        <img class="mx-auto md:mr-0 w-full sm:max-w-[300px] scale-[1.02] md:translate-x-[150px] shadow-xl -translate-y-10 rounded-xl relative md:absolute" src="{ url('/assets/images/auth-screens/starbucks.jpg') }" alt="">
                     </div>
                 </div>
             </div>
         </div>
 
         <div class="flex flex-wrap">
-            <div class="pr-5 w-full md:w-1/2">
+            <div class="pb-10 w-full md:pr-5 md:w-1/2 md:pb-0">
                 <div class="overflow-hidden relative h-full rounded-2xl border border-zinc-700 bg-zinc-950 radial-background">
-                      <div class="p-16 mx-auto max-w-lg text-left">
-                        <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter-xl font-rota">Simple Authentication <br> Setup Screen</h2>
+                      <div class="p-8 mx-auto max-w-lg text-left sm:p-16">
+                        <h2 class="mb-2 text-2xl font-bold text-white sm:mb-6 sm:text-3xl md:text-4xl tracking-tighter-xl font-rota">Simple Authentication <br class="hidden md:block"> Setup Screen</h2>
                         <p class="text-white text-opacity-60">Visit the <strong class="font-mono text-white">/auth/setup</strong> page to easily setup and configure the authentication for your application.</p>
                     </div>
-                    <div class="relative right-0 bottom-0 pl-12">
+                    <div class="relative right-0 bottom-0 pl-6 sm:pl-12">
                       <img class="w-full h-full rounded-tl-lg" src="{ url('/assets/images/auth-screen.jpeg') }" alt="" />
                     </div>
                 </div>
             </div>
-            <div class="pl-5 w-full md:w-1/2">
+            <div class="w-full md:pl-5 md:w-1/2">
               <div class="overflow-hidden relative h-full rounded-2xl border border-zinc-700 bg-zinc-950 radial-background">
-                    <div class="p-16 mx-auto max-w-lg text-left">
-                      <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter-xl font-rota">Open Source features for every use-case</h2>
+                    <div class="p-8 mx-auto max-w-lg text-left sm:p-16">
+                      <h2 class="mb-2 text-2xl font-bold text-white sm:mb-6 sm:text-3xl md:text-4xl tracking-tighter-xl font-rota">Open Source features for every use-case</h2>
                       <p class="text-white text-opacity-60">Integrate into any new or existing Laravel application for plug-in-play authentication features.</p>
                   </div>
-                  <div class="relative right-0 bottom-0 pr-12">
+                  <div class="relative right-0 bottom-0 pr-6 sm:pr-12">
                     <img class="w-full h-full rounded-tr-lg" src="{ url('/assets/images/github.jpg') }" alt="" />
                   </div>
               </div>  

diff --git a/includes/home/hero.html b/includes/home/hero.html
@@ -13,10 +13,10 @@
     <div class="px-5 mx-auto w-full max-w-7xl h-full flex-1 flex flex-col justify-between md:px-10 pt-24 relative z-[103]">
         <div class="relative w-full h-px"></div>
         <!-- Heading Content -->
-        <div class="pt-24 mx-auto max-w-5xl text-left sm:text-center">
-            <h1 class="pb-4 mb-2 text-4xl font-medium text-white font-rota md:leading-tight md:text-7xl">Customizable, Drop-in Ready Authentication for Laravel</h1>
+        <div class="pt-16 mx-auto max-w-5xl text-left lg:pt-24 sm:text-center">
+            <h1 class="pb-4 mb-2 text-4xl font-medium text-white font-rota md:leading-tight sm:text-5xl lg:text-7xl">Customizable, Drop-in Ready <br> Authentication for Laravel</h1>
             <!-- Seamless & Configurable Authentication for Laravel -->
-            <p class="mx-auto mb-8 max-w-3xl text-base font-light leading-relaxed text-white opacity-80 sm:text-lg lg:text-xl lg:mb-12 text-balance">Easily add Login, Registration, Email Verification, Forgot Password, Social Login, and Two-Factor Auth in a SNAP! Then, easily customize it to fit your brand. </p>
+            <p class="mx-auto mb-8 text-base font-light leading-relaxed text-white opacity-80 sm:max-w-xl lg:max-w-3xl sm:text-base lg:text-xl lg:mb-12 text-balance">Easily add Login, Registration, Email Verification, Forgot Password, Social Login, and Two-Factor Auth in a SNAP! Then, easily customize it to fit your brand. </p>
 
             <div class="relative hover:scale-[1.03] ease-out mb-0 duration-300 bg-pink-200 rounded-lg w-full sm:max-w-sm mx-auto [background:linear-gradient(45deg,#090912,theme(colors.black)_50%,#090912)_padding-box,conic-gradient(from_var(--border-angle),theme(colors.slate.900/.48)_80%,_#75a522_86%,_#bcfb4f_90%,_#75a522_94%,_theme(colors.slate.900/.48))_border-box] border border-transparent animate-border">
                 <div class="relative mx-auto w-full h-auto font-mono text-base font-medium text-left text-white bg-gradient-to-br to-black rounded-lg border shadow-sm duration-300 ease-out sm:inline-block border-zinc-700 radial-background group from-neutral-900">

diff --git a/includes/home/never-worry.html b/includes/home/never-worry.html
@@ -1,17 +1,13 @@
-<div class="mx-auto mb-20 max-w-6xl sm:px-6 lg:px-8 font-everett [text-wrap:balance]">
+<div class="mx-auto mb-10 sm:mb-20 max-w-6xl px-6 lg:px-8 font-everett [text-wrap:balance]">
     <div class="relative p-px rounded-xl group">
-
-        <div class="flex isolate overflow-hidden relative z-50 items-center p-16 bg-gradient-to-r from-black border radial-background to-zinc-900 border-zinc-700 sm:rounded-xl">
-
-            <div class="pr-10 mx-auto text-left">
-                <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter-xl font-rota">Never Worry About Auth Again</h2>
+        <div class="flex isolate overflow-hidden relative z-50 flex-col items-center p-8 bg-gradient-to-r from-black rounded-xl border sm:p-16 md:flex-row radial-background to-zinc-900 border-zinc-700">
+            <div class="mx-auto text-left md:pr-10 sm:max-w-md md:max-w-full">
+                <h2 class="mb-2 text-2xl font-bold text-white sm:mb-6 sm:text-3xl md:text-4xl tracking-tighter-xl font-rota">Never Worry About Auth Again</h2>
                 <p class="text-white text-opacity-60">Equipped with a GitHub CI action to ensure your authentication is fully functional. Setup in a few minutes, then focus on what you do best — building great applications</p>
             </div>
-
-            <div class="flex flex-shrink-0 justify-center items-center">
+            <div class="flex flex-shrink-0 justify-start items-center mt-5 w-full sm:max-w-md md:max-w-full md:justify-center md:w-auto md:mt-0">
                 <include src="button.html" title="View The Documentation"></include>
             </div>
-
         </div>
     </div>
 </div>
diff --git a/includes/home/tab.html b/includes/home/tab.html
@@ -1,6 +1,6 @@
-<button x-on:click="active='{title}'" :class="{ 'bg-white text-black' : active == '{title}', 'bg-zinc-100/70 text-zinc-500 hover:bg-zinc-100' : active != '{title}', 'pr-7' : ('{title}' == 'register' && !interacted) }" class="flex relative items-center px-5 h-full text-xs rounded-t-lg duration-300 ease-out">
-    <div class="block mr-1 -ml-1 w-3 h-3 current-color" x-html="icons['{title}']"></div>
-    <span x-text="uppercase('{title}')"></span>
+<button x-on:click="active='{title}'" :class="{ 'bg-white text-black' : active == '{title}', 'bg-zinc-100/70 text-zinc-500 hover:bg-zinc-100' : active != '{title}', 'pr-7' : ('{title}' == 'register' && !interacted) }" class="block relative flex-shrink-0 items-center px-5 h-full text-xs rounded-t-lg duration-300 ease-out lg:flex">
+    <div class="block hidden mr-1 -ml-1 w-3 h-3 current-color lg:inline" x-html="icons['{title}']"></div>
+    <span x-text="uppercase('{title}')" class="flex-shrink-0"></span>
     <span x-show="'{title}'=='register' && !interacted" class="absolute top-0 right-0 mt-[9px] mr-2" x-cloak>
         <span class="flex absolute justify-center items-center w-4 h-4 rounded-full border-4 border-red-500 animate-ping bg-[#a9fd02"></span>
         <span class="flex justify-center items-center w-4 h-4 rounded-full border-4 border-red-400 bg-zinc-100"></span>