diff --git a/index.html b/index.html index fb4074a..b256fc9 100644 --- a/index.html +++ b/index.html @@ -3,8 +3,8 @@ - - Replace — your deck title + + Cubicle Slides is one slide. Add speaker notes with - notes="…" on any slide (shown in presenter mode — press P). - ══════════════════════════════════════════════════════════════════════ */ -const panel = (extra = 0.22): React.CSSProperties => ({ - position: 'absolute', - inset: 0, - background: `radial-gradient(120% 100% at 30% 20%, color-mix(in srgb, var(--primary) ${ - extra * 100 - }%, transparent), transparent 60%), var(--surface-2)`, -}); -const card: React.CSSProperties = { - padding: 22, - borderRadius: 'var(--radius)', - background: 'var(--surface)', - border: '1px solid var(--hair)', -}; +import { useMemo } from 'react'; +import { getRegisteredDeck } from './decks/deckRegistry'; export default function App() { - return ( - - {/* Cover */} - Bolt Slides} - subtitle="A responsive React deck engine. Delete this and build the real one." - foot="June 2026 · Component demo" - /> - - {/* Statement + click-build */} - -

- Dashboards are everywhere.{' '} - Insight isn't. -

- -

- Bolt Slides turns raw events into answers — automatically. -

- - - - {/* Agenda */} - - - {/* Contrast — the problem */} - - - {/* Split feature */} - - Everything, as it happens. - - } - body="Live metrics with sub-second latency — no pipelines to babysit." - media={ - <> -
-
- - - -
- - } - /> - - {/* Bento */} - , - body: 'events / min at peak.', - c: 5, - r: 2, - variant: 'glow', - }, - { - k: 'Uptime', - fig: , - c: 4, - }, - { k: 'Regions', fig: , c: 3, variant: 'accent' }, - { - k: 'Connectors', - title: '120+ native', - body: 'Snowflake, Kafka, dbt…', - c: 4, - }, - { k: 'Compliance', title: 'SOC 2 · HIPAA', c: 3 }, - ]} - /> - - {/* Globe */} - - Everywhere your data lives. - - } - body="Ingest close to the source; answer from the nearest edge." - markers={[ - { - location: [37.77, -122.41], - size: 0.08, - label: 'sfo1', - value: '221k evt/s', - }, - { location: [40.71, -74.0], size: 0.08 }, - { - location: [51.5, -0.12], - size: 0.07, - label: 'lhr1', - value: '188k evt/s', - }, - { location: [52.52, 13.4], size: 0.05 }, - { - location: [1.35, 103.82], - size: 0.07, - label: 'sin1', - value: '96k evt/s', - }, - { location: [35.68, 139.69], size: 0.06 }, - { location: [-33.87, 151.2], size: 0.05 }, - { location: [-23.55, -46.63], size: 0.05 }, - ]} - arcs={[ - { from: [37.77, -122.41], to: [51.5, -0.12] }, - { from: [51.5, -0.12], to: [1.35, 103.82] }, - { from: [37.77, -122.41], to: [-23.55, -46.63] }, - ]} - stats={[ - { value: '48%', label: 'North America' }, - { value: '31%', label: 'EMEA' }, - { value: '21%', label: 'APAC + LATAM' }, - ]} - /> - - {/* StatGrid — traction */} - , - label: 'ARR', - caption: 'up 3× year over year', - }, - { - value: , - label: 'Net retention', - caption: 'best in class', - }, - { - value: , - label: 'Enterprise logos', - caption: 'across six industries', - }, - ]} - /> - - {/* BigNumber */} - } - caption="events answered in under a second." - foot="Production traffic, trailing 30 days" - /> - - {/* Section divider */} -
- How it works. - - } - /> - - {/* Steps */} - - - {/* Chat */} - - - {/* Comparison */} - - -
- Why teams switch -
-

- The honest comparison. -

- - -
- -
- - - - {/* Tabs */} - - -
- One platform -
-

- Built for every team. -

- - - - Trace any request end-to-end, alert on anomalies, ship with - confidence. -

- ), - }, - { - label: 'Data', - content: ( -
- -
- ), - }, - { - label: 'Ops', - content: ( -

- One source of truth for uptime, cost, and capacity — no - spreadsheets. -

- ), - }, - ]} - /> - - - - {/* Split + code */} - - Drop-in simple. - - } - body="Add it to your app in three lines. No SDK to learn, no schema to define." - media={ - <> -
-
- -
- - } - /> - - {/* Browser frame */} - - -
- See it live -
-

- Your data, one screen. -

- - -
- -
-
-
- Bolt Slides -
- {['Overview', 'Events', 'Funnels', 'Cohorts', 'Settings'].map( - (n, i) => ( -
- {n} -
- ) - )} -
-
-
-

- Overview -

- Last 30 days -
-
- {[ - ['Revenue', '$1.24M', '▲ 18.2%'], - ['Active users', '48,210', '▲ 9.4%'], - ['Churn', '1.9%', '▼ 0.6%'], - ].map(([l, v, d]) => ( -
-
- {l} -
-
- {v} -
-
- {d} -
-
- ))} -
-
- -
-
-
- -
- - - - {/* Charts */} - - -
- The numbers -
-

- Growth you can see. -

- - -
-
-
- Weekly active -
-
- -
-
-
-
- Revenue -
- -
-
- -
-
- - - - {/* Data table */} - - -
- Unit economics -
-

- Growth, by region. -

- - - - - - - {/* Timeline */} - - -
- Where we're going -
-

- The roadmap. -

- -
- -
- - - {/* Pricing */} - - - {/* Spotlight principles */} - - -
- What we believe -
-

- Three principles. -

- - -
- {[ - { - k: '01', - t: 'Fast by default', - d: 'Speed is a feature. Everything is realtime.', - }, - { - k: '02', - t: 'Yours to own', - d: 'Your data, your infra, no lock-in.', - }, - { - k: '03', - t: 'Honest pricing', - d: 'No per-seat tax. Scale without surprises.', - }, - ].map((p) => ( - -
- {p.k} -
-

- {p.t} -

-

- {p.d} -

- - ))} -
- - - - {/* Accordion — FAQ */} - - -
- Common questions -
-

- Frequently asked. -

- - -
- -
- - - - {/* Team */} - - - {/* Logos */} - - -
- Trusted by teams everywhere -
- - - + const deck = useMemo(() => { + const params = new URLSearchParams(window.location.search); + return getRegisteredDeck(params.get('deck')); + }, []); - {/* Quote */} - + const DeckComponent = deck.component; - {/* CTA */} - - -

- Let's talk. -

-

- hello@bolt.new -

- - - - ); + return ; } diff --git a/src/copyapp.tsx b/src/copyapp.tsx new file mode 100644 index 0000000..f209b6d --- /dev/null +++ b/src/copyapp.tsx @@ -0,0 +1,977 @@ +import Deck from './deck/Deck'; +import Slide from './deck/Slide'; +import Build from './deck/Build'; +import Reveal from './deck/Reveal'; +import Bento from './components/Bento'; +import Split from './components/Split'; +import CountUp from './components/CountUp'; +import TiltCard from './components/TiltCard'; +import Marquee from './components/Marquee'; +import VisualDashboard from './components/VisualDashboard'; +import StatGrid from './components/StatGrid'; +import Accordion from './components/Accordion'; +import Comparison from './components/Comparison'; +import Tabs from './components/Tabs'; +import Timeline from './components/Timeline'; +import CodeWindow from './components/CodeWindow'; +import BrowserFrame from './components/BrowserFrame'; +import SpotlightCard from './components/SpotlightCard'; +import { BarChart, LineChart, DonutChart } from './components/Charts'; +import Section from './components/Section'; +import Quote from './components/Quote'; +import Pricing from './components/Pricing'; +import Steps from './components/Steps'; +import Agenda from './components/Agenda'; +import Team from './components/Team'; +import Cover from './components/Cover'; +import BigNumber from './components/BigNumber'; +import Contrast from './components/Contrast'; +import Chat from './components/Chat'; +import Table from './components/Table'; +import Globe from './components/Globe'; + +/* ══════════════════════════════════════════════════════════════════════ + ⚠️ THROWAWAY DEMO showing every component. DELETE these slides and AUTHOR + THE USER'S DECK. Each child of is one slide. Add speaker notes with + notes="…" on any slide (shown in presenter mode — press P). + ══════════════════════════════════════════════════════════════════════ */ +const panel = (extra = 0.22): React.CSSProperties => ({ + position: 'absolute', + inset: 0, + background: `radial-gradient(120% 100% at 30% 20%, color-mix(in srgb, var(--primary) ${ + extra * 100 + }%, transparent), transparent 60%), var(--surface-2)`, +}); +const card: React.CSSProperties = { + padding: 22, + borderRadius: 'var(--radius)', + background: 'var(--surface)', + border: '1px solid var(--hair)', +}; + +export default function App() { + return ( + + {/* Cover */} + Bolt Slides} + subtitle="A responsive React deck engine. Delete this and build the real one." + foot="June 2026 · Component demo" + /> + + {/* Statement + click-build */} + +

+ Dashboards are everywhere.{' '} + Insight isn't. +

+ +

+ Bolt Slides turns raw events into answers — automatically. +

+ + + + {/* Agenda */} + + + {/* Contrast — the problem */} + + + {/* Split feature */} + + Everything, as it happens. + + } + body="Live metrics with sub-second latency — no pipelines to babysit." + media={ + <> +
+
+ + + +
+ + } + /> + + {/* Bento */} + , + body: 'events / min at peak.', + c: 5, + r: 2, + variant: 'glow', + }, + { + k: 'Uptime', + fig: , + c: 4, + }, + { k: 'Regions', fig: , c: 3, variant: 'accent' }, + { + k: 'Connectors', + title: '120+ native', + body: 'Snowflake, Kafka, dbt…', + c: 4, + }, + { k: 'Compliance', title: 'SOC 2 · HIPAA', c: 3 }, + ]} + /> + + {/* Globe */} + + Everywhere your data lives. + + } + body="Ingest close to the source; answer from the nearest edge." + markers={[ + { + location: [37.77, -122.41], + size: 0.08, + label: 'sfo1', + value: '221k evt/s', + }, + { location: [40.71, -74.0], size: 0.08 }, + { + location: [51.5, -0.12], + size: 0.07, + label: 'lhr1', + value: '188k evt/s', + }, + { location: [52.52, 13.4], size: 0.05 }, + { + location: [1.35, 103.82], + size: 0.07, + label: 'sin1', + value: '96k evt/s', + }, + { location: [35.68, 139.69], size: 0.06 }, + { location: [-33.87, 151.2], size: 0.05 }, + { location: [-23.55, -46.63], size: 0.05 }, + ]} + arcs={[ + { from: [37.77, -122.41], to: [51.5, -0.12] }, + { from: [51.5, -0.12], to: [1.35, 103.82] }, + { from: [37.77, -122.41], to: [-23.55, -46.63] }, + ]} + stats={[ + { value: '48%', label: 'North America' }, + { value: '31%', label: 'EMEA' }, + { value: '21%', label: 'APAC + LATAM' }, + ]} + /> + + {/* StatGrid — traction */} + , + label: 'ARR', + caption: 'up 3× year over year', + }, + { + value: , + label: 'Net retention', + caption: 'best in class', + }, + { + value: , + label: 'Enterprise logos', + caption: 'across six industries', + }, + ]} + /> + + {/* BigNumber */} + } + caption="events answered in under a second." + foot="Production traffic, trailing 30 days" + /> + + {/* Section divider */} +
+ How it works. + + } + /> + + {/* Steps */} + + + {/* Chat */} + + + {/* Comparison */} + + +
+ Why teams switch +
+

+ The honest comparison. +

+ + +
+ +
+ + + + {/* Tabs */} + + +
+ One platform +
+

+ Built for every team. +

+ + + + Trace any request end-to-end, alert on anomalies, ship with + confidence. +

+ ), + }, + { + label: 'Data', + content: ( +
+ +
+ ), + }, + { + label: 'Ops', + content: ( +

+ One source of truth for uptime, cost, and capacity — no + spreadsheets. +

+ ), + }, + ]} + /> + + + + {/* Split + code */} + + Drop-in simple. + + } + body="Add it to your app in three lines. No SDK to learn, no schema to define." + media={ + <> +
+
+ +
+ + } + /> + + {/* Browser frame */} + + +
+ See it live +
+

+ Your data, one screen. +

+ + +
+ +
+
+
+ Bolt Slides +
+ {['Overview', 'Events', 'Funnels', 'Cohorts', 'Settings'].map( + (n, i) => ( +
+ {n} +
+ ) + )} +
+
+
+

+ Overview +

+ Last 30 days +
+
+ {[ + ['Revenue', '$1.24M', '▲ 18.2%'], + ['Active users', '48,210', '▲ 9.4%'], + ['Churn', '1.9%', '▼ 0.6%'], + ].map(([l, v, d]) => ( +
+
+ {l} +
+
+ {v} +
+
+ {d} +
+
+ ))} +
+
+ +
+
+
+ +
+ + + + {/* Charts */} + + +
+ The numbers +
+

+ Growth you can see. +

+ + +
+
+
+ Weekly active +
+
+ +
+
+
+
+ Revenue +
+ +
+
+ +
+
+ + + + {/* Data table */} + + +
+ Unit economics +
+

+ Growth, by region. +

+ + +
+ + + + {/* Timeline */} + + +
+ Where we're going +
+

+ The roadmap. +

+ +
+ +
+ + + {/* Pricing */} + + + {/* Spotlight principles */} + + +
+ What we believe +
+

+ Three principles. +

+ + +
+ {[ + { + k: '01', + t: 'Fast by default', + d: 'Speed is a feature. Everything is realtime.', + }, + { + k: '02', + t: 'Yours to own', + d: 'Your data, your infra, no lock-in.', + }, + { + k: '03', + t: 'Honest pricing', + d: 'No per-seat tax. Scale without surprises.', + }, + ].map((p) => ( + +
+ {p.k} +
+

+ {p.t} +

+

+ {p.d} +

+ + ))} +
+ + + + {/* Accordion — FAQ */} + + +
+ Common questions +
+

+ Frequently asked. +

+ + +
+ +
+ + + + {/* Team */} + + + {/* Logos */} + + +
+ Trusted by teams everywhere +
+ + + + + {/* Quote */} + + + {/* CTA */} + + +

+ Let's talk. +

+

+ hello@bolt.new +

+ + + + ); +} diff --git a/src/decks/builders/BuildersDeck.tsx b/src/decks/builders/BuildersDeck.tsx new file mode 100644 index 0000000..a72b007 --- /dev/null +++ b/src/decks/builders/BuildersDeck.tsx @@ -0,0 +1,1575 @@ +import type { CSSProperties, ReactNode } from 'react'; +import Deck from '../../deck/Deck'; +import Slide from '../../deck/Slide'; +import Build from '../../deck/Build'; +import Reveal from '../../deck/Reveal'; +import Cover from '../../components/Cover'; +import Section from '../../components/Section'; +import Timeline from '../../components/Timeline'; +import Comparison from '../../components/Comparison'; +import StatGrid from '../../components/StatGrid'; +import CountUp from '../../components/CountUp'; +import BrowserFrame from '../../components/BrowserFrame'; +import { BarChart, LineChart, DonutChart } from '../../components/Charts'; + +const colors = { + ink: '#0B1020', + muted: '#667085', + blue: '#2563EB', + violet: '#7C3AED', + cyan: '#06B6D4', + green: '#16A34A', + amber: '#D97706', + rose: '#E11D48', + surface: 'rgba(255,255,255,0.82)', + line: 'rgba(15,23,42,0.10)', +}; + +const glass: CSSProperties = { + border: `1px solid ${colors.line}`, + background: colors.surface, + boxShadow: '0 24px 80px rgba(15,23,42,0.08)', + backdropFilter: 'blur(18px)', + WebkitBackdropFilter: 'blur(18px)', + borderRadius: 28, +}; + +const smallGlass: CSSProperties = { + ...glass, + borderRadius: 20, + boxShadow: '0 14px 40px rgba(15,23,42,0.06)', +}; + +const gradientText: CSSProperties = { + background: `linear-gradient(135deg, ${colors.blue}, ${colors.violet} 58%, ${colors.cyan})`, + WebkitBackgroundClip: 'text', + color: 'transparent', +}; + +const pageGlow: CSSProperties = { + position: 'absolute', + inset: 0, + pointerEvents: 'none', + background: + 'radial-gradient(circle at 18% 18%, rgba(37,99,235,.13), transparent 30%), radial-gradient(circle at 82% 26%, rgba(124,58,237,.12), transparent 31%), radial-gradient(circle at 50% 90%, rgba(6,182,212,.08), transparent 34%), #F8FAFC', +}; + +const dotGrid: CSSProperties = { + position: 'absolute', + inset: 0, + opacity: 0.36, + pointerEvents: 'none', + backgroundImage: 'radial-gradient(rgba(15,23,42,.15) 1px, transparent 1px)', + backgroundSize: '24px 24px', + maskImage: 'linear-gradient(to bottom, black, transparent 88%)', +}; + +const titleStyle: CSSProperties = { + fontSize: 'clamp(36px,5vw,72px)', + lineHeight: 0.98, + letterSpacing: '-0.055em', + margin: 0, + color: colors.ink, +}; + +const subtitleStyle: CSSProperties = { + color: colors.muted, + fontSize: 'clamp(17px,2vw,24px)', + lineHeight: 1.5, + margin: 0, +}; + +type IconName = + | 'brain' + | 'people' + | 'spark' + | 'layers' + | 'database' + | 'code' + | 'shield' + | 'rocket' + | 'check' + | 'globe' + | 'chart' + | 'briefcase' + | 'mobile' + | 'store' + | 'health' + | 'education' + | 'government' + | 'factory' + | 'workflow' + | 'cloud' + | 'target' + | 'money' + | 'building' + | 'support' + | 'repeat' + | 'map' + | 'terminal' + | 'cube'; + +function Icon({ + name, + size = 28, + color = colors.blue, + strokeWidth = 1.8, +}: { + name: IconName; + size?: number; + color?: string; + strokeWidth?: number; +}) { + const common = { + fill: 'none', + stroke: color, + strokeWidth, + strokeLinecap: 'round' as const, + strokeLinejoin: 'round' as const, + }; + + const paths: Record = { + brain: ( + <> + + + + + ), + people: ( + <> + + + + + ), + spark: ( + <> + + + + ), + layers: ( + <> + + + + ), + database: ( + <> + + + + ), + code: ( + <> + + + ), + shield: ( + <> + + + + ), + rocket: ( + <> + + + + + ), + check: ( + <> + + + + ), + globe: ( + <> + + + + ), + chart: ( + <> + + + + ), + briefcase: ( + <> + + + + ), + mobile: ( + <> + + + + ), + store: ( + <> + + + + ), + health: ( + <> + + + + ), + education: ( + <> + + + + ), + government: ( + <> + + + ), + factory: ( + <> + + + + ), + workflow: ( + <> + + + + + + ), + cloud: ( + <> + + + + ), + target: ( + <> + + + + + ), + money: ( + <> + + + + ), + building: ( + <> + + + ), + support: ( + <> + + + + ), + repeat: ( + <> + + + ), + map: ( + <> + + + + ), + terminal: ( + <> + + + + ), + cube: ( + <> + + + + ), + }; + + return ( + + ); +} + +function Background() { + return ( + <> +
+
+ + ); +} + +function Kicker({ children }: { children: ReactNode }) { + return ( +
+ + {children} +
+ ); +} + +function SlideTitle({ + kicker, + title, + body, + align = 'left', +}: { + kicker?: string; + title: ReactNode; + body?: ReactNode; + align?: 'left' | 'center'; +}) { + return ( + +
+ {kicker && {kicker}} +

{title}

+ {body &&
{body}
} +
+ + ); +} + +function GlassCard({ + children, + style, + accent, +}: { + children: ReactNode; + style?: CSSProperties; + accent?: string; +}) { + return ( +
+ {accent && ( +
+ )} +
{children}
+
+ ); +} + +function IconBadge({ name, color = colors.blue, size = 30 }: { name: IconName; color?: string; size?: number }) { + return ( +
+ +
+ ); +} + +function Pill({ children, tone = colors.blue }: { children: ReactNode; tone?: string }) { + return ( + + {children} + + ); +} + +function Flow({ + items, + columns = 1, + compact = false, +}: { + items: { title: string; subtitle?: string; icon?: IconName; tone?: string }[]; + columns?: number; + compact?: boolean; +}) { + return ( +
1 ? `repeat(${columns}, minmax(0,1fr))` : '1fr', + gap: compact ? 8 : 12, + }} + > + {items.map((item, index) => ( + +
+ {item.icon && } +
+
{item.title}
+ {item.subtitle &&
{item.subtitle}
} +
+ {index !== items.length - 1 && ( +
↓
+ )} +
+ + ))} +
+ ); +} + +function OrbitalFactory() { + const nodes = [ + { x: '8%', y: '22%', label: 'Product', icon: 'briefcase' as IconName }, + { x: '77%', y: '14%', label: 'Architecture', icon: 'layers' as IconName }, + { x: '80%', y: '72%', label: 'Engineering', icon: 'code' as IconName }, + { x: '11%', y: '76%', label: 'Quality', icon: 'shield' as IconName }, + ]; + + return ( +
+
+
+
+
+ +
AI Software Factory
+
From idea to working product
+
+
+ {nodes.map((node) => ( +
+ + {node.label} +
+ ))} +
+
+ ); +} + +function FivePersonAI() { + const positions = [ + { left: '4%', top: '15%', label: 'Strategy' }, + { left: '4%', top: '68%', label: 'Operations' }, + { left: '72%', top: '14%', label: 'Sales' }, + { left: '72%', top: '67%', label: 'Delivery' }, + { left: '38%', top: '2%', label: 'Product' }, + ]; + return ( +
+ + + + + + + + + {[70, 160, 250, 340, 430].map((x, i) => ( + + ))} + +
+
+ +
Builders AI
+
+
+ {positions.map((p, i) => ( +
+ +
+ +
+
{p.label}
+ +
+ ))} +
+ ); +} + +function MiniMetric({ value, label, tone = colors.blue }: { value: ReactNode; label: string; tone?: string }) { + return ( + +
{value}
+
{label}
+ + ); +} + +function ProductCategory({ + icon, + title, + items, + tone = colors.blue, +}: { + icon: IconName; + title: string; + items: string[]; + tone?: string; +}) { + return ( + +
+ +

{title}

+
+
+ {items.map((item) => ( + {item} + ))} +
+ + ); +} + +function AvatarRole({ + title, + caption, + icon, + tone, +}: { + title: string; + caption: string; + icon: IconName; + tone: string; +}) { + return ( + +
+ +
+
{title}
+
{caption}
+ + ); +} + +const industries = [ + 'Healthcare','Hospitals','Dental','Diagnostics','Pharmacy','Telemedicine','Education','Schools','Colleges','Universities', + 'Training','Coaching','EdTech','Retail','Supermarkets','Fashion','Textiles','Jewellery','Footwear','Furniture', + 'Electronics','Consumer Goods','E-commerce','D2C Brands','Hospitality','Hotels','Resorts','Restaurants','Cafés','Bakeries', + 'Catering','Travel','Tourism','Airlines','Automotive','Dealerships','Workshops','Rental Services','Logistics','Transport', + 'Courier','Warehousing','Supply Chain','Manufacturing','Engineering','Machinery','Foundries','Plastics','Chemicals','Packaging', + 'Construction','Architecture','Interior Design','Real Estate','Property Management','Agriculture','Farming','Dairy','Poultry','Food Processing', + 'Export','Import','Wholesale','Distribution','Finance','Banking','FinTech','Insurance','Accounting','Taxation', + 'Legal','Consulting','HR Services','Recruitment','Staffing','IT Services','Software','Cybersecurity','Startups','SaaS', + 'Media','Publishing','Entertainment','Cinema','Music','Events','Sports','Fitness','Gyms','Wellness', + 'Beauty','Salons','Spas','NGOs','Charities','Religious Organizations','Government','Municipalities','Utilities','Public Services', + 'Energy','Solar','Environment','Waste Management','Security Services','Facility Management','Repair Services','Professional Services','Freelancers','Associations', +]; + +const categoryData = { + websites: ['Restaurant','Hotel','Clinic','Hospital','Dental Clinic','Gym','Salon','School','College','Construction','Real Estate','Manufacturer','Travel Agency','Architect','Law Firm','Chartered Accountant','Interior Designer','Consultant','NGO','Startup','Corporate','Portfolio','Landing Pages','Membership Sites'], + business: ['CRM','ERP','Inventory','HRMS','Payroll','Attendance','Visitor Management','Invoice','Quotation','POS','Accounts','Purchase','Sales','Vendor Portal','Employee Portal','Customer Portal'], + healthcare: ['Hospital Management','Dental Clinic','Appointment System','Patient Portal','Medical Store','Diagnostic Lab','Pharmacy','Healthcare CRM','Telemedicine'], + education: ['School ERP','College ERP','Learning Platform','Exam Management','Attendance','Fee Management','Student Portal','Parent Portal','Library','Hostel','Transport'], + retail: ['Inventory','POS','Billing','Online Store','Order Tracking','Warehouse','Franchise Management','Customer Loyalty'], + ai: ['AI Chatbots','AI Customer Support','AI Knowledge Base','AI HR Assistant','AI Sales Assistant','AI Proposal Generator','AI Content Generator','AI Analytics','AI Agents','AI Automation'], + mobile: ['Restaurant','Delivery','Taxi','School','Hospital','Retail','Fitness','Booking','Events','Travel','Finance','Community'], + saas: ['CRM','HRMS','Project Management','Task Management','Bug Tracking','Helpdesk','Subscription Platform','Marketing Platform','Email Platform','Analytics'], + government: ['Citizen Portal','Complaint Portal','Village Portal','Municipality Portal','Utility Management'], + internal: ['Builders','Proposal Generator','Lead Manager','CRM','Employee Portal','Knowledge Base','Training Platform','Sales Dashboard','Project Dashboard','Support Desk','Marketing Automation'], +}; + +export default function App() { + return ( + + {/* 1 — Hero */} + + +
+ +
+ CubicleTech LLP · Founding Team +
+ BUILDERS +
+

+ The AI Software Factory +

+

+ Build the platform once.
+ Build unlimited software products forever. +

+
+ + + + +
+ + + {/* 2 — Who we are */} + + +
+
+ Five operators.
One AI multiplier.} + body="We are not traditional software developers. Our strength is understanding business problems, coordinating complex work, and delivering measurable value." + /> + +
+ {['Project Management','PMO','Agile','Scrum','Product Delivery','Software Coordination'].map((item) => {item})} +
+ + + +
+ +
+ Builders amplifies our existing strengths using AI. +
Business understanding + disciplined delivery + AI engineering.
+
+
+ + +
+ +
+ + + {/* 3 — Why Builders */} + + + Traditional software is heavy.
Builders makes it compounding.} align="center" /> + +
+ +
+ + + + {/* 4 — Problem statement */} + + +
+
+ Every business needs software.
Most cannot afford it.} + body="Demand has expanded far beyond websites. Businesses now require connected systems, automation, analytics, and AI." + /> + +
+ {['Websites','Mobile Apps','CRM','ERP','Automation','AI','Dashboards','Portals'].map((x) => {x})} +
+ +
+ + +
+ {[ + ['High agency pricing','money'], + ['Long delivery cycles','repeat'], + ['Too many specialists','people'], + ['Poor continuity','database'], + ].map(([label, icon], i) => ( + + +
{label}
+ + ))} +
+
+
Builders closes the affordability gap.
+
+ + +
+ + + {/* 5 — Vision */} + + +
+ Not another chatbot.
An AI software company.} + body="Builders behaves like a complete engineering organization, moving work through specialized roles until a working product is ready." + /> + + + + + +
+ + + {/* 6 — Mission */} + + + Make software development
available to every business.} + body={From a neighbourhood bakery to a multinational company.} + align="center" + /> + +
+ + +
Local Bakery
+
Website · orders · loyalty
+ +
→
+ + +
Global Enterprise
+
Platforms · automation · AI
+ +
+ + + + {/* 7 — Core philosophy */} + + + One prompt.
A complete engineering team.} align="center" /> + +
+ {[ + { icon: 'briefcase' as IconName, title: 'Business intent', body: 'Explain the problem and desired outcome.', tone: colors.blue }, + { icon: 'brain' as IconName, title: 'AI engineering team', body: 'Specialized roles analyze, build, review, and improve.', tone: colors.violet }, + { icon: 'rocket' as IconName, title: 'Production-ready app', body: 'Preview, package, continue development, and deploy.', tone: colors.green }, + ].map((x, i) => ( + <> + + +

{x.title}

+

{x.body}

+ + {i < 2 &&
→
} + + ))} +
+ + + + {/* 8 — How Builders works */} + + +
+ From customer need
to working product.} + body="A guided, reviewable pipeline replaces disconnected prompts with an engineering process." + /> + + + + + +
+ + + {/* 9 — AI engineering team */} + + + Nine AI engineers.
One coordinated product team.} align="center" /> + +
+ + + + + + + + + +
+ + + + {/* 10 — Review engine */} + + +
+ Every role reviews
what came before.} + body="Nothing should move forward silently. Each engineer checks the relevant prior work, identifies gaps, and records approval or requested changes." + /> + + +
+ {[ + { title: 'Output', icon: 'code' as IconName, tone: colors.blue }, + { title: 'Review', icon: 'shield' as IconName, tone: colors.amber }, + { title: 'Approval', icon: 'check' as IconName, tone: colors.green }, + ].map((x, i) => ( + <> + + +
{x.title}
+ + {i < 2 &&
→
} + + ))} +
+
+ + + +
+ + +
+ + + {/* 11 — BuildersDB */} + + +
+ Everything is stored.
Nothing important is lost.} + body="BuildersDB turns every project into a durable, searchable engineering record." + /> + + +
+
+ +
+
BuildersDB
+
+
+ {['Projects','Reviews','Tasks','Artifacts','Timeline','History','Packages','Authentication','Engineering Memory'].map((x, i) => ( +
+ {x} +
+ ))} +
+ + +
+ + + {/* 12 — Technology stack */} + + + Modern foundations.
Built to evolve.} align="center" /> + +
+ {[ + ['React','code',colors.blue],['Remix','workflow',colors.violet],['TypeScript','terminal',colors.blue],['Tailwind','spark',colors.cyan], + ['Supabase','database',colors.green],['Anthropic','brain',colors.violet],['OpenAI','spark',colors.ink],['Gemini','spark',colors.blue], + ['DeepSeek','brain',colors.cyan],['GitHub','code',colors.ink],['Vercel','cloud',colors.ink],['WebContainers','cube',colors.amber], + ].map(([name, icon, tone]) => ( + + +
{name}
+ + ))} +
+ + + + {/* 13 — Current features */} + + + The factory already has
a working production line.} align="center" /> + +
+ {[ + ['Project Dashboard','chart'],['AI Engineering Team','people'],['Reviews','shield'],['Timeline','repeat'], + ['BuildersDB','database'],['Authentication','check'],['Generate Application','factory'],['Continue Development','repeat'], + ['Preview','globe'],['Product Package','cube'],['Artifacts','layers'],['Drafts & Approvals','check'], + ].map(([label, icon], i) => ( + + +
{label}
+ + ))} +
+ + + + {/* 14 — Roadmap */} + + +
+ From software factory
to company operating system.} + body="Each capability increases reuse, collaboration, customer acquisition, delivery quality, or recurring revenue." + /> + +
+ +
+ +
+ + + {/* 15 — Why businesses need it */} + + + Why businesses need
Builders.} align="center" /> + +
+ {[ + ['Cost reduction','money','Lower delivery and coordination overhead.',colors.green], + ['Speed','rocket','Move from idea to preview dramatically faster.',colors.blue], + ['AI engineering','brain','Access specialized roles without staffing every function.',colors.violet], + ['Documentation','layers','Create durable artifacts, reviews, and history.',colors.cyan], + ['Scalability','repeat','Reuse patterns, templates, and components across products.',colors.amber], + ['Professional workflow','workflow','Operate with structured stages, approvals, and accountability.',colors.rose], + ].map(([title, icon, body, tone]) => ( + + +

{title}

+

{body}

+ + ))} +
+ + + + {/* 16 — Products overview */} + + + One factory.
Many product categories.} align="center" /> + +
+ {[ + ['Business Websites','globe',colors.blue],['Management Software','briefcase',colors.violet],['Healthcare','health',colors.rose],['Education','education',colors.cyan],['Retail','store',colors.amber], + ['AI Products','brain',colors.violet],['Mobile Apps','mobile',colors.blue],['SaaS','cloud',colors.cyan],['Public Sector','government',colors.green],['Internal Products','factory',colors.ink], + ].map(([name, icon, tone]) => ( + + +
{name}
+ + ))} +
+ + + + {/* 17 — Business websites */} + + + Business websites that
convert and operate.} /> + +
+ +
+ + + + {/* 18 — Business management */} + + + Software that runs
the daily business.} /> + +
+ +
+ + + + {/* 19 — Healthcare */} + + +
+ Digital healthcare
for better access.} body="Appointments, patient workflows, pharmacy, diagnostics, and coordinated care." /> + +
+ + + {/* 20 — Education */} + + +
+ Connected learning.
Simplified administration.} body="Systems for institutions, students, parents, faculty, and administrators." /> + +
+ + + {/* 21 — Retail */} + + +
+ From shelf to screen.
Retail, connected.} body="Help local stores improve billing, inventory, ordering, loyalty, and online reach." /> + +
+ + + {/* 22 — AI products */} + + +
+ AI that works
inside the business.} body="Turn knowledge, service, sales, HR, content, analytics, and workflows into intelligent systems." /> + +
+ + + {/* 23 — Mobile apps */} + + +
+ Products people carry
everywhere.} body="Mobile experiences for services, commerce, communities, operations, and personal engagement." /> + +
+ + + {/* 24 — SaaS */} + + +
+ Build once.
Subscribe many.} body="Reusable cloud products create recurring revenue, standardized delivery, and scalable customer acquisition." /> + +
+ + + {/* 25 — Government */} + + +
+ Better digital access
for every citizen.} body="Portals can simplify service requests, complaints, local administration, and utility operations." /> + +
+ + + {/* 26 — Internal products */} + + +
+ We use the factory
to build the factory company.} body="Internal products become our operating system, demonstrations, reusable modules, and future commercial offerings." /> + +
+ + + {/* 27 — Industries */} + + + More than 100 industries.
One adaptable platform.} align="center" /> + +
+
+ {industries.map((item, i) => ( + + {item} + + ))} +
+
+ + + + {/* 28 — Initial market */} + + +
+ Start local.
Scale deliberately.} + body="Our expansion follows proven delivery, portfolio strength, reusable products, and customer referrals." + /> + + +
+ + + + + + + + + + {[ + [70,310,'Coimbatore','Now'], + [220,245,'Tamil Nadu','Next'], + [340,175,'South India','Scale'], + [500,118,'India','Expand'], + [625,70,'Global','Vision'], + ].map(([x,y,label,time], i) => ( + + + {String(label)} + {String(time)} + + ))} + +
+ + +
+ + + {/* 29 — Segments */} + + + A platform for every
stage of business.} align="center" /> + +
+ {[ + ['Micro Business','store'],['Small Business','briefcase'],['Medium Business','building'],['Enterprise','globe'],['Government','government'], + ['Education','education'],['Healthcare','health'],['NGOs','people'],['Startups','rocket'],['Professionals','target'], + ].map(([name, icon], i) => ( + + +
{name}
+ + ))} +
+ + + + {/* 30 — Sales strategy */} + + +
+ Win trust before
winning scale.} + body="Focus on local businesses, clear outcomes, fast delivery, strong testimonials, and repeatable service." + /> + + +
+ +
₹15K–₹75K
+
Initial project range
+ + +
10
+
First customers target
+ +
+
+ {['Build portfolio','Collect testimonials','Generate referrals','Create repeat customers','Avoid expensive ERP initially','Stay close to local customers'].map((x, i) => ( +
+ + {x} +
+ ))} +
+ + +
+ + + {/* 31 — Business model */} + + + Multiple offers.
Increasing recurring revenue.} align="center" /> + +
+ {[ + ['Custom Software','code'],['Website Development','globe'],['Annual Maintenance','repeat'],['Hosting','cloud'], + ['AI Subscription','brain'],['SaaS','cube'],['Templates','layers'],['Consulting','briefcase'], + ['Training','education'],['Support','support'],['Licensing','shield'],['Marketplace','store'], + ].map(([name, icon], i) => ( + + +
{name}
+ + ))} +
+ + + + {/* 32 — Company structure */} + + + One company.
A compounding product engine.} align="center" /> + +
+ +
+ + + + {/* 33 — Team structure */} + + + Shared ownership.
Clear functional leadership.} align="center" /> + +
+
+ {[ + ['CEO / Strategy','target',colors.ink], + ['Operations & PMO','workflow',colors.blue], + ['Sales & Business Development','chart',colors.green], + ['Customer Success & Delivery','support',colors.cyan], + ['AI Platform & Product Management','brain',colors.violet], + ].map(([title, icon, tone]) => ( + +
+ +
+
{title}
+
Collaborative leadership with defined decision rights and measurable outcomes.
+ + ))} +
+
Specific founder assignments can be finalized after role and capacity discussions.
+
+ + + + {/* 34 — Five-year vision */} + + + From five founders
to a global software company.} align="center" /> + +
+ {[ + ['Thousands','Projects delivered','rocket',colors.blue], + ['Hundreds','Products and templates','cube',colors.violet], + ['Multiple','SaaS offerings','cloud',colors.cyan], + ['International','Customers and partners','globe',colors.green], + ['Marketplace','Templates, agents, solutions','store',colors.amber], + ['Global','AI-powered software company','building',colors.ink], + ].map(([value,label,icon,tone]) => ( + + +
{value}
+
{label}
+ + ))} +
+ + + + {/* 35 — Revenue vision */} + + +
+
+ Projects open doors.
Recurring revenue compounds.} /> + +
+ {['Custom software','Website packages','Mobile apps','SaaS subscriptions','AMC','AI automation','Hosting','Support retainers','White-label licensing','Template marketplace','Consulting','Training'].map((x) => {x})} +
+ +
+ + +
Recurring revenue mix over time
+
+ +
+
+ + + +
+ + +
+ + + {/* 36 — Why we will win */} + + + Why we can
win this market.} align="center" /> + +
+ {[ + ['Business experience','briefcase'],['PMO expertise','workflow'],['Agile mindset','repeat'], + ['AI-powered engineering','brain'],['Low operational cost','money'],['Fast delivery','rocket'], + ['Scalable platform','layers'],['Customer-first approach','support'],['Reusable product factory','factory'], + ].map(([name,icon], i) => ( + + +
{name}
+ + ))} +
+ + + + {/* 37 — 12-month plan */} + + + Build. Prove. Productize.
Then scale.} align="center" /> + +
+ {[ + { q: 'Q1', title: 'Complete & prove', tone: colors.blue, items: ['Complete Builders MVP','Deliver first client projects','Build portfolio','Acquire first 10 customers'] }, + { q: 'Q2', title: 'Standardize', tone: colors.violet, items: ['Launch reusable templates','Strengthen GitHub integration','Improve AI context memory','Begin AMC contracts'] }, + { q: 'Q3', title: 'Productize', tone: colors.cyan, items: ['Launch first SaaS products','Expand across Tamil Nadu','Build referral network','Standardize delivery'] }, + { q: 'Q4', title: 'Scale', tone: colors.green, items: ['Expand across South India','Launch proposal & CRM modules','Hire talent if needed','Prepare national expansion'] }, + ].map((q) => ( + +
{q.q}
+

{q.title}

+
+ {q.items.map((item) => ( +
+ + {item} +
+ ))} +
+ + ))} +
+ + + + {/* 38 — CTA */} + + +
+ +
+ The CubicleTech vision +

+ We are not building another software company. +

+ +
+ We are building a Software Factory. +
+ +

CubicleTech LLP · Founding Team

+
+ + +
+ + + ); +} diff --git a/src/decks/builders/buildersDeckMeta.ts b/src/decks/builders/buildersDeckMeta.ts new file mode 100644 index 0000000..98f0a21 --- /dev/null +++ b/src/decks/builders/buildersDeckMeta.ts @@ -0,0 +1,10 @@ +import type { DeckMeta } from '../types'; + +export const buildersDeckMeta: DeckMeta = { + id: 'builders', + title: 'Builders Presentation', + description: + 'The preserved Builders and CubicleTech presentation moved out of the application root.', + slideCount: 38, + tags: ['legacy', 'builders', 'strategy'], +}; diff --git a/src/decks/deckRegistry.ts b/src/decks/deckRegistry.ts new file mode 100644 index 0000000..b095d4c --- /dev/null +++ b/src/decks/deckRegistry.ts @@ -0,0 +1,23 @@ +import BuildersDeck from './builders/BuildersDeck'; +import { buildersDeckMeta } from './builders/buildersDeckMeta'; +import SampleDeck from './sample/SampleDeck'; +import { sampleDeckMeta } from './sample/sampleDeckMeta'; +import type { DeckId, RegisteredDeck } from './types'; + +export const DEFAULT_DECK_ID: DeckId = 'sample'; + +export const deckRegistry: Record = { + sample: { + ...sampleDeckMeta, + component: SampleDeck, + }, + builders: { + ...buildersDeckMeta, + component: BuildersDeck, + }, +}; + +export function getRegisteredDeck(deckId: string | null | undefined) { + if (!deckId) return deckRegistry[DEFAULT_DECK_ID]; + return deckRegistry[deckId as DeckId] ?? deckRegistry[DEFAULT_DECK_ID]; +} diff --git a/src/decks/sample/SampleDeck.tsx b/src/decks/sample/SampleDeck.tsx new file mode 100644 index 0000000..8ddbd9c --- /dev/null +++ b/src/decks/sample/SampleDeck.tsx @@ -0,0 +1,183 @@ +import Deck from '../../deck/Deck'; +import Slide from '../../deck/Slide'; +import Build from '../../deck/Build'; +import Cover from '../../components/Cover'; +import Split from '../../components/Split'; +import Comparison from '../../components/Comparison'; +import Timeline from '../../components/Timeline'; +import StatGrid from '../../components/StatGrid'; +import Quote from '../../components/Quote'; +import { BarChart } from '../../components/Charts'; + +const metrics = [ + { value: '6 min', label: 'Draft to review', caption: 'A short concept deck in one working session.' }, + { value: '7 slides', label: 'Starter narrative', caption: 'Enough structure to pitch a direction clearly.' }, + { value: '1 link', label: 'Shareable output', caption: 'Preview and present from the same deck runtime.' }, +]; + +export default function SampleDeck() { + return ( + + + Present ideas as +
+ living web slides. + + } + subtitle="A neutral starter deck for exploring the presentation engine, reusable components, and presenter workflow." + foot="Sample deck" + /> + + +

+ A deck can be more than a static export. +

+ +

+ Cubicle Slides keeps every slide responsive, interactive, and ready + to present in the browser. +

+ + + + + Move from rough outline +
+ to presentable structure. + + } + body="The reusable engine supports full-bleed layouts, responsive content, and the same presentation controls across every deck." + media={ +
+ {[ + 'Define the opening story', + 'Structure the key sections', + 'Preview the deck live', + 'Present with notes and controls', + ].map((item, index) => ( + +
Step {index + 1}
+

+ {item} +

+ + ))} +
+ } + /> + + +
+
+ Why this runtime +
+

+ One engine, multiple deck experiences. +

+ +
+ + + +
+
+ Workflow +
+

+ A simple path from concept to presentation. +

+ +
+ + + +
+
+ Metrics and charts +
+

+ Built-in components cover common presentation needs. +

+ +
+
Example trend
+
+ +
+
+
+ + + + + ); +} diff --git a/src/decks/sample/sampleDeckMeta.ts b/src/decks/sample/sampleDeckMeta.ts new file mode 100644 index 0000000..2eaa02d --- /dev/null +++ b/src/decks/sample/sampleDeckMeta.ts @@ -0,0 +1,10 @@ +import type { DeckMeta } from '../types'; + +export const sampleDeckMeta: DeckMeta = { + id: 'sample', + title: 'Cubicle Slides Sample Deck', + description: + 'A neutral sample deck that demonstrates the reusable presentation engine.', + slideCount: 7, + tags: ['sample', 'neutral', 'starter'], +}; diff --git a/src/decks/types.ts b/src/decks/types.ts new file mode 100644 index 0000000..99ae160 --- /dev/null +++ b/src/decks/types.ts @@ -0,0 +1,15 @@ +import type { ComponentType } from 'react'; + +export type DeckId = 'sample' | 'builders'; + +export type DeckMeta = { + id: DeckId; + title: string; + description: string; + tags?: string[]; + slideCount?: number; +}; + +export type RegisteredDeck = DeckMeta & { + component: ComponentType; +};