Adding latest to wave

thedevdojo · Sep 7, 2024 · 0aebb34 · 0aebb34
1 parent f2bb7b0
commit 0aebb34
Show file tree

Hide file tree

Showing 7 changed files with 124 additions and 43 deletions.
diff --git a/assets/images/character.png b/assets/images/character.png
diff --git a/assets/images/free.webp b/assets/images/free.webp
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -43,6 +43,32 @@ function loadGsapAnimations(){
         });
     }
 
+    if(document.getElementById('open-source')){
+        gsap.to("#open-source", {
+            scrollTrigger: {
+                trigger: "#open-source-section",
+                start: "top 80%",
+                end: "bottom 50%",
+                scrub: true
+            },
+            x: -350,
+            opacity: 1
+        });
+    }
+
+    if(document.getElementById('open-source-02')){
+        gsap.to("#open-source-02", {
+            scrollTrigger: {
+                trigger: "#open-source-section",
+                start: "top 80%",
+                end: "bottom 50%",
+                scrub: true
+            },
+            x: 0,
+            opacity: 1
+        });
+    }
+
     if(document.getElementById('how-to-use-it')){
         gsap.to("#how-to-use-it", {
             scrollTrigger: {

diff --git a/includes/features.html b/includes/features.html
@@ -1,16 +1,16 @@
-<section class="overflow-hidden pt-10 bg-white sm:py-16 md:py-20 lg:pt-24 lg:pb-28">
+<section class="pt-10 overflow-hidden bg-white sm:py-16 md:py-20 lg:pt-24 lg:pb-28">
     <div class="mx-auto">
 
         <div class="px-6 mx-auto max-w-7xl lg:px-8">
-            <h2 class="mb-7 text-3xl font-bold text-left sm:text-4xl sm:text-center giarek text-gray-950 md:text-5xl">From Zero to SaaS Hero</h2>
-            <p class="mx-auto mt-4 max-w-4xl text-sm text-left text-gray-600 sm:text-center sm:text-xl sm:mt-5">Wave equips you with all the features you need to transform your idea into a thriving SaaS product. Feature-packed and ready to go out of the box. Let Wave fast-track your journey to success.</p>
+            <h2 class="text-3xl font-bold text-left mb-7 sm:text-4xl sm:text-center giarek text-gray-950 md:text-5xl">Equipped With Features You Need</h2>
+            <p class="max-w-4xl mx-auto mt-4 text-sm text-left text-gray-600 sm:text-center sm:text-xl sm:mt-5">Wave equips you with all the features you need to transform your idea into a thriving SaaS product. Feature-packed and ready to go out of the box. Let Wave fast-track your journey to success.</p>
         </div>
 
 
         <div class="flex flex-col mx-auto mt-8 space-y-10 max-w-7xl sm:px-6 lg:px-8 md:mt-16 lg:mt-20">
 
             <!-- Start -->
-            <div class="overflow-hidden relative py-8 space-y-8 text-left bg-gray-100 sm:py-10 md:space-y-16 sm:rounded-xl md:py-16 lg:py-20 lg:space-y-32">
+            <div class="relative py-8 space-y-8 overflow-hidden text-left bg-gray-100 sm:py-10 md:space-y-16 sm:rounded-xl md:py-16 lg:py-20 lg:space-y-32">
 
                 <div class="w-full bg-gradient-to-b from-gray-100 via-gray-50 to-gray-100">
                     <include 
@@ -90,13 +90,13 @@ <h2 class="mb-7 text-3xl font-bold text-left sm:text-4xl sm:text-center giarek t
                     ></include>
                 </div>
 
-                <div class="px-4 pb-4 mx-auto w-full max-w-xl md:pb-10 sm:px-6 lg:max-w-none lg:mx-0 lg:px-0">
-                    <div class="flex flex-col justify-center items-start pr-3 mt-12 h-full sm:items-center md:mt-6">
-                        <h2 class="inline-flex relative items-center text-3xl font-extrabold text-left text-gray-900 sm:text-center giarek lg:text-5xl">
+                <div class="w-full max-w-xl px-4 pb-4 mx-auto md:pb-10 sm:px-6 lg:max-w-none lg:mx-0 lg:px-0">
+                    <div class="flex flex-col items-start justify-center h-full pr-3 mt-12 sm:items-center md:mt-6">
+                        <h2 class="relative inline-flex items-center text-3xl font-extrabold text-left text-gray-900 sm:text-center giarek lg:text-5xl">
                             <span class="{icon_class}"></span>
                             <span class="ml-1.5">And so much more!</span>
                         </h2>
-                        <p class="my-4 max-w-2xl text-sm text-left text-gray-500 sm:text-center">
+                        <p class="max-w-2xl my-4 text-sm text-left text-gray-500 sm:text-center">
                             Wave offers over 15 fully-equipped features to help you build a robust and scalable application. To learn more about each feature and how to integrate them into your project, visit our documentation.
                         </p>
                         <include src="elements/button.html"

diff --git a/includes/hero.html b/includes/hero.html
@@ -1,4 +1,4 @@
-<section id="hero-container" class="overflow-hidden relative z-20 w-full hero-section">
+<section id="hero-container" class="relative z-20 w-full overflow-hidden hero-section">
 
 
 
@@ -7,28 +7,28 @@
   <div class="absolute right-0 lg:opacity-100 opacity-50 top-0 z-[11] w-1/4 h-[500px] bg-gradient-to-l from-white via-white"></div>
   <div class="absolute inset-0 z-10 w-full h-[500px] max-h-screen opacity-50 sm:opacity-100 pattern-dots"></div>
 
-    <div class="overflow-hidden relative z-20 pt-8 w-full md:pt-20 lg:pt-0 lg:relative">
+    <div class="relative z-20 w-full pt-8 overflow-hidden md:pt-20 lg:pt-0 lg:relative">
         <div class="hidden absolute top-0 left-0 pb-20 w-screen z-10 h-[800px] translate-y-20 pointer-events-none opacity-0 transform lg:pb-0 lg:h-[700px] lg:block">
-            <svg xmlns="http://www.w3.org/2000/svg" class="object-cover absolute left-0 w-full h-full opacity-25 sm:opacity-100" viewBox="0 0 1440 749" height="749"><defs><linearGradient id="a" x1="100%" x2="9.488%" y1="37.276%" y2="37.276%"><stop offset="0%" stop-color="#5dcbfa"/><stop offset="100%" stop-color="#5dcbfa" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="100%" x2="9.488%" y1="37.276%" y2="37.276%"><stop offset="0%" stop-color="#0069ff"/><stop offset="100%" stop-color="#0069ff" stop-opacity="0"/></linearGradient><linearGradient id="e" x1="9.488%" x2="100%" y1="37.276%" y2="37.276%"><stop offset="0%" stop-color="#ffffff"/><stop offset="100%" stop-color="#ffffff" stop-opacity="0"/></linearGradient><filter id="b" width="147.3%" height="470.7%" x="-23.7%" y="-185.4%" filterUnits="objectBoundingBox"><feGaussianBlur in="SourceGraphic" stdDeviation="50"/></filter><filter id="d" width="147.3%" height="470.7%" x="-23.7%" y="-185.4%" filterUnits="objectBoundingBox"><feGaussianBlur in="SourceGraphic" stdDeviation="50"/></filter><filter id="f" width="147.3%" height="470.7%" x="-23.7%" y="-185.4%" filterUnits="objectBoundingBox"><feGaussianBlur in="SourceGraphic" stdDeviation="50"/></filter></defs><g fill="none" fill-rule="evenodd" opacity=".8"><path fill="url(#a)" d="M221.284 106.384 185.95 185.7l598.833 1.605 35.334-79.316z" filter="url(#b)" transform="rotate(-20 199.62 93.344)"/><path fill="url(#c)" d="m570.284 115.309-35.334 79.316 598.833 1.605 35.334-79.316z" filter="url(#d)" transform="rotate(-20 548.62 102.27)"/><path fill="url(#e)" d="m599.284 560.567-35.334 79.316 598.833 1.605 35.334-79.316z" filter="url(#f)" transform="rotate(-20 577.62 547.528)"/></g></svg>
+            <svg xmlns="http://www.w3.org/2000/svg" class="absolute left-0 object-cover w-full h-full opacity-25 sm:opacity-100" viewBox="0 0 1440 749" height="749"><defs><linearGradient id="a" x1="100%" x2="9.488%" y1="37.276%" y2="37.276%"><stop offset="0%" stop-color="#5dcbfa"/><stop offset="100%" stop-color="#5dcbfa" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="100%" x2="9.488%" y1="37.276%" y2="37.276%"><stop offset="0%" stop-color="#0069ff"/><stop offset="100%" stop-color="#0069ff" stop-opacity="0"/></linearGradient><linearGradient id="e" x1="9.488%" x2="100%" y1="37.276%" y2="37.276%"><stop offset="0%" stop-color="#ffffff"/><stop offset="100%" stop-color="#ffffff" stop-opacity="0"/></linearGradient><filter id="b" width="147.3%" height="470.7%" x="-23.7%" y="-185.4%" filterUnits="objectBoundingBox"><feGaussianBlur in="SourceGraphic" stdDeviation="50"/></filter><filter id="d" width="147.3%" height="470.7%" x="-23.7%" y="-185.4%" filterUnits="objectBoundingBox"><feGaussianBlur in="SourceGraphic" stdDeviation="50"/></filter><filter id="f" width="147.3%" height="470.7%" x="-23.7%" y="-185.4%" filterUnits="objectBoundingBox"><feGaussianBlur in="SourceGraphic" stdDeviation="50"/></filter></defs><g fill="none" fill-rule="evenodd" opacity=".8"><path fill="url(#a)" d="M221.284 106.384 185.95 185.7l598.833 1.605 35.334-79.316z" filter="url(#b)" transform="rotate(-20 199.62 93.344)"/><path fill="url(#c)" d="m570.284 115.309-35.334 79.316 598.833 1.605 35.334-79.316z" filter="url(#d)" transform="rotate(-20 548.62 102.27)"/><path fill="url(#e)" d="m599.284 560.567-35.334 79.316 598.833 1.605 35.334-79.316z" filter="url(#f)" transform="rotate(-20 577.62 547.528)"/></g></svg>
         </div>
 
 
 
-        <div id="container" class="flex relative z-20 flex-col items-center pb-10 mx-auto max-w-7xl h-auto sm:pb-16 md:pb-20 lg:pb-28 md:px-3 md:pt-0 lg:flex-row lg:relative">
+        <div id="container" class="relative z-20 flex flex-col items-center h-auto pb-10 mx-auto max-w-7xl sm:pb-16 md:pb-20 lg:pb-28 md:px-3 md:pt-0 lg:flex-row lg:relative">
             <div class="px-6 pt-20 mx-auto max-w-7xl lg:pt-40 lg:px-8">
-                <div class="relative z-20 mx-auto max-w-5xl text-left sm:text-center">
-                  <h1 class="mx-auto max-w-full text-5xl font-bold tracking-tight text-balance sm:text-pretty sm:tracking-normal sm:text-6xl text-gray-950 md:text-7xl giarek">Ship Your SaaS in a Weekend.</h1>
-                  <!-- <h1 class="mx-auto max-w-2xl text-3xl font-bold sm:text-5xl text-gray-950 md:text-7xl giarek">Start Shipping your SaaS in Days, Not Months.</h1> -->
-                  <p class="mx-auto mt-4 max-w-full text-sm text-left text-gray-600 sm:mt-5 sm:text-center md:leading-9 sm:max-w-3xl md:text-xl">Wave is the perfect boilerplate for launching a SaaS without breaking a sweat. <br class="hidden sm:block">Start building today and start earning your first dollars online quickly.</p>
-                  <div class="flex gap-x-2 justify-center items-center mt-5 sm:mt-6">
+                <div class="relative z-20 max-w-5xl mx-auto text-left sm:text-center">
+                  <h1 class="max-w-full mx-auto text-5xl font-bold tracking-tight text-balance sm:text-pretty sm:tracking-normal sm:text-6xl text-gray-950 md:text-7xl giarek">Ship Your SaaS in a Weekend.</h1>
+                  <!-- <h1 class="max-w-2xl mx-auto text-3xl font-bold sm:text-5xl text-gray-950 md:text-7xl giarek">Start Shipping your SaaS in Days, Not Months.</h1> -->
+                  <p class="max-w-full mx-auto mt-4 text-sm text-left text-gray-600 sm:mt-5 sm:text-center md:leading-9 sm:max-w-3xl md:text-xl">Wave is the perfect boilerplate for launching a SaaS without breaking a sweat. <br class="hidden sm:block">Start building today and start earning your first dollars online quickly.</p>
+                  <div class="flex items-center justify-center mt-5 gap-x-2 sm:mt-6">
 
                     <include src="elements/button.html"
                       text="Start Building"
                       link="{ url('/docs/install') }"></include>
 
-                      <div class="hidden overflow-hidden relative justify-center items-center p-1 w-full rounded-xl border border-gray-200 duration-300 ease-out sm:flex sm:rounded-full sm:w-auto group">
+                      <div class="relative items-center justify-center hidden w-full p-1 overflow-hidden duration-300 ease-out border border-gray-200 rounded-xl sm:flex sm:rounded-full sm:w-auto group">
                         <div class="absolute top-1/2 left-1/2 w-full -translate-x-1/2 sm:w-[200px] rounded-xl sm:rounded-full sm:block hidden group-hover:opacity-100 opacity-0 blur-sm duration-300 ease-out scale-100 h-[200px] -translate-y-1/2 origin-center">
-                            <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-indigo-500 via-teal-300 to-blue-500 rounded-full group-hover:animate-spin-slow"></span>
+                            <span class="absolute inset-0 w-full h-full rounded-full bg-gradient-to-r from-indigo-500 via-teal-300 to-blue-500 group-hover:animate-spin-slow"></span>
                         </div>
 
                         <a href="{ url('/docs/getting-started') }" class="block relative z-20 px-3.5 py-2.5 text-xs font-semibold text-gray-700 bg-white rounded-full border border-gray-100 shadow lg:text-sm lg:px-5 lg:py-3 group-hover:bg-white group-hover:text-gray-900">
@@ -42,15 +42,15 @@ <h1 class="mx-auto max-w-full text-5xl font-bold tracking-tight text-balance sm:
 
                 </div>
 
-                <div class="flow-root relative z-10 mt-8 w-full sm:mt-12 md:mt-20">
+                <div class="relative z-10 flow-root w-full mt-8 sm:mt-12 md:mt-20">
 
 
 
 
                   <!-- <img src="https://wave.test/wave/img/character.png" class="absolute top-0 right-0 translate-x-full mr-20 translate-y-0 w-[400px] h-auto z-50"> -->
 
 
-                  <div class="overflow-hidden rounded-xl border-4 border-gray-900 shadow-xl">
+                  <div class="overflow-hidden border-4 border-gray-900 shadow-xl rounded-xl">
 
                     <!-- https://cdn.devdojo.com/images/july2024/customer-dashboard.png, https://cdn.devdojo.com/images/july2024/saas-pricing.png, https://cdn.devdojo.com/images/july2024/admin.png -->
 

diff --git a/includes/open-source.html b/includes/open-source.html
@@ -0,0 +1,39 @@
+<section class="relative bg-white tails-selected-element" contenteditable="true">
+    <div class="relative items-center w-full px-12 py-12 mx-auto lg:py-14 lg:px-8 max-w-7xl lg:py-16">
+        <div class="grid grid-cols-1 gap-6 md:grid-cols-1 md:gap-24 md:bg-black md:p-16 lg:p-20 md:overflow-hidden rounded-xl">
+            <div class="flex flex-col justify-center w-full max-w-full mx-auto text-left sm:text-center md:text-left">
+                <div class="">
+                    <span class="font-semibold text-blue-600 uppercase">Free and Open Source</span>
+                    <h2 class="mt-4 text-2xl font-semibold tracking-tighter text-white md:mt-12 lg:text-3xl xl:text-4xl">The Open-Source SaaS Framework</h2>
+                    <p class="mt-2 text-base md:mt-4 lg:text-lg text-slate-300">Wave is a free, open-source SaaS framework, designed to help anyone start their next great idea without the cost. Join our community and help make it even better.</p>
+                </div>
+                <div class="flex flex-col justify-start w-full gap-3 mt-10 sm:flex-row">
+                    <a class="items-center justify-center focus:outline-none border-2 border-black text-black inline-flex bg-white duration-200 focus-visible:outline-black rounded-full focus-visible:ring-black hover:text-black hover:bg-transparent lg:w-auto px-6 py-2.5 text-center w-full" href="#">
+                        <span>View The Github Repo</span>
+                    </a>
+                </div>
+            </div>
+            <div class="relative order-last hidden block max-w-xs mx-auto w-full mt-0 md:mt-0 lg:h-[25rem]">
+                <img alt="Phone Mockup" class="relative z-20" src="https://cdn.devdojo.com/tails/images/mbl9NCcPsBWEV3Pr1v8iCDbDWS0zS4yrKC6Qtwb0.png">
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- <div id="open-source-section" class="relative flex flex-col items-start justify-center h-full pb-20 pr-3 mt-12 overflow-hidden bg-gradient-to-b from-transparent to-gray-50 sm:items-center md:mt-6">
+    <div class="relative flex flex-col items-center justify-center px-6 mx-auto max-w-7xl lg:px-8">
+        <h2 class="relative inline-block mx-auto text-3xl font-bold tracking-tight text-left mb-7 sm:tracking-normal sm:text-4xl sm:text-center giarek text-gray-950 md:text-5xl">
+            The Open-Source SaaS Framework
+        </h2>
+        <p class="max-w-4xl p-10 mx-auto mt-4 text-sm text-left text-gray-600 bg-blue-50 sm:text-center sm:text-xl sm:mt-5">Wave is a free, open-source SaaS framework, designed to help anyone start their next great idea without the cost. Join our community and help make it even better.</p>
+    </div>
+
+    <div class="relative z-30 flex items-center justify-center flex-shrink-0 w-full p-1 mt-5 overflow-hidden duration-300 ease-out border border-gray-200 rounded-xl sm:rounded-full sm:w-auto group">
+        <div class="absolute top-1/2 left-1/2 w-full -translate-x-1/2 sm:w-[200px] rounded-xl sm:rounded-full sm:block hidden group-hover:opacity-100 opacity-0 blur-sm duration-300 ease-out scale-100 h-[200px] -translate-y-1/2 origin-center">
+            <span class="absolute inset-0 w-full h-full rounded-full bg-gradient-to-r from-indigo-500 via-teal-300 to-blue-500 group-hover:animate-spin-slow"></span>
+        </div>
+        <a class="inline-flex z-10 justify-center px-3.5 py-2.5 w-full text-sm font-semibold text-white bg-gray-900 rounded-lg shadow-lg lg:px-5 lg:py-3 lg:text-base sm:rounded-full group hover:bg-black" href="https://github.com/thedevdojo/wave" target="_blank">
+            <span>View On Github</span>
+        </a>
+    </div>
+</div> -->