Sections

Full-width hero section with animated content and code mockup

• •Black background with CSS grid pattern
• •Teal glow effect
• •Framer Motion animations

Grid of feature cards with icons and descriptions

• •Teal mint background
• •4-column responsive grid
• •White cards with shadow

Highlight section with copyable commands, prompts, or study snippets

• •Teal background
• •3-column grid of promo cards
• •Copy to clipboard functionality

Carousel of learner testimonials or takeaways with navigation controls

• •Black background
• •Testimonial carousel with 5 testimonials
• •Prev/Next buttons

Grid of clickable learning track and guidance cards linking to detail pages

• •White background
• •3-column responsive grid
• •Clickable Next.js Link cards

Call-to-action section with customizable heading and button

• •Gray background with white card
• •Rocket emoji decoration
• •Customizable heading and CTA

A three-column learning-track comparison with feature checklists, a highlighted recommended path, and CTA buttons

• •3-column responsive grid (stacks on mobile)
• •Highlighted recommended path with ring + shadow
• •Feature checklist with Check / X icons

A 4-column metrics showcase with large primary-colored values, labels, and optional descriptions

• •4-column responsive grid (2 on mobile)
• •Primary-colored value display
• •Optional title + subtitle header

A horizontal row of company logos (or text placeholders) to build social proof

• •Supports real <img> logos or emoji/text placeholders
• •Grayscale hover-to-color effect for real images
• •Responsive flex-wrap layout

A dark email signup section with client-side validation, success state, and accessible form markup

• •Dark gray-900 background
• •Client-side email regex validation
• •Success state with confirmation message

Animated infinite logo/brand marquee for social proof

• •Infinite scroll loop
• •Pause on hover
• •Fade edge mask

2-column hero with headline/body/CTA on one side and media on the other

• •2-column grid
• •Reversible layout
• •Optional eyebrow text

Horizontal bar of company logos / brand names for trust building

• •Flex-wrap responsive layout
• •Hover opacity effect
• •Border-top/bottom dividers

Comparison table showing which features each plan includes

• •Sticky header row
• •Category grouping
• •Boolean/string coverage cells

Centered section with headline, body and browser-chrome app mockup

• •Browser chrome placeholder
• •Full-width mockup container
• •Optional CTA button

Full-screen hero with optional background video and overlay

• •Autoplay muted video
• •Gradient fallback
• •Dark overlay

Job openings list with department, location, type and apply link

• •Divided list layout
• •Dept/location/type metadata
• •Per-job apply links

Animated counting stats that trigger on scroll-into-view

• •IntersectionObserver trigger
• •RAF counter animation
• •Decimal support

Split-layout feature showcase with icon list and CTA

• •2-column split layout
• •Icon feature list
• •Media placeholder

Vertically stacked items that blur-reveal as they scroll into view

• •BlurReveal per item
• •Staggered delays
• •Icon support

Team member grid with avatar, role, bio, and social links

• •Initials fallback avatar with colour rotation
• •Optional image avatar support
• •Social links (Twitter/X, LinkedIn, GitHub)

Animated accordion FAQ with single / double column layout

• •Animated open/close with max-height transition
• •Single & double column layouts
• •Only one item open at a time

Blog post preview grid with category badge, author, and read time

• •Gradient cover area per post
• •Category badge
• •Author avatar with initials

Contact form with info panel, simulated async submit, and success state

• •Two-column layout (info + form)
• •Loading spinner and success state
• •Native form validation

Bento-style feature grid with variable column spans, gradients, and optional CTA links

• •Variable column spans: full / two-thirds / half / third
• •Row span support
• •Per-item gradient background

Top or inline announcement banner with 6 variants, optional CTA, and dismiss button

• •6 color variants
• •Sticky top or inline position
• •Optional dismiss button

Flexible content section with eyebrow, title, description, optional image and centered mode.

• •Eyebrow text
• •Centered and split layouts
• •Optional image panel

Vertical timeline for roadmaps, history, and step-by-step processes.

• •Left, center, and alternate layouts
• •Variant colors (success/warning/error)
• •Icon slot per item

Feature comparison table for side-by-side plan or product differentiation.

• •Boolean ✓/— display
• •Striped rows
• •Primary color highlight

Image gallery with grid and masonry layouts, hover zoom, and captions.

• •Grid and masonry modes
• •Hover zoom effect
• •Caption support

Real-time activity stream with auto-generated avatars and timestamps.

• •Auto-generated colored avatars
• •Custom avatar image support
• •Compact mode

Feature grid that uses CSS Container Queries (@container) to adapt card layout to container width — not the viewport. Showcases Tailwind v4 @container support.

• •@container queries
• •Tailwind v4 @md: container variant
• •Server Component