Adding latest content

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

Hide file tree

Showing 7 changed files with 43 additions and 21 deletions.
diff --git a/content/docs/getting-started.md b/content/docs/getting-started.md
@@ -25,6 +25,28 @@ You'll also be able to visit these <a href="{ url('/docs/authentication-pages')
 Below are a few problems and solutions that this package aims to offer.
 
 <div x-data="{ 'showMore': true }" :class="{ 'border-red-600' : showMore, 'border-red-700' : !showMore }" class="mt-6 rounded-t-md border border-b-0 border-red-700 border-dashed bg-red-950/30">
+    <div class="flex items-start">
+        <div class="relative w-full">
+            <p x-on:click="showMore=!showMore" :class="{ '!text-red-500' : showMore, '!text-red-600' : !showMore }" class="!my-0 select-none cursor-pointer !px-5 !py-4 group text-base font-bold flex items-center">
+            <svg :class="{ 'rotate-90' : showMore }" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 scale-[0.98] group-hover:scale-100 ease-out duration-300 -translate-x-1 text-red-400"><path fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /></svg>
+            <span>Problem: Managing Multiple Auth Systems</span></p>
+            <p x-show="showMore" class="!my-0 p-5 pt-0 text-sm">Managing multiple authentication systems across several Laravel apps is tedious and error-prone.</p>
+        </div>
+    </div>
+</div>
+<div class="w-full h-px border-b border-dashed border-zinc-200/40"></div>
+<div x-data="{ 'showMore': true }" :class="{ 'border-green-600' : showMore, 'border-green-700' : !showMore }" class="rounded-b-md border border-t-0 border-dashed -translate-y-px bg-green-950/30">
+    <div class="flex items-start">
+        <div class="relative w-full">
+            <p x-on:click="showMore=!showMore" :class="{ '!text-green-500' : showMore, '!text-green-600' : !showMore }" class="!my-0 select-none cursor-pointer !px-5 !py-4 group text-base font-bold  flex items-center">
+            <svg :class="{ 'rotate-90' : showMore }" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 scale-[0.98] group-hover:scale-100 ease-out duration-300 -translate-x-1 text-green-400"><path fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /></svg>
+            <span>Solution: One Package to Rule Them All</span></p>
+            <p x-show="showMore" class="!my-0 p-5 pt-0 text-sm"> Consolidate your authentication into a single, streamlined solution for effortless updates and consistent security across all apps.</p>
+        </div>
+    </div>
+</div>
+
+<div x-data="{ 'showMore': false }" :class="{ 'border-red-600' : showMore, 'border-red-700' : !showMore }" class="mt-6 rounded-t-md border border-b-0 border-red-700 border-dashed bg-red-950/30">
     <div class="flex items-start">
         <div class="relative w-full">
             <p x-on:click="showMore=!showMore" :class="{ '!text-red-500' : showMore, '!text-red-600' : !showMore }" class="!my-0 select-none cursor-pointer !px-5 !py-4 group text-base font-bold flex items-center">
@@ -35,7 +57,7 @@ Below are a few problems and solutions that this package aims to offer.
     </div>
 </div>
 <div class="w-full h-px border-b border-dashed border-zinc-200/40"></div>
-<div x-data="{ 'showMore': true }" :class="{ 'border-green-600' : showMore, 'border-green-700' : !showMore }" class="rounded-b-md border border-t-0 border-dashed -translate-y-px bg-green-950/30">
+<div x-data="{ 'showMore': false }" :class="{ 'border-green-600' : showMore, 'border-green-700' : !showMore }" class="rounded-b-md border border-t-0 border-dashed -translate-y-px bg-green-950/30">
     <div class="flex items-start">
         <div class="relative w-full">
             <p x-on:click="showMore=!showMore" :class="{ '!text-green-500' : showMore, '!text-green-600' : !showMore }" class="!my-0 select-none cursor-pointer !px-5 !py-4 group text-base font-bold  flex items-center">

diff --git a/includes/docs/section-header.html b/includes/docs/section-header.html
@@ -55,7 +55,7 @@ <h1 class="font-book font-styling tracking-tightest text-white w-full font-rota
 </If>
 <If condition="frontmatter.authenticationPages == true">
     <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">Authentication Pages</h1>
-    <div class="grid grid-cols-2 gap-3 mb-10 xl:grid-cols-3">
+    <div class="grid grid-cols-1 gap-3 mb-10 md:grid-cols-2 xl:grid-cols-3">
         <a href="#login" x-on:mouseenter="$el.classList.add('border-transparent'); $el.classList.remove('border-zinc-800');" x-on:mouseout="$el.classList.remove('border-transparent'); $el.classList.add('border-zinc-800');" class="relative group cursor-pointer hover:scale-[1.03] ease-out inline-block mb-0 duration-300 bg-pink-200 rounded-lg smooth-scroll [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-zinc-800 animate-border w-full">
             <span class="flex relative items-center p-3 mx-auto space-x-2 w-full h-full 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 pointer-events-none border-zinc-700 radial-background group from-neutral-900">
                 <span class="flex justify-center items-center w-6 h-6 rounded-md duration-100 ease-out group-hover:bg-white bg-zinc-700 group-hover:text-zinc-900 text-zinc-200">

diff --git a/includes/footer.html b/includes/footer.html
@@ -10,23 +10,23 @@
                     <p class="mt-5 text-xs font-light text-white/80">DevDojo Auth. An open-source <br > authentication package for Laravel.</p>
                 </div>
             </li>
-            <li class="row-span-2 space-y-5 text-right lg:px-5">
+            <li class="row-span-2 space-y-5 text-left sm:text-right lg:px-5">
                 <h2 class="text-sm font-light tracking-wide text-gray-50 uppercase">Core Concepts</h2>
                 <ul class="space-y-1 font-light text-gray-300 sm:space-y-2 text-md">
                     <li class=""><a class="text-xs transition-colors duration-200 hover:text-gray-100 hover:underline sm:text-sm" href="{ url('/docs/getting-started') }">Getting Started</a></li>
                     <li class=""><a class="text-xs transition-colors duration-200 hover:text-gray-100 hover:underline sm:text-sm" href="{ url('/docs/install') }">Installation</a></li>
                     <li class=""><a class="text-xs transition-colors duration-200 hover:text-gray-100 hover:underline sm:text-sm" href="{ url('/docs/setup-customizations') }">Setup & Customize</a></li>
                 </ul>
             </li>
-            <li class="row-span-2 space-y-5 text-right lg:pl-6 lg:pr-8">
+            <li class="row-span-2 space-y-5 text-left lg:text-right lg:pl-6 lg:pr-8">
                 <h2 class="text-sm font-light tracking-wide text-gray-50 uppercase">Github Links</h2>
                 <ul class="space-y-2 text-gray-300 sm:space-y-2">
                     <li class=""><a class="text-xs transition-colors duration-200 hover:text-gray-100 hover:underline sm:text-sm" href="https://github.com/thedevdojo/auth" target="_blank">GitHub</a></li>
                     <li class=""><a class="text-xs transition-colors duration-200 hover:text-gray-100 hover:underline sm:text-sm" href="https://github.com/thedevdojo/genesis" target="_blank">Genesis</a></li>
                     <li class=""><a class="text-xs transition-colors duration-200 hover:text-gray-100 hover:underline sm:text-sm" href="https://github.com/thedevdojo/wave" target="_blank">Wave</a></li>
                 </ul>
             </li>
-            <li class="row-span-2 space-y-5 text-right lg:pr-6">
+            <li class="row-span-2 space-y-5 text-left sm:text-right lg:pr-6">
                 <h2 class="text-sm font-light tracking-wide text-gray-50 uppercase">DevDojo Links</h2>
                 <ul class="space-y-1 text-gray-300 sm:space-y-2">
                     <li class=""><a class="text-xs transition-colors duration-200 hover:text-gray-100 hover:underline sm:text-sm" href="https://devdojo.com" target="_blank">Home</a></li>

diff --git a/includes/home/browser-tab-pages.html b/includes/home/browser-tab-pages.html
@@ -1,8 +1,8 @@
-<section class="overflow-hidden relative px-6 py-24 md:px-8 lg:pt-32 lg:pb-10">
+<section class="overflow-hidden relative px-6 py-12 md:px-8 lg:pt-32 lg:pb-10">
     <div class="mx-auto">
         <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-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>
+            <h2 class="text-3xl font-normal text-white sm:text-4xl 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">

diff --git a/includes/home/customize.html b/includes/home/customize.html
@@ -1,25 +1,25 @@
-<section class="overflow-hidden relative pt-20 pb-10 sm:py-20 lg:pt-32 lg:pb-10">
+<section class="overflow-hidden relative pt-10 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-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-4xl 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-3xl font-normal text-white sm:text-4xl md:text-6xl md:leading-tight font-rota">Customize and Configure<br class="hidden md:block"> With Just a Few Clicks</h2>
         </div>
 
         <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="pb-3 w-full sm:pb-10 md:p-8 md:w-1/2 lg:w-1/3">
+                    <div class="pb-1 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-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>
+                            <h2 class="mb-2 text-xl 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-sm text-white text-opacity-60 md:text-base">Update your authentication pages with your colors and logo to seamlessly reflect your brand identity.</p>
                         </div>
                     </div>
-                    <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">
+                    <div class="flex justify-center items-center p-0 pt-3 w-full h-auto translate-y-16 sm:pt-5 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="">
@@ -31,9 +31,9 @@ <h2 class="mb-2 text-2xl font-bold text-white sm:mb-6 sm:text-3xl md:text-4xl tr
         <div class="flex flex-wrap">
             <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-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 class="p-8 pb-5 mx-auto max-w-2xl text-left sm:p-16">
+                        <h2 class="mb-2 text-xl 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-sm text-white text-opacity-60 md:text-base">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-6 sm:pl-12">
                       <img class="w-full h-full rounded-tl-lg" src="{ url('/assets/images/auth-screen.jpeg') }" alt="" />
@@ -42,9 +42,9 @@ <h2 class="mb-2 text-2xl font-bold text-white sm:mb-6 sm:text-3xl md:text-4xl tr
             </div>
             <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-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 class="p-8 mx-auto max-w-2xl text-left sm:p-16">
+                      <h2 class="mb-2 text-xl 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-sm text-white text-opacity-60 md:text-base">Open Source and free to use/customize. Let's create the best authentication experience for Laravel.</p>
                   </div>
                   <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="" />

diff --git a/includes/home/hero.html b/includes/home/hero.html
@@ -14,7 +14,7 @@
         <div class="relative w-full h-px"></div>
         <!-- Heading Content -->
         <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>
+            <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 class="hidden md:block"> Authentication for Laravel</h1>
             <!-- Seamless & Configurable Authentication for Laravel -->
             <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>
 

diff --git a/includes/home/never-worry.html b/includes/home/never-worry.html
@@ -3,7 +3,7 @@
         <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>
+                <p class="text-white text-opacity-60">Our <a href="https://github.com/thedevdojo/auth/blob/main/resources/workflows/auth.yml" target="_blank" class="text-white underline">GitHub action</a> will ensure your auth is fully functional. Setup is lickity split! Now, you can focus on what you do best — building great applications.</p>
             </div>
             <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>