@edgedev/create-edge-site 1.0.4 → 1.0.5

package/app.vue

@@ -3,3 +3,10 @@
   <NuxtPage />
   <edge-footer class="h-[200px]" />
 </template>
+
+<style>
+@import 'swiper/css';
+@import 'swiper/css/navigation';
+@import 'swiper/css/pagination';
+@import '@fancyapps/ui/dist/fancybox/fancybox.css';
+</style>

package/components/edgeFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <footer class="bg-black items-center justify-center flex flex-col">
+  <footer class="flex flex-col items-center justify-center bg-black">
     <div class="text-center">
       <!-- Social Icons -->
       <div class="flex justify-center mb-6 space-x-4">
@@ -42,7 +42,7 @@
 
       <!-- Logo -->
       <div class="flex justify-center">
-        <img src="/images/logo.png" alt="JDL Construction Logo" class="h-auto opacity-75 w-46" />
+        <img src="/images/logo.png" alt="Logo" class="h-auto opacity-75 w-46" />
       </div>
     </div>
   </footer>

package/components/edgeGallery.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { Fancybox } from '@fancyapps/ui'
+import { onMounted } from 'vue'
+
+const images = Array.from({ length: 12 }).map((_, i) => ({
+  id: i,
+  src: `https://picsum.photos/seed/masonry${i}/600/400`,
+  alt: `Random Image ${i + 1}`,
+}))
+
+onMounted(() => {
+  Fancybox.bind('[data-fancybox="gallery"]', {})
+})
+</script>
+
+<template>
+  <div class="gap-4 p-4 columns-1 sm:columns-2 md:columns-3 lg:columns-4">
+    <a
+      v-for="image in images"
+      :key="image.id"
+      :href="image.src"
+      data-fancybox="gallery"
+      :data-caption="image.alt"
+      class="block mb-4 overflow-hidden transition rounded-lg hover:opacity-80"
+    >
+      <img
+        :src="image.src"
+        :alt="image.alt"
+        class="w-full h-auto rounded shadow"
+      />
+    </a>
+  </div>
+</template>

package/components/edgeNavbar.vue

@@ -43,7 +43,7 @@ onUnmounted(() => {
       <div class="container mx-auto flex items-center justify-between h-[128px]">
         <!-- Logo -->
         <NuxtLink to="/" class="text-xl font-bold">
-          <img src="/images/logo.png" alt="JDL Construction MT" class="w-full h-auto" />
+          <img src="/images/logo.png" alt="MT" class="w-full h-auto" />
         </NuxtLink>
 
         <!-- Mobile Menu Button -->
@@ -63,6 +63,11 @@ onUnmounted(() => {
               Home
             </NuxtLink>
           </li>
+          <li>
+            <NuxtLink to="/stuff" class="nav-item">
+              Stuff
+            </NuxtLink>
+          </li>
           <li>
             <NuxtLink to="/contact" class="nav-item">
               Contact
@@ -81,7 +86,7 @@ onUnmounted(() => {
         </button>
 
         <!-- Mobile Logo -->
-        <a href="/"><img src="/images/logo.png" alt="JDL Construction Logo" class="mb-4 w-50" /></a>
+        <a href="/"><img src="/images/logo.png" alt="Logo" class="mb-4 w-50" /></a>
 
         <!-- Social Media Icons -->
         <div class="flex justify-center my-6 space-x-4">
@@ -103,6 +108,11 @@ onUnmounted(() => {
               Home
             </NuxtLink>
           </li>
+          <li class="border-t border-b border-lblue">
+            <NuxtLink to="/stuff" class="text-lg tracking-widest uppercase" @click="closeMenu">
+              Stuff
+            </NuxtLink>
+          </li>
           <li class="border-t border-b border-lblue">
             <NuxtLink to="/contact" class="text-lg tracking-widest uppercase" @click="closeMenu">
               Contact

package/components/edgeScrollRevealAnim.vue

@@ -0,0 +1,63 @@
+<script setup>
+import ScrollReveal from 'scrollreveal'
+import { onMounted } from 'vue'
+
+function initObserver() {
+  const rows = document.querySelectorAll('.sr-row')
+
+  const observer = new IntersectionObserver((entries, obs) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        const row = entry.target
+        const delay = Number.parseInt(row.getAttribute('data-sr-delay')) || 0
+
+        ScrollReveal().reveal(row.querySelectorAll('.sr-image'), {
+          origin: 'bottom',
+          distance: '30px',
+          duration: 800,
+          delay,
+          easing: 'ease-out',
+          interval: 200,
+          reset: false,
+        })
+
+        obs.unobserve(row) // only trigger once
+      }
+    })
+  }, {
+    threshold: 0.3, // only trigger when 30% of the row is visible
+  })
+
+  rows.forEach(row => observer.observe(row))
+}
+
+onMounted(() => {
+  initObserver()
+})
+</script>
+
+<template>
+  <div class="max-w-6xl px-4 py-16 mx-auto space-y-12">
+    <!-- Row 1 -->
+    <div class="grid grid-cols-2 gap-6 md:grid-cols-4 sr-row" data-sr-delay="0">
+      <div v-for="i in 4" :key="i" class="overflow-hidden rounded-lg shadow-lg sr-image">
+        <img
+          :src="`https://picsum.photos/seed/lazyrow1-${i}/400/300`"
+          :alt="`Image ${i}`"
+          class="object-cover w-full h-auto transition-transform duration-500 hover:scale-105"
+        />
+      </div>
+    </div>
+
+    <!-- Row 2 (delayed reveal) -->
+    <div class="grid grid-cols-2 gap-6 md:grid-cols-4 sr-row" data-sr-delay="800">
+      <div v-for="i in 4" :key="i" class="overflow-hidden rounded-lg shadow-lg sr-image">
+        <img
+          :src="`https://picsum.photos/seed/lazyrow2-${i}/400/300`"
+          :alt="`Image ${i}`"
+          class="object-cover w-full h-auto transition-transform duration-500 hover:scale-105"
+        />
+      </div>
+    </div>
+  </div>
+</template>

package/components/edgeSwiper.vue

@@ -0,0 +1,74 @@
+<script setup>
+import { Autoplay, Navigation, Pagination } from 'swiper/modules'
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import { onMounted, ref } from 'vue'
+
+const modules = [Navigation, Pagination, Autoplay]
+
+const slides = [
+  'https://picsum.photos/id/1018/1200/800',
+  'https://picsum.photos/id/1025/1200/800',
+  'https://picsum.photos/id/1035/1200/800',
+  'https://picsum.photos/id/1043/1200/800',
+  'https://picsum.photos/id/1052/1200/800',
+]
+
+const swiperRef = ref(null)
+</script>
+
+<template>
+  <div class="px-4 mx-auto max-w-7xl">
+    <div class="relative">
+      <!-- Custom Navigation Arrows -->
+      <div
+        id="swiper-prev"
+        class="absolute z-10 text-4xl transform -translate-y-1/2 cursor-pointer top-1/2 -left-6"
+      >
+        <button class="p-2 bg-white rounded-full shadow hover:bg-gray-200">
+          ‹
+        </button>
+      </div>
+
+      <div
+        id="swiper-next"
+        class="absolute z-10 transform -translate-y-1/2 cursor-pointer top-1/2 -right-6"
+      >
+        <button class="p-2 text-4xl bg-white rounded-full shadow hover:bg-gray-200">
+          ›
+        </button>
+      </div>
+
+      <Swiper
+        ref="swiperRef"
+        :modules="modules"
+        :slides-per-view="3"
+        :space-between="30"
+        :loop="true"
+        :autoplay="{ delay: 3000, disableOnInteraction: false }"
+        :navigation="{
+          nextEl: '#swiper-next',
+          prevEl: '#swiper-prev',
+        }"
+        :pagination="{
+          el: '#swiper-pagination',
+          clickable: true,
+        }"
+      >
+        <SwiperSlide
+          v-for="(img, index) in slides"
+          :key="index"
+          class="overflow-hidden rounded-lg"
+        >
+          <img
+            :src="img"
+            alt="Slide Image"
+            class="object-cover w-full h-64"
+          />
+        </SwiperSlide>
+      </Swiper>
+
+      <!-- Pagination below -->
+      <div id="swiper-pagination" class="mt-4 text-center"></div>
+    </div>
+  </div>
+</template>

package/components/titleSection.vue

@@ -2,9 +2,10 @@
 import { onMounted, ref } from 'vue'
 
 defineProps({
-  bgImage: {
+  page: {
     type: String,
-    required: true,
+    required: false,
+    default: '',
   },
   headline: {
     type: String,
@@ -13,51 +14,34 @@ defineProps({
   },
 })
 
-// Refs for animation
-const accentImg = ref(null)
-const heroHeading = ref(null)
+const isVisible = ref(false)
 
-// Animation on mount
 onMounted(() => {
+  // Trigger animation on load
   setTimeout(() => {
-    if (accentImg.value) {
-      accentImg.value.classList.add('opacity-100', 'translate-x-0')
-    }
-    if (heroHeading.value) {
-      heroHeading.value.classList.add('opacity-100', 'translate-y-0')
-    }
-  }, 300)
+    isVisible.value = true
+  }, 100)
 })
 </script>
 
 <template>
-  <section
-    class="relative z-[10] md:pt-20 md:pb-44 pb-16 px-6 flex items-center text-white text-center bg-right-bottom  bg-cover md:bg-contain bg-no-repeat overflow-hidden"
-    :style="{ backgroundImage: `url(${bgImage})` }"
-  >
-    <!-- Ensure Text is Always on Top -->
-    <div class="container relative z-[20] m-auto text-left bg-opacity-50 md:pr-[50%]  md:h-80">
-      <slot>
-        <h1
-          ref="heroHeading"
-          class="text-3xl md:text-6xl font-semibold !leading-snug opacity-0 translate-y-[20px] transition-all duration-1000 ease-out"
-        >
-          {{ headline }}
-        </h1>
-      </slot>
+  <section class="relative flex items-center px-12 py-20 text-white bg-gray-900 md:px-72">
+    <div
+      class="container relative max-w-6xl m-auto text-left transition-all duration-700 ease-out"
+      :class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'"
+    >
+      <h6
+        class="inline-flex items-center gap-2 mb-4 transition-all duration-700 ease-out super-head"
+        :class="isVisible ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-4'"
+      >
+        {{ page }}
+      </h6>
+      <h1
+        class="text-3xl font-light !leading-tight font-fancy md:text-5xl md:pr-80 transition-all duration-700 ease-out delay-100"
+        :class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'"
+      >
+        {{ headline }}
+      </h1>
     </div>
-
-    <!-- Gradient Background (top Half) -->
-    <div class="absolute z-10 top-0 left-0 w-full h-[128px] bg-gradient-to-b from-dblue to-transparent"></div>
-
-    <!-- Design Accent Image -->
-    <img
-      ref="accentImg"
-      src="/images/hero/titleShape.png"
-      alt="Decorative Accent"
-      class="absolute bottom-0 right-0 z-0 object-cover"
-    />
-    <!-- Diagonal Gradient Overlay -->
-    <div class="absolute inset-0 z-0 bg-reversed-angled-gradient"></div>
   </section>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edgedev/create-edge-site",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Create Edge Starter Site",
   "bin": {
     "create-edge-site": "./bin/cli.js"
@@ -13,11 +13,14 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@fancyapps/ui": "^5.0.36",
     "@nuxtjs/tailwindcss": "6.13.2",
     "@vee-validate/nuxt": "^4.15.0",
     "@vee-validate/rules": "^4.15.0",
     "@vee-validate/zod": "^4.15.0",
     "nuxt": "^3.16.1",
+    "scrollreveal": "^4.0.9",
+    "swiper": "^11.2.6",
     "vue": "^3.5.13",
     "vue-3-mask": "0.0.1-alpha",
     "vue-router": "^4.5.0",

package/pages/contact.vue

@@ -29,10 +29,16 @@ onMounted(() => {
 <template>
   <Head>
     <title>Edge Website - An awesome Edge website</title>
-    <meta name="description" content="This is an Edge website template">
-    <link rel="canonical" href="https://edgemarketingdesign.com/">
+    <meta name="description" content="This is an Edge website template" />
+    <link rel="canonical" href="https://edgemarketingdesign.com/" />
   </Head>
-  <div class="min-h-[calc(100vh_-_328px)] w-full items-center justify-center flex flex-col">
+
+  <titleSection
+    page="Contact"
+    headline="A really great keyword rich headline"
+  />
+
+  <div class="container flex flex-col items-center justify-center w-full max-w-6xl px-6 pt-10 pb-64 mx-auto">
     <edge-form-fling
       v-slot="{ submitting }"
       form-fling-endpoint="https://formfling.com/s/KLm807Hz7BXhB8S08uuF-oFPhf8TuWOSPGEmUATyV-2t5gal"
@@ -48,7 +54,7 @@ onMounted(() => {
         placeholder="Name"
         name="name"
         class="w-full px-4 py-2 border border-gray-300 focus:outline-none"
-        error-class="text-red-500 text-sm"
+        error-class="text-sm text-red-500"
       />
       <!-- Email and Phone -->
       <div class="max-w-[400px] my-2 grid grid-cols-1 gap-4 md:grid-cols-2">
@@ -58,7 +64,7 @@ onMounted(() => {
             placeholder="Email"
             name="email"
             class="w-full px-4 py-2 border border-gray-300 focus:outline-none"
-            error-class="text-red-500 text-sm"
+            error-class="text-sm text-red-500"
           />
         </div>
         <div>
@@ -67,7 +73,7 @@ onMounted(() => {
             placeholder="Phone"
             name="phone"
             class="w-full px-4 py-2 border border-gray-300 focus:outline-none"
-            error-class="text-red-500 text-sm"
+            error-class="text-sm text-red-500"
           />
         </div>
       </div>
@@ -77,14 +83,14 @@ onMounted(() => {
           name="message"
           placeholder="Message"
           class="w-full h-32 px-4 py-2 mt-2 border border-gray-300 resize-none focus:outline-none"
-          error-class="text-red-500 text-sm"
+          error-class="text-sm text-red-500"
         />
       </div>
       <div>
-        <button v-if="!submitting" type="submit" class="px-6 mt-2 py-2 transition-colors bg-lblue text-dblue hover:bg-opacity-80">
+        <button v-if="!submitting" type="submit" class="px-6 py-2 mt-2 transition-colors bg-lblue text-dblue hover:bg-opacity-80">
           Send Message
         </button>
-        <button v-else type="button" class="px-6 mt-2 py-2 transition-colors bg-gray-300 text-gray-500 cursor-not-allowed">
+        <button v-else type="button" class="px-6 py-2 mt-2 text-gray-500 transition-colors bg-gray-300 cursor-not-allowed">
           Sending...
         </button>
       </div>

package/pages/stuff.vue

@@ -0,0 +1,45 @@
+<script setup>
+onMounted(() => {
+  console.log('Hello world.')
+})
+</script>
+
+<template>
+  <Head>
+    <title>Edge Website - An awesome Edge website</title>
+    <meta name="description" content="This is an Edge website template" />
+    <link rel="canonical" href="https://edgemarketingdesign.com/" />
+  </Head>
+
+  <titleSection
+    page="Stuff"
+    headline="So ya'll know what we have installed already."
+  />
+
+  <section>
+    <div class="container max-w-6xl py-64 mx-auto ">
+      <h2 class="m-auto mb-12 text-4xl font-bold text-center text-dblue">
+        Swiper.js
+      </h2>
+      <edgeSwiper />
+    </div>
+  </section>
+
+  <section>
+    <div class="container max-w-6xl py-64 mx-auto ">
+      <h2 class="m-auto mb-12 text-4xl font-bold text-center text-dblue">
+        Masonry Gallery with Lighbox
+      </h2>
+      <edgeGallery />
+    </div>
+  </section>
+
+  <section>
+    <div class="container max-w-6xl py-64 mx-auto ">
+      <h2 class="m-auto mb-12 text-4xl font-bold text-center text-dblue">
+        Reveal Animation on Scroll
+      </h2>
+      <edgeScrollRevealAnim />
+    </div>
+  </section>
+</template>