divhunt 2.0.0

package/addons/render/elements/front/items/self/layout/hero/styles/base.css

@@ -0,0 +1,81 @@
+.e-4e0ccf0 > .holder
+{
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	padding: calc(var(--dh-spacing-l) * 3) var(--dh-spacing-l);
+	transition: all 0.2s;
+}
+
+.e-4e0ccf0 > .holder > .content
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--dh-spacing-m);
+	max-width: 800px;
+}
+
+.e-4e0ccf0 > .holder > .content > h1
+{
+	margin: 0;
+	font-size: calc(var(--dh-size-l) * 2);
+	font-weight: 700;
+	color: var(--dh-text-1);
+	line-height: 1.1;
+	letter-spacing: -0.02em;
+}
+
+.e-4e0ccf0 > .holder > .content > h1 > span
+{
+	color: var(--dh-brand);
+}
+
+.e-4e0ccf0 > .holder > .content > p
+{
+	margin: 0;
+	font-size: var(--dh-size-m);
+	color: var(--dh-text-2);
+	line-height: 1.6;
+	max-width: 600px;
+}
+
+.e-4e0ccf0 > .holder > .content > .actions
+{
+	display: flex;
+	gap: var(--dh-spacing-s);
+	margin-top: var(--dh-spacing-s);
+}
+
+.e-4e0ccf0 > .holder > .content > .stats
+{
+	display: flex;
+	gap: var(--dh-spacing-l);
+	margin-top: var(--dh-spacing-m);
+}
+
+.e-4e0ccf0 > .holder > .content > .stats > .stat
+{
+	display: flex;
+	align-items: center;
+	gap: var(--dh-spacing-x);
+	font-size: var(--dh-size-s);
+	color: var(--dh-text-2);
+	transition: all 0.2s;
+}
+
+.e-4e0ccf0 > .holder > .content > .stats > .stat:hover
+{
+	color: var(--dh-text-1);
+}
+
+.e-4e0ccf0 > .holder > .content > .stats > .stat > i
+{
+	font-size: var(--dh-size-m);
+	color: var(--dh-brand);
+}
+
+.e-4e0ccf0 > .holder > .content > .stats > .stat > strong
+{
+	color: var(--dh-text-1);
+	font-weight: 600;
+}

package/addons/render/elements/front/items/self/layout/hero/styles/sizes.css

@@ -0,0 +1,24 @@
+.e-4e0ccf0 > .holder[variant*="size-s"]
+{
+	padding: var(--dh-spacing-l) var(--dh-spacing-m);
+}
+
+.e-4e0ccf0 > .holder[variant*="size-s"] > .content > h1
+{
+	font-size: calc(var(--dh-size-l) * 1.5);
+}
+
+.e-4e0ccf0 > .holder[variant*="size-l"]
+{
+	padding: calc(var(--dh-spacing-l) * 3) calc(var(--dh-spacing-l) * 2);
+}
+
+.e-4e0ccf0 > .holder[variant*="size-l"] > .content > h1
+{
+	font-size: calc(var(--dh-size-l) * 2.5);
+}
+
+.e-4e0ccf0 > .holder[variant*="size-l"] > .content > p
+{
+	font-size: var(--dh-size-l);
+}

package/addons/render/elements/front/items/self/layout/hero/styles/variants.css

@@ -0,0 +1,98 @@
+.e-4e0ccf0 > .holder[variant*="left"]
+{
+	align-items: flex-start;
+}
+
+.e-4e0ccf0 > .holder[variant*="left"] > .content
+{
+	align-items: flex-start;
+	text-align: left;
+}
+
+.e-4e0ccf0 > .holder[variant*="center"]
+{
+	align-items: center;
+}
+
+.e-4e0ccf0 > .holder[variant*="center"] > .content
+{
+	align-items: center;
+	text-align: center;
+}
+
+.e-4e0ccf0 > .holder[variant*="center"] > .content > p
+{
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.e-4e0ccf0 > .holder[variant*="right"]
+{
+	align-items: flex-end;
+}
+
+.e-4e0ccf0 > .holder[variant*="right"] > .content
+{
+	align-items: flex-end;
+	text-align: right;
+}
+
+.e-4e0ccf0 > .holder[variant*="bg-1"]
+{
+	background: var(--dh-bg-1);
+}
+
+.e-4e0ccf0 > .holder[variant*="bg-2"]
+{
+	background: var(--dh-bg-2);
+}
+
+.e-4e0ccf0 > .holder[variant*="bg-3"]
+{
+	background: var(--dh-bg-3);
+}
+
+.e-4e0ccf0 > .holder[variant*="bg-4"]
+{
+	background: var(--dh-bg-4);
+}
+
+.e-4e0ccf0 > .holder[variant*="bg-1"]:hover
+{
+	background: var(--dh-bg-1-hover);
+}
+
+.e-4e0ccf0 > .holder[variant*="bg-2"]:hover
+{
+	background: var(--dh-bg-2-hover);
+}
+
+.e-4e0ccf0 > .holder[variant*="bg-3"]:hover
+{
+	background: var(--dh-bg-3-hover);
+}
+
+.e-4e0ccf0 > .holder[variant*="bg-4"]:hover
+{
+	background: var(--dh-bg-4-hover);
+}
+
+.e-4e0ccf0 > .holder[variant*="bg-1"][variant*="border"]
+{
+	border: 1px solid var(--dh-bg-1-border);
+}
+
+.e-4e0ccf0 > .holder[variant*="bg-2"][variant*="border"]
+{
+	border: 1px solid var(--dh-bg-2-border);
+}
+
+.e-4e0ccf0 > .holder[variant*="bg-3"][variant*="border"]
+{
+	border: 1px solid var(--dh-bg-3-border);
+}
+
+.e-4e0ccf0 > .holder[variant*="bg-4"][variant*="border"]
+{
+	border: 1px solid var(--dh-bg-4-border);
+}

package/addons/render/elements/front/items/self/navigation/breadcrumb/addon/_class/addon.js

@@ -0,0 +1,9 @@
+const breadcrumb = divhunt.Addon('breadcrumb', (addon) =>
+{
+	addon.Field('id', ['string']);
+	addon.Field('order', ['number', 0]);
+	addon.Field('icon', ['string', '']);
+	addon.Field('label', ['string', 'Page']);
+	addon.Field('href', ['string', '#']);
+	addon.Field('condition', ['boolean', true]);
+});

package/addons/render/elements/front/items/self/navigation/breadcrumb/addon/functions/get.js

@@ -0,0 +1,22 @@
+breadcrumb.Fn('get', function()
+{
+	return Object.values(breadcrumb.Items())
+		.filter(item =>
+		{
+			if (item.Get('condition') === false)
+			{
+				return false;
+			}
+
+			return true;
+		})
+		.sort((a, b) => a.Get('order') - b.Get('order'))
+		.map(item =>
+		({
+			id: item.Get('id'),
+			order: item.Get('order'),
+			icon: item.Get('icon'),
+			label: item.Get('label'),
+			href: item.Get('href')
+		}));
+});

package/addons/render/elements/front/items/self/navigation/breadcrumb/breadcrumb.css

@@ -0,0 +1,13 @@
+.e-67186a99 > .holder
+{
+	display: flex;
+	align-items: center;
+	gap: var(--dh-spacing-s);
+}
+
+.e-67186a99 > .holder > .items
+{
+	display: flex;
+	align-items: center;
+	gap: var(--dh-spacing-x);
+}

package/addons/render/elements/front/items/self/navigation/breadcrumb/breadcrumb.js

@@ -0,0 +1,51 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+	id: 'breadcrumb',
+	icon: 'arrow_forward',
+	name: 'Breadcrumb',
+	description: 'Breadcrumb navigation component for displaying current page hierarchy.',
+	category: 'Navigation',
+	author: 'Divhunt',
+	config: {
+		variant: {
+			type: 'array',
+			value: [],
+			options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border']
+		},
+		size: {
+			type: 'string',
+			value: 'm',
+			options: ['s', 'm', 'l']
+		}
+	},
+	render: function()
+	{
+		this.items = breadcrumb.Fn('get');
+
+		const update = () =>
+		{
+			this.items = breadcrumb.Fn('get');
+		};
+
+		breadcrumb.ItemOn('added', update, 'breadcrumb');
+		breadcrumb.ItemOn('removed', update, 'breadcrumb');
+		breadcrumb.ItemOn('modified', update, 'breadcrumb');
+
+		return `
+			<div class="holder" :variant="variant.join(' ')" :size="size">
+				<slot name="start"></slot>
+				<div class="items" dh-if="items.length > 0">
+					<e-menu dh-for="item in items"
+						:icon="item.icon"
+						:label="item.label"
+						:href="item.href"
+						:active="item.active"
+						:variant="item.variant">
+					</e-menu>
+				</div>
+				<slot name="end"></slot>
+			</div>
+		`;
+	}
+});

package/addons/render/elements/front/items/self/navigation/footer/addon/_class/addon.js

@@ -0,0 +1,11 @@
+const footer = divhunt.Addon('footer', (addon) =>
+{
+	addon.Field('id', ['string']);
+	addon.Field('type', ['string', 'link']);
+	addon.Field('group', ['string', '']);
+	addon.Field('order', ['number', 0]);
+	addon.Field('icon', ['string', '']);
+	addon.Field('label', ['string', 'Link']);
+	addon.Field('href', ['string', '#']);
+	addon.Field('condition', ['boolean', true]);
+});

package/addons/render/elements/front/items/self/navigation/footer/addon/functions/columns.js

@@ -0,0 +1,11 @@
+footer.Fn('columns', function()
+{
+	const groups = footer.Fn('get', { type: 'column' });
+
+	return groups.map(group =>
+	({
+		id: group.id,
+		label: group.label,
+		links: footer.Fn('get', { type: 'link', group: group.id })
+	}));
+});

package/addons/render/elements/front/items/self/navigation/footer/addon/functions/get.js

@@ -0,0 +1,34 @@
+footer.Fn('get', function(filter = {})
+{
+	return Object.values(footer.Items())
+		.filter(item =>
+		{
+			if (item.Get('condition') === false)
+			{
+				return false;
+			}
+
+			if (filter.type && item.Get('type') !== filter.type)
+			{
+				return false;
+			}
+
+			if (filter.group && item.Get('group') !== filter.group)
+			{
+				return false;
+			}
+
+			return true;
+		})
+		.sort((a, b) => a.Get('order') - b.Get('order'))
+		.map(item =>
+		({
+			id: item.Get('id'),
+			type: item.Get('type'),
+			group: item.Get('group'),
+			order: item.Get('order'),
+			icon: item.Get('icon'),
+			label: item.Get('label'),
+			href: item.Get('href')
+		}));
+});

package/addons/render/elements/front/items/self/navigation/footer/footer.css

@@ -0,0 +1,283 @@
+.e-52bf54cf > .holder
+{
+	position: relative;
+	background: transparent;
+	transition: all 0.2s;
+}
+
+.e-52bf54cf > .holder[variant*="bg-1"]
+{
+	background: var(--dh-bg-1);
+}
+
+.e-52bf54cf > .holder[variant*="bg-2"]
+{
+	background: var(--dh-bg-2);
+}
+
+.e-52bf54cf > .holder[variant*="bg-3"]
+{
+	background: var(--dh-bg-3);
+}
+
+.e-52bf54cf > .holder[variant*="bg-4"]
+{
+	background: var(--dh-bg-4);
+}
+
+.e-52bf54cf > .holder[variant*="brand"]
+{
+	background: var(--dh-brand);
+	color: white;
+}
+
+.e-52bf54cf > .holder[variant*="border"]
+{
+	border-top: 1px solid var(--dh-bg-3-border);
+}
+
+.e-52bf54cf > .holder[variant*="size-s"]
+{
+	padding: calc(var(--dh-spacing-l) * 2) 0;
+}
+
+.e-52bf54cf > .holder[variant*="size-m"]
+{
+	padding: calc(var(--dh-spacing-l) * 3) 0;
+}
+
+.e-52bf54cf > .holder[variant*="size-l"]
+{
+	padding: calc(var(--dh-spacing-l) * 4) 0;
+}
+
+.e-52bf54cf > .holder:not([variant*="size-"])
+{
+	padding: calc(var(--dh-spacing-l) * 3) 0;
+}
+
+.e-52bf54cf .main
+{
+	display: grid;
+	grid-template-columns: 1fr 3fr;
+	gap: calc(var(--dh-spacing-l) * 2);
+	margin-bottom: calc(var(--dh-spacing-l) * 2);
+}
+
+.e-52bf54cf .brand
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--dh-spacing-m);
+}
+
+.e-52bf54cf .brand > h3
+{
+	font-size: var(--dh-size-l);
+	font-weight: 700;
+	color: var(--dh-text-1);
+	margin: 0;
+}
+
+.e-52bf54cf .brand > .tagline
+{
+	font-size: var(--dh-size-m);
+	color: var(--dh-text-2);
+	line-height: 1.6;
+	margin: 0;
+}
+
+.e-52bf54cf .contact
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--dh-spacing-s);
+	margin-top: var(--dh-spacing-s);
+}
+
+.e-52bf54cf .contact > .item
+{
+	display: flex;
+	align-items: center;
+	gap: var(--dh-spacing-s);
+	font-size: var(--dh-size-s);
+	color: var(--dh-text-2);
+	text-decoration: none;
+	transition: all 0.2s;
+}
+
+.e-52bf54cf .contact > .item:hover
+{
+	color: var(--dh-brand);
+}
+
+.e-52bf54cf .contact > .item > i
+{
+	font-size: 18px;
+	color: var(--dh-text-2);
+}
+
+.e-52bf54cf .columns
+{
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+	gap: calc(var(--dh-spacing-l) * 1.5);
+}
+
+.e-52bf54cf .column
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--dh-spacing-m);
+}
+
+.e-52bf54cf .column > h6
+{
+	font-size: var(--dh-size-s);
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+	color: var(--dh-text-1);
+	margin: 0;
+}
+
+.e-52bf54cf .column > a
+{
+	font-size: var(--dh-size-m);
+	color: var(--dh-text-2);
+	text-decoration: none;
+	transition: all 0.2s;
+}
+
+.e-52bf54cf .column > a:hover
+{
+	color: var(--dh-brand);
+	transform: translateX(2px);
+}
+
+.e-52bf54cf .divider
+{
+	height: 1px;
+	background: var(--dh-bg-3-border);
+	margin: calc(var(--dh-spacing-l) * 2) 0;
+}
+
+.e-52bf54cf .bottom
+{
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: var(--dh-spacing-l);
+}
+
+.e-52bf54cf .left
+{
+	display: flex;
+	align-items: center;
+	gap: var(--dh-spacing-l);
+	flex-wrap: wrap;
+}
+
+.e-52bf54cf .copyright
+{
+	font-size: var(--dh-size-s);
+	color: var(--dh-text-2);
+}
+
+.e-52bf54cf .badges
+{
+	display: flex;
+	gap: var(--dh-spacing-m);
+	flex-wrap: wrap;
+}
+
+.e-52bf54cf .badge
+{
+	display: flex;
+	align-items: center;
+	gap: var(--dh-spacing-x);
+	padding: var(--dh-spacing-x) var(--dh-spacing-s);
+	background: var(--dh-bg-3);
+	border-radius: var(--dh-radius-s);
+	font-size: 11px;
+	color: var(--dh-text-2);
+	transition: all 0.2s;
+}
+
+.e-52bf54cf .badge:hover
+{
+	background: var(--dh-bg-4);
+}
+
+.e-52bf54cf .badge > i
+{
+	font-size: 14px;
+	color: var(--dh-green);
+}
+
+.e-52bf54cf .socials
+{
+	display: flex;
+	gap: var(--dh-spacing-s);
+}
+
+.e-52bf54cf .socials > a
+{
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 36px;
+	height: 36px;
+	border-radius: var(--dh-radius-m);
+	background: var(--dh-bg-3);
+	color: var(--dh-text-2);
+	text-decoration: none;
+	transition: all 0.2s;
+}
+
+.e-52bf54cf .socials > a:hover
+{
+	background: var(--dh-brand);
+	color: white;
+	transform: translateY(-2px);
+}
+
+.e-52bf54cf .socials > a > i
+{
+	font-size: 18px;
+}
+
+@media (max-width: 1024px)
+{
+	.e-52bf54cf .main
+	{
+		grid-template-columns: 1fr;
+		gap: calc(var(--dh-spacing-l) * 2);
+	}
+
+	.e-52bf54cf .columns
+	{
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
+
+@media (max-width: 640px)
+{
+	.e-52bf54cf .columns
+	{
+		grid-template-columns: 1fr;
+	}
+
+	.e-52bf54cf .bottom
+	{
+		flex-direction: column;
+		align-items: flex-start;
+		gap: var(--dh-spacing-m);
+	}
+
+	.e-52bf54cf .left
+	{
+		flex-direction: column;
+		align-items: flex-start;
+	}
+}