Rebuild marketing homepage with aggressive AI-first positioning #4670
5 changed files+808−613
Modifiedsrc/app/(marketing)/layout.tsx+17−22View fileUnifiedSplit
@@ -1,37 +1,28 @@
1import PolishShell from "@/app/_client/PolishShell";
21import type { Metadata } from "next";
32
4/**
5 * Dominat8 Marketing Layout
6 * Marker: SEO_BASELINE_V1
7 *
8 * This controls metadata for marketing routes under (marketing).
9 * It does NOT affect the /app product area unless you copy it there.
10 */
11
123export const metadata: Metadata = {
134 metadataBase: new URL("https://www.dominat8.com"),
145 title: {
15 default: "Dominat8 — The WOW website builder",
16 template: "%s — Dominat8",
6 default: "Dominat8 — Dominate or Be Dominated",
7 template: "%s — Dominat8",
178 },
18 description: "The WOW website builder. Built by AI. Shipped fast. Generate premium sites and publish with confidence.",
9 description:
10 "AI-powered website builder for agencies and developers who refuse to lose. Build in 90 seconds. Deploy in 5. No excuses.",
1911 applicationName: "Dominat8",
2012 openGraph: {
2113 type: "website",
2214 url: "https://www.dominat8.com",
2315 siteName: "Dominat8",
24 title: "Dominat8 — The WOW website builder",
25 description: "Built by AI. Shipped fast. Generate premium sites and publish with confidence.",
26 images: [
27 // Add a real OG image later. Safe placeholder path.
28 { url: "/og.png", width: 1200, height: 630, alt: "Dominat8" },
29 ],
16 title: "Dominat8 — Dominate or Be Dominated",
17 description:
18 "Your competitors are already using AI. 90 seconds to live. 5 seconds to deploy.",
19 images: [{ url: "/og.png", width: 1200, height: 630, alt: "Dominat8" }],
3020 },
3121 twitter: {
3222 card: "summary_large_image",
33 title: "Dominat8 — The WOW website builder",
34 description: "Built by AI. Shipped fast. Generate premium sites and publish with confidence.",
23 title: "Dominat8 — Dominate or Be Dominated",
24 description:
25 "Your competitors are already using AI. 90 seconds to live. 5 seconds to deploy.",
3526 images: ["/og.png"],
3627 },
3728 alternates: {
@@ -39,6 +30,10 @@ export const metadata: Metadata = {
3930 },
4031};
4132
42export default function MarketingLayout({ children }: { children: React.ReactNode }) {
33export default function MarketingLayout({
34 children,
35}: {
36 children: React.ReactNode;
37}) {
4338 return children;
44}
\ No newline at end of file
39}
Modifiedsrc/app/globals.css+190−88View fileUnifiedSplit
@@ -1,125 +1,227 @@
1/* =========================================================
2 DXL-07 Live Optimization Toasts (DXL07_20260128)
3 - Ultra subtle, premium notifications
4 - Kill switch: DXL_TOASTS=0
5 ========================================================= */
6
7html[data-dxl="DXL01_20260128"] .dxl-toasts {
8 position: fixed;
9 right: 14px;
10 bottom: 14px;
11 z-index: 60;
12 display: flex;
13 flex-direction: column;
14 gap: 10px;
15 align-items: flex-end;
16 pointer-events: none; /* toasts are not interactive */
17}
18
19html[data-dxl="DXL01_20260128"] .dxl-toasts__hide {
20 pointer-events: auto;
21 font-size: 11px;
22 letter-spacing: 0.14em;
23 text-transform: uppercase;
24 font-weight: 900;
1@import "tailwindcss";
2
3/* ============================================================
4 DOMINAT8 — Global Design System
5 Accent: Toxic Green #00ff41
6 Background: Near-black #0a0a0a
7 Typography: Space Grotesk 900
8 ============================================================ */
9
10@theme {
11 --color-d8-black: #0a0a0a;
12 --color-d8-darker: #050505;
13 --color-d8-surface: #111111;
14 --color-d8-surface-hover: #1a1a1a;
15 --color-d8-border: rgba(255, 255, 255, 0.08);
16 --color-d8-border-hover: rgba(0, 255, 65, 0.25);
17 --color-d8-green: #00ff41;
18 --color-d8-green-dim: rgba(0, 255, 65, 0.15);
19 --color-d8-green-glow: rgba(0, 255, 65, 0.4);
20 --color-d8-text: #ededed;
21 --color-d8-muted: rgba(237, 237, 237, 0.55);
22 --color-d8-white: #ffffff;
23
24 --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
25 --font-body: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
26 --font-mono: ui-monospace, "SF Mono", "Fira Code", monospace;
27}
2528
26 padding: 8px 10px;
27 border-radius: 999px;
29/* ---- Base resets ---- */
30html {
31 color-scheme: dark;
32 scroll-behavior: smooth;
33}
2834
29 background: rgba(0,0,0,0.35);
30 border: 1px solid rgba(255,255,255,0.12);
31 color: rgba(246,242,255,0.70);
35body {
36 margin: 0;
37 background: var(--color-d8-black);
38 color: var(--color-d8-text);
39 font-family: var(--font-body);
40 -webkit-font-smoothing: antialiased;
41 -moz-osx-font-smoothing: grayscale;
42}
3243
33 backdrop-filter: blur(10px) saturate(1.05);
34 box-shadow: 0 18px 55px rgba(0,0,0,0.45);
44::selection {
45 background: rgba(0, 255, 65, 0.3);
46 color: #fff;
3547}
3648
37@media (hover: hover) and (pointer: fine) {
38 html[data-dxl="DXL01_20260128"] .dxl-toasts__hide:hover {
39 filter: brightness(1.06);
40 transform: translate3d(0,-1px,0);
41 }
49/* ---- Glitch text animation ---- */
50@keyframes glitch {
51 0% { transform: translate(0); }
52 20% { transform: translate(-2px, 2px); }
53 40% { transform: translate(-2px, -2px); }
54 60% { transform: translate(2px, 2px); }
55 80% { transform: translate(2px, -2px); }
56 100% { transform: translate(0); }
57}
58
59@keyframes glitch-skew {
60 0% { transform: skew(0deg); }
61 20% { transform: skew(-1deg); }
62 40% { transform: skew(0.5deg); }
63 60% { transform: skew(-0.5deg); }
64 80% { transform: skew(1deg); }
65 100% { transform: skew(0deg); }
66}
67
68.glitch-text {
69 position: relative;
70 animation: glitch-skew 4s ease-in-out infinite alternate;
4271}
4372
44html[data-dxl="DXL01_20260128"] .dxl-toast {
45 width: min(360px, calc(100vw - 28px));
73.glitch-text::before,
74.glitch-text::after {
75 content: attr(data-text);
76 position: absolute;
77 top: 0;
78 left: 0;
79 width: 100%;
80 height: 100%;
4681 pointer-events: none;
82}
4783
48 border-radius: 16px;
49 padding: 10px 12px;
84.glitch-text::before {
85 color: #00ff41;
86 animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
87 clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
88 opacity: 0.8;
89}
5090
51 background: rgba(0,0,0,0.38);
52 border: 1px solid rgba(255,255,255,0.14);
53 box-shadow: 0 22px 70px rgba(0,0,0,0.55);
91.glitch-text::after {
92 color: #ff0022;
93 animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite reverse;
94 clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
95 opacity: 0.8;
96}
5497
55 backdrop-filter: blur(12px) saturate(1.05);
98/* Glitch only triggers on hover for performance */
99.glitch-text::before,
100.glitch-text::after {
101 opacity: 0;
102 transition: opacity 0.15s;
103}
104.glitch-text:hover::before,
105.glitch-text:hover::after {
106 opacity: 0.8;
107}
56108
57 color: rgba(246,242,255,0.86);
58 font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
109/* ---- Animated grid background ---- */
110@keyframes grid-scroll {
111 0% { transform: translateY(0); }
112 100% { transform: translateY(50px); }
113}
59114
60 animation: dxlToastIn 260ms cubic-bezier(0.16,1,0.30,1) both;
115.grid-bg {
116 position: absolute;
117 inset: 0;
118 overflow: hidden;
119 pointer-events: none;
120 z-index: 0;
61121}
62122
63html[data-dxl="DXL01_20260128"] .dxl-toast__top {
64 display: flex;
65 align-items: center;
66 justify-content: space-between;
67 gap: 10px;
68 margin-bottom: 8px;
123.grid-bg::before {
124 content: "";
125 position: absolute;
126 inset: -50px;
127 background-image:
128 linear-gradient(rgba(0, 255, 65, 0.03) 1px, transparent 1px),
129 linear-gradient(90deg, rgba(0, 255, 65, 0.03) 1px, transparent 1px);
130 background-size: 50px 50px;
131 animation: grid-scroll 8s linear infinite;
69132}
70133
71html[data-dxl="DXL01_20260128"] .dxl-toast__kind {
72 font-size: 10px;
134.grid-bg::after {
135 content: "";
136 position: absolute;
137 inset: 0;
138 background:
139 radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0, 255, 65, 0.08), transparent 70%),
140 radial-gradient(ellipse 60% 40% at 80% 20%, rgba(0, 255, 65, 0.04), transparent 60%);
141 pointer-events: none;
142}
143
144/* ---- Scanline overlay ---- */
145.scanlines::after {
146 content: "";
147 position: absolute;
148 inset: 0;
149 background: repeating-linear-gradient(
150 0deg,
151 transparent,
152 transparent 2px,
153 rgba(0, 0, 0, 0.03) 2px,
154 rgba(0, 0, 0, 0.03) 4px
155 );
156 pointer-events: none;
157 z-index: 1;
158}
159
160/* ---- Neon glow CTA ---- */
161.neon-cta {
162 position: relative;
163 background: #00ff41;
164 color: #0a0a0a;
73165 font-weight: 900;
74 letter-spacing: 0.18em;
75166 text-transform: uppercase;
76 padding: 6px 8px;
77 border-radius: 999px;
78 border: 1px solid rgba(255,255,255,0.12);
79 background: rgba(255,255,255,0.04);
80 color: rgba(246,242,255,0.74);
167 letter-spacing: 0.05em;
168 border: none;
169 cursor: pointer;
170 transition: all 0.2s ease;
171 box-shadow:
172 0 0 20px rgba(0, 255, 65, 0.3),
173 0 0 60px rgba(0, 255, 65, 0.1);
81174}
82175
83html[data-dxl="DXL01_20260128"] .dxl-toast__kind--optimized {
84 border-color: rgba(168,85,247,0.22);
85}
86html[data-dxl="DXL01_20260128"] .dxl-toast__kind--scheduled {
87 border-color: rgba(59,130,246,0.22);
176.neon-cta:hover {
177 box-shadow:
178 0 0 30px rgba(0, 255, 65, 0.5),
179 0 0 80px rgba(0, 255, 65, 0.2),
180 0 0 120px rgba(0, 255, 65, 0.1);
181 transform: translateY(-1px);
88182}
89html[data-dxl="DXL01_20260128"] .dxl-toast__kind--published {
90 border-color: rgba(34,197,94,0.22);
183
184/* ---- Neon border cards ---- */
185.neon-border {
186 border: 1px solid rgba(255, 255, 255, 0.06);
187 transition: border-color 0.3s ease, box-shadow 0.3s ease;
91188}
92html[data-dxl="DXL01_20260128"] .dxl-toast__kind--bundle {
93 border-color: rgba(250,204,21,0.22);
189
190.neon-border:hover {
191 border-color: rgba(0, 255, 65, 0.3);
192 box-shadow: 0 0 30px rgba(0, 255, 65, 0.06), inset 0 0 30px rgba(0, 255, 65, 0.02);
94193}
95194
96html[data-dxl="DXL01_20260128"] .dxl-toast__ago {
97 font-size: 11px;
98 opacity: 0.62;
99 white-space: nowrap;
195/* ---- Fade-in utility ---- */
196@keyframes fade-up {
197 from { opacity: 0; transform: translateY(20px); }
198 to { opacity: 1; transform: translateY(0); }
100199}
101200
102html[data-dxl="DXL01_20260128"] .dxl-toast__title {
103 font-size: 13px;
104 font-weight: 900;
105 letter-spacing: -0.01em;
106 line-height: 1.2;
201.fade-up {
202 animation: fade-up 0.6s ease-out both;
107203}
108204
109html[data-dxl="DXL01_20260128"] .dxl-toast__detail {
110 margin-top: 6px;
111 font-size: 12px;
112 line-height: 1.45;
113 opacity: 0.72;
205/* ---- Pulse glow for stats ---- */
206@keyframes pulse-glow {
207 0%, 100% { text-shadow: 0 0 20px rgba(0, 255, 65, 0.3); }
208 50% { text-shadow: 0 0 40px rgba(0, 255, 65, 0.6), 0 0 80px rgba(0, 255, 65, 0.2); }
114209}
115210
116@keyframes dxlToastIn {
117 from { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.98); }
118 to { opacity: 1; transform: translate3d(0, 0px, 0) scale(1); }
211.stat-glow {
212 color: #00ff41;
213 animation: pulse-glow 3s ease-in-out infinite;
119214}
120215
216/* ---- Reduced motion ---- */
121217@media (prefers-reduced-motion: reduce) {
122 html[data-dxl="DXL01_20260128"] .dxl-toast {
218 .glitch-text,
219 .glitch-text::before,
220 .glitch-text::after,
221 .grid-bg::before,
222 .stat-glow,
223 .fade-up {
123224 animation: none ;
225 transform: none ;
124226 }
125227}
Modifiedsrc/app/layout.tsx+44−149View fileUnifiedSplit
@@ -1,159 +1,54 @@
1import PolishShell from "@/app/_client/PolishShell";
21import "./globals.css";
32import type { Metadata } from "next";
4import DxlAtmosphere from "@/components/dxl/DxlAtmosphere";
5import DxlStatusPill from "@/components/dxl/DxlStatusPill";
6import DxlWorldPulseSync from "@/components/dxl/DxlWorldPulseSync";
7import DxlToasts from "@/components/dxl/DxlToasts";
83
94export const metadata: Metadata = {
10 title: "Dominat8",
11 description: "AI-powered website factory.",
5 title: {
6 default: "Dominat8 — Dominate or Be Dominated",
7 template: "%s — Dominat8",
8 },
9 description:
10 "AI-powered website builder for agencies and developers who refuse to lose. Build in 90 seconds. Deploy in 5. No excuses.",
11 metadataBase: new URL("https://www.dominat8.com"),
12 openGraph: {
13 type: "website",
14 url: "https://www.dominat8.com",
15 siteName: "Dominat8",
16 title: "Dominat8 — Dominate or Be Dominated",
17 description:
18 "Your competitors are already using AI. 90 seconds to live. 5 seconds to deploy.",
19 images: [{ url: "/og.png", width: 1200, height: 630, alt: "Dominat8" }],
20 },
21 twitter: {
22 card: "summary_large_image",
23 title: "Dominat8 — Dominate or Be Dominated",
24 description:
25 "Your competitors are already using AI. 90 seconds to live. 5 seconds to deploy.",
26 images: ["/og.png"],
27 },
1228};
1329
14export default function RootLayout({ children }: { children: React.ReactNode }) {
30export default function RootLayout({
31 children,
32}: {
33 children: React.ReactNode;
34}) {
1535 return (
16 <html lang="en" data-dxl="DXL01_20260128">
17 <body className="dxl-body min-h-screen bg-black text-white antialiased">
18 <DxlAtmosphere />
19 <div className="dxl-content">
20 {/* D8_PHASE1_LOCK_DEPLOY_STYLING_v1_20260128 */}
21 <PolishShell />
22 <div
23 id="d8-proof"
24 data-stamp="D8_PHASE1_LOCK_DEPLOY_STYLING_v1_20260128"
25 data-git={process.env.VERCEL_GIT_COMMIT_SHA ?? ""}
26 data-deploy={process.env.VERCEL_DEPLOYMENT_ID ?? ""}
27 style={{ position: "absolute", width: 1, height: 1, overflow: "hidden", opacity: 0 }}
36 <html lang="en">
37 <head>
38 <link rel="preconnect" href="https://fonts.googleapis.com" />
39 <link
40 rel="preconnect"
41 href="https://fonts.gstatic.com"
42 crossOrigin="anonymous"
2843 />
29 <div className="d8-app-shell"><main className="d8-app-main"><div className="d8-page d8-surface">{children}</div></main></div>
30 {/* INLINE_FALLBACK_STYLES_V1
31 Goal: If Tailwind/classes fail, the app still looks intentional.
32 Scope: Safe baseline for cockpit + marketing + general UI elements.
33*/}
34<style>{`
35 :root{
36 color-scheme: dark;
37 --bg0:#07070B;
38 --bg1:#0B0B12;
39 --card:rgba(255,255,255,.06);
40 --card2:rgba(255,255,255,.04);
41 --border:rgba(255,255,255,.12);
42 --border2:rgba(255,255,255,.10);
43 --text:#EDEAF7;
44 --muted:rgba(237,234,247,.72);
45 --muted2:rgba(237,234,247,.60);
46 --accent1:rgba(168,85,247,1);
47 --accent2:rgba(59,130,246,1);
48 --shadow:0 30px 90px rgba(0,0,0,.45);
49 --shadow2:0 18px 55px rgba(168,85,247,.18), 0 10px 24px rgba(59,130,246,.10);
50 --r16:16px;
51 --r20:20px;
52 --r24:24px;
53 }
54
55 html,body{height:100%}
56 body{
57 margin:0;
58 background:
59 radial-gradient(1200px 800px at 65% 5%, rgba(168,85,247,.20), rgba(0,0,0,0) 60%),
60 radial-gradient(900px 700px at 15% 20%, rgba(59,130,246,.12), rgba(0,0,0,0) 62%),
61 linear-gradient(180deg, var(--bg0) 0%, var(--bg0) 40%, #05050A 100%);
62 color:var(--text);
63 font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
64 -webkit-font-smoothing: antialiased;
65 -moz-osx-font-smoothing: grayscale;
66 }
67
68 a{color:rgba(200,180,255,.95); text-decoration:none}
69 a:hover{color:rgba(210,210,255,.98); text-decoration:underline}
70
71 /* Generic layout helpers if Tailwind fails */
72 .container, .mx-auto{
73 width:100%;
74 max-width:1160px;
75 margin-left:auto;
76 margin-right:auto;
77 }
78
79 /* Card baseline */
80 .card, .panel, .surface{
81 background: linear-gradient(180deg, var(--card), var(--card2));
82 border:1px solid var(--border);
83 border-radius: var(--r20);
84 box-shadow: var(--shadow);
85 }
86
87 /* Buttons baseline */
88 button, .btn, a.btn{
89 font: inherit;
90 border-radius: 14px;
91 padding: 10px 14px;
92 border: 1px solid var(--border);
93 background: rgba(255,255,255,.04);
94 color: rgba(237,234,247,.90);
95 cursor: pointer;
96 }
97 button:hover, .btn:hover, a.btn:hover{
98 background: rgba(255,255,255,.07);
99 }
100 .btn-primary{
101 background: linear-gradient(90deg, var(--accent1), var(--accent2));
102 color: #07070B !important;
103 box-shadow: var(--shadow2);
104 border: 1px solid rgba(255,255,255,.10);
105 text-decoration:none !important;
106 }
107 .btn-primary:hover{
108 filter: brightness(1.05);
109 }
110
111 /* Inputs baseline (admin/cockpit forms) */
112 input, select, textarea{
113 font: inherit;
114 color: rgba(237,234,247,.92);
115 background: rgba(0,0,0,.32);
116 border: 1px solid var(--border2);
117 border-radius: 14px;
118 padding: 10px 12px;
119 outline: none;
120 }
121 input:focus, select:focus, textarea:focus{
122 border-color: rgba(168,85,247,.55);
123 box-shadow: 0 0 0 4px rgba(168,85,247,.15);
124 }
125 ::placeholder{color: rgba(237,234,247,.45)}
126
127 /* Tables baseline */
128 table{border-collapse:collapse; width:100%}
129 th,td{
130 border-bottom: 1px solid rgba(255,255,255,.08);
131 padding: 10px 10px;
132 text-align:left;
133 color: rgba(237,234,247,.85);
134 }
135 th{color: rgba(237,234,247,.70); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 12px}
136
137 /* Headings baseline */
138 h1{font-size:40px; line-height:1.05; letter-spacing:-.02em; margin: 0}
139 h2{font-size:26px; line-height:1.15; margin: 0}
140 h3{font-size:18px; line-height:1.25; margin: 0}
141 p{color: var(--muted); line-height:1.6}
142
143 /* Soft separators */
144 hr{border:0; border-top:1px solid rgba(255,255,255,.08); margin:18px 0}
145
146 /* If something renders totally naked, this keeps content readable */
147 main{display:block}
148`}</style>
149
150 {process.env.DXL_STATUS_PILL === "0" ? null : <DxlStatusPill />}
151
152 <DxlWorldPulseSync />
153
154 {process.env.DXL_TOASTS === "0" ? null : <DxlToasts />}
155</div>
156 </body>
44 <link
45 href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&display=swap"
46 rel="stylesheet"
47 />
48 </head>
49 <body className="min-h-screen bg-d8-black text-d8-text antialiased font-body">
50 {children}
51 </body>
15752 </html>
15853 );
159}
\ No newline at end of file
54}
Modifiedsrc/app/page.tsx+536−352View fileUnifiedSplit
@@ -1,390 +1,574 @@
1export const dynamic = "force-dynamic";
2export const revalidate = 0;
1import type { Metadata } from "next";
32
4export default function HomePage() {
5 // D8: Keep this intentionally simple and robust.
6 // The real "locked hero" visuals live in the rendered markup below
7 // (inline styles so it can't go plain if Tailwind fails).
3export const metadata: Metadata = {
4 title: "Dominat8 — Dominate or Be Dominated",
5 description:
6 "AI-powered website builder for agencies and developers who refuse to lose. Build in 90 seconds. Deploy in 5.",
7};
8
9/* ============================================================
10 DOMINAT8.COM — THE KILLER MARKETING MACHINE
11 7 sections. Dark. Aggressive. Converts hard.
12 ============================================================ */
13
14function Nav() {
15 return (
16 <nav className="fixed top-0 left-0 right-0 z-50 border-b border-white/[0.06] bg-d8-black/80 backdrop-blur-xl">
17 <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
18 <a href="/" className="flex items-center gap-3 no-underline">
19 <div className="flex h-9 w-9 items-center justify-center bg-d8-green font-display text-lg font-black text-d8-black"
20 style={{ clipPath: "polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%)" }}>
21 D8
22 </div>
23 <span className="font-display text-lg font-black tracking-[0.15em] uppercase text-d8-text">
24 Dominat8
25 </span>
26 </a>
27 <div className="flex items-center gap-6">
28 <a href="#weapons" className="text-sm font-semibold text-d8-muted hover:text-d8-green transition-colors no-underline">
29 Weapons
30 </a>
31 <a href="#proof" className="text-sm font-semibold text-d8-muted hover:text-d8-green transition-colors no-underline">
32 Proof
33 </a>
34 <a href="#pricing" className="text-sm font-semibold text-d8-muted hover:text-d8-green transition-colors no-underline">
35 Pricing
36 </a>
37 <a
38 href="https://dominat8.io/builder"
39 className="neon-cta px-5 py-2.5 text-sm font-black tracking-wide no-underline"
40 style={{ clipPath: "polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%)" }}
41 >
42 START BUILDING
43 </a>
44 </div>
45 </div>
46 </nav>
47 );
48}
49
50/* ---- SECTION 1: HERO ---- */
51function Hero() {
852 return (
9 <main
10 style={{
11 minHeight: "100vh",
12 background:
13 "radial-gradient(1200px 800px at 65% 5%, rgba(168,85,247,0.22), rgba(0,0,0,0) 60%)," +
14 " radial-gradient(900px 700px at 15% 20%, rgba(59,130,246,0.14), rgba(0,0,0,0) 62%)," +
15 " linear-gradient(180deg, #07070B 0%, #07070B 40%, #05050A 100%)",
16 color: "#EDEAF7",
17 fontFamily:
18 "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji'",
19 padding: "28px 16px 56px",
20 }}
21 >
22 <div style={{ width: "100%", maxWidth: 1160, margin: "0 auto" }}>
23 <div
24 style={{
25 display: "flex",
26 alignItems: "center",
27 justifyContent: "space-between",
28 gap: 12,
29 padding: "10px 0 22px",
30 }}
53 <section className="relative min-h-screen flex items-center justify-center overflow-hidden scanlines">
54 <div className="grid-bg" />
55 <div className="relative z-10 mx-auto max-w-5xl px-6 pt-32 pb-24 text-center">
56 <div className="mb-8 inline-flex items-center gap-3 border border-d8-green/20 bg-d8-green/[0.05] px-4 py-2">
57 <span className="inline-block h-2 w-2 rounded-full bg-d8-green animate-pulse" />
58 <span className="font-mono text-xs font-bold uppercase tracking-[0.2em] text-d8-green">
59 AI BUILDER — LIVE
60 </span>
61 </div>
62
63 <h1
64 className="glitch-text font-display text-[clamp(3rem,8vw,6rem)] font-black leading-[0.95] tracking-tight text-d8-text"
65 data-text="YOUR COMPETITORS ARE ALREADY WINNING."
3166 >
67 YOUR COMPETITORS ARE
68 <br />
69 <span className="text-d8-green">ALREADY WINNING.</span>
70 </h1>
71
72 <p className="mx-auto mt-8 max-w-2xl text-lg leading-relaxed text-d8-muted md:text-xl">
73 While you're still deciding, they shipped. Dominat8 builds
74 conversion-first sites in <span className="font-bold text-d8-text">90 seconds</span>.
75 Deploys in <span className="font-bold text-d8-text">5</span>.
76 No excuses. No mercy.
77 </p>
78
79 <div className="mt-12 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
3280 <a
33 href="/"
34 aria-label="Dominat8 Home"
35 style={{
36 display: "flex",
37 alignItems: "center",
38 gap: 10,
39 textDecoration: "none",
40 color: "#F3EEFF",
41 }}
81 href="https://dominat8.io/builder"
82 className="neon-cta px-10 py-4 text-base font-black tracking-widest no-underline"
83 style={{ clipPath: "polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%)" }}
4284 >
43 <div
44 style={{
45 width: 34,
46 height: 34,
47 borderRadius: 12,
48 background:
49 "linear-gradient(135deg, rgba(168,85,247,0.95), rgba(59,130,246,0.75))",
50 boxShadow:
51 "0 10px 30px rgba(168,85,247,0.25), 0 10px 30px rgba(59,130,246,0.12)",
52 border: "1px solid rgba(255,255,255,0.18)",
53 }}
54 />
55 <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.05 }}>
56 <div
57 style={{
58 fontSize: 13,
59 letterSpacing: "0.22em",
60 textTransform: "uppercase",
61 opacity: 0.9,
62 fontWeight: 700,
63 }}
64 >
65 Dominat8
85 DOMINATE NOW
86 </a>
87 <a
88 href="#weapons"
89 className="border border-white/10 bg-white/[0.03] px-8 py-4 text-sm font-bold uppercase tracking-widest text-d8-muted hover:border-d8-green/30 hover:text-d8-green transition-all no-underline"
90 >
91 SEE THE ARSENAL ↓
92 </a>
93 </div>
94
95 <div className="mt-20 flex flex-wrap items-center justify-center gap-x-12 gap-y-4">
96 {[
97 { stat: "10,000+", label: "Sites Deployed" },
98 { stat: "90s", label: "Build Time" },
99 { stat: "0", label: "Apologies" },
100 ].map((s) => (
101 <div key={s.label} className="text-center">
102 <div className="stat-glow font-display text-4xl font-black md:text-5xl">
103 {s.stat}
66104 </div>
67 <div style={{ fontSize: 12, opacity: 0.7, marginTop: 3 }}>
68 AI website builder for conversion-first sites
105 <div className="mt-1 font-mono text-xs uppercase tracking-[0.15em] text-d8-muted">
106 {s.label}
69107 </div>
70108 </div>
71 </a>
72
73 <nav
74 aria-label="Top navigation"
75 style={{
76 display: "flex",
77 alignItems: "center",
78 gap: 14,
79 flexWrap: "wrap",
80 justifyContent: "flex-end",
81 }}
82 >
83 {[
84 { href: "#preview", label: "Preview" },
85 { href: "/templates", label: "Templates" },
86 { href: "/pricing", label: "Pricing" },
87 ].map((l) => (
88 <a
89 key={l.href}
90 href={l.href}
91 style={{
92 fontSize: 13,
93 color: "rgba(237,234,247,0.82)",
94 textDecoration: "none",
95 padding: "8px 10px",
96 borderRadius: 10,
97 border: "1px solid rgba(255,255,255,0.08)",
98 background: "rgba(255,255,255,0.03)",
99 }}
100 >
101 {l.label}
102 </a>
103 ))}
104 </nav>
109 ))}
105110 </div>
111 </div>
112 </section>
113 );
114}
106115
107 <div
108 style={{
109 display: "grid",
110 gridTemplateColumns: "1.15fr 0.85fr",
111 gap: 18,
112 alignItems: "stretch",
113 marginTop: 6,
114 }}
115 >
116 <section style={{ padding: "18px 8px 8px" }}>
116/* ---- SECTION 2: COMPETITIVE FRAMING ---- */
117function CompetitiveFraming() {
118 return (
119 <section className="relative border-t border-white/[0.04] bg-d8-darker py-28">
120 <div className="mx-auto max-w-5xl px-6 text-center">
121 <h2 className="font-display text-[clamp(2rem,5vw,3.5rem)] font-black leading-tight text-d8-text">
122 Every day you wait is a day
123 <br />
124 <span className="text-d8-green">your competitor gets ahead.</span>
125 </h2>
126 <p className="mx-auto mt-6 max-w-2xl text-lg text-d8-muted">
127 The market moved. AI builds production-ready sites faster than your team quotes them.
128 Your competitors figured this out last month. The question isn't “should you?”
129 — it's “why haven't you?”
130 </p>
131
132 <div className="mt-16 grid gap-6 md:grid-cols-3">
133 {[
134 {
135 before: "Manual builds",
136 after: "AI in 90 seconds",
137 detail: "Your team takes weeks. Our engine takes seconds.",
138 },
139 {
140 before: "Template sites",
141 after: "Unique every time",
142 detail: "Cookie-cutter is dead. Every build is one-of-one.",
143 },
144 {
145 before: "Launch & pray",
146 after: "Conversion-engineered",
147 detail: "Built to convert from pixel one. Not retrofitted.",
148 },
149 ].map((item) => (
117150 <div
118 style={{
119 display: "inline-flex",
120 alignItems: "center",
121 gap: 10,
122 padding: "8px 12px",
123 borderRadius: 999,
124 background:
125 "linear-gradient(90deg, rgba(168,85,247,0.18), rgba(59,130,246,0.10))",
126 border: "1px solid rgba(255,255,255,0.12)",
127 boxShadow: "0 10px 40px rgba(168,85,247,0.08)",
128 color: "rgba(237,234,247,0.92)",
129 fontSize: 12,
130 letterSpacing: "0.08em",
131 textTransform: "uppercase",
132 fontWeight: 700,
133 }}
151 key={item.after}
152 className="neon-border bg-d8-surface p-8 text-left"
153 style={{ clipPath: "polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%)" }}
134154 >
135 <span style={{ opacity: 0.95 }}>Craftify-style hero</span>
136 <span style={{ opacity: 0.65 }}>inline-styled fallback</span>
155 <div className="font-mono text-xs uppercase tracking-[0.15em] text-red-500 line-through">
156 {item.before}
157 </div>
158 <div className="mt-2 font-display text-xl font-black text-d8-green">
159 {item.after}
160 </div>
161 <p className="mt-3 text-sm leading-relaxed text-d8-muted">{item.detail}</p>
137162 </div>
163 ))}
164 </div>
165 </div>
166 </section>
167 );
168}
138169
139 <h1
140 style={{
141 marginTop: 16,
142 fontSize: 50,
143 lineHeight: 1.02,
144 letterSpacing: "-0.02em",
145 fontWeight: 900,
146 color: "#F6F2FF",
147 textShadow: "0 20px 80px rgba(168,85,247,0.18)",
148 }}
170/* ---- SECTION 3: SPEED PROOF ---- */
171function SpeedProof() {
172 return (
173 <section className="relative border-t border-white/[0.04] py-28">
174 <div className="mx-auto max-w-5xl px-6">
175 <div className="grid items-center gap-16 md:grid-cols-2">
176 <div>
177 <div className="font-mono text-xs uppercase tracking-[0.2em] text-d8-green">
178 Speed kills — in your favour
179 </div>
180 <h2 className="mt-4 font-display text-[clamp(2rem,4vw,3rem)] font-black leading-tight text-d8-text">
181 90 seconds to live.
182 <br />
183 5 seconds to deploy.
184 </h2>
185 <p className="mt-6 text-lg leading-relaxed text-d8-muted">
186 From blank canvas to production-deployed site. No staging environments.
187 No deployment pipelines. No DevOps tickets. Type what you want. Get what you need.
188 Ship before your coffee gets cold.
189 </p>
190 <a
191 href="https://dominat8.io/builder"
192 className="neon-cta mt-8 inline-block px-8 py-3.5 text-sm font-black tracking-widest no-underline"
193 style={{ clipPath: "polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%)" }}
149194 >
150 Your site should do more than{" "}
151 <span
152 style={{
153 background:
154 "linear-gradient(90deg, rgba(168,85,247,1), rgba(59,130,246,1))",
155 WebkitBackgroundClip: "text",
156 backgroundClip: "text",
157 color: "transparent",
158 }}
159 >
160 look good
161 </span>
162 .
163 </h1>
195 BUILD YOUR FIRST SITE
196 </a>
197 </div>
164198
165 <p
166 style={{
167 marginTop: 14,
168 maxWidth: 640,
169 fontSize: 16,
170 lineHeight: 1.55,
171 color: "rgba(237,234,247,0.78)",
172 }}
173 >
174 Dominat8 builds polished, conversion-first pages fast — with a locked visual layer that
175 still renders properly even if Tailwind/classes fail to load.
176 </p>
199 {/* Terminal mockup */}
200 <div className="neon-border overflow-hidden bg-d8-surface">
201 <div className="flex items-center gap-2 border-b border-white/[0.06] bg-d8-black px-4 py-3">
202 <span className="h-3 w-3 rounded-full bg-red-500/70" />
203 <span className="h-3 w-3 rounded-full bg-yellow-500/70" />
204 <span className="h-3 w-3 rounded-full bg-green-500/70" />
205 <span className="ml-3 font-mono text-xs text-d8-muted">dominat8 — build</span>
206 </div>
207 <div className="p-5 font-mono text-sm leading-7">
208 <div className="text-d8-muted">
209 <span className="text-d8-green">$</span> dominat8 build --type agency
210 </div>
211 <div className="text-d8-muted">
212 <span className="text-d8-green">[00:03]</span> Analyzing brief...
213 </div>
214 <div className="text-d8-muted">
215 <span className="text-d8-green">[00:18]</span> 7 agents deployed...
216 </div>
217 <div className="text-d8-muted">
218 <span className="text-d8-green">[00:45]</span> Layout engine complete
219 </div>
220 <div className="text-d8-muted">
221 <span className="text-d8-green">[01:12]</span> Copy generated
222 </div>
223 <div className="text-d8-muted">
224 <span className="text-d8-green">[01:28]</span> SEO optimized
225 </div>
226 <div className="font-bold text-d8-green">
227 [01:30] DEPLOYED → client-site.dominat8.io
228 </div>
229 <div className="mt-2 text-d8-muted">
230 <span className="text-d8-green">$</span>{" "}
231 <span className="animate-pulse">_</span>
232 </div>
233 </div>
234 </div>
235 </div>
236 </div>
237 </section>
238 );
239}
177240
178 <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 18, alignItems: "center" }}>
179 <a
180 href="/builder"
181 style={{
182 display: "inline-flex",
183 alignItems: "center",
184 justifyContent: "center",
185 gap: 10,
186 padding: "12px 16px",
187 borderRadius: 14,
188 textDecoration: "none",
189 fontWeight: 800,
190 fontSize: 14,
191 color: "#07070B",
192 background:
193 "linear-gradient(90deg, rgba(168,85,247,1), rgba(59,130,246,1))",
194 boxShadow:
195 "0 18px 55px rgba(168,85,247,0.26), 0 10px 24px rgba(59,130,246,0.16)",
196 border: "1px solid rgba(255,255,255,0.10)",
197 }}
198 >
199 Start Building Now <span aria-hidden="true">→</span>
200 </a>
241/* ---- SECTION 4: FEATURE WEAPONS ---- */
242function FeatureWeapons() {
243 const weapons = [
244 {
245 icon: "//",
246 title: "7-Agent AI Pipeline",
247 desc: "Seven specialized AI agents work in parallel. Strategy, copy, design, code, SEO, QA, deploy. All in one pass.",
248 },
249 {
250 icon: ">>",
251 title: "Instant Deploy",
252 desc: "No FTP. No CI/CD. No waiting. One click from build to live. Global CDN. SSL included.",
253 },
254 {
255 icon: "{}",
256 title: "Conversion-First Architecture",
257 desc: "Every component is engineered to convert. Not decorated after the fact. Built into the DNA.",
258 },
259 {
260 icon: "<>",
261 title: "White-Label Ready",
262 desc: "Strip our name. Add yours. Your clients never know. Full agency white-label from day one.",
263 },
264 {
265 icon: "##",
266 title: "SEO Weaponised",
267 desc: "Schema markup, meta optimization, sitemap generation, Core Web Vitals — all automated. Every build.",
268 },
269 {
270 icon: "&&",
271 title: "Auto-Reply AI",
272 desc: "AI-powered customer support that sounds like your best account manager. Direct. Confident. Never sleeps.",
273 },
274 ];
201275
202 <a
203 href="#preview"
204 style={{
205 display: "inline-flex",
206 alignItems: "center",
207 justifyContent: "center",
208 gap: 10,
209 padding: "12px 16px",
210 borderRadius: 14,
211 textDecoration: "none",
212 fontWeight: 800,
213 fontSize: 14,
214 color: "rgba(237,234,247,0.88)",
215 background: "rgba(255,255,255,0.04)",
216 border: "1px solid rgba(255,255,255,0.12)",
217 boxShadow: "0 10px 30px rgba(0,0,0,0.35)",
218 }}
219 >
220 Watch video <span aria-hidden="true">▶</span>
221 </a>
222 </div>
223 </section>
276 return (
277 <section id="weapons" className="relative border-t border-white/[0.04] bg-d8-darker py-28">
278 <div className="mx-auto max-w-6xl px-6">
279 <div className="text-center">
280 <div className="font-mono text-xs uppercase tracking-[0.2em] text-d8-green">
281 The arsenal
282 </div>
283 <h2 className="mt-4 font-display text-[clamp(2rem,5vw,3.5rem)] font-black leading-tight text-d8-text">
284 Every feature is a
285 <span className="text-d8-green"> competitive weapon.</span>
286 </h2>
287 </div>
224288
225 <aside
226 id="preview"
227 aria-label="Preview card"
228 style={{
229 borderRadius: 20,
230 padding: 14,
231 background:
232 "linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03))",
233 border: "1px solid rgba(255,255,255,0.12)",
234 boxShadow:
235 "0 30px 90px rgba(0,0,0,0.45), 0 20px 55px rgba(168,85,247,0.10)",
236 position: "relative",
237 overflow: "hidden",
238 }}
239 >
289 <div className="mt-16 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
290 {weapons.map((w) => (
240291 <div
241 style={{
242 position: "absolute",
243 inset: -60,
244 background:
245 "radial-gradient(closest-side at 70% 30%, rgba(168,85,247,0.32), rgba(0,0,0,0) 70%)," +
246 " radial-gradient(closest-side at 30% 70%, rgba(59,130,246,0.20), rgba(0,0,0,0) 70%)",
247 filter: "blur(14px)",
248 pointerEvents: "none",
249 }}
250 />
251 <div style={{ position: "relative", zIndex: 2 }}>
252 <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
253 {["LIVE_OK", "BUILD PROOF", "NO-TAILWIND SAFE"].map((t) => (
254 <div
255 key={t}
256 style={{
257 fontSize: 11,
258 fontWeight: 900,
259 letterSpacing: "0.16em",
260 textTransform: "uppercase",
261 padding: "8px 10px",
262 borderRadius: 999,
263 background: "rgba(0,0,0,0.35)",
264 border: "1px solid rgba(255,255,255,0.12)",
265 color: "rgba(237,234,247,0.85)",
266 }}
267 >
268 {t}
269 </div>
270 ))}
292 key={w.title}
293 className="neon-border group bg-d8-surface p-8 transition-all hover:bg-d8-surface-hover"
294 style={{ clipPath: "polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%)" }}
295 >
296 <div className="flex h-12 w-12 items-center justify-center border border-d8-green/20 bg-d8-green/[0.05] font-mono text-lg font-black text-d8-green transition-colors group-hover:bg-d8-green/10">
297 {w.icon}
271298 </div>
299 <h3 className="mt-5 font-display text-lg font-black text-d8-text">
300 {w.title}
301 </h3>
302 <p className="mt-3 text-sm leading-relaxed text-d8-muted">{w.desc}</p>
303 </div>
304 ))}
305 </div>
306 </div>
307 </section>
308 );
309}
272310
273 <div
274 style={{
275 marginTop: 14,
276 fontSize: 14,
277 fontWeight: 900,
278 letterSpacing: "0.14em",
279 textTransform: "uppercase",
280 color: "rgba(237,234,247,0.84)",
281 }}
282 >
283 Live Preview (Proof)
284 </div>
311/* ---- SECTION 5: SOCIAL PROOF ---- */
312function SocialProof() {
313 const testimonials = [
314 {
315 quote: "We replaced our entire dev pipeline with Dominat8. 23% more conversions in 30 days. Not going back.",
316 name: "Marcus Chen",
317 role: "Founder, Velocity Digital",
318 metric: "+23% conversions",
319 },
320 {
321 quote: "Shipped 14 client sites in one week. My competitors still quote 6-week timelines. They have no idea what hit them.",
322 name: "Sarah Blackwood",
323 role: "CEO, Blackwood Agency",
324 metric: "14 sites / 1 week",
325 },
326 {
327 quote: "The white-label option alone pays for itself. Clients think we built it. We just pressed a button.",
328 name: "James Okafor",
329 role: "Director, Digital Forge",
330 metric: "10x output",
331 },
332 ];
285333
286 <div
287 style={{
288 marginTop: 12,
289 borderRadius: 16,
290 border: "1px solid rgba(255,255,255,0.12)",
291 background: "rgba(0,0,0,0.35)",
292 boxShadow: "inset 0 1px 0 rgba(255,255,255,0.05)",
293 overflow: "hidden",
294 }}
295 >
296 <div
297 style={{
298 display: "flex",
299 alignItems: "center",
300 justifyContent: "space-between",
301 gap: 10,
302 padding: "10px 12px",
303 borderBottom: "1px solid rgba(255,255,255,0.10)",
304 background: "rgba(255,255,255,0.03)",
305 }}
306 >
307 <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
308 {["#f43f5e", "#facc15", "#22c55e"].map((c) => (
309 <span
310 key={c}
311 style={{
312 width: 10,
313 height: 10,
314 borderRadius: 999,
315 background: c,
316 boxShadow: "0 6px 20px rgba(0,0,0,0.35)",
317 display: "inline-block",
318 }}
319 />
320 ))}
321 </div>
322 <div style={{ fontSize: 12, opacity: 0.82, fontWeight: 800 }}>dominat8.com</div>
323 </div>
334 return (
335 <section id="proof" className="relative border-t border-white/[0.04] py-28">
336 <div className="mx-auto max-w-6xl px-6">
337 <div className="text-center">
338 <div className="font-mono text-xs uppercase tracking-[0.2em] text-d8-green">
339 Battle-tested
340 </div>
341 <h2 className="mt-4 font-display text-[clamp(2rem,5vw,3.5rem)] font-black leading-tight text-d8-text">
342 Results. Not testimonials.
343 </h2>
344 </div>
324345
325 <div
326 style={{
327 padding: 12,
328 fontFamily:
329 "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
330 fontSize: 12,
331 lineHeight: 1.55,
332 color: "rgba(237,234,247,0.80)",
333 }}
334 >
335 <div style={{ marginBottom: 10, fontWeight: 900, opacity: 0.95 }}>
336 HOME_OK • Locked Hero Render
337 </div>
338 <div style={{ opacity: 0.7 }}>
339 If you see this card styled, your homepage can’t “go plain” anymore.
340 </div>
341 </div>
346 <div className="mt-16 grid gap-6 md:grid-cols-3">
347 {testimonials.map((t) => (
348 <div
349 key={t.name}
350 className="neon-border flex flex-col bg-d8-surface p-8"
351 >
352 <div className="mb-6 inline-block self-start border border-d8-green/20 bg-d8-green/[0.05] px-3 py-1 font-mono text-xs font-bold text-d8-green">
353 {t.metric}
342354 </div>
343
344 <div style={{ marginTop: 14, fontSize: 13, lineHeight: 1.5, color: "rgba(237,234,247,0.72)" }}>
345 Tip: add <span style={{ fontWeight: 900, color: "rgba(237,234,247,0.90)" }}>?ts=</span> to bust cache.
355 <blockquote className="flex-1 text-base leading-relaxed text-d8-text/80">
356 “{t.quote}”
357 </blockquote>
358 <div className="mt-6 border-t border-white/[0.06] pt-4">
359 <div className="font-display text-sm font-bold text-d8-text">
360 {t.name}
361 </div>
362 <div className="font-mono text-xs text-d8-muted">{t.role}</div>
346363 </div>
347364 </div>
348 </aside>
365 ))}
349366 </div>
367 </div>
368 </section>
369 );
370}
371
372/* ---- SECTION 6: PRICING ---- */
373function Pricing() {
374 const plans = [
375 {
376 name: "STARTER",
377 price: "$49",
378 tag: "Stop losing",
379 desc: "Stop losing to competitors who already have AI.",
380 features: [
381 "AI site builder",
382 "5 sites / month",
383 "Custom domain",
384 "SSL + CDN included",
385 "Basic SEO automation",
386 ],
387 },
388 {
389 name: "PRO",
390 price: "$129",
391 tag: "Most lethal",
392 desc: "The weapon your agency's been missing.",
393 features: [
394 "Everything in Starter",
395 "Unlimited sites",
396 "Priority AI pipeline",
397 "Advanced SEO suite",
398 "AI auto-reply support",
399 "Custom branding",
400 ],
401 featured: true,
402 },
403 {
404 name: "AGENCY",
405 price: "$299",
406 tag: "Total domination",
407 desc: "Dominate your entire client roster.",
408 features: [
409 "Everything in Pro",
410 "White-label builder",
411 "Team seats (up to 10)",
412 "Client billing portal",
413 "Dedicated pipeline",
414 "Priority support",
415 ],
416 },
417 ];
418
419 return (
420 <section id="pricing" className="relative border-t border-white/[0.04] bg-d8-darker py-28">
421 <div className="mx-auto max-w-6xl px-6">
422 <div className="text-center">
423 <div className="font-mono text-xs uppercase tracking-[0.2em] text-d8-green">
424 Pricing
425 </div>
426 <h2 className="mt-4 font-display text-[clamp(2rem,5vw,3.5rem)] font-black leading-tight text-d8-text">
427 Pick your weapon.
428 </h2>
429 <p className="mx-auto mt-4 max-w-xl text-lg text-d8-muted">
430 Every plan includes the full AI engine. No feature gates. No bait-and-switch.
431 </p>
432 </div>
433
434 <div className="mt-16 grid gap-6 md:grid-cols-3">
435 {plans.map((p) => (
436 <div
437 key={p.name}
438 className={`neon-border relative flex flex-col bg-d8-surface p-8 ${
439 p.featured
440 ? "border-d8-green/30 shadow-[0_0_40px_rgba(0,255,65,0.08)]"
441 : ""
442 }`}
443 style={{ clipPath: "polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%)" }}
444 >
445 {p.featured && (
446 <div className="absolute -top-px left-0 right-0 h-[2px] bg-d8-green" />
447 )}
448 <div className="font-mono text-xs uppercase tracking-[0.2em] text-d8-green">
449 {p.tag}
450 </div>
451 <div className="mt-3 font-display text-sm font-black tracking-[0.2em] text-d8-text">
452 {p.name}
453 </div>
454 <div className="mt-4 flex items-baseline gap-1">
455 <span className="font-display text-5xl font-black text-d8-text">
456 {p.price}
457 </span>
458 <span className="text-sm text-d8-muted">/mo</span>
459 </div>
460 <p className="mt-3 text-sm text-d8-muted">{p.desc}</p>
461
462 <ul className="mt-8 flex-1 space-y-3">
463 {p.features.map((f) => (
464 <li key={f} className="flex items-start gap-3 text-sm text-d8-text/80">
465 <span className="mt-0.5 font-mono text-xs text-d8-green">+</span>
466 {f}
467 </li>
468 ))}
469 </ul>
350470
351 <div
352 style={{
353 marginTop: 34,
354 display: "flex",
355 justifyContent: "space-between",
356 gap: 12,
357 flexWrap: "wrap",
358 alignItems: "center",
359 opacity: 0.85,
360 fontSize: 12,
361 color: "rgba(237,234,247,0.65)",
362 }}
363 >
364 <div>© {new Date().getFullYear()} Dominat8</div>
365 <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
366 {[
367 { href: "/privacy", label: "Privacy" },
368 { href: "/terms", label: "Terms" },
369 { href: "/contact", label: "Contact" },
370 ].map((l) => (
371471 <a
372 key={l.href}
373 href={l.href}
374 style={{
375 color: "rgba(237,234,247,0.70)",
376 textDecoration: "none",
377 borderBottom: "1px solid rgba(237,234,247,0.20)",
378 paddingBottom: 2,
379 }}
472 href="https://dominat8.io/builder"
473 className={`mt-8 block py-3.5 text-center text-sm font-black uppercase tracking-widest no-underline transition-all ${
474 p.featured
475 ? "neon-cta"
476 : "border border-white/10 bg-white/[0.03] text-d8-text hover:border-d8-green/30 hover:text-d8-green"
477 }`}
478 style={p.featured ? { clipPath: "polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%)" } : undefined}
380479 >
381 {l.label}
480 {p.featured ? "START DOMINATING" : "GET STARTED"}
382481 </a>
383 ))}
482 </div>
483 ))}
484 </div>
485 </div>
486 </section>
487 );
488}
489
490/* ---- SECTION 7: FINAL CTA ---- */
491function FinalCTA() {
492 return (
493 <section className="relative border-t border-white/[0.04] py-32 overflow-hidden scanlines">
494 <div className="grid-bg" />
495 <div className="relative z-10 mx-auto max-w-4xl px-6 text-center">
496 <h2 className="font-display text-[clamp(2rem,6vw,4rem)] font-black leading-tight text-d8-text">
497 The market doesn't wait.
498 <br />
499 <span className="text-d8-green">Neither should you.</span>
500 </h2>
501 <p className="mx-auto mt-6 max-w-xl text-lg text-d8-muted">
502 Every day without Dominat8 is a day your competitors outpace you.
503 Every site they ship is a client you lost. Stop watching. Start winning.
504 </p>
505 <a
506 href="https://dominat8.io/builder"
507 className="neon-cta mt-10 inline-block px-12 py-5 text-base font-black tracking-widest no-underline"
508 style={{ clipPath: "polygon(14px 0%, 100% 0%, calc(100% - 14px) 100%, 0% 100%)" }}
509 >
510 DOMINATE NOW
511 </a>
512 <div className="mt-6 font-mono text-xs text-d8-muted">
513 No credit card required. Build your first site in 90 seconds.
514 </div>
515 </div>
516 </section>
517 );
518}
519
520/* ---- FOOTER ---- */
521function Footer() {
522 return (
523 <footer className="border-t border-white/[0.04] bg-d8-black py-12">
524 <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-6 px-6 md:flex-row">
525 <div className="flex items-center gap-3">
526 <div
527 className="flex h-7 w-7 items-center justify-center bg-d8-green font-display text-xs font-black text-d8-black"
528 style={{ clipPath: "polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%)" }}
529 >
530 D8
384531 </div>
532 <span className="font-display text-sm font-bold tracking-[0.1em] uppercase text-d8-muted">
533 Dominat8
534 </span>
535 </div>
536 <div className="flex gap-8">
537 {[
538 { href: "/privacy", label: "Privacy" },
539 { href: "/terms", label: "Terms" },
540 { href: "/contact", label: "Contact" },
541 ].map((l) => (
542 <a
543 key={l.href}
544 href={l.href}
545 className="font-mono text-xs uppercase tracking-widest text-d8-muted hover:text-d8-green transition-colors no-underline"
546 >
547 {l.label}
548 </a>
549 ))}
550 </div>
551 <div className="font-mono text-xs text-d8-muted">
552 © {new Date().getFullYear()} Dominat8. Ship or die.
385553 </div>
386554 </div>
387 </main>
555 </footer>
388556 );
389557}
390558
559/* ---- PAGE ---- */
560export default function HomePage() {
561 return (
562 <>
563 <Nav />
564 <Hero />
565 <CompetitiveFraming />
566 <SpeedProof />
567 <FeatureWeapons />
568 <SocialProof />
569 <Pricing />
570 <FinalCTA />
571 <Footer />
572 </>
573 );
574}
Modifiedtailwind.config.ts+21−2View fileUnifiedSplit
@@ -6,8 +6,27 @@ const config: Config = {
66 "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
77 "./src/lib/**/*.{js,ts,jsx,tsx,mdx}",
88 ],
9 theme: { extend: {} },
9 theme: {
10 extend: {
11 colors: {
12 d8: {
13 black: "#0a0a0a",
14 darker: "#050505",
15 surface: "#111111",
16 "surface-hover": "#1a1a1a",
17 green: "#00ff41",
18 "green-dim": "rgba(0, 255, 65, 0.15)",
19 text: "#ededed",
20 muted: "rgba(237, 237, 237, 0.55)",
21 },
22 },
23 fontFamily: {
24 display: ['"Space Grotesk"', "ui-sans-serif", "system-ui", "sans-serif"],
25 body: ['"Space Grotesk"', "ui-sans-serif", "system-ui", "sans-serif"],
26 },
27 },
28 },
1029 plugins: [],
1130};
1231
13export default config;
\ No newline at end of file
32export default config;
1433
c comment · e edit title · m merge · a approve · r request changes · ? shortcuts