@edgedev/create-edge-site 1.0.4 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app.vue +7 -0
- package/components/edgeFooter.vue +2 -2
- package/components/edgeGallery.vue +33 -0
- package/components/edgeNavbar.vue +12 -2
- package/components/edgeScrollRevealAnim.vue +63 -0
- package/components/edgeSwiper.vue +74 -0
- package/components/titleSection.vue +24 -40
- package/package.json +4 -1
- package/pages/contact.vue +15 -9
- package/pages/stuff.vue +45 -0
package/app.vue
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<footer class="
|
|
2
|
+
<footer class="flex flex-col items-center justify-center bg-black">
|
|
3
3
|
<div class="text-center">
|
|
4
4
|
<!-- Social Icons -->
|
|
5
5
|
<div class="flex justify-center mb-6 space-x-4">
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
|
|
43
43
|
<!-- Logo -->
|
|
44
44
|
<div class="flex justify-center">
|
|
45
|
-
<img src="/images/logo.png" alt="
|
|
45
|
+
<img src="/images/logo.png" alt="Logo" class="h-auto opacity-75 w-46" />
|
|
46
46
|
</div>
|
|
47
47
|
</div>
|
|
48
48
|
</footer>
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { Fancybox } from '@fancyapps/ui'
|
|
3
|
+
import { onMounted } from 'vue'
|
|
4
|
+
|
|
5
|
+
const images = Array.from({ length: 12 }).map((_, i) => ({
|
|
6
|
+
id: i,
|
|
7
|
+
src: `https://picsum.photos/seed/masonry${i}/600/400`,
|
|
8
|
+
alt: `Random Image ${i + 1}`,
|
|
9
|
+
}))
|
|
10
|
+
|
|
11
|
+
onMounted(() => {
|
|
12
|
+
Fancybox.bind('[data-fancybox="gallery"]', {})
|
|
13
|
+
})
|
|
14
|
+
</script>
|
|
15
|
+
|
|
16
|
+
<template>
|
|
17
|
+
<div class="gap-4 p-4 columns-1 sm:columns-2 md:columns-3 lg:columns-4">
|
|
18
|
+
<a
|
|
19
|
+
v-for="image in images"
|
|
20
|
+
:key="image.id"
|
|
21
|
+
:href="image.src"
|
|
22
|
+
data-fancybox="gallery"
|
|
23
|
+
:data-caption="image.alt"
|
|
24
|
+
class="block mb-4 overflow-hidden transition rounded-lg hover:opacity-80"
|
|
25
|
+
>
|
|
26
|
+
<img
|
|
27
|
+
:src="image.src"
|
|
28
|
+
:alt="image.alt"
|
|
29
|
+
class="w-full h-auto rounded shadow"
|
|
30
|
+
/>
|
|
31
|
+
</a>
|
|
32
|
+
</div>
|
|
33
|
+
</template>
|
|
@@ -43,7 +43,7 @@ onUnmounted(() => {
|
|
|
43
43
|
<div class="container mx-auto flex items-center justify-between h-[128px]">
|
|
44
44
|
<!-- Logo -->
|
|
45
45
|
<NuxtLink to="/" class="text-xl font-bold">
|
|
46
|
-
<img src="/images/logo.png" alt="
|
|
46
|
+
<img src="/images/logo.png" alt="MT" class="w-full h-auto" />
|
|
47
47
|
</NuxtLink>
|
|
48
48
|
|
|
49
49
|
<!-- Mobile Menu Button -->
|
|
@@ -63,6 +63,11 @@ onUnmounted(() => {
|
|
|
63
63
|
Home
|
|
64
64
|
</NuxtLink>
|
|
65
65
|
</li>
|
|
66
|
+
<li>
|
|
67
|
+
<NuxtLink to="/stuff" class="nav-item">
|
|
68
|
+
Stuff
|
|
69
|
+
</NuxtLink>
|
|
70
|
+
</li>
|
|
66
71
|
<li>
|
|
67
72
|
<NuxtLink to="/contact" class="nav-item">
|
|
68
73
|
Contact
|
|
@@ -81,7 +86,7 @@ onUnmounted(() => {
|
|
|
81
86
|
</button>
|
|
82
87
|
|
|
83
88
|
<!-- Mobile Logo -->
|
|
84
|
-
<a href="/"><img src="/images/logo.png" alt="
|
|
89
|
+
<a href="/"><img src="/images/logo.png" alt="Logo" class="mb-4 w-50" /></a>
|
|
85
90
|
|
|
86
91
|
<!-- Social Media Icons -->
|
|
87
92
|
<div class="flex justify-center my-6 space-x-4">
|
|
@@ -103,6 +108,11 @@ onUnmounted(() => {
|
|
|
103
108
|
Home
|
|
104
109
|
</NuxtLink>
|
|
105
110
|
</li>
|
|
111
|
+
<li class="border-t border-b border-lblue">
|
|
112
|
+
<NuxtLink to="/stuff" class="text-lg tracking-widest uppercase" @click="closeMenu">
|
|
113
|
+
Stuff
|
|
114
|
+
</NuxtLink>
|
|
115
|
+
</li>
|
|
106
116
|
<li class="border-t border-b border-lblue">
|
|
107
117
|
<NuxtLink to="/contact" class="text-lg tracking-widest uppercase" @click="closeMenu">
|
|
108
118
|
Contact
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import ScrollReveal from 'scrollreveal'
|
|
3
|
+
import { onMounted } from 'vue'
|
|
4
|
+
|
|
5
|
+
function initObserver() {
|
|
6
|
+
const rows = document.querySelectorAll('.sr-row')
|
|
7
|
+
|
|
8
|
+
const observer = new IntersectionObserver((entries, obs) => {
|
|
9
|
+
entries.forEach((entry) => {
|
|
10
|
+
if (entry.isIntersecting) {
|
|
11
|
+
const row = entry.target
|
|
12
|
+
const delay = Number.parseInt(row.getAttribute('data-sr-delay')) || 0
|
|
13
|
+
|
|
14
|
+
ScrollReveal().reveal(row.querySelectorAll('.sr-image'), {
|
|
15
|
+
origin: 'bottom',
|
|
16
|
+
distance: '30px',
|
|
17
|
+
duration: 800,
|
|
18
|
+
delay,
|
|
19
|
+
easing: 'ease-out',
|
|
20
|
+
interval: 200,
|
|
21
|
+
reset: false,
|
|
22
|
+
})
|
|
23
|
+
|
|
24
|
+
obs.unobserve(row) // only trigger once
|
|
25
|
+
}
|
|
26
|
+
})
|
|
27
|
+
}, {
|
|
28
|
+
threshold: 0.3, // only trigger when 30% of the row is visible
|
|
29
|
+
})
|
|
30
|
+
|
|
31
|
+
rows.forEach(row => observer.observe(row))
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
onMounted(() => {
|
|
35
|
+
initObserver()
|
|
36
|
+
})
|
|
37
|
+
</script>
|
|
38
|
+
|
|
39
|
+
<template>
|
|
40
|
+
<div class="max-w-6xl px-4 py-16 mx-auto space-y-12">
|
|
41
|
+
<!-- Row 1 -->
|
|
42
|
+
<div class="grid grid-cols-2 gap-6 md:grid-cols-4 sr-row" data-sr-delay="0">
|
|
43
|
+
<div v-for="i in 4" :key="i" class="overflow-hidden rounded-lg shadow-lg sr-image">
|
|
44
|
+
<img
|
|
45
|
+
:src="`https://picsum.photos/seed/lazyrow1-${i}/400/300`"
|
|
46
|
+
:alt="`Image ${i}`"
|
|
47
|
+
class="object-cover w-full h-auto transition-transform duration-500 hover:scale-105"
|
|
48
|
+
/>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
|
|
52
|
+
<!-- Row 2 (delayed reveal) -->
|
|
53
|
+
<div class="grid grid-cols-2 gap-6 md:grid-cols-4 sr-row" data-sr-delay="800">
|
|
54
|
+
<div v-for="i in 4" :key="i" class="overflow-hidden rounded-lg shadow-lg sr-image">
|
|
55
|
+
<img
|
|
56
|
+
:src="`https://picsum.photos/seed/lazyrow2-${i}/400/300`"
|
|
57
|
+
:alt="`Image ${i}`"
|
|
58
|
+
class="object-cover w-full h-auto transition-transform duration-500 hover:scale-105"
|
|
59
|
+
/>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
63
|
+
</template>
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { Autoplay, Navigation, Pagination } from 'swiper/modules'
|
|
3
|
+
import { Swiper, SwiperSlide } from 'swiper/vue'
|
|
4
|
+
import { onMounted, ref } from 'vue'
|
|
5
|
+
|
|
6
|
+
const modules = [Navigation, Pagination, Autoplay]
|
|
7
|
+
|
|
8
|
+
const slides = [
|
|
9
|
+
'https://picsum.photos/id/1018/1200/800',
|
|
10
|
+
'https://picsum.photos/id/1025/1200/800',
|
|
11
|
+
'https://picsum.photos/id/1035/1200/800',
|
|
12
|
+
'https://picsum.photos/id/1043/1200/800',
|
|
13
|
+
'https://picsum.photos/id/1052/1200/800',
|
|
14
|
+
]
|
|
15
|
+
|
|
16
|
+
const swiperRef = ref(null)
|
|
17
|
+
</script>
|
|
18
|
+
|
|
19
|
+
<template>
|
|
20
|
+
<div class="px-4 mx-auto max-w-7xl">
|
|
21
|
+
<div class="relative">
|
|
22
|
+
<!-- Custom Navigation Arrows -->
|
|
23
|
+
<div
|
|
24
|
+
id="swiper-prev"
|
|
25
|
+
class="absolute z-10 text-4xl transform -translate-y-1/2 cursor-pointer top-1/2 -left-6"
|
|
26
|
+
>
|
|
27
|
+
<button class="p-2 bg-white rounded-full shadow hover:bg-gray-200">
|
|
28
|
+
‹
|
|
29
|
+
</button>
|
|
30
|
+
</div>
|
|
31
|
+
|
|
32
|
+
<div
|
|
33
|
+
id="swiper-next"
|
|
34
|
+
class="absolute z-10 transform -translate-y-1/2 cursor-pointer top-1/2 -right-6"
|
|
35
|
+
>
|
|
36
|
+
<button class="p-2 text-4xl bg-white rounded-full shadow hover:bg-gray-200">
|
|
37
|
+
›
|
|
38
|
+
</button>
|
|
39
|
+
</div>
|
|
40
|
+
|
|
41
|
+
<Swiper
|
|
42
|
+
ref="swiperRef"
|
|
43
|
+
:modules="modules"
|
|
44
|
+
:slides-per-view="3"
|
|
45
|
+
:space-between="30"
|
|
46
|
+
:loop="true"
|
|
47
|
+
:autoplay="{ delay: 3000, disableOnInteraction: false }"
|
|
48
|
+
:navigation="{
|
|
49
|
+
nextEl: '#swiper-next',
|
|
50
|
+
prevEl: '#swiper-prev',
|
|
51
|
+
}"
|
|
52
|
+
:pagination="{
|
|
53
|
+
el: '#swiper-pagination',
|
|
54
|
+
clickable: true,
|
|
55
|
+
}"
|
|
56
|
+
>
|
|
57
|
+
<SwiperSlide
|
|
58
|
+
v-for="(img, index) in slides"
|
|
59
|
+
:key="index"
|
|
60
|
+
class="overflow-hidden rounded-lg"
|
|
61
|
+
>
|
|
62
|
+
<img
|
|
63
|
+
:src="img"
|
|
64
|
+
alt="Slide Image"
|
|
65
|
+
class="object-cover w-full h-64"
|
|
66
|
+
/>
|
|
67
|
+
</SwiperSlide>
|
|
68
|
+
</Swiper>
|
|
69
|
+
|
|
70
|
+
<!-- Pagination below -->
|
|
71
|
+
<div id="swiper-pagination" class="mt-4 text-center"></div>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
</template>
|
|
@@ -2,9 +2,10 @@
|
|
|
2
2
|
import { onMounted, ref } from 'vue'
|
|
3
3
|
|
|
4
4
|
defineProps({
|
|
5
|
-
|
|
5
|
+
page: {
|
|
6
6
|
type: String,
|
|
7
|
-
required:
|
|
7
|
+
required: false,
|
|
8
|
+
default: '',
|
|
8
9
|
},
|
|
9
10
|
headline: {
|
|
10
11
|
type: String,
|
|
@@ -13,51 +14,34 @@ defineProps({
|
|
|
13
14
|
},
|
|
14
15
|
})
|
|
15
16
|
|
|
16
|
-
|
|
17
|
-
const accentImg = ref(null)
|
|
18
|
-
const heroHeading = ref(null)
|
|
17
|
+
const isVisible = ref(false)
|
|
19
18
|
|
|
20
|
-
// Animation on mount
|
|
21
19
|
onMounted(() => {
|
|
20
|
+
// Trigger animation on load
|
|
22
21
|
setTimeout(() => {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}
|
|
26
|
-
if (heroHeading.value) {
|
|
27
|
-
heroHeading.value.classList.add('opacity-100', 'translate-y-0')
|
|
28
|
-
}
|
|
29
|
-
}, 300)
|
|
22
|
+
isVisible.value = true
|
|
23
|
+
}, 100)
|
|
30
24
|
})
|
|
31
25
|
</script>
|
|
32
26
|
|
|
33
27
|
<template>
|
|
34
|
-
<section
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
28
|
+
<section class="relative flex items-center px-12 py-20 text-white bg-gray-900 md:px-72">
|
|
29
|
+
<div
|
|
30
|
+
class="container relative max-w-6xl m-auto text-left transition-all duration-700 ease-out"
|
|
31
|
+
:class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'"
|
|
32
|
+
>
|
|
33
|
+
<h6
|
|
34
|
+
class="inline-flex items-center gap-2 mb-4 transition-all duration-700 ease-out super-head"
|
|
35
|
+
:class="isVisible ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-4'"
|
|
36
|
+
>
|
|
37
|
+
{{ page }}
|
|
38
|
+
</h6>
|
|
39
|
+
<h1
|
|
40
|
+
class="text-3xl font-light !leading-tight font-fancy md:text-5xl md:pr-80 transition-all duration-700 ease-out delay-100"
|
|
41
|
+
:class="isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'"
|
|
42
|
+
>
|
|
43
|
+
{{ headline }}
|
|
44
|
+
</h1>
|
|
48
45
|
</div>
|
|
49
|
-
|
|
50
|
-
<!-- Gradient Background (top Half) -->
|
|
51
|
-
<div class="absolute z-10 top-0 left-0 w-full h-[128px] bg-gradient-to-b from-dblue to-transparent"></div>
|
|
52
|
-
|
|
53
|
-
<!-- Design Accent Image -->
|
|
54
|
-
<img
|
|
55
|
-
ref="accentImg"
|
|
56
|
-
src="/images/hero/titleShape.png"
|
|
57
|
-
alt="Decorative Accent"
|
|
58
|
-
class="absolute bottom-0 right-0 z-0 object-cover"
|
|
59
|
-
/>
|
|
60
|
-
<!-- Diagonal Gradient Overlay -->
|
|
61
|
-
<div class="absolute inset-0 z-0 bg-reversed-angled-gradient"></div>
|
|
62
46
|
</section>
|
|
63
47
|
</template>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@edgedev/create-edge-site",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.5",
|
|
4
4
|
"description": "Create Edge Starter Site",
|
|
5
5
|
"bin": {
|
|
6
6
|
"create-edge-site": "./bin/cli.js"
|
|
@@ -13,11 +13,14 @@
|
|
|
13
13
|
"postinstall": "nuxt prepare"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
+
"@fancyapps/ui": "^5.0.36",
|
|
16
17
|
"@nuxtjs/tailwindcss": "6.13.2",
|
|
17
18
|
"@vee-validate/nuxt": "^4.15.0",
|
|
18
19
|
"@vee-validate/rules": "^4.15.0",
|
|
19
20
|
"@vee-validate/zod": "^4.15.0",
|
|
20
21
|
"nuxt": "^3.16.1",
|
|
22
|
+
"scrollreveal": "^4.0.9",
|
|
23
|
+
"swiper": "^11.2.6",
|
|
21
24
|
"vue": "^3.5.13",
|
|
22
25
|
"vue-3-mask": "0.0.1-alpha",
|
|
23
26
|
"vue-router": "^4.5.0",
|
package/pages/contact.vue
CHANGED
|
@@ -29,10 +29,16 @@ onMounted(() => {
|
|
|
29
29
|
<template>
|
|
30
30
|
<Head>
|
|
31
31
|
<title>Edge Website - An awesome Edge website</title>
|
|
32
|
-
<meta name="description" content="This is an Edge website template"
|
|
33
|
-
<link rel="canonical" href="https://edgemarketingdesign.com/"
|
|
32
|
+
<meta name="description" content="This is an Edge website template" />
|
|
33
|
+
<link rel="canonical" href="https://edgemarketingdesign.com/" />
|
|
34
34
|
</Head>
|
|
35
|
-
|
|
35
|
+
|
|
36
|
+
<titleSection
|
|
37
|
+
page="Contact"
|
|
38
|
+
headline="A really great keyword rich headline"
|
|
39
|
+
/>
|
|
40
|
+
|
|
41
|
+
<div class="container flex flex-col items-center justify-center w-full max-w-6xl px-6 pt-10 pb-64 mx-auto">
|
|
36
42
|
<edge-form-fling
|
|
37
43
|
v-slot="{ submitting }"
|
|
38
44
|
form-fling-endpoint="https://formfling.com/s/KLm807Hz7BXhB8S08uuF-oFPhf8TuWOSPGEmUATyV-2t5gal"
|
|
@@ -48,7 +54,7 @@ onMounted(() => {
|
|
|
48
54
|
placeholder="Name"
|
|
49
55
|
name="name"
|
|
50
56
|
class="w-full px-4 py-2 border border-gray-300 focus:outline-none"
|
|
51
|
-
error-class="text-red-500
|
|
57
|
+
error-class="text-sm text-red-500"
|
|
52
58
|
/>
|
|
53
59
|
<!-- Email and Phone -->
|
|
54
60
|
<div class="max-w-[400px] my-2 grid grid-cols-1 gap-4 md:grid-cols-2">
|
|
@@ -58,7 +64,7 @@ onMounted(() => {
|
|
|
58
64
|
placeholder="Email"
|
|
59
65
|
name="email"
|
|
60
66
|
class="w-full px-4 py-2 border border-gray-300 focus:outline-none"
|
|
61
|
-
error-class="text-red-500
|
|
67
|
+
error-class="text-sm text-red-500"
|
|
62
68
|
/>
|
|
63
69
|
</div>
|
|
64
70
|
<div>
|
|
@@ -67,7 +73,7 @@ onMounted(() => {
|
|
|
67
73
|
placeholder="Phone"
|
|
68
74
|
name="phone"
|
|
69
75
|
class="w-full px-4 py-2 border border-gray-300 focus:outline-none"
|
|
70
|
-
error-class="text-red-500
|
|
76
|
+
error-class="text-sm text-red-500"
|
|
71
77
|
/>
|
|
72
78
|
</div>
|
|
73
79
|
</div>
|
|
@@ -77,14 +83,14 @@ onMounted(() => {
|
|
|
77
83
|
name="message"
|
|
78
84
|
placeholder="Message"
|
|
79
85
|
class="w-full h-32 px-4 py-2 mt-2 border border-gray-300 resize-none focus:outline-none"
|
|
80
|
-
error-class="text-red-500
|
|
86
|
+
error-class="text-sm text-red-500"
|
|
81
87
|
/>
|
|
82
88
|
</div>
|
|
83
89
|
<div>
|
|
84
|
-
<button v-if="!submitting" type="submit" class="px-6
|
|
90
|
+
<button v-if="!submitting" type="submit" class="px-6 py-2 mt-2 transition-colors bg-lblue text-dblue hover:bg-opacity-80">
|
|
85
91
|
Send Message
|
|
86
92
|
</button>
|
|
87
|
-
<button v-else type="button" class="px-6
|
|
93
|
+
<button v-else type="button" class="px-6 py-2 mt-2 text-gray-500 transition-colors bg-gray-300 cursor-not-allowed">
|
|
88
94
|
Sending...
|
|
89
95
|
</button>
|
|
90
96
|
</div>
|
package/pages/stuff.vue
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
onMounted(() => {
|
|
3
|
+
console.log('Hello world.')
|
|
4
|
+
})
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
<template>
|
|
8
|
+
<Head>
|
|
9
|
+
<title>Edge Website - An awesome Edge website</title>
|
|
10
|
+
<meta name="description" content="This is an Edge website template" />
|
|
11
|
+
<link rel="canonical" href="https://edgemarketingdesign.com/" />
|
|
12
|
+
</Head>
|
|
13
|
+
|
|
14
|
+
<titleSection
|
|
15
|
+
page="Stuff"
|
|
16
|
+
headline="So ya'll know what we have installed already."
|
|
17
|
+
/>
|
|
18
|
+
|
|
19
|
+
<section>
|
|
20
|
+
<div class="container max-w-6xl py-64 mx-auto ">
|
|
21
|
+
<h2 class="m-auto mb-12 text-4xl font-bold text-center text-dblue">
|
|
22
|
+
Swiper.js
|
|
23
|
+
</h2>
|
|
24
|
+
<edgeSwiper />
|
|
25
|
+
</div>
|
|
26
|
+
</section>
|
|
27
|
+
|
|
28
|
+
<section>
|
|
29
|
+
<div class="container max-w-6xl py-64 mx-auto ">
|
|
30
|
+
<h2 class="m-auto mb-12 text-4xl font-bold text-center text-dblue">
|
|
31
|
+
Masonry Gallery with Lighbox
|
|
32
|
+
</h2>
|
|
33
|
+
<edgeGallery />
|
|
34
|
+
</div>
|
|
35
|
+
</section>
|
|
36
|
+
|
|
37
|
+
<section>
|
|
38
|
+
<div class="container max-w-6xl py-64 mx-auto ">
|
|
39
|
+
<h2 class="m-auto mb-12 text-4xl font-bold text-center text-dblue">
|
|
40
|
+
Reveal Animation on Scroll
|
|
41
|
+
</h2>
|
|
42
|
+
<edgeScrollRevealAnim />
|
|
43
|
+
</div>
|
|
44
|
+
</section>
|
|
45
|
+
</template>
|