@onetype/framework 2.0.22 → 2.0.25

package/lib/items/elements/sections/footer/footer.css

@@ -0,0 +1,205 @@
+.e-71d10544
+{
+	display: flex;
+	width: 100%;
+}
+
+.e-71d10544 > .holder
+{
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	border-top: 1px solid var(--ot-bg-2-border);
+}
+
+/* Inner */
+
+.e-71d10544 > .holder > .inner
+{
+	display: flex;
+	justify-content: space-between;
+	gap: var(--ot-spacing-l);
+	max-width: 1200px;
+	width: 100%;
+	margin: 0 auto;
+	padding: 60px 32px 40px;
+}
+
+/* Brand */
+
+.e-71d10544 > .holder > .inner > .brand
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--ot-spacing-s);
+	max-width: 320px;
+}
+
+.e-71d10544 > .holder > .inner > .brand > .logo
+{
+	display: flex;
+	align-items: center;
+	text-decoration: none;
+}
+
+.e-71d10544 > .holder > .inner > .brand > .logo > .logo-icon
+{
+	height: 20px;
+}
+
+.e-71d10544 > .holder > .inner > .brand > .tagline
+{
+	font-size: var(--ot-size-m);
+	color: var(--ot-text-2);
+	line-height: 1.6;
+	margin: var(--ot-spacing-x) 0 0;
+}
+
+/* Columns */
+
+.e-71d10544 > .holder > .inner > .columns
+{
+	display: flex;
+	gap: 80px;
+}
+
+.e-71d10544 > .holder > .inner > .columns > .column
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--ot-spacing-s);
+}
+
+.e-71d10544 > .holder > .inner > .columns > .column > .column-title
+{
+	font-size: var(--ot-size-s);
+	font-weight: 600;
+	color: var(--ot-text-1);
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+	margin: 0 0 var(--ot-spacing-x) 0;
+}
+
+.e-71d10544 > .holder > .inner > .columns > .column > .link
+{
+	font-size: var(--ot-size-m);
+	color: var(--ot-text-2);
+	text-decoration: none;
+	transition: color 0.15s ease;
+}
+
+.e-71d10544 > .holder > .inner > .columns > .column > .link:hover
+{
+	color: var(--ot-text-1);
+}
+
+/* Integrations */
+
+.e-71d10544 > .holder > .inner > .brand > .integrations
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--ot-spacing-s);
+	margin-top: var(--ot-spacing-s);
+}
+
+.e-71d10544 > .holder > .inner > .brand > .integrations > .integrations-label
+{
+	font-size: var(--ot-size-s);
+	font-weight: 600;
+	color: var(--ot-text-2);
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+}
+
+.e-71d10544 > .holder > .inner > .brand > .integrations > .integrations-list
+{
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 6px;
+}
+
+.e-71d10544 > .holder > .inner > .brand > .integrations > .integrations-list > .integration
+{
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	padding: 4px 10px;
+	border-radius: 6px;
+	background: var(--ot-bg-2);
+	border: 1px solid var(--ot-bg-2-border);
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-2);
+	text-decoration: none;
+	transition: color 0.15s ease, border-color 0.15s ease;
+}
+
+.e-71d10544 > .holder > .inner > .brand > .integrations > .integrations-list > .integration > i
+{
+	font-size: 14px;
+	color: var(--ot-text-2);
+}
+
+.e-71d10544 > .holder > .inner > .brand > .integrations > .integrations-list > .integration.more
+{
+	color: var(--ot-brand);
+	cursor: pointer;
+}
+
+.e-71d10544 > .holder > .inner > .brand > .integrations > .integrations-list > .integration.more > i
+{
+	color: var(--ot-brand);
+}
+
+.e-71d10544 > .holder > .inner > .brand > .integrations > .integrations-list > .integration.more:hover
+{
+	border-color: var(--ot-brand);
+}
+
+/* Badges */
+
+.e-71d10544 > .holder > .badges
+{
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-wrap: wrap;
+	gap: var(--ot-spacing-m);
+	width: 100%;
+	padding: var(--ot-spacing-m) 32px;
+	border-top: 1px solid var(--ot-bg-2-border);
+}
+
+.e-71d10544 > .holder > .badges > .badge
+{
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-2);
+}
+
+.e-71d10544 > .holder > .badges > .badge > i
+{
+	font-size: 16px;
+	color: var(--ot-brand);
+}
+
+/* Bottom */
+
+.e-71d10544 > .holder > .bottom
+{
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	padding: var(--ot-spacing-m) 32px;
+	border-top: 1px solid var(--ot-bg-2-border);
+}
+
+.e-71d10544 > .holder > .bottom > .copyright
+{
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-2);
+}

package/lib/items/elements/sections/footer/footer.js

@@ -0,0 +1,109 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'sections-footer',
+		icon: 'dock_to_bottom',
+		name: 'Footer',
+		description: 'Site footer with logo, link columns, integrations, trust badges, and copyright.',
+		category: 'Section',
+		author: 'OneType',
+		config: {
+			columns: {
+				type: 'array',
+				value: [
+					{
+						title: 'Product',
+						links: [
+							{ label: 'Transforms', href: '/#transforms' },
+							{ label: 'Features', href: '/#features' },
+							{ label: 'Pricing', href: '/pricing' },
+							{ label: 'Changelog', href: '/changelog' }
+						]
+					},
+					{
+						title: 'Resources',
+						links: [
+							{ label: 'Documentation', href: 'https://docs.onetype.ai/transforms' },
+							{ label: 'GitHub', href: 'https://github.com/nicely-gg/transforms' },
+							{ label: 'npm', href: 'https://www.npmjs.com/package/@nicely-gg/transforms' },
+							{ label: 'Contact', href: 'https://onetype.ai/contact' }
+						]
+					},
+					{
+						title: 'Legal',
+						links: [
+							{ label: 'Terms of Service', href: 'https://onetype.ai/legal/terms' },
+							{ label: 'Privacy Policy', href: 'https://onetype.ai/legal/privacy' },
+							{ label: 'Cookie Policy', href: 'https://onetype.ai/legal/cookies' },
+							{ label: 'Developer Agreement', href: 'https://onetype.ai/legal/developer' },
+							{ label: 'Data Processing', href: 'https://onetype.ai/legal/dpa' },
+							{ label: 'Acceptable Use', href: 'https://onetype.ai/legal/aup' },
+							{ label: 'Subprocessors', href: 'https://onetype.ai/legal/subprocessors' }
+						]
+					}
+				]
+			},
+			platforms: {
+				type: 'array',
+				value: [
+					{ icon: 'language', label: 'Any HTML' },
+					{ icon: 'web', label: 'Webflow' },
+					{ icon: 'design_services', label: 'Framer' },
+					{ icon: 'article', label: 'WordPress' },
+					{ icon: 'shopping_cart', label: 'Shopify' },
+					{ icon: 'storefront', label: 'Squarespace' }
+				]
+			},
+			badges: {
+				type: 'array',
+				value: [
+					{ icon: 'code_off', label: 'Zero Dependencies' },
+					{ icon: 'speed', label: 'Lazy Loaded' },
+					{ icon: 'devices', label: 'All Platforms' },
+					{ icon: 'open_in_new', label: 'Open Source Core' },
+					{ icon: 'verified', label: 'Web Components' }
+				]
+			}
+		},
+		render: function()
+		{
+			this.year = new Date().getFullYear();
+
+			return `
+				<footer class="holder">
+					<div class="inner">
+						<div class="brand">
+							<a class="logo" href="/">
+								<img class="logo-icon" src="https://global.divhunt.com/bd8ffd2fc9cf3a7e81b3326ac63a7cfe_4406.svg" alt="OneType" />
+							</a>
+							<p class="tagline">Custom HTML tags that become interactive components. One script, one tag — works on any platform.</p>
+							<div class="integrations">
+								<div class="integrations-list">
+									<div ot-for="item in platforms" class="integration">
+										<i>{{ item.icon }}</i>
+										<span>{{ item.label }}</span>
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="columns">
+							<div ot-for="col in columns" class="column">
+								<h4 class="column-title">{{ col.title }}</h4>
+								<a ot-for="link in col.links" class="link" :href="link.href">{{ link.label }}</a>
+							</div>
+						</div>
+					</div>
+					<div class="badges">
+						<div ot-for="badge in badges" class="badge">
+							<i>{{ badge.icon }}</i>
+							<span>{{ badge.label }}</span>
+						</div>
+					</div>
+					<div class="bottom">
+						<span class="copyright">&copy; {{ year }} OneType. All rights reserved.</span>
+					</div>
+				</footer>
+			`;
+		}
+	});
+});

package/lib/items/elements/sections/hero/hero.css

@@ -0,0 +1,100 @@
+.e-59eb0a1d
+{
+	display: flex;
+}
+
+.e-59eb0a1d > .holder
+{
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	width: 100%;
+	padding: 80px var(--ot-spacing-m) 60px;
+	text-align: center;
+	gap: var(--ot-spacing-m);
+}
+
+/* Badge */
+
+.e-59eb0a1d > .holder > .badge
+{
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	padding: 6px 14px;
+	border-radius: 100px;
+	border: 1px solid var(--ot-bg-2-border);
+	background: var(--ot-bg-2);
+	font-size: var(--ot-size-s);
+	font-weight: 500;
+	color: var(--ot-text-2);
+}
+
+.e-59eb0a1d > .holder > .badge > i
+{
+	font-size: 14px;
+	color: var(--ot-brand);
+}
+
+/* Title */
+
+.e-59eb0a1d > .holder > .title
+{
+	font-size: 52px;
+	font-weight: 800;
+	line-height: 1.1;
+	color: var(--ot-text-1);
+	letter-spacing: -1px;
+	margin: 0;
+}
+
+.e-59eb0a1d > .holder > .title > .highlight
+{
+	color: var(--ot-brand);
+}
+
+/* Description */
+
+.e-59eb0a1d > .holder > .description
+{
+	max-width: 480px;
+	font-size: var(--ot-size-m);
+	line-height: 1.6;
+	color: var(--ot-text-2);
+	margin: 0;
+}
+
+/* Buttons */
+
+.e-59eb0a1d > .holder > .buttons
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-s);
+	margin-top: var(--ot-spacing-s);
+}
+
+/* Trust */
+
+.e-59eb0a1d > .holder > .trust
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-m);
+	margin-top: var(--ot-spacing-x);
+}
+
+.e-59eb0a1d > .holder > .trust > .trust-item
+{
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-2);
+}
+
+.e-59eb0a1d > .holder > .trust > .trust-item > i
+{
+	font-size: 14px;
+	color: var(--ot-green);
+}

package/lib/items/elements/sections/hero/hero.js

@@ -0,0 +1,54 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'sections-hero',
+		icon: 'star',
+		name: 'Hero',
+		description: 'Hero section with badge, heading, description, and CTA buttons.',
+		category: 'Component',
+		author: 'OneType',
+		config: {
+			badge: {
+				type: 'string',
+				value: 'Interactive HTML Components'
+			},
+			title: {
+				type: 'string',
+				value: 'One tag.'
+			},
+			highlight: {
+				type: 'string',
+				value: 'Zero config.'
+			},
+			description: {
+				type: 'string',
+				value: 'Drop a custom HTML tag, get an interactive component. Swiper, tabs, accordion, modal — works on any platform. No build tools, no JavaScript required.'
+			},
+			buttons: {
+				type: 'array',
+				value: [
+					{ text: 'Get Started', icon: 'arrow_forward', href: '#get-started', variant: 'brand' },
+					{ text: 'View on GitHub', icon: 'code', href: 'https://github.com/nicely-gg/transforms', variant: 'ghost border' }
+				]
+			}
+		},
+		render: function()
+		{
+			return `
+				<div class="holder">
+					<div ot-if="badge" class="badge"><i>widgets</i> {{ badge }}</div>
+					<h1 class="title">{{ title }}<br><span class="highlight">{{ highlight }}</span></h1>
+					<p ot-if="description" class="description">{{ description }}</p>
+					<div ot-if="buttons.length" class="buttons">
+						<e-button ot-for="btn in buttons" :text="btn.text" :icon="btn.icon" :href="btn.href" :variant="[btn.variant, 'size-m']"></e-button>
+					</div>
+					<div class="trust">
+						<span class="trust-item"><i>check_circle</i> Works everywhere</span>
+						<span class="trust-item"><i>check_circle</i> Zero dependencies</span>
+						<span class="trust-item"><i>check_circle</i> Free tier available</span>
+					</div>
+				</div>
+			`;
+		}
+	});
+});

package/lib/items/elements/sections/navbar/navbar.css

@@ -0,0 +1,80 @@
+.e-7eb56bb9
+{
+	display: flex;
+}
+
+.e-7eb56bb9 > .holder
+{
+	display: flex;
+	align-items: center;
+	width: 100%;
+	height: 48px;
+	padding: 0 var(--ot-spacing-m);
+	background: var(--ot-bg-1);
+	border-bottom: 1px solid var(--ot-bg-2-border);
+}
+
+/* Logo */
+
+.e-7eb56bb9 > .holder > .logo
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-s);
+	text-decoration: none;
+	color: var(--ot-text-1);
+	flex-shrink: 0;
+}
+
+.e-7eb56bb9 > .holder > .logo > .logo-icon
+{
+	height: 16px;
+}
+
+
+/* Tabs */
+
+.e-7eb56bb9 > .holder > .tabs
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-x);
+	margin-left: var(--ot-spacing-l);
+	height: 100%;
+}
+
+.e-7eb56bb9 > .holder .tab
+{
+	display: flex;
+	align-items: center;
+	height: 100%;
+	gap: 6px;
+	padding: 0 var(--ot-spacing-s);
+	text-decoration: none;
+	white-space: nowrap;
+	transition: color 0.2s ease, background 0.2s ease;
+	font-weight: 500;
+	color: var(--ot-text-2);
+}
+
+.e-7eb56bb9 > .holder .tab > i
+{
+	font-size: 16px;
+}
+
+.e-7eb56bb9 > .holder .tab:hover
+{
+	color: var(--ot-text-1);
+	background: var(--ot-bg-2);
+}
+
+/* Right */
+
+.e-7eb56bb9 > .holder > .right
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-s);
+	margin-left: auto;
+	height: 100%;
+}

package/lib/items/elements/sections/navbar/navbar.js

@@ -0,0 +1,42 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'sections-navbar',
+		icon: 'menu',
+		name: 'Navbar',
+		description: 'Top navigation bar with logo and links.',
+		category: 'Section',
+		author: 'OneType',
+		config: {
+			items: {
+				type: 'array',
+				value: [
+					{ icon: 'widgets', label: 'Transforms', href: '/transforms', position: 'left' },
+					{ icon: 'payments', label: 'Pricing', href: '/pricing', position: 'left' },
+					{ icon: 'menu_book', label: 'Docs', href: 'https://docs.onetype.ai/transforms', position: 'left' },
+					{ icon: 'code', label: 'GitHub', href: 'https://github.com/nicely-gg/transforms', position: 'right' },
+					{ icon: 'arrow_forward', label: 'Get Started', href: '/get-started', position: 'right' }
+				]
+			}
+		},
+		render: function()
+		{
+			this.left = this.items.filter(i => i.position === 'left');
+			this.right = this.items.filter(i => i.position === 'right');
+
+			return `
+				<nav class="holder">
+					<a class="logo" href="/">
+						<img class="logo-icon" src="https://global.divhunt.com/bd8ffd2fc9cf3a7e81b3326ac63a7cfe_4406.svg" alt="OneType" />
+					</a>
+					<div class="tabs">
+						<a ot-for="item in left" class="tab" :href="item.href"><i>{{ item.icon }}</i> {{ item.label }}</a>
+					</div>
+					<div class="right">
+						<a ot-for="item in right" class="tab" :href="item.href"><i>{{ item.icon }}</i> {{ item.label }}</a>
+					</div>
+				</nav>
+			`;
+		}
+	});
+});

package/lib/items/elements/sections/stats/stats.css

@@ -0,0 +1,34 @@
+.e-1d2b5bd6
+{
+	display: flex;
+}
+
+.e-1d2b5bd6 > .holder
+{
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--ot-spacing-l);
+	width: 100%;
+}
+
+.e-1d2b5bd6 > .holder > .item
+{
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--ot-spacing-x);
+}
+
+.e-1d2b5bd6 > .holder > .item > .value
+{
+	font-size: var(--ot-size-l);
+	font-weight: 700;
+	color: var(--ot-brand);
+}
+
+.e-1d2b5bd6 > .holder > .item > .label
+{
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-2);
+}

package/lib/items/elements/sections/stats/stats.js

@@ -0,0 +1,74 @@
+onetype.AddonReady('elements', (elements) =>
+{
+	elements.ItemAdd({
+		id: 'sections-stats',
+		icon: 'bar_chart',
+		name: 'Stats',
+		description: 'Animated statistics row.',
+		category: 'Component',
+		author: 'OneType',
+		config: {
+			items: {
+				type: 'array',
+				value: [
+					{ value: 30, suffix: '+', label: 'Actions' },
+					{ value: 8, suffix: '+', label: 'Integrations' },
+					{ value: 100000, suffix: '+', label: 'Executions' },
+					{ value: 1500, suffix: '+', label: 'Users' }
+				]
+			}
+		},
+		render: function()
+		{
+			this.counts = this.items.map(() => 0);
+
+			this.animate = () =>
+			{
+				const duration = 1500;
+				const start = performance.now();
+
+				const step = (now) =>
+				{
+					const progress = Math.min((now - start) / duration, 1);
+					const ease = 1 - Math.pow(1 - progress, 3);
+
+					this.items.forEach((item, i) =>
+					{
+						this.counts[i] = Math.round(ease * item.value);
+					});
+
+					this.Update();
+
+					if(progress < 1)
+					{
+						requestAnimationFrame(step);
+					}
+				};
+
+				requestAnimationFrame(step);
+			};
+
+			this.format = (num) =>
+			{
+				return num.toLocaleString('en-US');
+			};
+
+			this.display = (index) =>
+			{
+				const item = this.items[index];
+				return (item.prefix || '') + this.format(this.counts[index]) + (item.suffix || '');
+			};
+
+			setTimeout(() => this.animate(), 200);
+
+			return `
+				<div class="holder">
+					<div ot-for="item, index in items" class="item">
+						<span class="value">{{ display(index) }}</span>
+						<span class="label">{{ item.label }}</span>
+					</div>
+				</div>
+			`;
+		}
+	});
+});