1use dioxus::prelude::*;
11use crate::ui::router::Route;
12use crate::ui::components::main_nav::{MainNav, ActivePage};
13use crate::ui::components::footer::Footer;
14use crate::ui::components::icon::{Icon, IconVariant, IconSize};
15use crate::ui::seo::{JsonLdMultiple, PageHead, organization_schema, contact_schema, breadcrumb_schema, BreadcrumbItem, pages as seo_pages};
16
17const PRICING_STYLE: &str = r#"
18* { box-sizing: border-box; }
19a { color: inherit; }
20
21.pricing {
22 height: 100vh;
23 color: var(--text-primary);
24 background:
25 radial-gradient(1200px 600px at 50% -120px, rgba(var(--accent-secondary-rgb),0.18), transparent 60%),
26 radial-gradient(900px 500px at 15% 30%, rgba(var(--accent-primary-rgb),0.18), transparent 60%),
27 radial-gradient(800px 450px at 90% 45%, rgba(34,197,94,0.10), transparent 62%),
28 linear-gradient(180deg, var(--bg-gradient-start), var(--bg-gradient-mid) 55%, var(--bg-gradient-end));
29 overflow-x: hidden;
30 overflow-y: auto;
31 font-family: var(--font-sans);
32 position: relative;
33}
34
35.bg-orb {
36 position: absolute;
37 inset: auto;
38 width: 520px;
39 height: 520px;
40 border-radius: var(--radius-full);
41 filter: blur(42px);
42 opacity: 0.22;
43 pointer-events: none;
44 animation: float 14s ease-in-out infinite, pulse-glow 10s ease-in-out infinite;
45}
46.orb1 { top: -220px; left: -160px; background: radial-gradient(circle at 30% 30%, var(--accent-primary), transparent 60%); animation-delay: 0s; }
47.orb2 { top: 120px; right: -200px; background: radial-gradient(circle at 40% 35%, var(--accent-secondary), transparent 60%); animation-delay: -5s; }
48.orb3 { bottom: -260px; left: 20%; background: radial-gradient(circle at 40% 35%, rgba(34,197,94,0.9), transparent 60%); animation-delay: -10s; }
49
50@keyframes float {
51 0%, 100% { transform: translate3d(0, 0, 0); }
52 50% { transform: translate3d(0, -20px, 0); }
53}
54
55@keyframes pulse-glow {
56 0%, 100% { opacity: 0.22; }
57 50% { opacity: 0.32; }
58}
59
60@keyframes fadeInUp {
61 from { opacity: 0; transform: translateY(24px); }
62 to { opacity: 1; transform: translateY(0); }
63}
64
65.pricing-container {
66 position: relative;
67 display: flex;
68 flex-direction: column;
69 align-items: center;
70 padding: 60px var(--spacing-xl);
71 max-width: 1000px;
72 margin: 0 auto;
73}
74
75.pricing-header {
76 text-align: center;
77 margin-bottom: 50px;
78 animation: fadeInUp 0.6s ease both;
79}
80
81.pricing-header h1 {
82 font-size: var(--font-display-lg);
83 font-weight: 900;
84 letter-spacing: -2px;
85 background: linear-gradient(180deg, #ffffff 0%, rgba(229,231,235,0.78) 65%, rgba(229,231,235,0.62) 100%);
86 -webkit-background-clip: text;
87 -webkit-text-fill-color: transparent;
88 margin-bottom: var(--spacing-lg);
89}
90
91.pricing-header p {
92 color: var(--text-secondary);
93 font-size: var(--font-body-lg);
94 line-height: 1.65;
95}
96
97.features-showcase {
98 position: relative;
99 background: rgba(255,255,255,0.04);
100 border: 1px solid rgba(255,255,255,0.10);
101 border-radius: var(--radius-xl);
102 padding: 40px;
103 margin-bottom: 40px;
104 width: 100%;
105 backdrop-filter: blur(18px);
106 animation: fadeInUp 0.6s ease 0.08s both;
107}
108
109.features-showcase-header {
110 text-align: center;
111 margin-bottom: 32px;
112}
113
114.features-showcase-header h2 {
115 color: var(--text-primary);
116 font-size: var(--font-heading-lg);
117 font-weight: 700;
118 margin-bottom: var(--spacing-sm);
119}
120
121.features-showcase-header p {
122 color: var(--text-secondary);
123 font-size: var(--font-body-md);
124 line-height: 1.65;
125}
126
127.features-grid {
128 display: grid;
129 grid-template-columns: repeat(3, 1fr);
130 gap: 18px;
131}
132
133.feature-group {
134 position: relative;
135 border-radius: var(--radius-xl);
136 border: 1px solid rgba(255,255,255,0.08);
137 background: rgba(255,255,255,0.03);
138 padding: 18px;
139 overflow: hidden;
140 animation: fadeInUp 0.6s ease both;
141}
142
143.feature-group:nth-child(1) { animation-delay: 0.10s; box-shadow: 0 0 16px rgba(251,191,36,0.35), inset 0 0 12px rgba(251,191,36,0.08); border-color: rgba(251,191,36,0.45); }
144.feature-group:nth-child(2) { animation-delay: 0.14s; box-shadow: 0 0 16px rgba(251,191,36,0.35), inset 0 0 12px rgba(251,191,36,0.08); border-color: rgba(251,191,36,0.45); }
145.feature-group:nth-child(3) { animation-delay: 0.18s; box-shadow: 0 0 16px rgba(251,191,36,0.35), inset 0 0 12px rgba(251,191,36,0.08); border-color: rgba(251,191,36,0.45); }
146.feature-group:nth-child(4) { animation-delay: 0.22s; box-shadow: 0 0 16px rgba(251,191,36,0.35), inset 0 0 12px rgba(251,191,36,0.08); border-color: rgba(251,191,36,0.45); }
147.feature-group:nth-child(5) { animation-delay: 0.26s; box-shadow: 0 0 16px rgba(251,191,36,0.35), inset 0 0 12px rgba(251,191,36,0.08); border-color: rgba(251,191,36,0.45); }
148.feature-group:nth-child(6) { animation-delay: 0.30s; box-shadow: 0 0 16px rgba(251,191,36,0.35), inset 0 0 12px rgba(251,191,36,0.08); border-color: rgba(251,191,36,0.45); }
149
150.feature-group-header {
151 display: flex;
152 align-items: center;
153 gap: var(--spacing-md);
154 margin-bottom: var(--spacing-md);
155}
156
157.feature-group-icon {
158 width: 40px;
159 height: 40px;
160 border-radius: var(--radius-lg);
161 display: flex;
162 align-items: center;
163 justify-content: center;
164 border: 1px solid rgba(255,255,255,0.10);
165 flex-shrink: 0;
166}
167
168.feature-group-header h3 {
169 color: var(--text-primary);
170 font-size: var(--font-body-md);
171 font-weight: 650;
172}
173
174.feature-group-list {
175 list-style: none;
176 padding: 0;
177 margin: 0;
178}
179
180.feature-group-list li {
181 color: var(--text-secondary);
182 font-size: var(--font-caption-lg);
183 padding: var(--spacing-xs) 0;
184 padding-left: var(--spacing-xl);
185 position: relative;
186 line-height: 1.5;
187}
188
189.feature-group-list li::before {
190 content: "\2713";
191 position: absolute;
192 left: 0;
193 color: var(--accent-secondary);
194}
195
196.license-section {
197 background: rgba(255,255,255,0.04);
198 border: 1px solid rgba(255,255,255,0.10);
199 border-radius: var(--radius-xl);
200 padding: 40px;
201 margin-bottom: 40px;
202 width: 100%;
203 backdrop-filter: blur(18px);
204 animation: fadeInUp 0.6s ease 0.15s both;
205}
206
207.license-section h2 {
208 color: var(--text-primary);
209 font-size: var(--font-heading-lg);
210 font-weight: 700;
211 margin-bottom: var(--spacing-xl);
212}
213
214.license-section h3 {
215 color: var(--accent-secondary);
216 font-size: var(--font-body-lg);
217 font-weight: 600;
218 margin: var(--spacing-xl) 0 var(--spacing-md) 0;
219}
220
221.license-section p {
222 color: var(--text-secondary);
223 line-height: 1.8;
224 margin-bottom: var(--spacing-lg);
225}
226
227.license-section ul {
228 color: var(--text-secondary);
229 line-height: 1.8;
230 margin-left: var(--spacing-xl);
231 margin-bottom: var(--spacing-lg);
232}
233
234.license-section li {
235 margin-bottom: var(--spacing-sm);
236}
237
238.contact-section {
239 background: linear-gradient(135deg, rgba(var(--accent-primary-rgb),0.08) 0%, rgba(var(--accent-secondary-rgb),0.08) 100%);
240 border: 1px solid rgba(var(--accent-secondary-rgb),0.25);
241 border-radius: var(--radius-xl);
242 padding: 40px;
243 text-align: center;
244 width: 100%;
245 backdrop-filter: blur(18px);
246 animation: fadeInUp 0.6s ease 0.2s both;
247}
248
249.contact-section h2 {
250 color: var(--text-primary);
251 font-size: var(--font-heading-lg);
252 font-weight: 700;
253 margin-bottom: var(--spacing-lg);
254}
255
256.contact-section p {
257 color: var(--text-secondary);
258 margin-bottom: var(--spacing-xl);
259 line-height: 1.65;
260}
261
262.contact-links {
263 display: flex;
264 gap: var(--spacing-lg);
265 justify-content: center;
266 flex-wrap: wrap;
267}
268
269.contact-email {
270 display: inline-block;
271 background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
272 color: #060814;
273 padding: var(--spacing-md) var(--spacing-xxl);
274 border-radius: var(--radius-lg);
275 font-size: var(--font-body-md);
276 font-weight: 650;
277 text-decoration: none;
278 transition: all 0.2s ease;
279 box-shadow: 0 18px 40px rgba(var(--accent-primary-rgb),0.18);
280}
281
282.contact-email:hover {
283 transform: translateY(-2px);
284 box-shadow: 0 6px 20px rgba(var(--accent-primary-rgb),0.4);
285}
286
287.email-display {
288 display: flex;
289 align-items: center;
290 justify-content: center;
291 gap: var(--spacing-md);
292 margin-top: var(--spacing-lg);
293}
294
295.email-text {
296 color: var(--text-secondary);
297 font-size: var(--font-body-md);
298 font-family: var(--font-mono, monospace);
299 user-select: all;
300}
301
302.copy-btn {
303 display: inline-flex;
304 align-items: center;
305 gap: var(--spacing-sm);
306 background: rgba(255,255,255,0.06);
307 border: 1px solid rgba(255,255,255,0.12);
308 border-radius: var(--radius-md);
309 padding: var(--spacing-sm) var(--spacing-md);
310 color: var(--text-secondary);
311 font-size: var(--font-caption-lg);
312 font-weight: 600;
313 cursor: pointer;
314 transition: all 0.2s ease;
315}
316
317.copy-btn:hover {
318 background: rgba(255,255,255,0.10);
319 color: var(--text-primary);
320 border-color: rgba(255,255,255,0.18);
321}
322
323.copy-btn.copied {
324 background: rgba(34,197,94,0.15);
325 border-color: rgba(34,197,94,0.4);
326 color: var(--color-success);
327}
328
329.back-link {
330 background: rgba(255,255,255,0.05);
331 border: 1px solid rgba(255,255,255,0.10);
332 border-radius: var(--radius-lg);
333 padding: var(--spacing-md) var(--spacing-xl);
334 color: var(--text-secondary);
335 font-size: var(--font-body-sm);
336 font-weight: 600;
337 cursor: pointer;
338 transition: all 0.2s ease;
339}
340
341.back-link:hover {
342 background: rgba(255,255,255,0.08);
343 color: var(--text-primary);
344 border-color: rgba(255,255,255,0.14);
345}
346
347.pricing-footer-links {
348 display: flex;
349 gap: var(--spacing-md);
350 align-items: center;
351 margin-top: 40px;
352}
353
354.github-btn {
355 display: flex;
356 align-items: center;
357 justify-content: center;
358 gap: var(--spacing-sm);
359 background: rgba(255,255,255,0.05);
360 border: 1px solid rgba(255,255,255,0.10);
361 border-radius: var(--radius-lg);
362 padding: var(--spacing-md) var(--spacing-xl);
363 color: var(--text-secondary);
364 font-size: var(--font-body-sm);
365 font-weight: 600;
366 text-decoration: none;
367 transition: all 0.2s ease;
368}
369
370.github-btn:hover {
371 background: rgba(255,255,255,0.08);
372 color: var(--text-primary);
373 border-color: rgba(255,255,255,0.14);
374}
375
376.github-btn svg {
377 width: 18px;
378 height: 18px;
379 fill: currentColor;
380}
381
382@media (max-width: 700px) {
383 .pricing-header h1 {
384 font-size: var(--font-display-md);
385 }
386 .features-grid {
387 grid-template-columns: 1fr;
388 }
389}
390
391@media (prefers-reduced-motion: reduce) {
392 * { transition: none !important; animation: none !important; }
393}
394"#;
395
396fn copy_to_clipboard(text: &str) {
397 if let Some(window) = web_sys::window() {
398 let clipboard = window.navigator().clipboard();
399 let _ = clipboard.write_text(text);
400 }
401}
402
403const EMAIL: &str = "[email protected]";
404
405#[component]
406pub fn Pricing() -> Element {
407 let mut copied = use_signal(|| false);
408
409 let on_copy = move |_| {
410 copy_to_clipboard(EMAIL);
411 copied.set(true);
412 };
413
414 let breadcrumbs = vec![
415 BreadcrumbItem { name: "Home", path: "/" },
416 BreadcrumbItem { name: "Contact", path: "/pricing" },
417 ];
418
419 let schemas = vec![
420 organization_schema(),
421 contact_schema(),
422 breadcrumb_schema(&breadcrumbs),
423 ];
424
425 rsx! {
426 PageHead {
427 title: seo_pages::PRICING.title,
428 description: seo_pages::PRICING.description,
429 canonical_path: seo_pages::PRICING.canonical_path,
430 }
431 style { "{PRICING_STYLE}" }
432 JsonLdMultiple { schemas }
433
434 div { class: "pricing",
435 div { class: "bg-orb orb1" }
436 div { class: "bg-orb orb2" }
437 div { class: "bg-orb orb3" }
438
439 MainNav { active: ActivePage::Pricing, subtitle: Some("Contact") }
440
441 div { class: "pricing-container",
442 div { class: "pricing-header",
443 h1 { "Contact Us" }
444 p { "Free for individuals, educational institutions, and teams under 25 people." }
445 p { "For commercial licensing, partnerships, or enterprise needs \u{2014} get in touch." }
446 }
447
448 div { class: "contact-section",
449 h2 { "Let\u{2019}s Talk" }
450 p { "Interested in LOGOS for your organization? Reach out and we\u{2019}ll get back to you." }
451 div { class: "contact-links",
452 a {
453 class: "contact-email",
454 href: "mailto:[email protected]",
455 "Send Email"
456 }
457 }
458 div { class: "email-display",
459 span { class: "email-text", "{EMAIL}" }
460 button {
461 class: if *copied.read() { "copy-btn copied" } else { "copy-btn" },
462 onclick: on_copy,
463 if *copied.read() { "Copied!" } else { "Copy" }
464 }
465 }
466 }
467
468 div { class: "license-section",
469 h2 { "Business Source License" }
470
471 p {
472 "LOGOS is released under the Business Source License 1.1. The source code is "
473 "publicly available, and the software is free to use for individuals and small teams."
474 }
475
476 h3 { "Free Use" }
477 p { "You may use LOGOS at no cost if you are:" }
478 ul {
479 li { "An individual" }
480 li { "A university or educational institution" }
481 li { "An organization with fewer than 25 employees" }
482 }
483
484 h3 { "Commercial License Required" }
485 p {
486 "If your organization has 25 or more employees and you wish to use "
487 "LOGOS as a Logic Service, a commercial license is required. "
488 "Contact us to discuss licensing options for your organization."
489 }
490
491 h3 { "Open Source Transition" }
492 p {
493 "On December 24, 2029, LOGOS will transition to the MIT License, "
494 "making it fully open source."
495 }
496 }
497
498 div { class: "features-showcase",
499 div { class: "features-showcase-header",
500 h2 { "What You Get" }
501 p { "One language for code, logic, math, hardware verification, and distributed systems" }
502 }
503 div { class: "features-grid",
504
505 div { class: "feature-group",
506 div { class: "feature-group-header",
507 div {
508 class: "feature-group-icon",
509 style: "background: rgba(0,212,255,0.15);",
510 Icon { variant: IconVariant::Lightning, size: IconSize::Large, color: "#00d4ff" }
511 }
512 h3 { "English-Native Programming" }
513 }
514 ul { class: "feature-group-list",
515 li { "Programs, proofs, and logic in plain English" }
516 li { "Compiles to native Rust via LLVM" }
517 li { "Ownership and borrowing in natural language" }
518 }
519 }
520
521 div { class: "feature-group",
522 div { class: "feature-group-header",
523 div {
524 class: "feature-group-icon",
525 style: "background: rgba(129,140,248,0.15);",
526 Icon { variant: IconVariant::Brain, size: IconSize::Large, color: "#818cf8" }
527 }
528 h3 { "Formal Logic & Semantics" }
529 }
530 ul { class: "feature-group-list",
531 li { "English \u{2192} First-Order Logic transpilation" }
532 li { "Quantifier disambiguation with all scope readings" }
533 li { "Discourse tracking and anaphora resolution" }
534 }
535 }
536
537 div { class: "feature-group",
538 div { class: "feature-group-header",
539 div {
540 class: "feature-group-icon",
541 style: "background: rgba(34,197,94,0.15);",
542 Icon { variant: IconVariant::Beaker, size: IconSize::Large, color: "#22c55e" }
543 }
544 h3 { "Type Theory & Proofs" }
545 }
546 ul { class: "feature-group-list",
547 li { "Calculus of Constructions with dependent types" }
548 li { "Automated tactics: induction, ring, simp, omega" }
549 li { "Kernel-verified proof certification" }
550 }
551 }
552
553 div { class: "feature-group",
554 div { class: "feature-group-header",
555 div {
556 class: "feature-group-icon",
557 style: "background: rgba(245,158,11,0.15);",
558 Icon { variant: IconVariant::Beaker, size: IconSize::Large, color: "#f59e0b" }
559 }
560 h3 { "Hardware Verification & SVA" }
561 }
562 ul { class: "feature-group-list",
563 li { "English specs to SystemVerilog Assertions" }
564 li { "FOL-to-SVA synthesis via Futamura projections" }
565 li { "Bounded model checking and CEGAR refinement" }
566 li { "AXI4, APB, and handshake protocol templates" }
567 }
568 }
569
570 div { class: "feature-group",
571 div { class: "feature-group-header",
572 div {
573 class: "feature-group-icon",
574 style: "background: rgba(251,191,36,0.15);",
575 Icon { variant: IconVariant::Sparkles, size: IconSize::Large, color: "#fbbf24" }
576 }
577 h3 { "Distributed Systems & CRDTs" }
578 }
579 ul { class: "feature-group-list",
580 li { "GCounter, PNCounter, ORSet, RGA, ORMap" }
581 li { "libp2p networking with GossipSub" }
582 li { "Automatic merge and eventual consistency" }
583 }
584 }
585
586 div { class: "feature-group",
587 div { class: "feature-group-header",
588 div {
589 class: "feature-group-icon",
590 style: "background: rgba(236,72,153,0.15);",
591 Icon { variant: IconVariant::Shield, size: IconSize::Large, color: "#ec4899" }
592 }
593 h3 { "Security & Concurrency" }
594 }
595 ul { class: "feature-group-list",
596 li { "Capability-based access control" }
597 li { "CSP channels and structured concurrency" }
598 li { "Arena allocation \u{2014} no garbage collector" }
599 }
600 }
601
602 div { class: "feature-group",
603 div { class: "feature-group-header",
604 div {
605 class: "feature-group-icon",
606 style: "background: rgba(139,92,246,0.15);",
607 Icon { variant: IconVariant::Lock, size: IconSize::Large, color: "#8b5cf6" }
608 }
609 h3 { "Verification & Tooling" }
610 }
611 ul { class: "feature-group-list",
612 li { "Z3 SMT solver for static verification" }
613 li { "Interactive Studio with live compilation" }
614 li { "CLI tool (largo) and WASM runtime" }
615 }
616 }
617 }
618 }
619
620 div { class: "pricing-footer-links",
621 a {
622 href: "https://github.com/Brahmastra-Labs/logicaffeine",
623 target: "_blank",
624 class: "github-btn",
625 svg {
626 xmlns: "http://www.w3.org/2000/svg",
627 view_box: "0 0 24 24",
628 path {
629 d: "M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"
630 }
631 }
632 "GitHub"
633 }
634 Link {
635 class: "back-link",
636 to: Route::Landing {},
637 "\u{2190} Back"
638 }
639 }
640 }
641
642 Footer {}
643 }
644 }
645}