adding updates to the default assets

thedevdojo · Oct 3, 2024 · c3f1e06 · c3f1e06
1 parent 3eed453
commit c3f1e06
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 45 deletions.
diff --git a/public/build/assets/app-CaUPGaqM.js b/public/build/assets/app-CaUPGaqM.js
@@ -0,0 +1 @@
+window.demoButtonClickMessage=function(o){o.preventDefault(),new FilamentNotification().title("Modify this button in your theme folder").icon("heroicon-o-pencil-square").iconColor("info").send()};
diff --git a/public/build/assets/app-CrmLHGiO.css b/public/build/assets/app-CrmLHGiO.css
diff --git a/public/build/assets/theme-CgejNvRn.css b/public/build/assets/theme-CgejNvRn.css
diff --git a/public/build/manifest.json b/public/build/manifest.json
@@ -4,15 +4,15 @@
     "src": "resources/css/filament/admin/theme.css",
     "isEntry": true
   },
-  "resources/themes/fusion/assets/css/app.css": {
-    "file": "assets/app-D5J7c9EC.css",
-    "src": "resources/themes/fusion/assets/css/app.css",
+  "resources/themes/anchor/assets/css/app.css": {
+    "file": "assets/app-CrmLHGiO.css",
+    "src": "resources/themes/anchor/assets/css/app.css",
     "isEntry": true
   },
-  "resources/themes/fusion/assets/js/app.js": {
+  "resources/themes/anchor/assets/js/app.js": {
     "file": "assets/app-CaUPGaqM.js",
     "name": "app",
-    "src": "resources/themes/fusion/assets/js/app.js",
+    "src": "resources/themes/anchor/assets/js/app.js",
     "isEntry": true
   }
 }
diff --git a/resources/themes/anchor/components/elements/container.blade.php b/resources/themes/anchor/components/elements/container.blade.php
@@ -1,3 +1,3 @@
-<div {{ $attributes->twMerge('px-8 mx-auto max-w-6xl md:px-12 xl:px-20') }}>
+<div {{ $attributes->twMerge('px-7 mx-auto max-w-6xl md:px-12 xl:px-20') }}>
     {{ $slot }}
 </div>
diff --git a/resources/themes/anchor/components/marketing/elements/header.blade.php b/resources/themes/anchor/components/marketing/elements/header.blade.php
@@ -13,6 +13,14 @@
         } 
     }"
     x-init="
+        window.addEventListener('resize', function() {
+            if(window.innerWidth > 768) {
+                mobileMenuOpen = false;
+            }
+        });
+        $watch('mobileMenuOpen', function(value){
+            if(value){ document.body.classList.add('overflow-hidden'); } else { document.body.classList.remove('overflow-hidden'); }
+        });
         evaluateScrollPosition();
         window.addEventListener('scroll', function() {
             evaluateScrollPosition(); 
@@ -32,26 +40,30 @@ class="absolute inset-0 w-full h-screen pt-24">
     </div>
     <x-container>
         <div class="z-30 flex items-center justify-between h-24 md:space-x-8">
-            <div class="relative z-20 inline-flex">
-                <a href="{{ route('home') }}" class="flex items-center justify-center space-x-3 font-bold text-zinc-900">
-                   <x-logo class="w-auto h-8"></x-logo>
-                </a>
-            </div>
-            <div class="flex justify-end flex-grow md:hidden">
-                <button @click="mobileMenuOpen = !mobileMenuOpen" type="button" class="inline-flex items-center justify-center p-2 transition duration-150 ease-in-out rounded-full text-zinc-400 hover:text-zinc-500 hover:bg-zinc-100">
-                    <svg x-show="!mobileMenuOpen" class="w-6 h-6" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16"></path></svg>
-                    <svg x-show="mobileMenuOpen" class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
-                </button>
+            <div class="z-20 flex items-center justify-between w-full md:w-auto">
+                <div class="relative z-20 inline-flex">
+                    <a href="{{ route('home') }}" class="flex items-center justify-center space-x-3 font-bold text-zinc-900">
+                    <x-logo class="w-auto h-8"></x-logo>
+                    </a>
+                </div>
+                <div class="flex justify-end flex-grow md:hidden">
+                    <button @click="mobileMenuOpen = !mobileMenuOpen" type="button" class="inline-flex items-center justify-center p-2 transition duration-150 ease-in-out rounded-full text-zinc-400 hover:text-zinc-500 hover:bg-zinc-100">
+                        <svg x-show="!mobileMenuOpen" class="w-6 h-6" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16"></path></svg>
+                        <svg x-show="mobileMenuOpen" class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
+                    </button>
+                </div>
             </div>
 
-            <nav :class="{ 'hidden md:flex' : !mobileMenuOpen, 'block md:flex md:relative absolute top-0 left-0 md:w-auto w-screen md:h-auto h-screen md:pt-0 pt-24 pointer-events-none md:z-10 z-50' : mobileMenuOpen }" class="h-full">
-                <ul :class="{ 'hidden md:flex' : !mobileMenuOpen, 'flex flex-col absolute md:relative md:w-auto w-screen h-full md:h-full md:overflow-auto overflow-scroll md:pb-0 pb-24 bg-white md:bg-transparent' : mobileMenuOpen }" id="menu" class="items-stretch pointer-events-auto md:items-center justify-start md:justify-center flex-1 w-full h-full ml-0 border-t border-gray-100 gap-x-8 md:w-auto md:items-center md:border-t-0 md:flex-row">
-                    <li @mouseenter="showOverlay=true" @mouseleave="showOverlay=false" class="z-30 flex flex-col items-start h-auto md:h-full border-b border-gray-100 md:border-b-0 group md:flex-row md:items-center">
-                        <a href="#_" class="flex items-center w-full hover:bg-gray-100 md:hover:bg-transparent h-16 gap-1 px-6 text-sm font-semibold text-gray-700 transition duration-300 md:h-full md:px-0 md:w-auto hover:text-gray-900">
+            <nav :class="{ 'hidden' : !mobileMenuOpen, 'block md:relative absolute top-0 left-0 md:w-auto w-screen md:h-auto h-screen pointer-events-none md:z-10 z-10' : mobileMenuOpen }" class="h-full md:flex">
+                <ul :class="{ 'hidden md:flex' : !mobileMenuOpen, 'flex flex-col absolute md:relative md:w-auto w-screen h-full md:h-full md:overflow-auto overflow-scroll md:pt-0 mt-24 md:pb-0 pb-48 bg-white md:bg-transparent' : mobileMenuOpen }" id="menu" class="items-stretch justify-start flex-1 w-full h-full ml-0 border-t border-gray-100 pointer-events-auto md:items-center md:justify-center gap-x-8 md:w-auto md:border-t-0 md:flex-row">
+                    <li x-data="{ open: false }" @mouseenter="showOverlay=true" @mouseleave="showOverlay=false" class="z-30 flex flex-col items-start h-auto border-b border-gray-100 md:h-full md:border-b-0 group md:flex-row md:items-center">
+                        <a href="#_" x-on:click="open=!open" class="flex items-center w-full h-16 gap-1 text-sm font-semibold text-gray-700 transition duration-300 hover:bg-gray-100 md:hover:bg-transparent px-7 md:h-full md:px-0 md:w-auto hover:text-gray-900">
                             <span class="">Platform</span>
                             <svg class="w-5 h-5 transition-all duration-300 ease-out group-hover:-rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" class=""></path></svg>
                         </a>
-                        <div class="top-0 left-0 invisible hidden w-screen space-y-3 transition-transform duration-300 ease-out md:-translate-y-2 bg-white border-t border-b border-gray-100 shadow-md opacity-0 md:mt-24 md:block group-hover:block group-hover:visible group-hover:opacity-100 group-hover:translate-y-0 md:absolute">
+                        <div 
+                            :class="{ 'hidden md:block opacity-0 invisible md:absolute' : !open, 'md:invisible md:opacity-0 md:hidden md:absolute' : open }"
+                            class="top-0 left-0 w-screen space-y-3 transition-transform duration-300 ease-out bg-white border-t border-b border-gray-100 md:shadow-md md:-translate-y-2 md:mt-24 md:block md:group-hover:block md:group-hover:visible md:group-hover:opacity-100 md:group-hover:translate-y-0">
                             <ul class="flex flex-col justify-between max-w-6xl mx-auto md:px-12 md:flex-row">
                                 <li class="w-full border-l border-gray-100 md:w-1/5">
                                     <a href="#_" onclick="demoButtonClickMessage(event)" class="block h-full p-6 text-lg font-semibold hover:bg-gray-50 lg:p-7 lg:py-10">
@@ -91,14 +103,16 @@ class="absolute inset-0 w-full h-screen pt-24">
                             </ul>
                         </div>
                     </li>
-                    <li @mouseenter="showOverlay=true" @mouseleave="showOverlay=false" class="z-30 flex flex-col items-start h-auto md:h-full border-b border-gray-100 md:border-b-0 group md:flex-row md:items-center">
-                        <a href="#_" class="flex items-center w-full hover:bg-gray-100 md:hover:bg-transparent h-16 gap-1 px-6 text-sm font-semibold text-gray-700 transition duration-300 md:h-full md:px-0 md:w-auto hover:text-gray-900">
+                    <li x-data="{ open: false }" @mouseenter="showOverlay=true" @mouseleave="showOverlay=false" class="z-30 flex flex-col items-start h-auto border-b border-gray-100 md:h-full md:border-b-0 group md:flex-row md:items-center">
+                        <a href="#_" x-on:click="open=!open" class="flex items-center w-full h-16 gap-1 text-sm font-semibold text-gray-700 transition duration-300 hover:bg-gray-100 md:hover:bg-transparent px-7 md:h-full md:px-0 md:w-auto hover:text-gray-900">
                             <span class="">Resources</span>
                             <svg class="w-5 h-5 transition-all duration-300 ease-out group-hover:-rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" class=""></path></svg>
                         </a>
-                        <div class="top-0 left-0 invisible hidden w-screen space-y-3 transition-all duration-300 ease-out -translate-y-2 bg-white border-t border-b border-gray-100 shadow-sm opacity-0 md:block group-hover:block group-hover:visible group-hover:opacity-100 group-hover:translate-y-0 md:absolute md:mt-24">
+                        <div 
+                            :class="{ 'hidden md:block opacity-0 invisible md:absolute' : !open, 'md:invisible md:opacity-0 md:hidden md:absolute' : open }"
+                            class="top-0 left-0 w-screen space-y-3 transition-transform duration-300 ease-out bg-white border-t border-b border-gray-100 md:shadow-md md:-translate-y-2 md:mt-24 md:block md:group-hover:block md:group-hover:visible md:group-hover:opacity-100 md:group-hover:translate-y-0">
                             <ul class="flex flex-col justify-between max-w-6xl mx-auto md:flex-row md:px-12">
-                                <div class="flex flex-col md:flex-row w-full border-l border-r divide-x divide-zinc-100 border-zinc-100">
+                                <div class="flex flex-col w-full border-l border-r divide-x md:flex-row divide-zinc-100 border-zinc-100">
                                     <div class="w-auto divide-y divide-zinc-100">
                                         <a href="#_" onclick="event.preventDefault(); new FilamentNotification().title('Modify this button in your theme folder').icon('heroicon-o-pencil-square').iconColor('info').send()" class="block text-sm p-7 hover:bg-neutral-100 group">
                                             <span class="block mb-1 font-medium text-black">Authentication</span>
@@ -133,15 +147,14 @@ class="absolute inset-0 w-full h-screen pt-24">
                             </ul>
                         </div>
                     </li>
-                    <li class="h-16 flex-shrink-0 border-b border-gray-100 md:border-b-0 md:h-full">
-                        <a href="{{ route('pricing') }}" class="flex md:px-0 px-6 items-center h-full hover:bg-gray-100 md:hover:bg-transparent text-sm font-semibold text-gray-700 transition duration-300 hover:text-gray-900">
+                    <li class="flex-shrink-0 h-16 border-b border-gray-100 md:border-b-0 md:h-full">
+                        <a href="{{ route('pricing') }}" class="flex items-center h-full text-sm font-semibold text-gray-700 transition duration-300 md:px-0 px-7 hover:bg-gray-100 md:hover:bg-transparent hover:text-gray-900">
                             Pricing
                         </a>
                     </li>
-                    <li class="h-16 flex-shrink-0 border-b border-gray-100 md:border-b-0 md:h-full">
-                        <a href="{{ route('blog') }}" class="flex md:px-0 px-6 items-center h-full hover:bg-gray-100 md:hover:bg-transparent text-sm font-semibold text-gray-700 transition duration-300 hover:text-gray-900">Blog</a>
+                    <li class="flex-shrink-0 h-16 border-b border-gray-100 md:border-b-0 md:h-full">
+                        <a href="{{ route('blog') }}" class="flex items-center h-full text-sm font-semibold text-gray-700 transition duration-300 md:px-0 px-7 hover:bg-gray-100 md:hover:bg-transparent hover:text-gray-900">Blog</a>
                     </li>
-
                 </ul>
             </nav>
 

diff --git a/resources/themes/anchor/components/marketing/sections/hero.blade.php b/resources/themes/anchor/components/marketing/sections/hero.blade.php
@@ -1,39 +1,39 @@
-<section class="flex relative top-0 flex-col justify-center items-center -mt-24 w-full lg:h-screen min-h-screen">
+<section class="relative top-0 flex flex-col items-center justify-center w-full min-h-screen -mt-24 lg:min-h-screen">
 
-        <div class="flex-1 gap-6 items-center text-left px-8 md:px-12 xl:px-20 pt-32 lg:pt-20 mx-auto w-full max-w-2xl lg:max-w-6xl justify-between flex lg:flex-row flex-col w-full">
+        <div class="flex flex-col items-center justify-between flex-1 w-full max-w-2xl gap-6 px-8 pt-32 mx-auto text-left md:px-12 xl:px-20 lg:pt-32 lg:pb-16 lg:max-w-6xl lg:flex-row">
             <div class="w-full lg:w-1/2">
-                <h1 class="text-7xl md:text-8xl lg:text-7xl text-left sm:text-center lg:text-left font-bold tracking-tighter text-zinc-900 text-balance">
+                <h1 class="font-bold tracking-tighter text-left text-7xl md:text-8xl lg:text-7xl sm:text-center lg:text-left text-zinc-900 text-balance">
                     Your <br class="lg:block sm:hidden">Headline<br class="lg:block sm:hidden"> <span >Goes Here</span>
                 </h1>
-                <p class="mt-5 sm:max-w-md mx-auto lg:ml-0 lg:max-w-sm text-left sm:text-center lg:text-left text-2xl font-normal text-zinc-500">
+                <p class="mx-auto mt-5 text-2xl font-normal text-left sm:max-w-md lg:ml-0 lg:max-w-sm sm:text-center lg:text-left text-zinc-500">
                     Customize this to highlight your product’s unique selling points.
                 </p>
-                <div class="flex flex-col gap-2 items-center lg:justify-start justify-center mx-auto md:ml-0 mt-8 md:flex-row">
+                <div class="flex flex-col items-center justify-center gap-2 mx-auto mt-8 lg:justify-start md:ml-0 md:flex-row">
                     <x-button size="lg" class="w-full lg:w-auto">Primary Button</x-button>
                     <x-button size="lg" color="secondary" class="w-full lg:w-auto">Secondary Button</x-button>
                 </div>
             </div>
-            <div class="flex items-center justify-center mt-12 w-full lg:w-1/2 lg:mt-0">
+            <div class="flex items-center justify-center w-full mt-12 lg:w-1/2 lg:mt-0">
                 <img alt="Wave Character" class="relative w-full lg:scale-125" src="/wave/img/character.png" style="max-width:450px;">
             </div>
         </div>
         <div class="flex-shrink-0 lg:h-[150px] flex border-t border-zinc-200 items-center w-full bg-zinc-100">
-            <div class="grid grid-cols-1 lg:space-y-0 lg:divide-y-0 divide-y divide-zinc-200 space-y-5 lg:py-0 py-10 h-auto px-8 mx-auto max-w-6xl lg:divide-x md:px-12 lg:px-20 lg:divide-zinc-200 lg:grid-cols-3">
+            <div class="grid h-auto max-w-6xl grid-cols-1 px-8 py-10 mx-auto space-y-5 divide-y lg:space-y-0 lg:divide-y-0 divide-zinc-200 lg:py-0 lg:divide-x md:px-12 lg:px-20 lg:divide-zinc-200 lg:grid-cols-3">
                 <div class="">
                     <h3 class="flex items-center font-medium text-zinc-900">
                         Key Feature
                     </h3>
                     <p class="mt-2 text-sm font-medium text-zinc-500">
-                        Why might users be interested in using your product. <span class="lg:inline hidden">Tell them more here.</span>
+                        Why might users be interested in using your product. <span class="hidden lg:inline">Tell them more here.</span>
                     </p>
                 </div>
-                <div class="lg:pt-0 pt-5 lg:px-10">
+                <div class="pt-5 lg:pt-0 lg:px-10">
                     <h3 class="font-medium text-zinc-900">Pain Points</h3>
                     <p class="mt-2 text-sm text-zinc-500">
-                        What are some pain points that your SaaS aims to solve? <span class="lg:inline hidden">Explain here.</span>
+                        What are some pain points that your SaaS aims to solve? <span class="hidden lg:inline">Explain here.</span>
                     </p>
                 </div>
-                <div class="lg:pt-0 pt-5 lg:px-10">
+                <div class="pt-5 lg:pt-0 lg:px-10">
                     <h3 class="font-medium text-zinc-900">Unique Advantage</h3>
                     <p class="mt-2 text-sm text-zinc-500">
                         Explain your unique advantage over others in the market.

diff --git a/wave/src/WaveServiceProvider.php b/wave/src/WaveServiceProvider.php
@@ -45,10 +45,10 @@ public function register(){
         if(config('wave.demo')){
             $this->app->router->pushMiddlewareToGroup('web', \Wave\Http\Middleware\ThemeDemoMiddleware::class);
             // Overwrite the Vite asset helper so we can use the demo folder as opposed to the build folder
-            $this->app->singleton(BaseVite::class, function ($app) {
-                // Replace the default Vite instance with the custom one
-                return new Vite();
-            });
+            // $this->app->singleton(BaseVite::class, function ($app) {
+            //     // Replace the default Vite instance with the custom one
+            //     return new Vite();
+            // });
         }
 
 	}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		window.demoButtonClickMessage=function(o){o.preventDefault(),new FilamentNotification().title("Modify this button in your theme folder").icon("heroicon-o-pencil-square").iconColor("info").send()};