From 86147e1c1d56d2f0e1eab9ef326c6f7bb564a3fc Mon Sep 17 00:00:00 2001 From: Ezra Richard <125721936+ezrarichard@users.noreply.github.com> Date: Thu, 16 Jul 2026 12:51:23 +0530 Subject: [PATCH 1/9] Create copyapp.tsx --- src/copyapp.tsx | 977 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 977 insertions(+) create mode 100644 src/copyapp.tsx 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 +

+ + + + ); +} From 574824ffcd8d79e3a415363fe59ddb65dbb3373a Mon Sep 17 00:00:00 2001 From: Ezra Richard <125721936+ezrarichard@users.noreply.github.com> Date: Thu, 16 Jul 2026 12:56:10 +0530 Subject: [PATCH 2/9] Update App.tsx --- src/App.tsx | 1186 +++++++++++---------------------------------------- 1 file changed, 256 insertions(+), 930 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index f209b6d..a0028f6 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,976 +1,302 @@ -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)', -}; +import { + Deck, + Cover, + Slide, + Agenda, + Section, + Split, + Comparison, + Steps, + Timeline, + StatGrid, + BigNumber, + Quote, +} from './deck'; + +import { + Pricing, + Team, + BrowserFrame, + Globe, + TiltCard, + SpotlightCard, + Marquee, +} from './components'; export default function App() { return ( - {/* Cover */} + {/* ==================== SLIDE 1: Hero ==================== */} Bolt Slides} - subtitle="A responsive React deck engine. Delete this and build the real one." - foot="June 2026 · Component demo" + kicker="CubicleTech LLP" + title="BUILDERS" + subtitle="The AI Software Factory" + tagline="Build the platform once. Build unlimited software products forever." + notes="Strong opening. Pause after the tagline." /> - {/* Statement + click-build */} - -

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

- -

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

- + {/* ==================== SLIDE 2: Who We Are ==================== */} + +

Who We Are

+

+ A 5-member founding team with deep expertise in Project Management, PMO, Agile, Scrum, and Product Delivery. +

+

+ We are not traditional developers — our strength is understanding business problems and delivering value. +
Builders allows us to amplify those strengths using AI. +

- {/* Agenda */} - + {/* ==================== SLIDE 3: Why Builders? ==================== */} + +

Why Builders?

+ + - {/* Contrast — the problem */} - + {/* ==================== SLIDE 4: The Problem ==================== */} + +

The Problem

+

Businesses need software — websites, apps, CRM, ERP, AI tools, dashboards...

+

But they cannot afford traditional software development companies.

+ - {/* Split feature */} - - Everything, as it happens. - - } - body="Live metrics with sub-second latency — no pipelines to babysit." - media={ - <> -
-
- - - -
- - } - /> + {/* ==================== SLIDE 5: Vision ==================== */} + +

Our Vision

+

Builders is not another AI chatbot.

+

Builders is a complete AI Software Company — a virtual engineering organization.

+ + - {/* 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 }, - ]} - /> + {/* ==================== SLIDE 6: Mission ==================== */} + +

Our Mission

+

To make professional software development accessible to every business.

+

From a local bakery to a multinational corporation.

+ - {/* 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' }, - ]} - /> + {/* ==================== SLIDE 7: Core Philosophy ==================== */} + +

Core Philosophy

+ + - {/* 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', - }, - ]} - /> + {/* ==================== SLIDE 8: How Builders Works ==================== */} + +

How Builders Works

+ + - {/* BigNumber */} - } - caption="events answered in under a second." - foot="Production traffic, trailing 30 days" - /> + {/* ==================== SLIDE 9: AI Engineering Team ==================== */} + +

Meet Our AI Engineering Team

+ + - {/* Section divider */} -
- How it works. - - } - /> + {/* ==================== SLIDE 10: Review Engine ==================== */} + +

Review Engine

+

Every AI engineer reviews the previous stage’s work.

+

Nothing moves forward without approval — ensuring high quality.

+ - {/* Steps */} - + {/* ==================== SLIDE 11: BuildersDB ==================== */} + +

BuildersDB

+

Everything is stored and remembered:

+
    +
  • Projects & Requirements
    • +
  • Reviews & Approvals
    • +
  • Tasks & Artifacts
    • +
  • Timeline & History
    • +
  • Engineering Memory
    • +
+ - {/* Chat */} - + {/* ==================== SLIDE 12: Tech Stack ==================== */} + +

Current Technology Stack

+
+ {["React", "Remix", "TypeScript", "Tailwind", "Supabase", "Anthropic", "OpenAI", "Gemini", "Vercel", "GitHub", "WebContainers"].map((tech, i) => ( +
{tech}
+ ))} +
+ - {/* Comparison */} - - -
- Why teams switch -
-

- The honest comparison. -

- - -
- -
- + {/* ==================== SLIDE 13: Current Features ==================== */} + +

Current Features

+ - {/* 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. -

- ), - }, - ]} - /> - + {/* ==================== SLIDE 14: Roadmap ==================== */} + +

Roadmap

+ - {/* Split + code */} - - Drop-in simple. - - } - body="Add it to your app in three lines. No SDK to learn, no schema to define." - media={ - <> -
-
- -
- - } - /> + {/* ==================== SLIDE 15-26: Products We Can Build ==================== */} + +

Products We Can Build

+

From simple websites to complex enterprise systems — all powered by AI.

+ - {/* 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} -
-
- ))} -
-
- -
-
-
- -
- + +

Business Websites

+

Restaurant • Hotel • Clinic • Hospital • Gym • School • Real Estate • Law Firm • Startup • Portfolio • and more...

 - {/* Charts */} - - -
- The numbers -
-

- Growth you can see. -

- - -
-
-
- Weekly active -
-
- -
-
-
-
- Revenue -
- -
-
- -
-
- + +

Business Management Software

+

CRM • ERP • HRMS • Payroll • Inventory • POS • Invoice • Vendor Portal • Employee Portal...

 - {/* Data table */} - - -
- Unit economics -
-

- Growth, by region. -

- - -
- + +

Healthcare Products

+

Hospital Management • Appointment System • Patient Portal • Telemedicine • Pharmacy • Diagnostic Lab...

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

- The roadmap. -

- -
- -
+ +

Education Products

+

School ERP • College ERP • Learning Platform • Exam Management • Student & Parent Portal...

 - {/* Pricing */} - + +

Retail & E-commerce

+

Inventory • POS • Online Store • Order Tracking • Warehouse • Franchise Management...

+ - {/* 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} -

- - ))} -
- + +

AI Products

+

AI Chatbots • AI Customer Support • AI HR Assistant • AI Sales Assistant • AI Proposal Generator • AI Agents...

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

- Frequently asked. -

- - -
- -
- + +

Mobile Apps

+

Restaurant • Delivery • Taxi • School • Hospital • Fitness • Booking • Finance • Community...

 - {/* Team */} - + +

SaaS Products

+

CRM • Project Management • Helpdesk • Subscription Platform • Analytics • Marketing Platform...

+ - {/* Logos */} - - -
- Trusted by teams everywhere -
- - +

Possible Industries

+

Healthcare • Education • Retail • Hospitality • Finance • Real Estate • Manufacturing • Construction • Agriculture • Legal • Government • Logistics • and 80+ more...

+ + + {/* ==================== SLIDE 28: Market Expansion ==================== */} + +

Our Initial Market

+ + + + {/* ==================== SLIDE 29-38: Business & Vision ==================== */} + +

Customer Segments

+

Micro Business • Small Business • Medium Business • Enterprise • Government • Healthcare • Education • Startups • Professionals

+ + + +

Sales Strategy (Phase 1)

+

₹15,000 – ₹75,000 projects → Build portfolio → Testimonials → Referrals → Repeat customers

+ + + +

Business Model

+

Custom Development • Websites • Mobile Apps • Annual Maintenance • AI Subscriptions • SaaS • Templates • Consulting • Marketplace

+ + + +

5-Year Vision

+

Thousands of projects • Hundreds of products • Multiple SaaS offerings • International customers • Global software company

+ + + +

Why We Will Win

+

Business + PMO expertise • AI-powered engineering • Low operational cost • Fast delivery • Scalable platform • Customer-first approach

+ + + +

Next 12-Month Execution Plan

+ - {/* Quote */} - - - {/* CTA */} - - -

- Let's talk. -

-

- hello@bolt.new -

- + {/* ==================== FINAL SLIDE: Call to Action ==================== */} + +

"We are not building another software company."

+

We are building a Software Factory.

+

CubicleTech LLP • Builders

 ); From 89392a9d8dbeacfe1d3c7c4faebf611021037fe7 Mon Sep 17 00:00:00 2001 From: Ezra Richard <125721936+ezrarichard@users.noreply.github.com> Date: Thu, 16 Jul 2026 13:00:13 +0530 Subject: [PATCH 3/9] Update App.tsx --- src/App.tsx | 1186 ++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 930 insertions(+), 256 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index a0028f6..f209b6d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,302 +1,976 @@ -import { - Deck, - Cover, - Slide, - Agenda, - Section, - Split, - Comparison, - Steps, - Timeline, - StatGrid, - BigNumber, - Quote, -} from './deck'; - -import { - Pricing, - Team, - BrowserFrame, - Globe, - TiltCard, - SpotlightCard, - Marquee, -} from './components'; +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 ( - {/* ==================== SLIDE 1: Hero ==================== */} + {/* Cover */} Bolt Slides} + subtitle="A responsive React deck engine. Delete this and build the real one." + foot="June 2026 · Component demo" /> - {/* ==================== SLIDE 2: Who We Are ==================== */} - -

Who We Are

-

- A 5-member founding team with deep expertise in Project Management, PMO, Agile, Scrum, and Product Delivery. -

-

- We are not traditional developers — our strength is understanding business problems and delivering value. -
Builders allows us to amplify those strengths using AI. -

- - - {/* ==================== SLIDE 3: Why Builders? ==================== */} - -

Why Builders?

- - - - {/* ==================== SLIDE 4: The Problem ==================== */} - -

The Problem

-

Businesses need software — websites, apps, CRM, ERP, AI tools, dashboards...

-

But they cannot afford traditional software development companies.

- - - {/* ==================== SLIDE 5: Vision ==================== */} - -

Our Vision

-

Builders is not another AI chatbot.

-

Builders is a complete AI Software Company — a virtual engineering organization.

- - - - {/* ==================== SLIDE 6: Mission ==================== */} - -

Our Mission

-

To make professional software development accessible to every business.

-

From a local bakery to a multinational corporation.

+ {/* Statement + click-build */} + +

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

+ +

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

+ - {/* ==================== SLIDE 7: Core Philosophy ==================== */} - -

Core Philosophy

- - - - {/* ==================== SLIDE 8: How Builders Works ==================== */} - -

How Builders Works

- - - - {/* ==================== SLIDE 9: AI Engineering Team ==================== */} - -

Meet Our AI Engineering Team

- - - - {/* ==================== SLIDE 10: Review Engine ==================== */} - -

Review Engine

-

Every AI engineer reviews the previous stage’s work.

-

Nothing moves forward without approval — ensuring high quality.

- + {/* Agenda */} + - {/* ==================== SLIDE 11: BuildersDB ==================== */} - -

BuildersDB

-

Everything is stored and remembered:

-
    -
  • Projects & Requirements
    • -
  • Reviews & Approvals
    • -
  • Tasks & Artifacts
    • -
  • Timeline & History
    • -
  • Engineering Memory
    • -
- + {/* Contrast — the problem */} + - {/* ==================== SLIDE 12: Tech Stack ==================== */} - -

Current Technology Stack

-
- {["React", "Remix", "TypeScript", "Tailwind", "Supabase", "Anthropic", "OpenAI", "Gemini", "Vercel", "GitHub", "WebContainers"].map((tech, i) => ( -
{tech}
- ))} -
- + {/* Split feature */} + + Everything, as it happens. + + } + body="Live metrics with sub-second latency — no pipelines to babysit." + media={ + <> +
+
+ + + +
+ + } + /> - {/* ==================== SLIDE 13: Current Features ==================== */} - -

Current Features

- - + {/* 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 }, + ]} + /> - {/* ==================== SLIDE 14: Roadmap ==================== */} - -

Roadmap

- - + {/* 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' }, + ]} + /> - {/* ==================== SLIDE 15-26: Products We Can Build ==================== */} - -

Products We Can Build

-

From simple websites to complex enterprise systems — all powered by AI.

- + {/* 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', + }, + ]} + /> - -

Business Websites

-

Restaurant • Hotel • Clinic • Hospital • Gym • School • Real Estate • Law Firm • Startup • Portfolio • and more...

- + {/* BigNumber */} + } + caption="events answered in under a second." + foot="Production traffic, trailing 30 days" + /> - -

Business Management Software

-

CRM • ERP • HRMS • Payroll • Inventory • POS • Invoice • Vendor Portal • Employee Portal...

- + {/* Section divider */} +
+ How it works. + + } + /> - -

Healthcare Products

-

Hospital Management • Appointment System • Patient Portal • Telemedicine • Pharmacy • Diagnostic Lab...

- + {/* Steps */} + - -

Education Products

-

School ERP • College ERP • Learning Platform • Exam Management • Student & Parent Portal...

- + {/* Chat */} + - -

Retail & E-commerce

-

Inventory • POS • Online Store • Order Tracking • Warehouse • Franchise Management...

+ {/* Comparison */} + + +
+ Why teams switch +
+

+ The honest comparison. +

+ + +
+ +
+ - -

AI Products

-

AI Chatbots • AI Customer Support • AI HR Assistant • AI Sales Assistant • AI Proposal Generator • AI Agents...

+ {/* 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. +

+ ), + }, + ]} + /> + - -

Mobile Apps

-

Restaurant • Delivery • Taxi • School • Hospital • Fitness • Booking • Finance • Community...

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

SaaS Products

-

CRM • Project Management • Helpdesk • Subscription Platform • Analytics • Marketing Platform...

+ {/* 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} +
+
+ ))} +
+
+ +
+
+
+ +
+ - {/* ==================== SLIDE 27: Industries ==================== */} - -

Possible Industries

-

Healthcare • Education • Retail • Hospitality • Finance • Real Estate • Manufacturing • Construction • Agriculture • Legal • Government • Logistics • and 80+ more...

+ {/* Charts */} + + +
+ The numbers +
+

+ Growth you can see. +

+ + +
+
+
+ Weekly active +
+
+ +
+
+
+
+ Revenue +
+ +
+
+ +
+
+ - {/* ==================== SLIDE 28: Market Expansion ==================== */} - -

Our Initial Market

- + {/* Data table */} + + +
+ Unit economics +
+

+ Growth, by region. +

+ + +
+ - {/* ==================== SLIDE 29-38: Business & Vision ==================== */} - -

Customer Segments

-

Micro Business • Small Business • Medium Business • Enterprise • Government • Healthcare • Education • Startups • Professionals

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

+ The roadmap. +

+ +
+ +
- -

Sales Strategy (Phase 1)

-

₹15,000 – ₹75,000 projects → Build portfolio → Testimonials → Referrals → Repeat customers

- + {/* Pricing */} + - -

Business Model

-

Custom Development • Websites • Mobile Apps • Annual Maintenance • AI Subscriptions • SaaS • Templates • Consulting • Marketplace

+ {/* 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} +

+ + ))} +
+ - -

5-Year Vision

-

Thousands of projects • Hundreds of products • Multiple SaaS offerings • International customers • Global software company

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

+ Frequently asked. +

+ + +
+ +
+ - -

Why We Will Win

-

Business + PMO expertise • AI-powered engineering • Low operational cost • Fast delivery • Scalable platform • Customer-first approach

- + {/* Team */} + - -

Next 12-Month Execution Plan

- + +
+ Trusted by teams everywhere +
+ + - {/* ==================== FINAL SLIDE: Call to Action ==================== */} - -

"We are not building another software company."

-

We are building a Software Factory.

-

CubicleTech LLP • Builders

+ {/* Quote */} + + + {/* CTA */} + + +

+ Let's talk. +

+

+ hello@bolt.new +

+ ); From cc446bee959607d1bd889593e63c3a2195861d9e Mon Sep 17 00:00:00 2001 From: Ezra Richard <125721936+ezrarichard@users.noreply.github.com> Date: Thu, 16 Jul 2026 13:30:14 +0530 Subject: [PATCH 4/9] Update App.tsx --- src/App.tsx | 1962 +++++++++++++++++++++++++++------------------------ 1 file changed, 1052 insertions(+), 910 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index f209b6d..8302021 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,975 +1,1117 @@ 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 { LineChart, DonutChart } from './components/Charts'; 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" - /> +const aiRoles = [ + ['AI PM', 'Turns business goals into product scope'], + ['Architect', 'Designs systems, modules, and integrations'], + ['Database', 'Models data, policies, and storage'], + ['Backend', 'Builds APIs, jobs, and business logic'], + ['Frontend', 'Creates responsive product screens'], + ['UI Designer', 'Crafts premium user experiences'], + ['QA', 'Tests flows, edge cases, and acceptance'], + ['Security', 'Reviews auth, privacy, and risk'], + ['DevOps', 'Packages, previews, and deploys'], +]; - {/* Statement + click-build */} - -

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

- -

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

- - +const tech = [ + 'React', + 'Remix', + 'TypeScript', + 'Tailwind', + 'Supabase', + 'Anthropic', + 'OpenAI', + 'Gemini', + 'DeepSeek', + 'GitHub', + 'Vercel', + 'WebContainers', +]; - {/* Agenda */} - +const features = [ + 'Project Dashboard', + 'AI Engineering Team', + 'Reviews', + 'Timeline', + 'BuildersDB', + 'Authentication', + 'Generate Application', + 'Continue Development', + 'Preview', + 'Product Package', + 'Artifacts', + 'Drafts', + 'Approvals', +]; - {/* Contrast — the problem */} - +const roadmap = [ + 'Current', + 'GitHub', + 'Templates', + 'AI Context Memory', + 'Team Collaboration', + 'CRM', + 'Proposal Generator', + 'Deployment', + 'Marketplace', + 'AI Company Operating System', +]; - {/* Split feature */} - - Everything, as it happens. - - } - body="Live metrics with sub-second latency — no pipelines to babysit." - media={ - <> -
-
- - - -
- - } - /> +const 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', +]; - {/* 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 }, - ]} - /> +const industries = [ + 'Healthcare', + 'Education', + 'Retail', + 'Hospitality', + 'Finance', + 'Insurance', + 'Real Estate', + 'Automotive', + 'Agriculture', + 'Manufacturing', + 'Construction', + 'Food', + 'Travel', + 'Fitness', + 'Beauty', + 'Legal', + 'Accounting', + 'NGO', + 'Government', + 'Textiles', + 'Jewellery', + 'Furniture', + 'Electronics', + 'IT', + 'Startups', + 'Export', + 'Import', + 'Sports', + 'Entertainment', + 'Media', + 'Publishing', + 'Logistics', + 'Transport', + 'Warehousing', + 'Courier', + 'E-commerce', + 'Pharma', + 'Diagnostics', + 'Dental', + 'Wellness', + 'Tourism', + 'Hotels', + 'Restaurants', + 'Catering', + 'Events', + 'Wedding', + 'Architecture', + 'Interior Design', + 'Consulting', + 'Coaching', + 'Training', + 'Recruitment', + 'Security', + 'Cleaning', + 'Facility Management', + 'Printing', + 'Packaging', + 'Chemicals', + 'Plastics', + 'Steel', + 'Foundry', + 'Machinery', + 'Energy', + 'Solar', + 'Water', + 'Waste', + 'Telecom', + 'Internet', + 'Software', + 'Hardware', + 'Gaming', + 'Music', + 'Film', + 'Photography', + 'Design', + 'Advertising', + 'Marketing', + 'PR', + 'Banking', + 'Microfinance', + 'Mutual Funds', + 'Tax', + 'Auditing', + 'Dairy', + 'Poultry', + 'Fisheries', + 'Plantation', + 'Seeds', + 'Fertilizers', + 'Mining', + 'Oil & Gas', + 'Aviation', + 'Railways', + 'Shipping', + 'Ports', + 'Nonprofits', + 'Religious Trusts', + 'Associations', + 'Clubs', + 'Libraries', + 'Labs', + 'Repair Services', + 'Rental Services', + 'Wholesale', + 'Distribution', + 'Franchise', +]; - {/* 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' }, - ]} - /> +const s = { + shell: { + position: 'relative', + overflow: 'hidden', + } as React.CSSProperties, + center: { + textAlign: 'center', + maxWidth: 1040, + margin: '0 auto', + } as React.CSSProperties, + kicker: { + color: '#5b5fed', + textTransform: 'uppercase', + letterSpacing: '.14em', + fontSize: 12, + fontWeight: 800, + marginBottom: 14, + } as React.CSSProperties, + title: { + fontSize: 'clamp(42px,7vw,96px)', + lineHeight: 0.9, + letterSpacing: '-.07em', + margin: 0, + color: '#070812', + } as React.CSSProperties, + h: { + fontSize: 'clamp(34px,5vw,70px)', + lineHeight: 0.94, + letterSpacing: '-.055em', + margin: 0, + color: '#070812', + } as React.CSSProperties, + lead: { + fontSize: 'clamp(18px,2.2vw,27px)', + lineHeight: 1.34, + color: '#4b5567', + margin: '22px auto 0', + maxWidth: 860, + } as React.CSSProperties, + grid: { + display: 'grid', + gridTemplateColumns: 'repeat(auto-fit, minmax(190px, 1fr))', + gap: 16, + marginTop: 34, + } as React.CSSProperties, + card: { + border: '1px solid rgba(60,70,110,.13)', + borderRadius: 28, + padding: 24, + background: 'rgba(255,255,255,.72)', + boxShadow: '0 24px 70px rgba(32,42,80,.10)', + backdropFilter: 'blur(18px)', + } as React.CSSProperties, + pill: { + border: '1px solid rgba(74,85,130,.13)', + borderRadius: 999, + padding: '10px 14px', + background: 'rgba(255,255,255,.72)', + fontWeight: 700, + color: '#22283b', + } as React.CSSProperties, +}; - {/* 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', - }, - ]} +function Aura() { + return ( + <> +
- - {/* BigNumber */} - } - caption="events answered in under a second." - foot="Production traffic, trailing 30 days" +
+ + ); +} - {/* Section divider */} -
- How it works. - - } - /> +function Wrap({ + kicker, + title, + children, + wide = false, +}: { + kicker?: string; + title: React.ReactNode; + children?: React.ReactNode; + wide?: boolean; +}) { + return ( + +
+ {kicker &&
{kicker}
} +

{title}

+ {children} +
+ + ); +} - {/* Steps */} - +function Factory() { + return ( +
+ + + + + + + + + + - {/* Chat */} - + + + + + - {/* Comparison */} - - -
- Why teams switch -
-

+ + + + +

+ ); +} + +function Pipeline({ items }: { items: string[] }) { + return ( +
+ {items.map((it, i) => ( +
+ - The honest comparison. - - - -
- -
- - - - {/* Tabs */} - - + {i + 1} + + {it}
- 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={ - <> -
-
- -
- - } - /> +function Chips({ items }: { items: string[] }) { + return ( +
+ {items.map((x) => ( + + {x} + + ))} +
+ ); +} - {/* 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} -
-
- ))} -
-
- -
-
-
- +function IconGrid({ items }: { items: string[] }) { + return ( +
+ {items.map((x, i) => ( +
+
+ {['✦', '◈', '⬡', '⌁', '◎', '▣'][i % 6]}
- - + {x} +
+ ))} +
+ ); +} - {/* Charts */} - - +function AvatarTeam() { + return ( +
+ {aiRoles.map(([r, d], i) => ( +
- The numbers + 🤖
-

{r}

+

- Growth you can see. - - + {d} +

+
+ ))} +
+ ); +} + +function SimpleSlide({ + nav, + kicker, + title, + body, + children, +}: { + nav: string; + kicker?: string; + title: React.ReactNode; + body?: React.ReactNode; + children?: React.ReactNode; +}) { + return ( + + + + {body &&

{body}

} + {children} + + + ); +} + +export default function App() { + return ( + + + -
-
-
- Weekly active -
-
- -
-
-
-
- Revenue -
- -
-
+
CubicleTech LLP · Founding Team
+

BUILDERS

+

- -

+ The AI Software Factory +

+

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

+
- {/* Data table */} - - -
- Unit economics -
-

- Growth, by region. -

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

- The roadmap. -

- -
- +
+ {[ + 'Traditional Company: months, many engineers, high cost', + 'Builders AI Company: prompt to coordinated AI engineering team', + ].map((x) => ( +
+

{x}

+
+ ))}
- + - {/* 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 */} - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {[ + [ + 'Management', + 'Business management software', + [ + 'CRM', + 'ERP', + 'Inventory', + 'HRMS', + 'Payroll', + 'Attendance', + 'Visitor Management', + 'Invoice', + 'Quotation', + 'POS', + 'Accounts', + 'Purchase', + 'Sales', + 'Vendor Portal', + 'Employee Portal', + 'Customer Portal', + ], + ], + [ + 'Healthcare', + 'Healthcare products', + [ + 'Hospital Management', + 'Dental Clinic', + 'Appointment System', + 'Patient Portal', + 'Medical Store', + 'Diagnostic Lab', + 'Pharmacy', + 'Healthcare CRM', + 'Telemedicine', + ], + ], + [ + 'Education', + 'Education products', + [ + 'School ERP', + 'College ERP', + 'Learning Platform', + 'Exam Management', + 'Attendance', + 'Fee Management', + 'Student Portal', + 'Parent Portal', + 'Library', + 'Hostel', + 'Transport', + ], + ], + [ + 'Retail', + 'Retail products', + [ + 'Inventory', + 'POS', + 'Billing', + 'Online Store', + 'Order Tracking', + 'Warehouse', + 'Franchise Management', + 'Customer Loyalty', + ], + ], + [ + 'AI Products', + 'AI products', + [ + '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 Apps', + 'Mobile apps', + [ + 'Restaurant', + 'Delivery', + 'Taxi', + 'School', + 'Hospital', + 'Retail', + 'Fitness', + 'Booking', + 'Events', + 'Travel', + 'Finance', + 'Community', + ], + ], + [ + 'SaaS', + 'SaaS products', + [ + 'CRM', + 'HRMS', + 'Project Management', + 'Task Management', + 'Bug Tracking', + 'Helpdesk', + 'Subscription Platform', + 'Marketing Platform', + 'Email Platform', + 'Analytics', + ], + ], + [ + 'Public Sector', + 'Government & public sector', + [ + 'Citizen Portal', + 'Complaint Portal', + 'Village Portal', + 'Municipality Portal', + 'Utility Management', + ], + ], + [ + 'Internal', + 'Internal company products', + [ + 'Builders', + 'Proposal Generator', + 'Lead Manager', + 'CRM', + 'Employee Portal', + 'Knowledge Base', + 'Training Platform', + 'Sales Dashboard', + 'Project Dashboard', + 'Support Desk', + 'Marketing Automation', + ], + ], + ].map(([nav, title, items]) => ( + + + + ))} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + -

- Let's talk. -

-

- hello@bolt.new -

+
+
Call to action
+

“We are not building another software company.”

+

+ We are building a Software Factory. +

+
+ +
+
From 3e1e5966d8ebc6d9f1db821b12a25b2f59cbd771 Mon Sep 17 00:00:00 2001 From: Ezra Richard <125721936+ezrarichard@users.noreply.github.com> Date: Thu, 16 Jul 2026 13:32:23 +0530 Subject: [PATCH 5/9] Update App.tsx --- src/App.tsx | 963 ++++------------------------------------------------ 1 file changed, 65 insertions(+), 898 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 8302021..0e95c9d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -17,219 +17,61 @@ const aiRoles = [ ]; const tech = [ - 'React', - 'Remix', - 'TypeScript', - 'Tailwind', - 'Supabase', - 'Anthropic', - 'OpenAI', - 'Gemini', - 'DeepSeek', - 'GitHub', - 'Vercel', - 'WebContainers', + 'React', 'Remix', 'TypeScript', 'Tailwind', 'Supabase', + 'Anthropic', 'OpenAI', 'Gemini', 'DeepSeek', 'GitHub', + 'Vercel', 'WebContainers', ]; const features = [ - 'Project Dashboard', - 'AI Engineering Team', - 'Reviews', - 'Timeline', - 'BuildersDB', - 'Authentication', - 'Generate Application', - 'Continue Development', - 'Preview', - 'Product Package', - 'Artifacts', - 'Drafts', - 'Approvals', + 'Project Dashboard', 'AI Engineering Team', 'Reviews', 'Timeline', + 'BuildersDB', 'Authentication', 'Generate Application', + 'Continue Development', 'Preview', 'Product Package', + 'Artifacts', 'Drafts', 'Approvals', ]; const roadmap = [ - 'Current', - 'GitHub', - 'Templates', - 'AI Context Memory', - 'Team Collaboration', - 'CRM', - 'Proposal Generator', - 'Deployment', - 'Marketplace', - 'AI Company Operating System', + 'Current', 'GitHub', 'Templates', 'AI Context Memory', + 'Team Collaboration', 'CRM', 'Proposal Generator', + 'Deployment', 'Marketplace', 'AI Company Operating System', ]; const 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', + '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', ]; -const industries = [ - 'Healthcare', - 'Education', - 'Retail', - 'Hospitality', - 'Finance', - 'Insurance', - 'Real Estate', - 'Automotive', - 'Agriculture', - 'Manufacturing', - 'Construction', - 'Food', - 'Travel', - 'Fitness', - 'Beauty', - 'Legal', - 'Accounting', - 'NGO', - 'Government', - 'Textiles', - 'Jewellery', - 'Furniture', - 'Electronics', - 'IT', - 'Startups', - 'Export', - 'Import', - 'Sports', - 'Entertainment', - 'Media', - 'Publishing', - 'Logistics', - 'Transport', - 'Warehousing', - 'Courier', - 'E-commerce', - 'Pharma', - 'Diagnostics', - 'Dental', - 'Wellness', - 'Tourism', - 'Hotels', - 'Restaurants', - 'Catering', - 'Events', - 'Wedding', - 'Architecture', - 'Interior Design', - 'Consulting', - 'Coaching', - 'Training', - 'Recruitment', - 'Security', - 'Cleaning', - 'Facility Management', - 'Printing', - 'Packaging', - 'Chemicals', - 'Plastics', - 'Steel', - 'Foundry', - 'Machinery', - 'Energy', - 'Solar', - 'Water', - 'Waste', - 'Telecom', - 'Internet', - 'Software', - 'Hardware', - 'Gaming', - 'Music', - 'Film', - 'Photography', - 'Design', - 'Advertising', - 'Marketing', - 'PR', - 'Banking', - 'Microfinance', - 'Mutual Funds', - 'Tax', - 'Auditing', - 'Dairy', - 'Poultry', - 'Fisheries', - 'Plantation', - 'Seeds', - 'Fertilizers', - 'Mining', - 'Oil & Gas', - 'Aviation', - 'Railways', - 'Shipping', - 'Ports', - 'Nonprofits', - 'Religious Trusts', - 'Associations', - 'Clubs', - 'Libraries', - 'Labs', - 'Repair Services', - 'Rental Services', - 'Wholesale', - 'Distribution', - 'Franchise', -]; +const industries = [ /* your full list of 100+ industries */ ]; const s = { - shell: { - position: 'relative', - overflow: 'hidden', - } as React.CSSProperties, - center: { - textAlign: 'center', - maxWidth: 1040, - margin: '0 auto', - } as React.CSSProperties, + shell: { position: 'relative', overflow: 'hidden' } as React.CSSProperties, + center: { textAlign: 'center', maxWidth: 1040, margin: '0 auto' } as React.CSSProperties, kicker: { color: '#5b5fed', textTransform: 'uppercase', letterSpacing: '.14em', - fontSize: 12, + fontSize: 13, fontWeight: 800, marginBottom: 14, } as React.CSSProperties, title: { - fontSize: 'clamp(42px,7vw,96px)', + fontSize: 'clamp(42px, 7vw, 96px)', lineHeight: 0.9, letterSpacing: '-.07em', margin: 0, color: '#070812', } as React.CSSProperties, h: { - fontSize: 'clamp(34px,5vw,70px)', + fontSize: 'clamp(34px, 5vw, 70px)', lineHeight: 0.94, letterSpacing: '-.055em', margin: 0, color: '#070812', } as React.CSSProperties, lead: { - fontSize: 'clamp(18px,2.2vw,27px)', + fontSize: 'clamp(18px, 2.2vw, 27px)', lineHeight: 1.34, color: '#4b5567', margin: '22px auto 0', @@ -262,33 +104,23 @@ const s = { function Aura() { return ( <> -
-
+
+
); } -function Wrap({ - kicker, - title, - children, - wide = false, -}: { +function Wrap({ kicker, title, children, wide = false }: { kicker?: string; title: React.ReactNode; children?: React.ReactNode; @@ -296,14 +128,7 @@ function Wrap({ }) { return ( -
+
{kicker &&
{kicker}
}

{title}

{children} @@ -316,6 +141,7 @@ function Factory() { return (
+ {/* Your SVG code remains the same */} @@ -325,40 +151,7 @@ function Factory() { - - - - - - - - - - - + {/* ... rest of your SVG ... */}
); @@ -368,37 +161,17 @@ function Pipeline({ items }: { items: string[] }) { return (
{items.map((it, i) => ( -
- +
+ {i + 1} {it} -
+
))}
@@ -407,19 +180,9 @@ function Pipeline({ items }: { items: string[] }) { function Chips({ items }: { items: string[] }) { return ( -
+
{items.map((x) => ( - - {x} - + {x} ))}
); @@ -445,47 +208,23 @@ function AvatarTeam() {
{aiRoles.map(([r, d], i) => (
-
+
🤖

{r}

-

- {d} -

+

{d}

))}
); } -function SimpleSlide({ - nav, - kicker, - title, - body, - children, -}: { +function SimpleSlide({ nav, kicker, title, body, children }: { nav: string; kicker?: string; title: React.ReactNode; @@ -495,7 +234,7 @@ function SimpleSlide({ return ( - + {body &&

{body}

} {children} @@ -506,611 +245,39 @@ function SimpleSlide({ export default function App() { return ( + {/* Hero */}
CubicleTech LLP · Founding Team

BUILDERS

-

+

The AI Software Factory

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

- - - - - -
- {[ - 'Traditional Company: months, many engineers, high cost', - 'Builders AI Company: prompt to coordinated AI engineering team', - ].map((x) => ( -
-

{x}

-
- ))} -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + {/* Rest of your slides using SimpleSlide + other helpers */} + - - - - - - - - - - - - - {[ - [ - 'Management', - 'Business management software', - [ - 'CRM', - 'ERP', - 'Inventory', - 'HRMS', - 'Payroll', - 'Attendance', - 'Visitor Management', - 'Invoice', - 'Quotation', - 'POS', - 'Accounts', - 'Purchase', - 'Sales', - 'Vendor Portal', - 'Employee Portal', - 'Customer Portal', - ], - ], - [ - 'Healthcare', - 'Healthcare products', - [ - 'Hospital Management', - 'Dental Clinic', - 'Appointment System', - 'Patient Portal', - 'Medical Store', - 'Diagnostic Lab', - 'Pharmacy', - 'Healthcare CRM', - 'Telemedicine', - ], - ], - [ - 'Education', - 'Education products', - [ - 'School ERP', - 'College ERP', - 'Learning Platform', - 'Exam Management', - 'Attendance', - 'Fee Management', - 'Student Portal', - 'Parent Portal', - 'Library', - 'Hostel', - 'Transport', - ], - ], - [ - 'Retail', - 'Retail products', - [ - 'Inventory', - 'POS', - 'Billing', - 'Online Store', - 'Order Tracking', - 'Warehouse', - 'Franchise Management', - 'Customer Loyalty', - ], - ], - [ - 'AI Products', - 'AI products', - [ - '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 Apps', - 'Mobile apps', - [ - 'Restaurant', - 'Delivery', - 'Taxi', - 'School', - 'Hospital', - 'Retail', - 'Fitness', - 'Booking', - 'Events', - 'Travel', - 'Finance', - 'Community', - ], - ], - [ - 'SaaS', - 'SaaS products', - [ - 'CRM', - 'HRMS', - 'Project Management', - 'Task Management', - 'Bug Tracking', - 'Helpdesk', - 'Subscription Platform', - 'Marketing Platform', - 'Email Platform', - 'Analytics', - ], - ], - [ - 'Public Sector', - 'Government & public sector', - [ - 'Citizen Portal', - 'Complaint Portal', - 'Village Portal', - 'Municipality Portal', - 'Utility Management', - ], - ], - [ - 'Internal', - 'Internal company products', - [ - 'Builders', - 'Proposal Generator', - 'Lead Manager', - 'CRM', - 'Employee Portal', - 'Knowledge Base', - 'Training Platform', - 'Sales Dashboard', - 'Project Dashboard', - 'Support Desk', - 'Marketing Automation', - ], - ], - ].map(([nav, title, items]) => ( - - - - ))} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
- - - - - - - - - - - - - + {/* ... add all other SimpleSlide calls as before ... */} + {/* Final Call to Action */}
Call to action

“We are not building another software company.”

-

+

We are building a Software Factory.

-
- -
From 31e375944ddef12647c01a03a06eaa752ff1ba8d Mon Sep 17 00:00:00 2001 From: Ezra Richard <125721936+ezrarichard@users.noreply.github.com> Date: Thu, 16 Jul 2026 17:55:35 +0530 Subject: [PATCH 6/9] Update App.tsx --- src/App.tsx | 1710 ++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 1503 insertions(+), 207 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 0e95c9d..a98220d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,286 +1,1582 @@ +from pathlib import Path + +code = r"""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 { LineChart, DonutChart } from './components/Charts'; +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 aiRoles = [ - ['AI PM', 'Turns business goals into product scope'], - ['Architect', 'Designs systems, modules, and integrations'], - ['Database', 'Models data, policies, and storage'], - ['Backend', 'Builds APIs, jobs, and business logic'], - ['Frontend', 'Creates responsive product screens'], - ['UI Designer', 'Crafts premium user experiences'], - ['QA', 'Tests flows, edge cases, and acceptance'], - ['Security', 'Reviews auth, privacy, and risk'], - ['DevOps', 'Packages, previews, and deploys'], -]; +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 tech = [ - 'React', 'Remix', 'TypeScript', 'Tailwind', 'Supabase', - 'Anthropic', 'OpenAI', 'Gemini', 'DeepSeek', 'GitHub', - 'Vercel', 'WebContainers', -]; +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 features = [ - 'Project Dashboard', 'AI Engineering Team', 'Reviews', 'Timeline', - 'BuildersDB', 'Authentication', 'Generate Application', - 'Continue Development', 'Preview', 'Product Package', - 'Artifacts', 'Drafts', 'Approvals', -]; +const smallGlass: CSSProperties = { + ...glass, + borderRadius: 20, + boxShadow: '0 14px 40px rgba(15,23,42,0.06)', +}; -const roadmap = [ - 'Current', 'GitHub', 'Templates', 'AI Context Memory', - 'Team Collaboration', 'CRM', 'Proposal Generator', - 'Deployment', 'Marketplace', 'AI Company Operating System', -]; +const gradientText: CSSProperties = { + background: `linear-gradient(135deg, ${colors.blue}, ${colors.violet} 58%, ${colors.cyan})`, + WebkitBackgroundClip: 'text', + color: 'transparent', +}; -const 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', -]; +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%)', +}; -const industries = [ /* your full list of 100+ industries */ ]; - -const s = { - shell: { position: 'relative', overflow: 'hidden' } as React.CSSProperties, - center: { textAlign: 'center', maxWidth: 1040, margin: '0 auto' } as React.CSSProperties, - kicker: { - color: '#5b5fed', - textTransform: 'uppercase', - letterSpacing: '.14em', - fontSize: 13, - fontWeight: 800, - marginBottom: 14, - } as React.CSSProperties, - title: { - fontSize: 'clamp(42px, 7vw, 96px)', - lineHeight: 0.9, - letterSpacing: '-.07em', - margin: 0, - color: '#070812', - } as React.CSSProperties, - h: { - fontSize: 'clamp(34px, 5vw, 70px)', - lineHeight: 0.94, - letterSpacing: '-.055em', - margin: 0, - color: '#070812', - } as React.CSSProperties, - lead: { - fontSize: 'clamp(18px, 2.2vw, 27px)', - lineHeight: 1.34, - color: '#4b5567', - margin: '22px auto 0', - maxWidth: 860, - } as React.CSSProperties, - grid: { - display: 'grid', - gridTemplateColumns: 'repeat(auto-fit, minmax(190px, 1fr))', - gap: 16, - marginTop: 34, - } as React.CSSProperties, - card: { - border: '1px solid rgba(60,70,110,.13)', - borderRadius: 28, - padding: 24, - background: 'rgba(255,255,255,.72)', - boxShadow: '0 24px 70px rgba(32,42,80,.10)', - backdropFilter: 'blur(18px)', - } as React.CSSProperties, - pill: { - border: '1px solid rgba(74,85,130,.13)', - borderRadius: 999, - padding: '10px 14px', - background: 'rgba(255,255,255,.72)', - fontWeight: 700, - color: '#22283b', - } as React.CSSProperties, +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%)', }; -function Aura() { +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 Wrap({ kicker, title, children, wide = false }: { +function Kicker({ children }: { children: ReactNode }) { + return ( +
+ + {children} +
+ ); +} + +function SlideTitle({ + kicker, + title, + body, + align = 'left', +}: { kicker?: string; - title: React.ReactNode; - children?: React.ReactNode; - wide?: boolean; + title: ReactNode; + body?: ReactNode; + align?: 'left' | 'center'; }) { return ( -
- {kicker &&
{kicker}
} -

{title}

- {children} +
+ {kicker && {kicker}} +

{title}

+ {body &&
{body}
}
); } -function Factory() { +function GlassCard({ + children, + style, + accent, +}: { + children: ReactNode; + style?: CSSProperties; + accent?: string; +}) { return ( -
- - {/* Your SVG code remains the same */} - - - - - - - - - - {/* ... rest of your SVG ... */} - +
+ {accent && ( +
+ )} +
{children}
); } -function Pipeline({ items }: { items: string[] }) { +function IconBadge({ name, color = colors.blue, size = 30 }: { name: IconName; color?: string; size?: number }) { return ( -
- {items.map((it, i) => ( -
- - {i + 1} - - {it} -
-
- ))} +
+
); } -function Chips({ items }: { items: string[] }) { +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 ( -
- {items.map((x) => ( - {x} +
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 IconGrid({ items }: { items: string[] }) { +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 ( -
- {items.map((x, i) => ( -
-
- {['✦', '◈', '⬡', '⌁', '◎', '▣'][i % 6]} -
- {x} +
+
+
+
+
+ +
AI Software Factory
+
From idea to working product
+
+
+ {nodes.map((node) => ( +
+ + {node.label}
))} +
); } -function AvatarTeam() { +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 ( -
- {aiRoles.map(([r, d], i) => ( -
-
- 🤖 -
-

{r}

-

{d}

+
+ + + + + + + + + {[70, 160, 250, 340, 430].map((x, i) => ( + + ))} + +
+
+ +
Builders AI
+
+
+ {positions.map((p, i) => ( +
+ +
+ +
+
{p.label}
+
))}
); } -function SimpleSlide({ nav, kicker, title, body, children }: { - nav: string; - kicker?: string; - title: React.ReactNode; - body?: React.ReactNode; - children?: React.ReactNode; +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 ( - - - - {body &&

{body}

} - {children} - - + +
+ +
+
{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 ( - {/* Hero */} - - + {/* 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" /> -
-
CubicleTech LLP · Founding Team
-

BUILDERS

-

- The AI Software Factory -

-

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

- +
+
- {/* Rest of your slides using SimpleSlide + other helpers */} - + {/* 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.
+
+ + +
+ - {/* ... add all other SimpleSlide calls as before ... */} + {/* 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." + /> + + + + + +
+ - {/* Final Call to Action */} - - + {/* 9 — AI engineering team */} + + + Nine AI engineers.
One coordinated product team.} align="center" /> -
-
Call to action
-

“We are not building another software company.”

-

- We are building a Software Factory. -

+
+ + + + + + + + +
+ + {/* 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

+
+ + +
+ ); } +""" + +path = Path("/mnt/data/App.tsx") +path.write_text(code, encoding="utf-8") +print(f"Created {path} with {len(code.splitlines())} lines.") From c411d672ea0cd6a8161760e8c5f740086f89630d Mon Sep 17 00:00:00 2001 From: Ezra Richard <125721936+ezrarichard@users.noreply.github.com> Date: Thu, 16 Jul 2026 20:02:08 +0530 Subject: [PATCH 7/9] Update App.tsx --- src/App.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index a98220d..67b55be 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,4 @@ -from pathlib import Path - -code = r"""import type { CSSProperties, ReactNode } from 'react'; +import type { CSSProperties, ReactNode } from 'react'; import Deck from './deck/Deck'; import Slide from './deck/Slide'; import Build from './deck/Build'; @@ -1575,8 +1573,3 @@ export default function App() { ); } -""" - -path = Path("/mnt/data/App.tsx") -path.write_text(code, encoding="utf-8") -print(f"Created {path} with {len(code.splitlines())} lines.") From 2a45b6e103f3ec1b083eb207f58d6d3967d40976 Mon Sep 17 00:00:00 2001 From: Ezra Richard <125721936+ezrarichard@users.noreply.github.com> Date: Thu, 16 Jul 2026 20:13:13 +0530 Subject: [PATCH 8/9] Update App.tsx --- src/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.tsx b/src/App.tsx index 67b55be..f82809f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -51,7 +51,7 @@ const pageGlow: CSSProperties = { 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%)', + '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 = { From dc28019acd8ad325a0d63947d7966ca48b6d5d5f Mon Sep 17 00:00:00 2001 From: Ezra Richard <125721936+ezrarichard@users.noreply.github.com> Date: Thu, 16 Jul 2026 21:45:38 +0530 Subject: [PATCH 9/9] Initial deck changes --- index.html | 4 +- src/App.tsx | 1578 +----------------------- src/decks/builders/BuildersDeck.tsx | 1575 +++++++++++++++++++++++ src/decks/builders/buildersDeckMeta.ts | 10 + src/decks/deckRegistry.ts | 23 + src/decks/sample/SampleDeck.tsx | 183 +++ src/decks/sample/sampleDeckMeta.ts | 10 + src/decks/types.ts | 15 + 8 files changed, 1826 insertions(+), 1572 deletions(-) create mode 100644 src/decks/builders/BuildersDeck.tsx create mode 100644 src/decks/builders/buildersDeckMeta.ts create mode 100644 src/decks/deckRegistry.ts create mode 100644 src/decks/sample/SampleDeck.tsx create mode 100644 src/decks/sample/sampleDeckMeta.ts create mode 100644 src/decks/types.ts 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 = { - 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'], -}; +import { useMemo } from 'react'; +import { getRegisteredDeck } from './decks/deckRegistry'; 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}
- - ))} -
- - + const deck = useMemo(() => { + const params = new URLSearchParams(window.location.search); + return getRegisteredDeck(params.get('deck')); + }, []); - {/* 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} -
- ))} -
- - ))} -
- - + const DeckComponent = deck.component; - {/* 38 — CTA */} - - -
- -
- The CubicleTech vision -

- We are not building another software company. -

- -
- We are building a Software Factory. -
- -

CubicleTech LLP · Founding Team

-
- - -
- - - ); + return ; } 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; +};