Components Reference
All components live in src/components/. Grouped by section.
Forms
ContactForm
File: src/components/forms/contact-form.tsx
Contact Form component for the Forms section. Has 1 optional prop.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
onSubmit | `(data: ContactFormData) => void | Promise<void>` | No |
FormField
File: src/components/forms/form-field.tsx
Form Field component for the Forms section. Requires name, label. Has 3 optional props.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
name | string | Yes | TODO |
label | string | Yes | TODO |
type | string | No | TODO |
placeholder | string | No | TODO |
multiline | boolean | No | TODO |
Hero
Dots
File: src/components/landing/hero/typewriter-dots.tsx
Renders the dots UI element in the Hero section.
FindingsPanel
File: src/components/landing/hero/typewriter-findings-panel.tsx
Findings Panel component for the Hero section. Requires phase.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
phase | `‘typing' | 'thinking' | 'response’` |
FloatingOwl
File: src/components/landing/hero/typewriter-floating-owl.tsx
Renders the floating owl UI element in the Hero section.
HeroBadge
File: src/components/landing/hero/hero-badge.tsx
Renders the hero badge UI element in the Hero section.
HeroCTA
File: src/components/landing/hero/hero-cta.tsx
Renders the hero c t a UI element in the Hero section.
HeroStats
File: src/components/landing/hero/hero-stats.tsx
Renders the hero stats UI element in the Hero section.
HeroTitleSection
File: src/components/landing/hero/hero-title-section.tsx
Renders the hero title section UI element in the Hero section.
LandingHero
File: src/components/landing/hero/landing-hero.tsx
Renders the landing hero UI element in the Hero section.
ResponseBadge
File: src/components/landing/hero/typewriter-response-badge.tsx
Renders the response badge UI element in the Hero section.
StatusBar
File: src/components/landing/hero/typewriter-status-bar.tsx
Status Bar component for the Hero section. Requires phase.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
phase | `‘typing' | 'thinking' | 'response’` |
TerminalHeader
File: src/components/landing/hero/typewriter-terminal-header.tsx
Renders the terminal header UI element in the Hero section.
TypewriterWindow
File: src/components/landing/hero/typewriter-window.tsx
Renders the typewriter window UI element in the Hero section.
Navigation
DesktopControls
File: src/components/landing/nav/desktop-controls.tsx
Desktop Controls component for the Navigation section. Requires onLight, isDark, onSetTheme, and more.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
onLight | boolean | Yes | TODO |
isDark | boolean | Yes | TODO |
onSetTheme | `(theme: ‘light' | 'dark’) => void` | Yes |
t | (key: string) =\> string | Yes | TODO |
LandingNav
File: src/components/landing/nav/landing-nav.tsx
Renders the landing nav UI element in the Navigation section.
LangToggle
File: src/components/landing/nav/lang-toggle.tsx
Lang Toggle component for the Navigation section. Requires onLight.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
onLight | boolean | Yes | TODO |
NavDrawer
File: src/components/landing/nav/nav-drawer.tsx
Nav Drawer component for the Navigation section. Requires open, onClose, scrollTo, and more.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
open | boolean | Yes | TODO |
onClose | () =\> void | Yes | TODO |
scrollTo | (href: string) =\> void | Yes | TODO |
onLight | boolean | Yes | TODO |
isDark | boolean | Yes | TODO |
onSetTheme | `(theme: ‘light' | 'dark’) => void` | Yes |
NavDrawerHeader
File: src/components/landing/nav/nav-drawer-header.tsx
Nav Drawer Header component for the Navigation section. Requires onClose, onScrollToTop.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
onClose | () =\> void | Yes | TODO |
onScrollToTop | () =\> void | Yes | TODO |
SerenityLockup
File: src/components/landing/nav/serenity-lockup.tsx
Serenity Lockup component for the Navigation section. Has 2 optional props.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
inverted | boolean | No | TODO |
size | `‘sm' | 'md' | 'lg’` |
ThemeIcon
File: src/components/landing/nav/theme-icon.tsx
Theme Icon component for the Navigation section. Requires isDark, color.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
isDark | boolean | Yes | TODO |
color | string | Yes | TODO |
Mid (About / Why / Method)
About
File: src/components/landing/mid/landing-about.tsx
Renders the about UI element in the Mid (About / Why / Method) section.
FeatureRenCard
File: src/components/landing/mid/feature-ren-card.tsx
Renders the feature ren card UI element in the Mid (About / Why / Method) section.
HowItWorks
File: src/components/landing/mid/landing-how.tsx
Renders the how it works UI element in the Mid (About / Why / Method) section.
LandingMid
File: src/components/landing/mid/landing-mid.tsx
Renders the landing mid UI element in the Mid (About / Why / Method) section.
LearningMethod
File: src/components/landing/mid/landing-method.tsx
Renders the learning method UI element in the Mid (About / Why / Method) section.
MethodLoop
File: src/components/landing/mid/method-loop.tsx
Renders the method loop UI element in the Mid (About / Why / Method) section.
WhyChooseUs
File: src/components/landing/mid/landing-why.tsx
Renders the why choose us UI element in the Mid (About / Why / Method) section.
Courses
Comparison
File: src/components/landing/courses/landing-courses-comparison.tsx
Renders the comparison UI element in the Courses section.
ComparisonTable
File: src/components/landing/courses/landing-courses-comparison-table.tsx
Renders the comparison table UI element in the Courses section.
CourseCTA
File: src/components/landing/courses/landing-courses-slide-cta.tsx
Renders the course c t a UI element in the Courses section.
CourseNav
File: src/components/landing/courses/landing-courses-featured-nav.tsx
Renders the course nav UI element in the Courses section.
CourseRating
File: src/components/landing/courses/landing-courses-slide-rating.tsx
Renders the course rating UI element in the Courses section.
CourseSlide
File: src/components/landing/courses/landing-courses-slide.tsx
Renders the course slide UI element in the Courses section.
CourseStatusBadge
File: src/components/landing/courses/landing-courses-featured-status.tsx
Renders the course status badge UI element in the Courses section.
CourseTeaser
File: src/components/landing/courses/landing-courses-slide-teaser.tsx
Renders the course teaser UI element in the Courses section.
CoverChat
File: src/components/landing/courses/landing-courses-cover-chat.tsx
Renders the cover chat UI element in the Courses section.
CoverEvals
File: src/components/landing/courses/landing-courses-cover-evals.tsx
Renders the cover evals UI element in the Courses section.
CoverWorkflow
File: src/components/landing/courses/landing-courses-cover-workflow.tsx
Renders the cover workflow UI element in the Courses section.
DummyAvatar
File: src/components/landing/courses/landing-courses-primitives.tsx
Renders the dummy avatar UI element in the Courses section.
FeaturedCourse
File: src/components/landing/courses/landing-courses-featured.tsx
Renders the featured course UI element in the Courses section.
InstructorCard
File: src/components/landing/courses/landing-courses-instructor.tsx
Renders the instructor card UI element in the Courses section.
Kicker
File: src/components/landing/courses/landing-courses-primitives.tsx
Renders the kicker UI element in the Courses section.
LandingCourses
File: src/components/landing/courses/landing-courses.tsx
Renders the landing courses UI element in the Courses section.
Section
File: src/components/landing/courses/landing-courses-primitives.tsx
Renders the section UI element in the Courses section.
SyllabusList
File: src/components/landing/courses/landing-courses-syllabus.tsx
Renders the syllabus list UI element in the Courses section.
TestimonialCard
File: src/components/landing/courses/landing-courses-testimonial.tsx
Renders the testimonial card UI element in the Courses section.
TestimonialNav
File: src/components/landing/courses/landing-courses-testimonial-nav.tsx
Renders the testimonial nav UI element in the Courses section.
Title
File: src/components/landing/courses/landing-courses-primitives.tsx
Renders the title UI element in the Courses section.
WorkflowNodeRow
File: src/components/landing/courses/landing-courses-cover-workflow-nodes.tsx
Renders the workflow node row UI element in the Courses section.
Pricing
LandingPricingFaq
File: src/components/landing/pricing/landing-pricing-faq.tsx
Renders the landing pricing faq UI element in the Pricing section.
PaymentBanner
File: src/components/landing/pricing/pricing-payment-banner.tsx
Renders the payment banner UI element in the Pricing section.
Pricing
File: src/components/landing/pricing/landing-pricing.tsx
Renders the pricing UI element in the Pricing section.
PricingCard
File: src/components/landing/pricing/pricing-card.tsx
Renders the pricing card UI element in the Pricing section.
PricingPriceSection
File: src/components/landing/pricing/pricing-price-section.tsx
Renders the pricing price section UI element in the Pricing section.
FAQ
FAQ
File: src/components/landing/faq/landing-faq.tsx
Renders the f a q UI element in the FAQ section.
FAQItem
File: src/components/landing/faq/faq-accordion-item.tsx
Renders the f a q item UI element in the FAQ section.
Footer
Contact
File: src/components/landing/footer/landing-contact.tsx
Renders the contact UI element in the Footer section.
ContactEmailCard
File: src/components/landing/footer/contact-email-card.tsx
Renders the contact email card UI element in the Footer section.
ContactForm
File: src/components/landing/footer/landing-contact-form.tsx
Renders the contact form UI element in the Footer section.
FooterColumn
File: src/components/landing/footer/footer-column.tsx
Renders the footer column UI element in the Footer section.
FooterCopyright
File: src/components/landing/footer/footer-copyright.tsx
Renders the footer copyright UI element in the Footer section.
FooterSection
File: src/components/landing/footer/landing-footer-section.tsx
Renders the footer section UI element in the Footer section.
FootIconGit
File: src/components/landing/footer/footer-icons.tsx
Renders the foot icon git UI element in the Footer section.
FootIconLI
File: src/components/landing/footer/footer-icons.tsx
Renders the foot icon l i UI element in the Footer section.
FootIconX
File: src/components/landing/footer/footer-icons.tsx
Renders the foot icon x UI element in the Footer section.
FootIconYT
File: src/components/landing/footer/footer-icons.tsx
Renders the foot icon y t UI element in the Footer section.
LandingFooter
File: src/components/landing/footer/landing-footer.tsx
Renders the landing footer UI element in the Footer section.
Newsletter
File: src/components/landing/footer/landing-newsletter.tsx
Renders the newsletter UI element in the Footer section.
Shared
PixelOwl
File: src/components/landing/shared/owl-mascot.tsx
Pixel Owl component for the Shared section. Has 10 optional props.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
size | number | No | TODO |
variant | OwlVariant | No | TODO |
mood | OwlMood | No | TODO |
body | string | No | TODO |
glass | string | No | TODO |
pupil | string | No | TODO |
eye | string | No | TODO |
amber | string | No | TODO |
cheek | string | No | TODO |
style | CSSProperties | No | TODO |
RenCenter
File: src/components/landing/shared/ren-center.tsx
Renders the ren center UI element in the Shared section.
UI Primitives
FootIconGit
File: src/components/ui/pixel-icons-social.tsx
Renders the foot icon git UI element in the UI Primitives section.
FootIconLI
File: src/components/ui/pixel-icons-social.tsx
Renders the foot icon l i UI element in the UI Primitives section.
FootIconX
File: src/components/ui/pixel-icons-social.tsx
Renders the foot icon x UI element in the UI Primitives section.
FootIconYT
File: src/components/ui/pixel-icons-social.tsx
Renders the foot icon y t UI element in the UI Primitives section.
Kicker
File: src/components/ui/section-layout.tsx
Kicker component for the UI Primitives section. Requires children. Has 2 optional props.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
children | ReactNode | Yes | TODO |
color | string | No | TODO |
dot | boolean | No | TODO |
PIArrowLeft
File: src/components/ui/pixel-icons-nav.tsx
Renders the p i arrow left UI element in the UI Primitives section.
PIArrowRight
File: src/components/ui/pixel-icons-nav.tsx
Renders the p i arrow right UI element in the UI Primitives section.
PICheck
File: src/components/ui/pixel-icons-ui.tsx
Renders the p i check UI element in the UI Primitives section.
PICode
File: src/components/ui/pixel-icons-code.tsx
Renders the p i code UI element in the UI Primitives section.
PIEye
File: src/components/ui/pixel-icons-code.tsx
Renders the p i eye UI element in the UI Primitives section.
PIFlag
File: src/components/ui/pixel-icons-ui2.tsx
Renders the p i flag UI element in the UI Primitives section.
PIHalf
File: src/components/ui/pixel-icons-ui.tsx
Renders the p i half UI element in the UI Primitives section.
PILock
File: src/components/ui/pixel-icons-code.tsx
Renders the p i lock UI element in the UI Primitives section.
PIMinus
File: src/components/ui/pixel-icons-ui.tsx
Renders the p i minus UI element in the UI Primitives section.
PIMonitor
File: src/components/ui/pixel-icons-ui.tsx
Renders the p i monitor UI element in the UI Primitives section.
PIPlus
File: src/components/ui/pixel-icons-ui.tsx
Renders the p i plus UI element in the UI Primitives section.
PIRobot
File: src/components/ui/pixel-icons-code.tsx
Renders the p i robot UI element in the UI Primitives section.
PIRocket
File: src/components/ui/pixel-icons-code.tsx
Renders the p i rocket UI element in the UI Primitives section.
PISparkles
File: src/components/ui/pixel-icons-ui2.tsx
Renders the p i sparkles UI element in the UI Primitives section.
PIStar
File: src/components/ui/pixel-icons-ui2.tsx
Renders the p i star UI element in the UI Primitives section.
PITrophy
File: src/components/ui/pixel-icons-ui2.tsx
Renders the p i trophy UI element in the UI Primitives section.
PIWand
File: src/components/ui/pixel-icons-ui2.tsx
Renders the p i wand UI element in the UI Primitives section.
PIXmark
File: src/components/ui/pixel-icons-ui.tsx
Renders the p i xmark UI element in the UI Primitives section.
Section
File: src/components/ui/section-layout.tsx
Section component for the UI Primitives section. Requires children. Has 4 optional props.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
id | string | No | TODO |
bg | string | No | TODO |
children | ReactNode | Yes | TODO |
style | CSSProperties | No | TODO |
scrollMargin | boolean | No | TODO |
Title
File: src/components/ui/section-layout.tsx
Title component for the UI Primitives section. Requires children. Has 2 optional props.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
children | ReactNode | Yes | TODO |
size | `‘md' | 'lg' | 'xl’` |
style | CSSProperties | No | TODO |