Skip to content

feat: redesign 30x.company website in Severance style #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bravohenry wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: redesign 30x.company website in Severance style #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions webview-ui/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet" />
<title>30X.company - Pixel-native Product Studio</title>
</head>
<body>
Expand Down
310 changes: 120 additions & 190 deletions webview-ui/src/Website.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,162 +1,104 @@
import { useState, useEffect } from 'react'
import { BrowserRouter, Link } from 'react-router-dom'
import { useState } from 'react'
import App from './App.js'

function SiteHeader() {
const [menuOpen, setMenuOpen] = useState(false)

return (
<header style={{
position: 'fixed',
top: 0,
left: 0,
right: 0,
height: '56px',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '0 24px',
background: 'rgba(0,0,0,0.7)',
backdropFilter: 'blur(10px)',
zIndex: 1000,
borderBottom: '1px solid rgba(255,255,255,0.1)'
}}>
<Link to="/" style={{
fontSize: '18px',
fontWeight: 700,
color: '#fff',
textDecoration: 'none',
letterSpacing: '-0.02em'
}}>
30X
</Link>
<nav style={{ display: 'flex', gap: '24px' }}>
<a href="#about" style={{ color: 'rgba(255,255,255,0.7)', textDecoration: 'none', fontSize: '14px' }}>About</a>
<a href="#contact" style={{ color: 'rgba(255,255,255,0.7)', textDecoration: 'none', fontSize: '14px' }}>Contact</a>
</nav>
<header className="site-header">
<div className="site-wrap">
<div className="site-header-inner">
<a href="/" className="site-logo">30X</a>
<button
className="site-menu-btn"
onClick={() => setMenuOpen(v => !v)}
aria-label="Toggle menu"
>
{menuOpen ? '×' : '☰'}
</button>
<nav className={`site-nav${menuOpen ? ' site-nav-open' : ''}`}>
<a href="#about" className="site-nav-link" onClick={() => setMenuOpen(false)}>About</a>
<a href="#work" className="site-nav-link" onClick={() => setMenuOpen(false)}>Work</a>
<a href="#contact" className="site-nav-link" onClick={() => setMenuOpen(false)}>Contact</a>
</nav>
</div>
</div>
</header>
)
}

function HeroOffice() {
const [status, setStatus] = useState({ state: 'idle', detail: 'Welcome to 30X' })

useEffect(() => {
// Simulate different states for demo
const states = [
{ state: 'idle', detail: 'Ready for your project' },
{ state: 'building', detail: 'Building something cool' },
{ state: 'researching', detail: 'Finding the best solution' },
{ state: 'idle', detail: 'Waiting for ideas' }
]
let i = 0
const interval = setInterval(() => {
setStatus(states[i % states.length])
i++
}, 4000)
return () => clearInterval(interval)
}, [])

function HeroSection() {
return (
<div style={{
width: '100%',
height: 'calc(100vh - 56px)',
marginTop: '56px',
position: 'relative',
background: '#0a0a0f'
}}>
<div style={{
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: '800px',
height: '500px',
borderRadius: '12px',
overflow: 'hidden',
boxShadow: '0 0 60px rgba(100,200,255,0.15), 0 0 120px rgba(100,200,255,0.05)'
}}>
<section>
<div className="site-wrap">
<div className="hero-copy">
<p className="eyebrow">Product Studio</p>
<h1>Build products<br />without the noise.</h1>
<p className="hero-subtitle">
We turn complex ideas into focused, shipped products.
Design, engineering, and AI — under one roof.
</p>
<div className="hero-actions">
<a href="#work" className="site-btn site-btn-primary">See our work</a>
<a href="#contact" className="site-btn site-btn-secondary">Get in touch</a>
</div>
</div>
</div>
<div className="office-stage">
<App mode="website" />
</div>

{/* Status overlay */}
<div style={{
position: 'absolute',
bottom: '32px',
left: '50%',
transform: 'translateX(-50%)',
background: 'rgba(0,0,0,0.8)',
backdropFilter: 'blur(10px)',
padding: '12px 24px',
borderRadius: '8px',
border: '1px solid rgba(255,255,255,0.1)',
display: 'flex',
alignItems: 'center',
gap: '12px'
}}>
<div style={{
width: '8px',
height: '8px',
borderRadius: '50%',
background: status.state === 'idle' ? '#4ade80' : '#60a5fa',
animation: 'pulse 2s infinite'
}} />
<span style={{ color: '#fff', fontSize: '14px' }}>{status.detail}</span>
</section>
)
}

function WorkSection() {
return (
<section id="work" className="site-section">
<div className="site-wrap">
<p className="eyebrow">What we do</p>
<h2>From idea to production.</h2>
<p>
We work with founders and teams to ship products fast.
No bureaucracy, no bloated timelines — just clear execution.
</p>
<div className="feature-grid">
{[
{ title: 'Strategy', desc: 'Product direction, positioning, and roadmap planning.' },
{ title: 'Design', desc: 'UI/UX, design systems, and interaction design.' },
{ title: 'Engineering', desc: 'Full-stack web and mobile development.' },
{ title: 'AI Integration', desc: 'LLM-powered features and workflow automation.' },
].map(item => (
<div key={item.title} className="feature-card">
<h3>{item.title}</h3>
<p>{item.desc}</p>
</div>
))}
</div>
</div>

<style>{`
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
`}</style>
</div>
</section>
)
}

function AboutSection() {
return (
<section id="about" style={{
padding: '80px 24px',
background: '#0a0a0f',
minHeight: '400px'
}}>
<div style={{ maxWidth: '800px', margin: '0 auto' }}>
<h2 style={{
fontSize: '32px',
color: '#fff',
marginBottom: '24px',
fontWeight: 600
}}>
We build AI-powered products
</h2>
<p style={{
color: 'rgba(255,255,255,0.6)',
fontSize: '16px',
lineHeight: 1.7
}}>
30X is a pixel-native product studio. We transform complex systems
into clear, runnable, and scalable products. Our team combines
design, engineering, and AI automation to ship fast.
<section id="about" className="site-section">
<div className="site-wrap">
<p className="eyebrow">About</p>
<h2>Small team. Focused output.</h2>
<p>
30X is a lean product studio. We take on a handful of projects at a time
so every client gets real attention. We believe the best products come
from clear thinking and relentless execution — not large teams.
</p>

<div style={{
display: 'grid',
gridTemplateColumns: 'repeat(3, 1fr)',
gap: '24px',
marginTop: '48px'
}}>
<div className="feature-grid" style={{ marginTop: '40px' }}>
{[
{ title: 'Fast', desc: 'Ship in days, not months' },
{ title: 'Smart', desc: 'AI-first architecture' },
{ title: 'Focused', desc: 'Product-led growth' }
{ title: 'Fast', desc: 'Ship in weeks, not quarters.' },
{ title: 'Direct', desc: 'You talk to the people building it.' },
{ title: 'Focused', desc: 'One project at a time gets our full attention.' },
].map(item => (
<div key={item.title} style={{
padding: '24px',
background: 'rgba(255,255,255,0.03)',
borderRadius: '8px',
border: '1px solid rgba(255,255,255,0.05)'
}}>
<h3 style={{ color: '#fff', fontSize: '18px', marginBottom: '8px' }}>{item.title}</h3>
<p style={{ color: 'rgba(255,255,255,0.5)', fontSize: '14px' }}>{item.desc}</p>
<div key={item.title} className="feature-card">
<h3>{item.title}</h3>
<p>{item.desc}</p>
</div>
))}
</div>
Expand All @@ -167,66 +109,54 @@ function AboutSection() {

function ContactSection() {
return (
<section id="contact" style={{
padding: '80px 24px',
background: '#050508',
borderTop: '1px solid rgba(255,255,255,0.05)'
}}>
<div style={{ maxWidth: '600px', margin: '0 auto', textAlign: 'center' }}>
<h2 style={{
fontSize: '32px',
color: '#fff',
marginBottom: '16px',
fontWeight: 600
}}>
Let's build something
</h2>
<p style={{
color: 'rgba(255,255,255,0.6)',
fontSize: '16px',
marginBottom: '32px'
}}>
Tell us about your project. We'll get back to you soon.
<section id="contact" className="site-section">
<div className="site-wrap">
<p className="eyebrow">Contact</p>
<h2>Let's talk.</h2>
<p>
Have a project in mind? Tell us what you're building.
We'll get back to you within a day or two.
</p>
<a href="mailto:hello@30x.company" style={{
display: 'inline-block',
padding: '14px 32px',
background: '#fff',
color: '#000',
borderRadius: '8px',
textDecoration: 'none',
fontWeight: 600,
fontSize: '16px'
}}>
hello@30x.company
</a>
<div className="contact-grid" style={{ marginTop: '40px' }}>
<div className="contact-item">
<h3>Email</h3>
<p>hello@30x.company</p>
</div>
<div className="contact-item">
<h3>Based in</h3>
<p>San Francisco, CA</p>
</div>
<div className="contact-item">
<h3>Working with</h3>
<p>Founders &amp; early-stage teams</p>
</div>
</div>
</div>

<footer style={{
marginTop: '80px',
textAlign: 'center',
color: 'rgba(255,255,255,0.3)',
fontSize: '14px'
}}>
© {new Date().getFullYear()} 30X.company
</footer>
</section>
)
}

function SiteFooter() {
return (
<footer className="site-footer">
<div className="site-wrap">
&copy; {new Date().getFullYear()} 30X.company
</div>
</footer>
)
}

export default function Website() {
return (
<BrowserRouter>
<div style={{
background: '#0a0a0f',
minHeight: '100vh',
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
}}>
<SiteHeader />
<HeroOffice />
<div>
<SiteHeader />
<main className="site-main">
<HeroSection />
<WorkSection />
<AboutSection />
<ContactSection />
</div>
</BrowserRouter>
</main>
<SiteFooter />
</div>
)
}
6 changes: 3 additions & 3 deletions webview-ui/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ html, body, #root {
}

body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: #0a0a0f;
color: #fff;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: #FAFAFA;
color: #111111;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Expand Down
Loading