# Startups Page > A startup program page: a drawn credits pass, a live eligibility checker, savings calculator, partner perks and an application form. - Type: React template (Templates) - Access: Pro (the source needs a Wingo UI Pro plan, see https://wingo-ui.com/pricing) - Version: 1.0.0 - Install: `npx wingo-ui@latest add startups-page` - Docs: https://wingo-ui.com/templates/startups-page ## Interaction The hero rises in once on mount beside a drawn Acme for Startups pass ($10,000 in credits, 12 months of Business, a credits-left bar) that tilts into place over a soft glow, with a review time chip and an unlocked perk floating around it on wide screens. Apply in 5 minutes jumps to the form, Check eligibility to the checker. The checker asks how much the company raised and how old it is (segmented controls), the team size (a slider) and whether it already pays for Acme (a switch); the rule chips and the tier card update live: Seed (an inverted card with the value counting to $10,000), Pre-seed, or Not eligible yet with the reasons and links to sales and pricing. Apply for Seed carries the stage and team size into the form and scrolls there. In the savings calculator the team size slider and the Pro / Business switch roll the year-one savings, the credits-used bar and the breakdown. The perks marketplace filters by category with a chip row (scrollable on phones) and recounts the total; Claim on a locked perk opens an inline note with an Apply link, and with accepted it reveals the partner code with a copy button. The application form checks every field (website format, work email on blur, a 20-character minimum for the use case), shows each error under its field and focuses the first; while onApply runs the button spins, a rejection shows an error, then a success panel shows the application ID (copyable), a summary and the next steps. Founder quotes, steps, FAQ (one answer open at a time) and the footer newsletter follow. Reduced motion keeps everything still. ## Installation ```bash npx wingo-ui@latest add startups-page ``` Pro item: run `npx wingo-ui@latest login` once with a Pro account. The CLI adds the files, their dependencies and a version record for updates. With shadcn: `npx shadcn@latest add @wingo-ui/startups-page` (needs the @wingo-ui registry with your API key in components.json) Files: - `components/templates/startups-page.tsx` - `components/templates/startups-page-data.ts` npm dependencies: `npm i lucide-react motion` Wingo UI dependencies (installed automatically): - [Marketing Section](https://wingo-ui.com/components/marketing-section) ([Markdown](https://wingo-ui.com/components/marketing-section.md)) - [Marketing Header](https://wingo-ui.com/components/marketing-header) ([Markdown](https://wingo-ui.com/components/marketing-header.md)) - [Marketing Footer](https://wingo-ui.com/components/marketing-footer) ([Markdown](https://wingo-ui.com/components/marketing-footer.md)) - [Logo Cloud](https://wingo-ui.com/components/logo-cloud) ([Markdown](https://wingo-ui.com/components/logo-cloud.md)) - [Steps Section](https://wingo-ui.com/components/steps-section) ([Markdown](https://wingo-ui.com/components/steps-section.md)) - [Testimonials Section](https://wingo-ui.com/components/testimonials-section) ([Markdown](https://wingo-ui.com/components/testimonials-section.md)) - [FAQ Section](https://wingo-ui.com/components/faq-section) ([Markdown](https://wingo-ui.com/components/faq-section.md)) - [CTA Section](https://wingo-ui.com/components/cta-section) ([Markdown](https://wingo-ui.com/components/cta-section.md)) - [Animated Counter](https://wingo-ui.com/components/animated-counter) ([Markdown](https://wingo-ui.com/components/animated-counter.md)) - [Avatar](https://wingo-ui.com/components/avatar) ([Markdown](https://wingo-ui.com/components/avatar.md)) - [Button](https://wingo-ui.com/components/button) ([Markdown](https://wingo-ui.com/components/button.md)) - [Copy Button](https://wingo-ui.com/components/copy-button) ([Markdown](https://wingo-ui.com/components/copy-button.md)) - [Field](https://wingo-ui.com/components/field) ([Markdown](https://wingo-ui.com/components/field.md)) - [Input](https://wingo-ui.com/components/input) ([Markdown](https://wingo-ui.com/components/input.md)) - [Segmented Control](https://wingo-ui.com/components/segmented-control) ([Markdown](https://wingo-ui.com/components/segmented-control.md)) - [Select](https://wingo-ui.com/components/select) ([Markdown](https://wingo-ui.com/components/select.md)) - [Slider](https://wingo-ui.com/components/slider) ([Markdown](https://wingo-ui.com/components/slider.md)) - [Switch](https://wingo-ui.com/components/switch) ([Markdown](https://wingo-ui.com/components/switch.md)) - [Textarea](https://wingo-ui.com/components/textarea) ([Markdown](https://wingo-ui.com/components/textarea.md)) - [Motion presets](https://wingo-ui.com/components/motion) ([Markdown](https://wingo-ui.com/components/motion.md)) - [Navigation](https://wingo-ui.com/components/navigation) ([Markdown](https://wingo-ui.com/components/navigation.md)) - [Tones](https://wingo-ui.com/components/tones) ([Markdown](https://wingo-ui.com/components/tones.md)) - [UIProvider](https://wingo-ui.com/components/ui-config) ([Markdown](https://wingo-ui.com/components/ui-config.md)) ## Usage ```tsx // app/(marketing)/startups/page.tsx "use client" import Link from "next/link" import { StartupsPage } from "@/components/templates/startups-page" export default function StartupsRoute() { return ( { const response = await fetch("/api/startups/apply", { method: "POST", body: JSON.stringify(values) }) if (!response.ok) throw new Error("Could not send the application") const { id } = await response.json() return id }} /> ) } ``` ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `design?` | `"classic" \| "bold" \| "minimal"` | `"classic"` | The whole page's look. classic follows the layout props: a split hero with the pass on the right over a dotted glow; bold: a pill header, a giant stage title on a gradient mesh, rounder panels, logo tiles, step cards, a quote wall, FAQ cards, an image band and a wordmark footer; minimal: a transparent header, a centered stacked hero, no glow or floating chips, outlined flat panels, no gray bands and a simple footer. The *Props overrides still win. | | `backers?` | `StartupsBacker[]` | `"STARTUPS_BACKERS"` | The hero's Founders from row: { name, icon?, className? } accelerators and funds drawn as text wordmarks. | | `logos?` | `LogoCloudItem[]` | `"STARTUPS_LOGOS"` | Startups in the program for the logo strip: { name, icon?, href?, className? }. | | `tiers?` | `Record` | `"STARTUPS_TIERS"` | seed, pre-seed and ineligible: { name, headline, description, plan?, months?, credits, includes }. The hero pass and the calculator use seed. | | `prices?` | `Record<"pro" \| "business", number>` | `"STARTUPS_PRICES"` | Per user per month in USD for the calculator: { pro: 12, business: 24 }. | | `benefits?` | `StartupsBenefit[]` | `"STARTUPS_BENEFITS"` | The four tiles under the calculator: { id, icon?, title, description }. | | `perks?` | `StartupsPerk[]` | `"STARTUPS_PERKS"` | Partner offers: { id, partner, icon?, category, offer, description, value (USD), code }. | | `perkCategories?` | `StartupsPerkCategory[]` | `"STARTUPS_PERK_CATEGORIES"` | The filter chips, { value, label }; only categories that hold perks show. | | `fundingOptions?` | `StartupsOption[]` | `"STARTUPS_FUNDING_OPTIONS"` | The checker's funding answers; the values none, under-500k, 500k-5m and over-5m drive the rules. | | `ageOptions?` | `StartupsOption[]` | `"STARTUPS_AGE_OPTIONS"` | The checker's company age answers; over-5 is not eligible. | | `stages?` | `StartupsOption[]` | `"STARTUPS_STAGES"` | The form's funding stage select, { value, label, hint? }; the hint shows under the field once picked. | | `teamSizes?` | `StartupsOption[]` | `"STARTUPS_TEAM_SIZES"` | The form's team size select; values like "6-15" let the checker preselect the bucket. | | `steps?` | `StepsSectionItem[]` | `"STARTUPS_STEPS"` | How it works: { icon?, title, description, meta? }. | | `testimonials?` | `Testimonial[]` | `"STARTUPS_TESTIMONIALS"` | Founder quotes: { quote, name, role?, company?, companyIcon?, metric? }. | | `faq?` | `FaqItem[]` | `"STARTUPS_FAQ"` | { question, answer } pairs about the program. | | `labels?` | `Partial` | `"DEFAULT_STARTUPS_PAGE_LABELS"` | Every visible string; the ones with numbers in them are functions. | | `hrefs?` | `Partial` | `"DEFAULT_STARTUPS_PAGE_HREFS"` | { apply, eligibility, perks, sales, pricing, privacy }: the in-page anchors, contact, pricing and the privacy policy. | | `defaultAnswers?` | `Partial` | `"{ funding: \"500k-5m\", age: \"1-3\", teamSize: 12, paying: false }"` | The checker's answers on load. | | `maxTeam?` | `number` | `50` | The biggest team the program takes: the checker's rule and the calculator's slider end. | | `defaultSeats?` | `number` | `12` | The calculator's team size on load. | | `defaultPlan?` | `"pro" \| "business"` | `"business"` | The calculator's plan on load. | | `defaultCategory?` | `string` | `"all"` | The perks filter on load: all or a category value. | | `accepted?` | `boolean` | `false` | The startup is in the program: perks show unlocked and Claim reveals each partner's code with a copy button. | | `requireWorkEmail?` | `boolean` | `true` | Refuses free mail domains (gmail.com, outlook.com...) in the form. | | `minUseCase?` | `number` | `20` | The shortest How will you use Acme? answer, in characters; the field's hint says so. 0 drops the rule. | | `stepsLayout?` | `"horizontal" \| "cards" \| "vertical"` | `"horizontal"` | How it works as a numbered row, numbered tiles or a timeline rail. Applies to the classic design. | | `testimonialsLayout?` | `"featured" \| "grid" \| "carousel" \| "marquee"` | `"featured"` | Founder quotes as one big quote and two small, a masonry grid, a swipeable rail or drifting rows. Applies to the classic design. | | `ctaVariant?` | `"inverted" \| "soft" \| "split"` | `"inverted"` | The closing band: a solid band, a gray band, or copy beside the buttons on a raised panel. Applies to the classic design. | | `showAnnouncement?` | `boolean` | `true` | The strip above the header bar. | | `showBackers?` | `boolean` | `true` | The hero's Founders from wordmarks. | | `showLogos?` | `boolean` | `true` | The strip of startups in the program. | | `showEligibility?` | `boolean` | `true` | The eligibility checker. | | `showIncluded?` | `boolean` | `true` | What you get: the savings calculator and the benefit tiles. | | `showPerks?` | `boolean` | `true` | The perks marketplace. | | `showSteps?` | `boolean` | `true` | How it works. | | `showTestimonials?` | `boolean` | `true` | The founder quotes. | | `showApply?` | `boolean` | `true` | The application form. | | `showFaq?` | `boolean` | `true` | The FAQ. | | `showCta?` | `boolean` | `true` | The closing call to action. | | `alternate?` | `boolean` | `true` | Gray bands on every other visible section. Applies to the classic and bold designs. | | `tone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Accents across the page: the hero glow, the pass, slider and switch fills, the credits bars, benefit icons, checks and unlocked Claim buttons. | | `ctaTone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Apply in 5 minutes, the tier's Apply button, Submit application, the header's Get started and the closing band; brand is the marketing orange. | | `radius?` | `"none" \| "sm" \| "md" \| "lg" \| "full"` | `"md"` | The corners of the form fields. | | `header?` | `boolean` | `true` | The marketing header; off inside a site layout. | | `footer?` | `boolean` | `true` | The marketing footer with its newsletter form. | | `headerProps?` | `Partial` | | Passed to MarketingHeader. | | `footerProps?` | `Partial` | | Passed to MarketingFooter. | | `logosProps?` | `Partial` | | Overrides for the LogoCloud. | | `stepsProps?` | `Partial` | | Overrides for the StepsSection. | | `testimonialsProps?` | `Partial` | | Overrides for the TestimonialsSection. | | `faqProps?` | `Partial` | | Overrides for the FaqSection. | | `ctaProps?` | `Partial` | | Overrides for the CtaSection. | | `onApply?` | `(values: StartupsApplication) => (void \| Promise)` | | The application: { company, website, email, stage, teamSize, backer, useCase }. A promise keeps Submit loading, a rejection shows an error, and a string it resolves with becomes the application ID. Without it the form waits 900 ms and shows the success panel. | | `onClaim?` | `(perk: StartupsPerk) => void` | | A partner code was revealed (accepted only). | | `onTierChange?` | `(tier: StartupsTierId) => void` | | The checker's answers moved the startup to another tier. | | `onSubscribe?` | `(email: string) => (void \| Promise)` | | The footer newsletter; a rejected promise shows an error. | | `animateIn?` | `boolean` | `true` | The hero rises in once, the pass tilts into place and the quotes drift; false keeps the page still (thumbnails). Reduced motion always does. | | `locale?` | `string` | `"en-US"` | Intl locale for the USD amounts and counters. | | `linkComponent?` | `(props: LinkComponentProps) => ReactNode` | `""` | The router link for every link on the page (next/link in an app). | | `className?` | `string` | | Classes for the root. | | `classNames?` | `Partial>` | | Classes for header, hero, title, offer, backers, logos, eligibility, result, included, calculator, benefit, perks, perk, steps, testimonials, apply, form, success, faq, cta and footer. | ## Parts ### STARTUPS_PAGE_SAMPLE (constant) All the sample content in one object: backers, logos, tiers, prices, benefits, perks, categories, checker and form options, steps, testimonials and faq. ### STARTUPS_TIERS (constant) Seed (12 months of Business, $10,000), Pre-seed (6 months of Pro, $2,500) and Not eligible yet. ### STARTUPS_PRICES (constant) Pro $12 and Business $24 per user per month. ### STARTUPS_LIMITS (constant) { maxTeam: 50 }. ### STARTUPS_DEFAULT_ANSWERS (constant) The checker's starting answers: $500k to $5M raised, 1 to 3 years old, 12 people, not paying. ### STARTUPS_BACKERS (constant) Five fictional accelerators and funds: Foundry Labs, Northstar Ventures, Seedwell, Arcadia Capital and Tidewater. ### STARTUPS_LOGOS (constant) Eight fictional startups in the program. ### STARTUPS_BENEFITS (constant) Credits, Business for a year, partner perks and founder support. ### STARTUPS_PERKS (constant) Twelve partner offers across cloud, analytics, payroll, legal, design and dev tools. ### STARTUPS_PERK_CATEGORIES (constant) The six perk categories. ### STARTUPS_FUNDING_OPTIONS (constant) None, under $500k, $500k to $5M and $5M or more. ### STARTUPS_AGE_OPTIONS (constant) Under 1 year, 1 to 3, 3 to 5 and 5 or more years. ### STARTUPS_STAGES (constant) Bootstrapped, Pre-seed, Seed and Series A, each with a hint. ### STARTUPS_TEAM_SIZES (constant) 1 to 5, 6 to 15, 16 to 30 and 31 to 50 people. ### STARTUPS_STEPS (constant) Apply in 5 minutes, reviewed in 48 hours, credits applied. ### STARTUPS_TESTIMONIALS (constant) Six founder quotes with startup names and stages. ### STARTUPS_FAQ (constant) Six questions about the rules, accelerators, paying customers, year two, perks and upgrades. ### getStartupsEligibility (function) The checker's rules: (answers, maxTeam = 50) => { tier, reasons }. Over $5M raised, 5+ years old or a team over maxTeam is not eligible; $500k to $5M is Seed, less is Pre-seed. ### DEFAULT_STARTUPS_PAGE_LABELS (constant) The English strings. ### DEFAULT_STARTUPS_PAGE_HREFS (constant) The default link targets. ### STARTUPS_PAGE_DESIGNS (constant) The design names, classic first: ["classic", "bold", "minimal"]. ### StartupsPageProps (type) Props of StartupsPage. ### StartupsPageDesign (type) "classic" | "bold" | "minimal". ### StartupsTier (type) One tier of the program. ### StartupsTierId (type) "seed" | "pre-seed" | "ineligible". ### StartupsAnswers (type) The checker's answers: { funding, age, teamSize, paying }. ### StartupsEligibility (type) What getStartupsEligibility returns. ### StartupsApplication (type) The form's values passed to onApply. ### StartupsPerk (type) One partner offer. ### StartupsPageLabels (type) The strings labels can override. ### StartupsPageHrefs (type) The link targets hrefs can override. ## Examples - **Bold design**: design="bold": a giant stage title on a gradient mesh, rounder panels, logo tiles, step cards, a quote wall and a wordmark footer. - **Minimal design**: design="minimal": a transparent header, a centered hero with a flat pass, outlined panels, no gray bands and a simple footer. - **Accepted startup in brand orange**: accepted with tone and ctaTone brand: perks show unlocked and Claim reveals each partner code with a copy button. - **Not eligible yet**: defaultAnswers past the rules: the checker opens on Not eligible yet with the reasons and links to sales and pricing. - **Review queue down**: An onApply that rejects: fill the form and submit to see the error banner while every value stays in place. ## See also - [Enterprise Page](https://wingo-ui.com/templates/enterprise-page) ([Markdown](https://wingo-ui.com/templates/enterprise-page.md)) - [Affiliate Page](https://wingo-ui.com/templates/affiliate-page) ([Markdown](https://wingo-ui.com/templates/affiliate-page.md)) - [Pricing Page](https://wingo-ui.com/components/pricing-page) ([Markdown](https://wingo-ui.com/components/pricing-page.md)) - [Landing Page](https://wingo-ui.com/templates/landing-page) ([Markdown](https://wingo-ui.com/templates/landing-page.md)) - [Steps Section](https://wingo-ui.com/components/steps-section) ([Markdown](https://wingo-ui.com/components/steps-section.md)) --- Canonical: https://wingo-ui.com/templates/startups-page More components: https://wingo-ui.com/components ยท Index for agents: https://wingo-ui.com/llms.txt