Adding latest updates

thedevdojo · May 31, 2024 · bf00762 · bf00762
1 parent 9cdddc3
commit bf00762
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 286 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -83,184 +83,3 @@ h2 a, h3 a, h4 a {
 
 
 
-
-
-.text-container {
-  z-index: 100;
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  position: absolute;
-  top: 0;
-  left: 0;
-  justify-content: center;
-  align-items: center;
-  font-size: 96px;
-  color: white;
-  opacity: 0.8;
-  user-select: none;
-  text-shadow: 1px 1px rgba(0,0,0,0.1);
-}
-
-:root {
-  --color-bg1: rgb(98, 98, 98);
-  --color-bg2: rgb(105, 105, 105);
-  --color1: 18, 18, 45;
-  --color2: 161, 161, 161;
-  --color3: 0, 0, 0;
-  --color4: 190, 190, 190;
-  --color5: 8, 8, 8;
-  --color-interactive: 140, 100, 255;
-  --circle-size: 80%;
-  --blending: hard-light;
-}
-
-@keyframes moveInCircle {
-  0% {
-    transform: rotate(0deg);
-  }
-  50% {
-    transform: rotate(180deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes moveVertical {
-  0% {
-    transform: translateY(-50%);
-  }
-  50% {
-    transform: translateY(50%);
-  }
-  100% {
-    transform: translateY(-50%);
-  }
-}
-
-@keyframes moveHorizontal {
-  0% {
-    transform: translateX(-50%) translateY(-10%);
-  }
-  50% {
-    transform: translateX(50%) translateY(10%);
-  }
-  100% {
-    transform: translateX(-50%) translateY(-10%);
-  }
-}
-
-
-.gradient-bg {
-  width: 100vw;
-  height: 100vh;
-  position: relative;
-  overflow: hidden;
-  background: linear-gradient(40deg, var(--color-bg1), var(--color-bg2));
-  top: 0;
-  left: 0;
-
-  svg {
-    display: none;
-  }
-
-
-  .gradients-container {
-    width: 100%;
-    height: 100%;
-  }
-
-  .g1 {
-    position: absolute;
-    background: radial-gradient(circle at center, rgba(var(--color1), 0.8) 0, rgba(var(--color1), 0) 50%) no-repeat;
-    mix-blend-mode: var(--blending);
-
-    width: var(--circle-size);
-    height: var(--circle-size);
-    top: calc(50% - var(--circle-size) / 2);
-    left: calc(50% - var(--circle-size) / 2);
-
-    transform-origin: center center;
-    animation: moveVertical 20s ease infinite;
-
-    opacity: 1;
-  }
-
-  .g2 {
-    position: absolute;
-    background: radial-gradient(circle at center, rgba(var(--color2), 0.8) 0, rgba(var(--color2), 0) 50%) no-repeat;
-    mix-blend-mode: var(--blending);
-
-    width: var(--circle-size);
-    height: var(--circle-size);
-    top: calc(50% - var(--circle-size) / 2);
-    left: calc(50% - var(--circle-size) / 2);
-
-    transform-origin: calc(50% - 400px);
-    animation: moveInCircle 10s reverse infinite;
-
-    opacity: 1;
-  }
-
-  .g3 {
-    position: absolute;
-    background: radial-gradient(circle at center, rgba(var(--color3), 0.8) 0, rgba(var(--color3), 0) 50%) no-repeat;
-    mix-blend-mode: var(--blending);
-
-    width: var(--circle-size);
-    height: var(--circle-size);
-    top: calc(50% - var(--circle-size) / 2 + 200px);
-    left: calc(50% - var(--circle-size) / 2 - 500px);
-
-    transform-origin: calc(50% + 400px);
-    animation: moveInCircle 20s linear infinite;
-
-    opacity: 1;
-  }
-
-  .g4 {
-    position: absolute;
-    background: radial-gradient(circle at center, rgba(var(--color4), 0.8) 0, rgba(var(--color4), 0) 50%) no-repeat;
-    mix-blend-mode: var(--blending);
-
-    width: var(--circle-size);
-    height: var(--circle-size);
-    top: calc(50% - var(--circle-size) / 2);
-    left: calc(50% - var(--circle-size) / 2);
-
-    transform-origin: calc(50% - 200px);
-    animation: moveHorizontal 20s ease infinite;
-
-    opacity: 0.7;
-  }
-
-  .g5 {
-    position: absolute;
-    background: radial-gradient(circle at center, rgba(var(--color5), 0.8) 0, rgba(var(--color5), 0) 50%) no-repeat;
-    mix-blend-mode: var(--blending);
-
-    width: calc(var(--circle-size) * 2);
-    height: calc(var(--circle-size) * 2);
-    top: calc(50% - var(--circle-size));
-    left: calc(50% - var(--circle-size));
-
-    transform-origin: calc(50% - 800px) calc(50% + 200px);
-    animation: moveInCircle 10s ease infinite;
-
-    opacity: 1;
-  }
-
-  .interactive {
-    position: absolute;
-    background: radial-gradient(circle at center, rgba(var(--color-interactive), 0.8) 0, rgba(var(--color-interactive), 0) 50%) no-repeat;
-    mix-blend-mode: var(--blending);
-
-    width: 100%;
-    height: 100%;
-    top: -50%;
-    left: -50%;
-
-    opacity: 0.7;
-  }
-}
diff --git a/content/docs/install.md b/content/docs/install.md
@@ -37,19 +37,12 @@ Run the database migrations:
 
 <include src="docs/install/code/extend-model.html"></include>
 
-## Ready-to-go
+## 5. Installation Complete
 
-You're now ready to go! You can visit the auth setup route at `website.test/auth/setup` or any of the following authentication URL's:
+Now that everything is installed you'll be able to visit the auth setup route at `website.test/auth/setup`. You'll also have access to all the new <a href="{ url('/docs/authentication-pages') }">Authentication Pages</a>.
 
-<div class="p-5 font-mono whitespace-break-spaces bg-white/[6%] rounded-xl border border-white/[8%]">- <span class="text-green-400">/auth/login</span>
-- <span class="text-green-400">/auth/register</span>
-- <span class="text-green-400">/auth/verify</span>
-- <span class="text-green-400">/auth/two-factor-challenge</span>
-- <span class="text-green-400">/auth/password/confirm</span>
-- <span class="text-green-400">/auth/password/reset</span>
-- <span class="text-green-400">/auth/password/ReAlLyLoNgToKeNhErE</span>
-</div>
+## Installing in an Existing Application
 
-If 2FA is enabled, users will have access to the following route:
+As long as your application meets the minimum requirements (Laravel 10 or higher), you'll be able to install DevDojo Auth in your existing application. The steps will be the same as above. You'll also want to remove your existing Authentication from your application to remove duplicate functionality. 
 
-<div class="p-5 font-mono whitespace-break-spaces bg-white/[6%] rounded-xl border border-white/[8%]">- <span class="text-green-400">/user/two-factor-authentication</span></div>
+> It's possible to keep your existing authentication functionality to ensure everything works correctly; however, having multiple authentication paths may confuse your users.
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
@@ -161,6 +161,6 @@ <h1 class="font-book font-styling text-white w-full font-rota mb-5 md:mb-3 lg:mb
 
     <div class="pb-5 mb-5 border-b border-gray-800">
         <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">Setup & Customizations</h1>
-        <p class="mt-2 max-w-4xl text-sm text-zinc-200">Learn how to customize and configure your application authentication from the Authentication Setup page.</p>
+        <p class="mt-2 max-w-4xl text-sm text-zinc-200">Customize the way your authentication looks and functions.</p>
       </div>
 </If>
diff --git a/includes/header.html b/includes/header.html
@@ -79,7 +79,7 @@
     " 
     @close-mobile-menu.window="mobileMenu=false" 
     class="relative w-full z-[999]">
-    <div class="flex cursor-pointer w-full absolute z-[999] group text-white bg-[#b4fd4f]  border-r border-b  border-zinc-800">
+    <div class="flex cursor-pointer w-full absolute z-[999] group text-white bg-[#a9fd02]  border-r border-b  border-zinc-800">
         <div  id="top-bar" class="flex justify-between items-center px-6 mx-auto w-full max-w-7xl h-10 duration-300 ease-out md:px-8" x-cloak>
             <a href="https://devdojo.com" class="flex relative items-center pl-5 h-full font-semibold text-black group-hover:opacity-100 lg:w-auto lg:items-center lg:justify-center">
                 <span class="overflow-hidden absolute left-0 w-4 h-4 transition duration-300 transform -rotate-180 -translate-x-0.5 ease group-hover:rotate-0 group-hover:translate-x-0 group-hover:w-4">