introducing page mode : full / pad

demo on /about

app.vue

@@ -1,3 +1,3 @@
 <template>
-  <NuxtLayout>  <NuxtPage ref="wavePage"/></NuxtLayout>
+    <NuxtPage ref="wavePage"/>
 </template>

components/Base/Navbar.vue

@@ -1,10 +1,10 @@
 <template>
-  <nav id="navbar" class="relative z-10 w-full text-neutral-800 sticky top-0 bg-white shadow ">
+  <nav id="navbar" class="  z-10 w-full text-neutral-800 fixed top-0 bg-white shadow  " :class="mode=='full'?' opacity-80':''">
     <div class="flex flex-col max-w-screen-xl px-8 mx-auto lg:items-center lg:justify-between lg:flex-row py-4">
       <div class="flex flex-col lg:flex-row items-center space-x-4 xl:space-x-8">
         <div class="w-full flex flex-row items-center justify-between py-1">
-          <div>
-            <img src="~/assets/img/logo/wave-2024-2.png" class="w-24 xl:w-28" alt="Welcome to  wave.bzh" />
+          <div><a href="/">
+            <img src="~/assets/img/logo/wave-2024-2.png" class="w-24 xl:w-28" alt="Welcome to  wave.bzh" /></a>
           </div>
           <button class="rounded-lg lg:hidden focus:outline-none focus:shadow-outline" @click="open = !open">
             <WaveIcon name="menu"  v-if="!open"/>
@@ -25,7 +25,7 @@
                 @click="dropdownToggler"
                 @blur="dropdownToggler"
             >
-              <span class="mr-1">About</span>
+              <span class="mr-1"><a href="/about">About</a></span>
 
               <WaveIcon name="chevronUp"  v-if="dropdownNavbar"/>
               <WaveIcon  v-else  name="chevronDown"  />
@@ -63,9 +63,15 @@
     </div>
   </nav>
 </template>
-<script>
+<script lang="ts">
+
+enum Modes {
+  'full',
+  'pad'
+}
 export default {
   name: 'BaseNavbar',
+  props: { mode:String as ()=>Modes },
   data() {
     return {
       open: false,

layouts/default.vue

@@ -3,10 +3,10 @@
   <div class="min-h-screen font-sans antialiased relative">
     <div class="relative">
 
-<BaseNavbar/>
+<BaseNavbar :mode="useAttrs().mode"/>
 
-      <main class="text-neutral-800">
-        <slot/>
+      <main class="text-neutral-800" :class="useAttrs().mode=='full'?'  ':'mt-20'">
+            <slot/>
       </main>
 
     </div>

pages/about.vue

@@ -0,0 +1,88 @@
+<template>
+
+  <NuxtLayout mode="pad">
+<!--  INTRODUCTION SECTION -->
+<section id="waveHero1" class="bg-black  flex items-center text-white ">
+  <base-section>
+  <div class="col-span-12 lg:col-span-6 mt-12 xl:mt-10 space-y-4 sm:space-y-6 px-6 text-center sm:text-left">
+          <span data-aos="fade-right" data-aos-once="true" class="text-base text-gradient font-semibold uppercase"
+          >variable height section </span
+          >
+  <h1
+      data-aos="fade-right"
+      data-aos-once="true"
+      class="text-[2.5rem] sm:text-5xl xl:text-6xl font-bold leading-tight capitalize sm:pr-8 xl:pr-10"
+  >
+    padding page with fixed menu <span class="text-header-gradient">Fastest Growing</span>    CMS Web App
+  </h1>
+
+    <p data-aos="fade-down" data-aos-once="true" data-aos-delay="300" class=" text-base paragraph hidden sm:block">
+      Discover HTML content management <br>Create static pages online  <br><b><i>with custom VUEJS component</i></b>
+    </p>
+    <div
+        data-aos="fade-up"
+        data-aos-once="true"
+        data-aos-delay="700"
+        class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 mt-2"
+    >
+      <BaseButton
+          class="max-w-full px-8 py-4 bg-gradient-to-r from-[#468ef9] to-[#0c66ee] border border-[#0c66ee] text-white"
+      >
+        Get Started
+      </BaseButton>
+      <BaseButton
+          class="max-w-full px-6 py-4 bg-inherit text-gradient border border-[#0c66ee] flex items-center justify-center"
+      >
+        <span>Download App</span>&nbsp;
+        <WaveIcon    name="chevronDown" color="blue"   />
+      </BaseButton>
+    </div>
+
+  </div>
+
+
+    <div class="hidden   col-span-12 lg:col-span-6 sm:flex items-center  ">
+
+        <img
+            data-aos="fade-up"
+            data-aos-once="true"
+            src="/assets/img/illustrations/undraw_Fans_re_cri3.svg"
+            class="   "
+            alt=""
+        />
+
+    </div>
+    <img
+        data-aos="fade-up"
+        data-aos-delay="300"
+        src="/assets/img/pattern/ellipse-1.png"
+        class="hidden sm:block absolute bottom-12 xl:bottom-16 left-4 xl:left-0 w-6"
+    />
+    <img
+        data-aos="fade-up"
+        data-aos-delay="300"
+        src="/assets/img/pattern/ellipse-2.png"
+        class="hidden sm:block absolute top-4 sm:top-10 right-64 sm:right-96 xl:right-[32rem] w-6"
+    />
+    <img
+        data-aos="fade-up"
+        data-aos-delay="300"
+        src="/assets/img/pattern/ellipse-3.png"
+        class="hidden sm:block absolute bottom-56 right-24 w-6"
+    />
+    <img
+        data-aos="fade-up"
+        data-aos-delay="300"
+        src="/assets/img/pattern/star.png"
+        class="hidden sm:block absolute top-20 sm:top-28 right-16 lg:right-0 lg:left-[30rem] w-8"
+    /></base-section>
+</section>
+
+
+
+
+  </NuxtLayout>
+
+</template>
+<script setup lang="ts">
+</script>

pages/index.vue

@@ -1,6 +1,6 @@
 <template>
 
-
+  <NuxtLayout mode="full">
 <!--  INTRODUCTION SECTION -->
 <section id="waveHero1" class="cover-gradient-2 h-screen flex items-center ">
   <base-section>
@@ -128,7 +128,7 @@
     </BaseSection>
   </section>
 
-
+  </NuxtLayout>
 
 </template>
 <script setup lang="ts">