@deneb-ui/create-template 2.0.70 → 2.0.72
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/bin/index.js +191 -7
- package/package.json +1 -1
- package/template/fivora-template.json +13 -24
- package/template/package.json +2 -2
- package/template/scripts/merge-platform-contract.js +82 -5
- package/template/src/app/about_us/page.tsx +105 -19
- package/template/src/app/contact/page.tsx +124 -39
- package/template/src/app/globals.css +13 -83
- package/template/src/app/layout.tsx +7 -1
- package/template/src/app/page.tsx +118 -33
- package/template/src/app/products/detail/page.tsx +13 -1
- package/template/src/app/services/page.tsx +67 -9
- package/template/src/components/SiteChrome.tsx +4 -0
- package/template/src/components/ThemeToggle.tsx +89 -0
- package/template/src/data/site-data.json +99 -74
- package/template/src/lib/siteDataContext.tsx +2 -0
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { useEffect, useState } from 'react';
|
|
4
|
+
|
|
5
|
+
export interface ThemeToggleProps {
|
|
6
|
+
className?: string;
|
|
7
|
+
showLabel?: boolean;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Built-in ThemeToggle Component for DENEB Storefront Templates.
|
|
12
|
+
* Toggles the `.dark` class on the root <html> element and persists preference to localStorage.
|
|
13
|
+
*/
|
|
14
|
+
export function ThemeToggle({ className = '', showLabel = false }: ThemeToggleProps) {
|
|
15
|
+
const [isDark, setIsDark] = useState(false);
|
|
16
|
+
const [mounted, setMounted] = useState(false);
|
|
17
|
+
|
|
18
|
+
useEffect(() => {
|
|
19
|
+
setMounted(true);
|
|
20
|
+
const hasDarkClass = document.documentElement.classList.contains('dark');
|
|
21
|
+
const storedTheme = typeof window !== 'undefined' ? localStorage.getItem('deneb-theme') : null;
|
|
22
|
+
const prefersDark = typeof window !== 'undefined' ? window.matchMedia('(prefers-color-scheme: dark)').matches : false;
|
|
23
|
+
|
|
24
|
+
const activeDark = storedTheme ? storedTheme === 'dark' : hasDarkClass || prefersDark;
|
|
25
|
+
setIsDark(activeDark);
|
|
26
|
+
if (activeDark) {
|
|
27
|
+
document.documentElement.classList.add('dark');
|
|
28
|
+
} else {
|
|
29
|
+
document.documentElement.classList.remove('dark');
|
|
30
|
+
}
|
|
31
|
+
}, []);
|
|
32
|
+
|
|
33
|
+
const toggleTheme = () => {
|
|
34
|
+
const nextDark = !isDark;
|
|
35
|
+
setIsDark(nextDark);
|
|
36
|
+
if (nextDark) {
|
|
37
|
+
document.documentElement.classList.add('dark');
|
|
38
|
+
localStorage.setItem('deneb-theme', 'dark');
|
|
39
|
+
} else {
|
|
40
|
+
document.documentElement.classList.remove('dark');
|
|
41
|
+
localStorage.setItem('deneb-theme', 'light');
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
if (!mounted) {
|
|
46
|
+
return (
|
|
47
|
+
<button
|
|
48
|
+
type="button"
|
|
49
|
+
aria-label="Toggle theme"
|
|
50
|
+
data-preview-static="theme-toggle"
|
|
51
|
+
className={`w-9 h-9 rounded-lg border border-[var(--border-color,#e2e8f0)] bg-[var(--card-bg,#ffffff)] opacity-0 transition-opacity ${className}`}
|
|
52
|
+
/>
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
return (
|
|
57
|
+
<button
|
|
58
|
+
type="button"
|
|
59
|
+
onClick={toggleTheme}
|
|
60
|
+
data-preview-static="theme-toggle"
|
|
61
|
+
aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
|
|
62
|
+
title={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
|
|
63
|
+
className={`inline-flex items-center justify-center gap-2 h-9 px-2.5 rounded-lg border border-[var(--border-color,rgba(0,0,0,0.1))] bg-[var(--card-bg,#ffffff)] text-[var(--text-color,#0f172a)] hover:border-[var(--color-primary,#016a7e)] hover:text-[var(--color-primary,#016a7e)] shadow-sm transition-all duration-200 cursor-pointer ${className}`}
|
|
64
|
+
>
|
|
65
|
+
{isDark ? (
|
|
66
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-4 h-4 text-amber-400">
|
|
67
|
+
<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
|
|
68
|
+
</svg>
|
|
69
|
+
) : (
|
|
70
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-4 h-4 text-amber-500">
|
|
71
|
+
<circle cx="12" cy="12" r="4" />
|
|
72
|
+
<path d="M12 2v2" />
|
|
73
|
+
<path d="M12 20v2" />
|
|
74
|
+
<path d="m4.93 4.93 1.41 1.41" />
|
|
75
|
+
<path d="m17.66 17.66 1.41 1.41" />
|
|
76
|
+
<path d="M2 12h2" />
|
|
77
|
+
<path d="M20 12h2" />
|
|
78
|
+
<path d="m6.34 17.66-1.41 1.41" />
|
|
79
|
+
<path d="m19.07 4.93-1.41 1.41" />
|
|
80
|
+
</svg>
|
|
81
|
+
)}
|
|
82
|
+
{showLabel && (
|
|
83
|
+
<span className="text-xs font-medium">{isDark ? 'Dark' : 'Light'}</span>
|
|
84
|
+
)}
|
|
85
|
+
</button>
|
|
86
|
+
);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
export default ThemeToggle;
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"project": {
|
|
3
|
-
"id": "
|
|
4
|
-
"slug": "
|
|
5
|
-
"title": "
|
|
3
|
+
"id": "deneb-portfolio-showcase",
|
|
4
|
+
"slug": "deneb-portfolio-showcase",
|
|
5
|
+
"title": "DENEB UI — Showcase & Portfolio",
|
|
6
6
|
"status": "APPROVED"
|
|
7
7
|
},
|
|
8
8
|
"merchant": {
|
|
9
|
-
"businessName": "
|
|
10
|
-
"description": "
|
|
9
|
+
"businessName": "DENEB UI Showcase",
|
|
10
|
+
"description": "The visual-first React framework for high-converting storefronts and modern digital portfolios. Powered by DENEB-UI in collaboration with FIVORA."
|
|
11
11
|
},
|
|
12
12
|
"template": {
|
|
13
|
-
"id": "
|
|
14
|
-
"name": "
|
|
13
|
+
"id": "deneb-portfolio-template",
|
|
14
|
+
"name": "DENEB UI Portfolio Showcase",
|
|
15
15
|
"engine": "NEXT_STATIC_EXPORT",
|
|
16
16
|
"structure": {
|
|
17
17
|
"pages": [
|
|
@@ -30,7 +30,17 @@
|
|
|
30
30
|
"bodyFont": "Inter",
|
|
31
31
|
"baseSize": "16px",
|
|
32
32
|
"heroMinHeight": "72vh",
|
|
33
|
-
"sectionPadding": "5rem"
|
|
33
|
+
"sectionPadding": "5rem",
|
|
34
|
+
"borderRadius": "12px",
|
|
35
|
+
"dark": {
|
|
36
|
+
"backgroundColor": "#090d16",
|
|
37
|
+
"cardBackgroundColor": "#131b2e",
|
|
38
|
+
"textColor": "#f8fafc",
|
|
39
|
+
"borderColor": "rgba(255, 255, 255, 0.12)",
|
|
40
|
+
"primaryColor": "#00adb5",
|
|
41
|
+
"secondaryColor": "#1e293b",
|
|
42
|
+
"accentColor": "#38bdf8"
|
|
43
|
+
}
|
|
34
44
|
}
|
|
35
45
|
}
|
|
36
46
|
},
|
|
@@ -45,8 +55,8 @@
|
|
|
45
55
|
},
|
|
46
56
|
"content": {
|
|
47
57
|
"common": {
|
|
48
|
-
"websiteTitle": "
|
|
49
|
-
"shortDescription": "
|
|
58
|
+
"websiteTitle": "DENEB UI — Showcase & Portfolio",
|
|
59
|
+
"shortDescription": "The visual-first React framework for modern storefronts and digital portfolios. Powered by DENEB-UI in collaboration with FIVORA.",
|
|
50
60
|
"logoUrl": "/fivora-logo.png",
|
|
51
61
|
"headerCtaLabel": "Contact Us",
|
|
52
62
|
"navLabels": {
|
|
@@ -55,111 +65,126 @@
|
|
|
55
65
|
"services": "Services",
|
|
56
66
|
"contact": "Contact"
|
|
57
67
|
},
|
|
58
|
-
"footerHeading": "Build something extraordinary with
|
|
59
|
-
"copyright": "
|
|
68
|
+
"footerHeading": "Build something extraordinary with DENEB-UI & FIVORA.",
|
|
69
|
+
"copyright": "DENEB-UI. All rights reserved. Collaborate with FIVORA.",
|
|
60
70
|
"socialMedia": {
|
|
61
|
-
"twitter": "https://twitter.com",
|
|
62
|
-
"github": "https://github.com",
|
|
71
|
+
"twitter": "https://twitter.com/denebui",
|
|
72
|
+
"github": "https://github.com/deneb-ui",
|
|
63
73
|
"linkedin": "https://linkedin.com",
|
|
64
74
|
"instagram": "https://instagram.com"
|
|
65
75
|
}
|
|
66
76
|
},
|
|
67
77
|
"home": {
|
|
68
|
-
"heroEyebrow": "⚡
|
|
69
|
-
"heroTitle": "
|
|
70
|
-
"heroSummary": "
|
|
78
|
+
"heroEyebrow": "⚡ DENEB UI FRAMEWORK",
|
|
79
|
+
"heroTitle": "The Visual-First React Framework for High-Converting Experiences",
|
|
80
|
+
"heroSummary": "Design, build, and ship web storefronts and portfolios with 100% atomic editable components, auto-balancing layouts, and instant dual-mode aesthetics. Built in collaboration with FIVORA Cloud.",
|
|
71
81
|
"bannerImageUrl": "/fivora-icon.svg",
|
|
72
|
-
"primaryCtaLabel": "Explore
|
|
73
|
-
"secondaryCtaLabel": "About
|
|
74
|
-
"introTitle": "Engineered for
|
|
75
|
-
"introBody": "Every editable value comes directly from
|
|
76
|
-
"featuresHeading": "Why build with the
|
|
82
|
+
"primaryCtaLabel": "Explore Showcase",
|
|
83
|
+
"secondaryCtaLabel": "About DENEB-UI",
|
|
84
|
+
"introTitle": "Engineered for visual perfection and effortless editing",
|
|
85
|
+
"introBody": "Every editable value comes directly from structured site data with auto-balancing layouts, responsive typography, and strict contract validation out of the box.",
|
|
86
|
+
"featuresHeading": "Why build with the DENEB-UI Authoring Kit?",
|
|
77
87
|
"features": [
|
|
78
88
|
{
|
|
79
|
-
"title": "
|
|
80
|
-
"body": "
|
|
89
|
+
"title": "100% Atomic DENEB Components",
|
|
90
|
+
"body": "Pre-built, accessible, high-converting components with responsive design token integration and zero runtime overhead."
|
|
81
91
|
},
|
|
82
92
|
{
|
|
83
93
|
"title": "Strict Visual Editing",
|
|
84
|
-
"body": "Direct bindings enable
|
|
94
|
+
"body": "Direct bidirectional field bindings enable instant visual customization in the Lab and on the FIVORA platform without breaking styles."
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
"title": "Instant Dual-Mode Aesthetics",
|
|
98
|
+
"body": "Seamless light and dark mode out-of-the-box with intelligent token contrast calculations for typography and surfaces."
|
|
85
99
|
},
|
|
86
100
|
{
|
|
87
|
-
"title": "
|
|
88
|
-
"body": "Built-in
|
|
101
|
+
"title": "FIVORA Cloud Collaboration",
|
|
102
|
+
"body": "Built-in integration for collaborative editing, marketplace publishing, and automated zero-dependency clean packaging."
|
|
89
103
|
}
|
|
90
104
|
],
|
|
91
105
|
"demoPreOrderCta": [
|
|
92
106
|
{
|
|
93
|
-
"buttonLabel": "Book a
|
|
107
|
+
"buttonLabel": "Book a Consultation",
|
|
94
108
|
"buttonUrl": "https://wa.me/94771234567"
|
|
95
109
|
}
|
|
96
110
|
],
|
|
97
|
-
"productsHeading": "Featured
|
|
98
|
-
"productsSummary": "
|
|
111
|
+
"productsHeading": "Featured Portfolio & Templates",
|
|
112
|
+
"productsSummary": "Explore high-converting storefronts, portals, and templates engineered with DENEB-UI and verified for production."
|
|
99
113
|
},
|
|
100
114
|
"about": {
|
|
101
|
-
"heading": "
|
|
102
|
-
"body": "
|
|
115
|
+
"heading": "Empowering Developers to Build Visually Editable Web Experiences",
|
|
116
|
+
"body": "DENEB UI was created by Chamika Gayashan & Induranga Kawishwara to bridge the gap between developer-grade React code and effortless visual editing. In collaboration with the FIVORA platform, we empower creators to ship ultra-fast static web applications while giving non-technical teams an intuitive live visual editor.",
|
|
103
117
|
"imageUrl": "/placeholder.svg",
|
|
104
|
-
"collageHeading": "
|
|
105
|
-
"collageDescription": "A
|
|
106
|
-
"historyHeading": "
|
|
107
|
-
"history": "We
|
|
118
|
+
"collageHeading": "The DENEB-UI Journey",
|
|
119
|
+
"collageDescription": "A visual tour of our architecture, design system engineering, and cloud deployment pipeline.",
|
|
120
|
+
"historyHeading": "Our Engineering Philosophy",
|
|
121
|
+
"history": "We believe modern web developers shouldn't have to choose between code elegance and visual customization. DENEB-UI provides atomic, contract-bound components that compile to lean Next.js static exports, backed by FIVORA Cloud for instant real-time publishing.",
|
|
108
122
|
"collageImages": [
|
|
109
123
|
{
|
|
110
|
-
"id": "
|
|
124
|
+
"id": "design-system",
|
|
111
125
|
"image": "/placeholder.svg",
|
|
112
|
-
"caption": "Design
|
|
126
|
+
"caption": "Atomic Design System"
|
|
113
127
|
},
|
|
114
128
|
{
|
|
115
|
-
"id": "
|
|
129
|
+
"id": "visual-engine",
|
|
116
130
|
"image": "/placeholder.svg",
|
|
117
|
-
"caption": "
|
|
131
|
+
"caption": "Live Visual Engine"
|
|
118
132
|
},
|
|
119
133
|
{
|
|
120
|
-
"id": "
|
|
134
|
+
"id": "cloud-publish",
|
|
121
135
|
"image": "/placeholder.svg",
|
|
122
|
-
"caption": "
|
|
136
|
+
"caption": "FIVORA Cloud Publishing"
|
|
123
137
|
}
|
|
124
138
|
]
|
|
125
139
|
},
|
|
126
140
|
"servicesPage": {
|
|
127
|
-
"heading": "
|
|
128
|
-
"intro": "
|
|
141
|
+
"heading": "Framework Solutions & Capabilities",
|
|
142
|
+
"intro": "Every capability is backed by atomic DENEB components, automated packaging, and preflight verification."
|
|
129
143
|
},
|
|
130
144
|
"services": [
|
|
131
145
|
{
|
|
132
146
|
"id": "visual-editing",
|
|
133
147
|
"name": "Visual Editing Lab",
|
|
134
|
-
"description": "Simulate how merchants customize your template in real time with the built-in local development lab.",
|
|
148
|
+
"description": "Simulate how merchants customize your template in real time with the built-in local development lab and field focus bridge.",
|
|
135
149
|
"imageUrl": "/placeholder.svg",
|
|
136
150
|
"features": [
|
|
137
151
|
"Zero-server static preview",
|
|
138
152
|
"Field focus bridge",
|
|
139
|
-
"Instant feedback"
|
|
153
|
+
"Instant visual feedback"
|
|
140
154
|
]
|
|
141
155
|
},
|
|
142
156
|
{
|
|
143
157
|
"id": "clean-packaging",
|
|
144
158
|
"name": "Automated Packager",
|
|
145
|
-
"description": "Automatically produce clean, upload-ready ZIP archives excluding junk and
|
|
159
|
+
"description": "Automatically produce clean, upload-ready ZIP archives excluding junk, build caches, and sensitive files.",
|
|
146
160
|
"imageUrl": "/placeholder.svg",
|
|
147
161
|
"features": [
|
|
148
162
|
"Excludes node_modules",
|
|
149
163
|
"Excludes .next and .git",
|
|
150
164
|
"100% preflight compliant"
|
|
151
165
|
]
|
|
166
|
+
},
|
|
167
|
+
{
|
|
168
|
+
"id": "dual-mode-system",
|
|
169
|
+
"name": "Dual-Mode Theme Engine",
|
|
170
|
+
"description": "Harmonic light and dark themes generated automatically with smart contrast adjustments for high visual appeal.",
|
|
171
|
+
"imageUrl": "/placeholder.svg",
|
|
172
|
+
"features": [
|
|
173
|
+
"Auto contrast calculations",
|
|
174
|
+
"ThemeToggle component",
|
|
175
|
+
"Persistent theme storage"
|
|
176
|
+
]
|
|
152
177
|
}
|
|
153
178
|
],
|
|
154
179
|
"contact": {
|
|
155
|
-
"heading": "
|
|
156
|
-
"intro": "Have questions about
|
|
180
|
+
"heading": "Connect with the DENEB-UI Team",
|
|
181
|
+
"intro": "Have questions about DENEB-UI components or building custom storefronts with the FIVORA platform? Contact us today.",
|
|
157
182
|
"phone": "+94 11 234 5678",
|
|
158
|
-
"email": "
|
|
183
|
+
"email": "hello@deneb-ui.dev",
|
|
159
184
|
"address": "Colombo, Sri Lanka",
|
|
160
185
|
"directionsLabel": "Get Directions",
|
|
161
186
|
"directionsUrl": "https://maps.app.goo.gl/example",
|
|
162
|
-
"formTitle": "Send an
|
|
187
|
+
"formTitle": "Send an Inquiry",
|
|
163
188
|
"submitLabel": "Send Message",
|
|
164
189
|
"directMessageText": "Send us a direct message",
|
|
165
190
|
"whatsapp": "+94 77 123 4567"
|
|
@@ -167,38 +192,38 @@
|
|
|
167
192
|
"products": [
|
|
168
193
|
{
|
|
169
194
|
"id": "prod-1",
|
|
170
|
-
"name": "
|
|
171
|
-
"description": "
|
|
172
|
-
"price":
|
|
173
|
-
"compareAtPrice":
|
|
195
|
+
"name": "Aura Luxury Storefront",
|
|
196
|
+
"description": "High-converting boutique and jewelry storefront template with dark aesthetics, before/after sliders, and quick checkout.",
|
|
197
|
+
"price": 4900,
|
|
198
|
+
"compareAtPrice": 6500,
|
|
174
199
|
"currency": "LKR",
|
|
175
200
|
"imageUrl": "/placeholder.svg",
|
|
176
|
-
"category": "
|
|
177
|
-
"badge": "
|
|
201
|
+
"category": "E-Commerce",
|
|
202
|
+
"badge": "Popular",
|
|
178
203
|
"isAvailable": true
|
|
179
204
|
},
|
|
180
205
|
{
|
|
181
206
|
"id": "prod-2",
|
|
182
|
-
"name": "
|
|
183
|
-
"description": "
|
|
184
|
-
"price":
|
|
185
|
-
"compareAtPrice":
|
|
207
|
+
"name": "Apex SaaS & Analytics",
|
|
208
|
+
"description": "Clean, high-performance web template tailored for developer tools, SaaS metrics, and responsive pricing grids.",
|
|
209
|
+
"price": 6200,
|
|
210
|
+
"compareAtPrice": 7500,
|
|
186
211
|
"currency": "LKR",
|
|
187
212
|
"imageUrl": "/placeholder.svg",
|
|
188
|
-
"category": "
|
|
189
|
-
"badge": "
|
|
213
|
+
"category": "Technology",
|
|
214
|
+
"badge": "Featured",
|
|
190
215
|
"isAvailable": true
|
|
191
216
|
},
|
|
192
217
|
{
|
|
193
218
|
"id": "prod-3",
|
|
194
|
-
"name": "
|
|
195
|
-
"description": "
|
|
196
|
-
"price":
|
|
219
|
+
"name": "Zenith Artisan Portfolio",
|
|
220
|
+
"description": "Minimalist digital portfolio template featuring auto-balancing photo galleries, quote cards, and WhatsApp contact integration.",
|
|
221
|
+
"price": 3800,
|
|
197
222
|
"compareAtPrice": null,
|
|
198
223
|
"currency": "LKR",
|
|
199
224
|
"imageUrl": "/placeholder.svg",
|
|
200
|
-
"category": "
|
|
201
|
-
"badge":
|
|
225
|
+
"category": "Portfolio",
|
|
226
|
+
"badge": "New",
|
|
202
227
|
"isAvailable": true
|
|
203
228
|
}
|
|
204
229
|
]
|
|
@@ -206,16 +231,16 @@
|
|
|
206
231
|
"media": {},
|
|
207
232
|
"seo": null,
|
|
208
233
|
"siteInstance": {
|
|
209
|
-
"id": "
|
|
210
|
-
"slug": "
|
|
211
|
-
"domain": "
|
|
212
|
-
"subdomain": "
|
|
234
|
+
"id": "deneb-portfolio-showcase-instance",
|
|
235
|
+
"slug": "deneb-portfolio-showcase",
|
|
236
|
+
"domain": "deneb-showcase.fivora.site",
|
|
237
|
+
"subdomain": "deneb-showcase",
|
|
213
238
|
"customDomain": null,
|
|
214
|
-
"liveUrl": "https://
|
|
239
|
+
"liveUrl": "https://deneb-showcase.fivora.site"
|
|
215
240
|
},
|
|
216
241
|
"api": {
|
|
217
242
|
"baseUrl": "https://api.fivora.site",
|
|
218
|
-
"catalogUrl": "https://api.fivora.site/site-catalog/
|
|
243
|
+
"catalogUrl": "https://api.fivora.site/site-catalog/deneb-portfolio-showcase/live-data",
|
|
219
244
|
"contactUrl": "https://api.fivora.site/site-contact",
|
|
220
245
|
"analyticsUrl": "https://api.fivora.site/site-analytics/page-view"
|
|
221
246
|
}
|