Skip to content

Commit 9ec37e3

Browse files
gHashTagona-agent
gHashTag
and
ona-agent
committed
fix: make MysticismSection always visible, remove toggle button
- Remove toggle button that caused page jump - Make MysticismSection a regular section like others - Use Section component for consistent styling - Use premium-card class for cards - Add green accent background to formula code blocks - Change section id to 'science' Co-authored-by: Ona <no-reply@ona.com>
1 parent b0725d2 commit 9ec37e3

2 files changed

Lines changed: 63 additions & 117 deletions

File tree

‎website/src/App.tsx‎

Lines changed: 3 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,9 @@
1-
import { lazy, Suspense, useState } from 'react'
1+
import { lazy, Suspense } from 'react'
22
import { HeroSection } from './components/sections'
33
import Navigation from './components/Navigation'
44
import QuantumBackground from './components/QuantumBackground'
55
import Footer from './components/Footer'
66
import StickyCTA from './components/StickyCTA'
7-
import { useI18n } from './i18n/context'
8-
9-
// Mysticism toggle component with i18n
10-
function MysticismToggle({ showMysticism, setShowMysticism }: { showMysticism: boolean; setShowMysticism: (v: boolean) => void }) {
11-
const { t } = useI18n();
12-
const m = t.mysticism;
13-
14-
return (
15-
<div style={{ textAlign: 'center', padding: '2rem 0' }}>
16-
<button
17-
onClick={() => setShowMysticism(!showMysticism)}
18-
style={{
19-
background: 'transparent',
20-
border: '1px solid var(--border)',
21-
color: 'var(--muted)',
22-
padding: '0.5rem 1.5rem',
23-
borderRadius: '4px',
24-
cursor: 'pointer',
25-
fontSize: '0.9rem',
26-
opacity: 0.6,
27-
transition: 'opacity 0.3s'
28-
}}
29-
onMouseEnter={(e) => e.currentTarget.style.opacity = '1'}
30-
onMouseLeave={(e) => e.currentTarget.style.opacity = '0.6'}
31-
>
32-
{showMysticism
33-
? (m?.toggleHide || '▼ Hide Mathematical Foundations')
34-
: (m?.toggleShow || '▶ For Mathematicians: SU(3), Chern-Simons, φ')}
35-
</button>
36-
</div>
37-
);
38-
}
397

408
// OPTIMIZED: 8 sections only (was 29)
419
// Target: +40% conversion through focused flow
@@ -57,8 +25,6 @@ const SectionFallback = () => (
5725
)
5826

5927
export default function App() {
60-
const [showMysticism, setShowMysticism] = useState(false)
61-
6228
return (
6329
<main>
6430
<QuantumBackground />
@@ -86,9 +52,8 @@ export default function App() {
8652
{/* 7. TEAM - Trust builder (3 members max) */}
8753
<TeamSection />
8854

89-
{/* MYSTICISM SUBTAB - Hidden by default */}
90-
<MysticismToggle showMysticism={showMysticism} setShowMysticism={setShowMysticism} />
91-
{showMysticism && <MysticismSection />}
55+
{/* 8. SCIENCE - Mathematical foundations */}
56+
<MysticismSection />
9257

9358
{/* 8. INVEST - Final CTA */}
9459
<InvestSection />

‎website/src/components/sections/MysticismSection.tsx‎

Lines changed: 60 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
"use client";
22
import { motion } from 'framer-motion';
33
import { useI18n } from '../../i18n/context';
4+
import Section from '../Section';
45

56
interface MysticismItem {
67
title: string;
@@ -30,91 +31,71 @@ export default function MysticismSection() {
3031
formula: 'φ² + 1/φ² = 3 = TRINITY'
3132
},
3233
{
33-
title: 'Phoenix Number',
34-
description: 'The self-referential constant that emerges from ternary recursion.',
35-
formula: 'Φ = lim(n→∞) T(n)/T(n-1) ≈ 1.618...'
34+
title: 'Optimal Radix Theorem',
35+
description: 'Information theory proves: optimal base is e ≈ 2.718, nearest integer = 3.',
36+
formula: 'Optimal base = e ≈ 2.718 → nearest integer = 3'
3637
}
3738
];
3839

3940
const items: MysticismItem[] = m?.items || defaultItems;
4041

4142
return (
42-
<section id="mysticism" style={{ padding: '4rem 2rem', background: 'rgba(0,0,0,0.3)' }}>
43-
<div style={{ maxWidth: '1200px', margin: '0 auto' }}>
44-
<motion.h2
45-
initial={{ opacity: 0, y: 20 }}
46-
whileInView={{ opacity: 1, y: 0 }}
47-
viewport={{ once: true }}
48-
style={{ textAlign: 'center', marginBottom: '3rem', fontSize: '2rem' }}
49-
>
50-
{m?.title || 'Mathematical Foundations'}
51-
</motion.h2>
52-
53-
<div style={{
54-
display: 'grid',
55-
gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
56-
gap: '1.5rem'
57-
}}>
58-
{items.map((item: MysticismItem, index: number) => (
59-
<motion.div
60-
key={item.title}
61-
initial={{ opacity: 0, y: 30 }}
62-
whileInView={{ opacity: 1, y: 0 }}
63-
viewport={{ once: true }}
64-
transition={{ delay: index * 0.1 }}
65-
style={{
66-
background: 'rgba(255,255,255,0.02)',
67-
border: '1px solid var(--border)',
68-
borderRadius: '8px',
69-
padding: '1.5rem',
70-
transition: 'border-color 0.3s'
71-
}}
72-
whileHover={{ borderColor: 'var(--accent)' }}
73-
>
74-
<h3 style={{
75-
color: 'var(--accent)',
76-
marginBottom: '0.75rem',
77-
fontSize: '1.1rem'
78-
}}>
79-
{item.title}
80-
</h3>
81-
<p style={{
82-
color: 'var(--muted)',
83-
fontSize: '0.9rem',
84-
lineHeight: 1.6,
85-
marginBottom: '1rem'
86-
}}>
87-
{item.description}
88-
</p>
89-
<code style={{
90-
display: 'block',
91-
background: 'rgba(0,0,0,0.3)',
92-
padding: '0.5rem',
93-
borderRadius: '4px',
94-
fontSize: '0.8rem',
95-
color: 'var(--accent)',
96-
fontFamily: 'monospace'
97-
}}>
98-
{item.formula}
99-
</code>
100-
</motion.div>
101-
))}
102-
</div>
103-
104-
<motion.p
105-
initial={{ opacity: 0 }}
106-
whileInView={{ opacity: 0.5 }}
107-
viewport={{ once: true }}
108-
style={{
109-
textAlign: 'center',
110-
marginTop: '2rem',
111-
fontSize: '0.85rem',
112-
fontStyle: 'italic'
113-
}}
114-
>
115-
{m?.subtitle || 'These mathematical structures provide theoretical grounding for ternary computing advantages.'}
116-
</motion.p>
43+
<Section id="science">
44+
<div className="tight fade">
45+
<h2>{m?.title || 'Mathematical Foundations'}</h2>
46+
<p style={{ maxWidth: '800px', margin: '0 auto 3rem', opacity: 0.7, lineHeight: 1.7 }}>
47+
{m?.subtitle || 'Why 3? Inside every proton and neutron, quarks have exactly 3 colors — this is SU(3) symmetry that holds atoms together. Our ternary system {-1, 0, +1} mirrors this natural pattern.'}
48+
</p>
11749
</div>
118-
</section>
50+
51+
<div className="fade" style={{
52+
display: 'grid',
53+
gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
54+
gap: '1.5rem',
55+
maxWidth: '1200px',
56+
margin: '0 auto'
57+
}}>
58+
{items.map((item: MysticismItem, index: number) => (
59+
<motion.div
60+
key={item.title}
61+
className="premium-card"
62+
initial={{ opacity: 0, y: 30 }}
63+
whileInView={{ opacity: 1, y: 0 }}
64+
viewport={{ once: true }}
65+
transition={{ delay: index * 0.1 }}
66+
style={{ padding: '1.5rem' }}
67+
whileHover={{ borderColor: 'var(--accent)' }}
68+
>
69+
<h3 style={{
70+
color: 'var(--accent)',
71+
marginBottom: '0.75rem',
72+
fontSize: '1.1rem'
73+
}}>
74+
{item.title}
75+
</h3>
76+
<p style={{
77+
color: 'var(--muted)',
78+
fontSize: '0.9rem',
79+
lineHeight: 1.6,
80+
marginBottom: '1rem'
81+
}}>
82+
{item.description}
83+
</p>
84+
<code style={{
85+
display: 'block',
86+
background: 'rgba(0,229,153,0.08)',
87+
padding: '0.75rem',
88+
borderRadius: '6px',
89+
fontSize: '0.85rem',
90+
color: 'var(--accent)',
91+
fontFamily: 'monospace',
92+
border: '1px solid rgba(0,229,153,0.2)'
93+
}}>
94+
{item.formula}
95+
</code>
96+
</motion.div>
97+
))}
98+
</div>
99+
</Section>
119100
);
120101
}

0 commit comments

Comments
 (0)