Component Showcase

Real-world component examples - hero sections, testimonials, forms, and advanced patterns

Hero Sections

Primary page heroes and animated introductions from @/components/sections/hero

Hero_1

Component: @/components/sections/hero/Hero_1

WELCOME TO THE FUTURE

Build Something Amazing

Experience the power of modern web design with our comprehensive template system. Built with Next.js, GSAP, and a complete design system.

Get Started Learn More

Centered Variant

import { Hero_1 } from "@/components/sections/hero/Hero_1";

<Hero_1
  variant="centered"
  subtitle="WELCOME"
  title="Your Amazing Title"
  description="Your description text here"
  videoBg="/your-video.mp4" // optional
  primaryCta={{
    text: "Get Started",
    href: "/get-started"
  }}
  secondaryCta={{
    text: "Learn More",
    href: "/about"
  }}
/>

Variants: centered, split, minimal
Features: Animated text, optional video background, CTAs
Use for: Landing pages, product launches, main sections

INNOVATIVE DESIGN

Create Stunning Experiences

Our design system gives you all the tools you need to build beautiful, performant websites with ease.

View Sections Documentation

Split Variant

<Hero_1
  variant="split"
  subtitle="YOUR SUBTITLE"
  title="Main Headline"
  description="Description text"
  image="/your-image.jpg"
  primaryCta={{ text: "CTA", href: "/link" }}
  secondaryCta={{ text: "Secondary", href: "/link" }}
/>

Split variant: Text on left, image on right
Responsive: Stacks on mobile

SplitHeroSection

Component: @/components/sections/hero/SplitHeroSection

Unser Fahrzeugbestand

Alle Autos geprueft und bereit fuer deine Probefahrt

Alle Modelle sind sorgfaeltig geprueft und sofort verfuegbar fuer deine Probefahrt.

Filtern Suchauftrag

Usage Example

import { SplitHeroSection } from "@/components/sections/hero/SplitHeroSection";

<SplitHeroSection
  kicker="Unser Fahrzeugbestand"
  heading="Alle Autos geprueft und bereit fuer deine Probefahrt"
  description="Alle Modelle sind sorgfaeltig geprueft und sofort verfuegbar."
  primaryCta={{ label: "Filtern", href: "/inventory" }}
  secondaryCta={{ label: "Suchauftrag", href: "/contact" }}
  image={{ src: "/demo-image-1.svg", alt: "Ausgewaehlte Fahrzeuge" }}
/>

Use for: Inventory heroes, catalog intros, split image layouts

ParallaxHero

Component: @/components/sections/hero/ParallaxHero

Scroll to see parallax

Example Code

// components/sections/hero/ParallaxHero.tsx
'use client';

import { useParallax } from '@/hooks/useParallax';

export function ParallaxHero({ disableParallaxMotion = false }) {
  const bgRef = useParallax(0.5, !disableParallaxMotion); // 0.5 = half speed

  return (
    <section className="tw:relative tw:min-h-viewport tw:overflow-hidden">
      {/* Parallax background */}
      <div
        ref={bgRef}
        className="tw:absolute tw:inset-parallax-bg tw:z-parallax-bg tw:bg-parallax-hero-image"
      />

      {/* Content */}
      <div className="parallax-hero-content tw:parallax-hero-content">
        <h1 className="title-large tw:title-large text-gradient tw:text-gradient">Scroll to see parallax</h1>
      </div>
    </section>
  );
}

Hook: hooks/useParallax.ts
Component: components/sections/hero/ParallaxHero.tsx
Speed: 0.5 = half speed, 1 = same speed, 2 = double speed
See: EXPANSION_GUIDE.md Section 12

BackgroundImageHero

Component: @/components/sections/hero/BackgroundImageHero

Elite Automotive

Elite Automotive Experiences, Redefined

Experience elegance, power, and style with our handpicked luxury fleet.

View Our Fleet Book a Concierge

Usage Example

import { BackgroundImageHero } from "@/components/sections/hero/BackgroundImageHero";

<BackgroundImageHero
  subtitle="Elite Automotive"
  title="Elite Automotive Experiences"
  description="Luxury fleet showcase"
  primaryCta={{ label: "View Our Fleet", href: "/inventory" }}
  secondaryCta={{ label: "Book a Concierge", href: "/contact" }}
  imageSrc="/demo-image-1.svg"
  imageAlt="Luxury sports car"
/>

Use for: Premium landing pages, automotive showcases, luxury brands

Feature Sections

Feature grids and story sections from @/components/sections/features and @/components/sections/content

HighlightsStackSection

Component: @/components/sections/features/HighlightsStackSection

Why Choose Us

Redefining Luxury Mobility

Curated experiences for clients who value discretion, comfort, and precision.

Learn More

Prestige Fleet Curation

A rotating lineup of luxury sedans, GTs, and SUVs tailored for every occasion.

View fleet

Concierge Delivery

White-glove handoff at your location with personal onboarding and inspection.

Flexible Lifestyle Plans

Weekend escapes, monthly access, or long-term subscriptions designed for you.

See plans

Priority Support

A dedicated concierge line for route planning, reservations, and last-minute changes.

FeaturedItemsSection

Component: @/components/sections/features/FeaturedItemsSection

Neu

Frisch eingetroffen

Entdecke unsere neuesten Fahrzeuge mit Diamond-Zertifizierung.

BMW 530i xDrive

2023 · 18,000 km · Automatik · Hybrid

DiamondGarantieSofort verfügbar

Mercedes E-Klasse

2022 · 27,500 km · Automatik · Benzin

DiamondGeprüftLieferbar

Audi A6 Avant

2023 · 14,000 km · Automatik · Hybrid

DiamondNeuwertigProbefahrt

Alle anzeigen

ComparisonCardsSection

Component: @/components/sections/features/ComparisonCardsSection

Two ways to work with SDN Academy

For teams

Upskill your engineering organization with tailored, modular learning paths designed to solve your specific technical challenges.

Customizable learning paths

Private, dedicated sessions

Team progress tracking

Book team training

For individuals

Accelerate your personal career growth by joining scheduled public courses alongside peers from across the industry.

Flexible public schedules

Industry-recognized certification prep

Networking opportunities

Browse public schedule

FeatureListSplitSection

Component: @/components/sections/features/FeatureListSplitSection

Modular learning paths

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Hands-on delivery

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Progress visibility

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Button Button

Team members collaborating on a training session

ModuleDirectorySection

Component: @/components/sections/cms/ModuleDirectorySection

Sort by: Date

SRE · Advanced

Effective Site Reliability Engineering

Implement SLIs, SLOs, and error budgets. Move beyond theory and architect resilient systems.

Dr. Alan Turing

Principal Architect

Next Cohort: Oct 15, 2024

View Module Details

TrainingAcademySection

Component: @/components/sections/cms/TrainingAcademySection

Variant: default

Training & Academy

Effective SRE

Master modern reliability engineering through practical, modular learning.

LevelProfessional

LanguageEnglish

Duration2 Days

DeliveryOnline / Onsite

Enroll Now Book for your team

Online Learning

1250 CHF

In-Person Workshop

2500 CHF

Team Solution

Custom

Variant: brand

Training & Academy

Effective SRE

Master modern reliability engineering through practical, modular learning.

LevelProfessional

LanguageEnglish

Duration2 Days

DeliveryOnline / Onsite

Enroll Now Book for your team

Online Learning

1250 CHF

In-Person Workshop

2500 CHF

Team Solution

Custom

TrainingFitOutcomesSection

Component: @/components/sections/cms/TrainingFitOutcomesSection

Ideal Candidates

SREs & Reliability Leads

Engineers focused on scaling production availability and operational maturity.

DevOps Engineers

Practitioners bridging the gap between development velocity and stable operations.

Platform Engineers

Architects building the internal developer platform, golden paths, and guardrails.

Learning Outcomes

Implement SLIs/SLOs

Define and measure meaningful reliability targets that align with business goals and user happiness.

Master Observability

Go beyond monitoring to build systems that are truly observable through metrics, logs, and traces.

Automate Incident Response

Reduce MTTD and MTTR by implementing automated incident management lifecycles and toil reduction.

Prerequisites

You should be comfortable with the following before joining.

Basic Linux or Unix command line proficiency.
Working knowledge of cloud architecture fundamentals.
Familiarity with containers, deployment pipelines, or production operations.

TrainingCurriculumSection

Component: @/components/sections/cms/TrainingCurriculumSection

Curriculum

The Core Curriculum

Follow the structured path from foundational systems design to resilient distributed operations. Each module builds directly on the last.

Systems Foundation & Topology

Duration: 4h

Establish the critical bedrock of system design with boundaries, service topology, and platform trade-offs.

Theoretical Part

Cover monolith-to-microservice patterns and domain boundaries.
Understand failure domains, latency considerations, and topology trade-offs.
See how architecture decisions shape overall reliability.

Practical Part

Map an example platform into services.
Identify critical dependencies and ownership boundaries.
Draft a topology that supports recovery and operational clarity.

Data Architecture & Resilience

Duration: 4h

Design storage and data flows with resilience in mind, from consistency trade-offs to failover strategy.

Theoretical Part

Introduce CAP trade-offs and replication models.
Review recovery patterns and resilience expectations for data systems.
Frame how storage choices affect reliability engineering decisions.

Practical Part

Evaluate storage options for a sample workload.
Define backup and restore expectations.
Outline regional failover behavior for the system.

Event-Driven Logistics

Duration: 4h

Use asynchronous patterns to decouple systems and improve reliability under bursty or distributed workloads.

Theoretical Part

Explain brokers, queues, ordering, and idempotency.
Review retries, dead-lettering, and consumer recovery patterns.
Understand where asynchronous systems improve operational resilience.

Practical Part

Model a small event flow across services.
Define retry and dead-letter handling.
Identify the boundaries where async design reduces risk and toil.

Security & Synthesis

Duration: 3h

Bring the architecture together with final reliability checks, resilience reviews, and zero-trust thinking.

Theoretical Part

Review security boundaries and access patterns.
Connect operational controls with resilience outcomes.
See how reliability and security decisions reinforce each other.

Practical Part

Run a lightweight architecture review.
Identify the biggest gaps in the proposed system.
Turn the curriculum output into a clear implementation backlog.

TrainingExpertsSection

Component: @/components/sections/cms/TrainingExpertsSection

Learn from practitioners and experts

Our instructors are active consultants who bring real-world project experience into every classroom.

Alex Mercer

Lead SRE Consultant

Specializes in Kubernetes, observability, and high-availability architecture for platform teams.

Effective SRE

Sarah Chen

Data & AI Architect

Expert in building scalable data pipelines and operationalizing ML models in production systems.

MLOpsData

Marcus Johnson

Principal DevOps Engineer

Focuses on CI/CD optimization, infrastructure as code, and reliability testing for modern delivery teams.

TestingDevOps

Variant: minimal

Learn from practitioners and experts

Meet the operators, architects, and reliability leads shaping the curriculum from active client work.

Alex Mercer

Lead SRE Consultant

Specializes in Kubernetes, observability, and high-availability architecture for platform teams.

Effective SRE

Sarah Chen

Data & AI Architect

Expert in building scalable data pipelines and operationalizing ML models in production systems.

MLOpsData

Marcus Johnson

Principal DevOps Engineer

Focuses on CI/CD optimization, infrastructure as code, and reliability testing for modern delivery teams.

TestingDevOps

TrainingInstructorSpotlightSection

Component: @/components/sections/cms/TrainingInstructorSpotlightSection

Lead Instructor

Dr. Sarah Jenkins

Former Principal SRE at TechCorp Global

With over 15 years of experience architecting high-availability systems for Fortune 500 companies, Sarah bridges the gap between theoretical reliability concepts and pragmatic, on-the-ground engineering practices. She has led incident response teams through major global outages and is a pioneer in blameless postmortem culture.

50+Enterprise teams trained

12Years active SRE

UpcomingCohortsSection

Component: @/components/sections/cms/UpcomingCohortsSection

Upcoming Cohorts

Date / PeriodOct 24 - Oct 25, 2024

Delivery Mode

Online (CET)

TrainerAlex Mercer

StatusRegistration Open

Actions

Join Waitlist Enroll

Date / PeriodNov 12 - Nov 13, 2024

Delivery Mode

Zurich Office

TrainerSarah Chen

StatusConfirmed

Actions

Join Waitlist Enroll

Variant: compact

Upcoming Cohorts

DateOct 12-13, 2024Online Global (UTC+1)

StatusOpen

Action

Enroll

DateNov 15-16, 2024Zurich Onsite

StatusWaitlist

Action

Join List

TrainingLedgerSection

Component: @/components/sections/cms/TrainingLedgerSection

Professional Ledger

Comprehensive schedule of upcoming engineering and architectural training sessions.

CourseAdvanced System DesignArchitecture & Scale

FormatLive Virtual

DateOct 15 - Oct 17

Price$1,200

StatusRegistration Open

ActionEnroll

CourseCloud Native PatternsInfrastructure as Code

FormatIn-Person (NYC)

DateNov 05 - Nov 08

Price$2,500

StatusPlanned

ActionWaitlist

CourseDistributed Data SystemsDatabase Engineering

FormatLive Virtual

DateDec 01 - Dec 03

Price$1,400

StatusComing Soon

ActionNotify Me

Variant: with filters

Professional Ledger

Comprehensive schedule of upcoming engineering and architectural training sessions.

Filter by format

Filter by discipline

CourseAdvanced System DesignArchitecture & Scale

FormatLive Virtual

DateOct 15 - Oct 17

Price$1,200

StatusRegistration Open

ActionEnroll

CourseCloud Native PatternsInfrastructure as Code

FormatIn-Person (NYC)

DateNov 05 - Nov 08

Price$2,500

StatusPlanned

ActionWaitlist

CourseDistributed Data SystemsDatabase Engineering

FormatLive Virtual

DateDec 01 - Dec 03

Price$1,400

StatusComing Soon

ActionNotify Me

TrainingSupportSection

Component: @/components/sections/cms/TrainingSupportSection

Waitlist Policy

Due to high demand and strict cohort sizing for optimal learning, many sessions reach capacity quickly. Joining the waitlist secures your priority position for cancellations or newly added dates.

Review Enrollment Terms

Elevate Your Entire Engineering Team

Customized, private cohort training tailored to your organization's specific technical stack and architectural challenges.

Request Team Pricing

TrainingPartnersSection

Component: @/components/sections/cms/TrainingPartnersSection

Technology Partners

Academic Alliance

TrainingFaqSection

Component: @/components/sections/cms/TrainingFaqSection

Frequently Asked Questions

Everything you need to know about the Effective SRE training.

Download Brochure (PDF)

What are the prerequisites for this course?

Do we get a certification after completion?

Is there a group discount for large teams?

CatalogSearchSection

Component: @/components/sections/cms/CatalogSearchSection

Finde dein Fahrzeug

Filtere nach Marke, Modell und Budget und starte direkt mit der Auswahl.

BMW 3er

28,900 EUR

2021 - 32,000 km - Automatik

Diamond

Probefahrt buchen

Audi A4

22,500 EUR

2020 - 41,000 km - Benzin

Gold

Probefahrt buchen

Mercedes C-Klasse

31,200 EUR

2022 - 19,500 km - Automatik

Diamond

Probefahrt buchen

Volvo XC60

35,400 EUR

2021 - 28,000 km - Hybrid

Diamond

Probefahrt buchen

Skoda Octavia

19,800 EUR

2019 - 54,000 km - Automatik

Gold

Probefahrt buchen

BMW 3er Touring

28,900 EUR

2020 - 38,000 km - Automatik

Diamond

Probefahrt buchen

ServiceOverviewSection

Component: @/components/sections/features/ServiceOverviewSection

Ökosystem

Was brauchst du heute?

Wir haben mehr als nur Autos für dich.

Concierge Service & MFK

Comprehensive inspections and maintenance so your vehicle is always ready.

Mehr

Flexible Rental Plans

Short-term mobility with premium cars and transparent pricing.

Mehr

Detailing Studio

Paint correction, ceramic coating, and interior restoration.

Mehr

Vehicle Sourcing

We locate and secure hard-to-find models with a vetted network.

Mehr

ImageSplitSection

Component: @/components/sections/content/ImageSplitSection

Geschichte

Wer wir sind und warum wir hier sind

Seit 2005 verkaufen wir Autos mit Verstand und Herz. Das ist nicht nur ein Geschäft, das ist Leidenschaft.

Erfahren Mehr

ImageCollageSection

Component: @/components/sections/content/ImageCollageSection

Geschichte

Wer wir sind und warum wir hier sind

Seit 2005 verkaufen wir Autos mit Verstand und Herz. Das ist nicht nur ein Geschaeft, das ist Leidenschaft.

Erfahren Mehr

SplitCtaSection

Component: @/components/sections/content/SplitCtaSection

Bereit zum fahren?

Wahle dein Auto und erlebe es selbst auf der Strasse.

Buchen Zuruck

Noch nicht das richtige?

Sag uns, was du suchst. Wir finden es fur dich.

Suchen Kontakt

Usage Example

import { HighlightsStackSection } from "@/components/sections/features/HighlightsStackSection";
import { FeaturedItemsSection } from "@/components/sections/features/FeaturedItemsSection";
import { ComparisonCardsSection } from "@/components/sections/features/ComparisonCardsSection";
import { TrainingAcademySection } from "@/components/sections/cms/TrainingAcademySection";
import { TrainingExpertsSection } from "@/components/sections/cms/TrainingExpertsSection";
import { TrainingCurriculumSection } from "@/components/sections/cms/TrainingCurriculumSection";
import { TrainingFitOutcomesSection } from "@/components/sections/cms/TrainingFitOutcomesSection";
import { TrainingFaqSection } from "@/components/sections/cms/TrainingFaqSection";
import { TrainingInstructorSpotlightSection } from "@/components/sections/cms/TrainingInstructorSpotlightSection";
import { TrainingLedgerSection } from "@/components/sections/cms/TrainingLedgerSection";
import { TrainingPartnersSection } from "@/components/sections/cms/TrainingPartnersSection";
import { TrainingPromoBannerSection } from "@/components/sections/cms/TrainingPromoBannerSection";
import { TrainingSupportSection } from "@/components/sections/cms/TrainingSupportSection";
import { UpcomingCohortsSection } from "@/components/sections/cms/UpcomingCohortsSection";
import { ModuleDirectorySection } from "@/components/sections/cms/ModuleDirectorySection";
import { CatalogSearchSection } from "@/components/sections/cms/CatalogSearchSection";
import { ServiceOverviewSection } from "@/components/sections/features/ServiceOverviewSection";
import { ImageSplitSection } from "@/components/sections/content/ImageSplitSection";
import { ImageCollageSection } from "@/components/sections/content/ImageCollageSection";
import { SplitCtaSection } from "@/components/sections/content/SplitCtaSection";

<HighlightsStackSection
  kicker="Why Choose Us"
  heading="Redefining Luxury Mobility"
  description="Curated experiences"
  cta={{ label: "Learn More", href: "/about" }}
  highlights={automotiveHighlights}
/>

<FeaturedItemsSection
  kicker="Neu"
  heading="Frisch eingetroffen"
  description="Newest inventory arrivals"
  vehicles={automotiveVehicles}
  cta={{ label: "Alle anzeigen", href: "/inventory" }}
/>

<ComparisonCardsSection
  heading="Two ways to work with SDN Academy"
  paths={audiencePaths}
/>

<TrainingAcademySection
  eyebrow="Training & Academy"
  title="Effective SRE"
  description="Master modern reliability engineering through practical, modular learning."
  facts={courseDeepDiveFacts}
  primaryCta={{ label: "Enroll Now", href: "/academy/enroll" }}
  secondaryCta={{ label: "Book for your team", href: "/academy/team-training", variant: "alt" }}
  deliveryOptions={courseDeliveryOptions}
/>

<TrainingFitOutcomesSection
  fitHeading="Ideal Candidates"
  fitItems={trainingFitItems}
  outcomesHeading="Learning Outcomes"
  outcomes={trainingOutcomeItems}
  readinessItems={trainingReadinessItems}
/>

<TrainingCurriculumSection
  eyebrow="Curriculum"
  heading="The Core Curriculum"
  description="Follow the structured path from foundational systems design to resilient distributed operations."
  modules={trainingCurriculumModules}
/>

<TrainingExpertsSection
  variant="minimal"
  heading="Learn from practitioners and experts"
  description="Our instructors are active consultants who bring real-world project experience into every classroom."
  items={trainingExperts}
/>

<TrainingInstructorSpotlightSection
  {...trainingInstructorSpotlight}
/>

<UpcomingCohortsSection
  variant="compact"
  heading="Upcoming Cohorts"
  cohorts={upcomingCohorts}
/>

<TrainingLedgerSection
  heading="Professional Ledger"
  description="Comprehensive schedule of upcoming engineering and architectural training sessions."
  filters={{
    formatLabel: "Filter by format",
    disciplineLabel: "Filter by discipline",
    searchLabel: "Search",
    searchPlaceholder: "Search course titles...",
    formats: ["Live Virtual", "In-Person (NYC)"],
    disciplines: ["Architecture", "Platform Engineering", "Data Engineering"],
  }}
  items={trainingLedgerItems}
/>

<TrainingSupportSection
  infoCard={trainingSupportInfo}
  featureCard={trainingSupportFeature}
/>

<TrainingPartnersSection
  groups={trainingPartnerGroups}
/>

<TrainingPromoBannerSection
  heading="Enterprise Upskilling"
  description="Align your entire engineering organization with customized training pathways and dedicated architectural support."
  cta={{ label: "Contact Sales", href: "/sections/forms", variant: "neutral" }}
  backgroundImageSrc="/training-team.svg"
  backgroundImageAlt="Team members collaborating during an enterprise training session"
/>

<TrainingFaqSection
  heading="Frequently Asked Questions"
  description="Everything you need to know about the Effective SRE training."
  brochureCta={{ label: "Download Brochure (PDF)", href: "/sections/forms", variant: "alt" }}
  items={trainingFaqItems}
/>

<ModuleDirectorySection
  searchPlaceholder="Search courses..."
  topicLabel="Topic"
  topics={moduleTopics}
  levelLabel="Level"
  levels={moduleLevels}
  heading="Available Modules"
  resultCount="12"
  sortLabel="Sort by: Date"
  modules={learningModules}
/>

<CatalogSearchSection
  heading="Finde dein Fahrzeug"
  description="Filter by make, model, and budget"
  toggleLabel="Find used vehicles and new vehicles"
  primaryFilters={catalogFiltersPrimary}
  secondaryFilters={catalogFiltersSecondary}
  resultsCta={{ label: "2,057,872 results", href: "/inventory" }}
  vehicles={catalogVehicles}
/>

<ServiceOverviewSection
  kicker="Ökosystem"
  heading="Was brauchst du heute?"
  description="We have more than just cars."
  services={automotiveServices}
/>

<ImageSplitSection
  kicker="Geschichte"
  heading="Wer wir sind und warum wir hier sind"
  description="Brand story and mission statement."
  image={{ src: "/demo-image-2.svg", alt: "Werkstatt" }}
  imagePosition="right"
  primaryCta={{ label: "Erfahren", href: "/about" }}
  secondaryCta={{ label: "Mehr", href: "/contact" }}
/>

<ImageCollageSection
  kicker="Geschichte"
  heading="Wer wir sind und warum wir hier sind"
  description="Brand story and mission statement."
  images={catalogCollageImages}
  imagePosition="right"
  primaryCta={{ label: "Erfahren", href: "/about" }}
  secondaryCta={{ label: "Mehr", href: "/contact" }}
/>

<SplitCtaSection items={catalogCtaPanels} />

Includes: HighlightsStackSection, FeaturedItemsSection, ModuleDirectorySection, ComparisonCardsSection, TrainingAcademySection, TrainingFitOutcomesSection, TrainingExpertsSection, TrainingInstructorSpotlightSection, UpcomingCohortsSection, TrainingLedgerSection, TrainingSupportSection, TrainingPartnersSection, TrainingPromoBannerSection, TrainingFaqSection, TrainingCurriculumSection, CatalogSearchSection, ServiceOverviewSection, ImageSplitSection, ImageCollageSection, and SplitCtaSection

Team Sections

Team and leadership layouts from @/components/sections/team

Our people

Meet the team

A tight-knit group of strategists, designers, and engineers focused on outcomes.

Jordan Lee

Product Strategist

Leads discovery, alignment, and roadmap planning across teams.

Priya Patel

Design Lead

Crafts cohesive systems and polished experiences for every release.

Mateo Santos

Engineering Lead

Builds scalable foundations and champions performance.

Kiara Blake

Customer Success

Ensures launches are smooth and clients are supported long-term.

Amira Khan

Brand Designer

Builds visual language and motion systems that scale.

Luca Rossi

Front-end Engineer

Turns design into resilient, accessible interfaces.

Usage Example

import { TeamGrid } from "@/components/sections/team/TeamGrid";

<TeamGrid
  tagline="Our people"
  heading="Meet the team"
  description="Designers, strategists, and engineers."
  imageStyle="square"
/>

Features: Avatar or square images, social links, CTA footer
Component: components/sections/team/TeamGrid.tsx

Forms

Contact and signup flows built from @/components/sections/forms

Contact Split Section

Component: @/components/sections/forms/ContactSplitSection

Tagline

Contact us

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Email

Lorem ipsum dolor sit amet.

email@example.com

Phone

Lorem ipsum dolor sit amet.

+1 (555) 000-0000

Office

123 Sample St, Sydney NSW 2000 AU

Get Directions

Usage Example

import { ContactSplitSection } from "@/components/sections/forms/ContactSplitSection";

<ContactSplitSection
  tagline="Tagline"
  heading="Contact us"
  description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
  submitLabel="Submit"
  infoItems={[
    {
      kind: "email",
      title: "Email",
      description: "Lorem ipsum dolor sit amet.",
      value: "email@example.com",
      href: "mailto:email@example.com",
    },
    {
      kind: "phone",
      title: "Phone",
      description: "Lorem ipsum dolor sit amet.",
      value: "+1 (555) 000-0000",
      href: "tel:+15550000000",
    },
    {
      kind: "office",
      title: "Office",
      value: "123 Sample St, Sydney NSW 2000 AU",
      linkLabel: "Get Directions",
      linkHref: "https://maps.google.com",
      linkIsExternal: true,
    },
  ]}
/>

Features: Split contact layout, inline validation, consent checkbox, direct contact cards
Component: components/sections/forms/ContactSplitSection.tsx

Contact Form

Component: @/components/sections/forms/ContactForm

Features

Editorial split layout with contact details
Two-column field rhythm with select and radio groups
Consent checkbox, loading, success, and error states
Automatic form reset on success

<ContactForm />

// Includes:
// - first / last name
// - email / phone
// - topic select
// - persona radios
// - message + consent
// - /api/contact submission

Component: components/sections/forms/ContactForm.tsx
See: EXPANSION_GUIDE.md Section 11

Email Signup Form

Component: @/components/sections/forms/SignupForm

Production Contract

<SignupForm
  heading="Local advice, occasionally"
  description="Useful updates. Unsubscribe any time."
  submitLabel="Subscribe"
  source="footer-newsletter"
/>

// Email-only newsletter/waitlist capture.
// /api/signup rejects credential and account payloads.
// Includes honeypot, request limits, and delivery states.

Endpoint: app/api/signup/route.ts
Features: Email validation, honeypot, loading, success, and error states
See: EXPANSION_GUIDE.md Section 11

FAQ Section

Import from @/components/sections/faq/FaqSection

FAQs

Frequently asked questions

Find quick answers about our services, timelines, and how we work with your team.

Contact support

How do you kick off a new project?

What does your typical timeline look like?

Can you work with our existing design system?

Do you offer ongoing support?

Usage Example

import { FaqSection } from "@/components/sections/faq/FaqSection";

<FaqSection
  heading="Frequently asked questions"
  items={[
    { question: "What is the timeline?", answer: "Most projects take 4–8 weeks." }
  ]}
/>

Features: Expandable details, CTA button
Component: components/sections/faq/FaqSection.tsx

Utilities

Hooks and lightweight helpers from @/components/sections/utilities

Scroll Progress Indicator

Component: @/components/sections/utilities/ScrollProgress

Implementation

// components/sections/utilities/ScrollProgress.tsx
'use client';

import { useScrollProgress } from '@/hooks/useScrollProgress';

export function ScrollProgress() {
  const progressRef = useScrollProgress();

  return (
    <div
      ref={progressRef}
      className="scroll-progress-bar tw:scroll-progress-bar"
    />
  );
}

Hook: hooks/useScrollProgress.ts
Component: components/sections/utilities/ScrollProgress.tsx
Usage: Add to layout or page component

Layout Variants

Navigation and footer variants from @/components/layout

Swap in your hero or landing page content here.

Static preview mode for the component showcase. Use the default fixed mode on real pages.

Usage Example

import { NavbarThree } from "@/components/layout/NavbarThree";

const items = [
  { label: "Services", href: "/services" },
  {
    label: "Work",
    href: "/projects",
    submenu: [
      { label: "Case Studies", href: "/projects" },
      { label: "Testimonials", href: "/testimonials" },
    ],
  },
  { label: "Contact", href: "/contact" },
];

export default function Page() {
  return <NavbarThree items={items} />;
}

Use for: Simple client previews and clean website chrome
Includes: Dropdown hover bridge, click state, mobile hamburger, static showcase mode

Navbar Two Usage Example

import { NavbarTwo } from "@/components/layout/NavbarTwo";
import { FooterTwo } from "@/components/layout/FooterTwo";

export default function Page() {
  return (
    <>
      <NavbarTwo />
      {/* Page content */}
      <FooterTwo />
    </>
  );
}

Use for: Premium automotive, travel, or luxury landing pages
Includes: Reused navbar animations, action buttons, newsletter form

More Patterns & Examples

Explore the full documentation for detailed implementations

EXPANSION_GUIDE.md

Complete code examples for:

Data fetching patterns
Form validation
Advanced animations
Modal patterns
State management

hooks/ Directory

Available custom hooks:

useFormValidation
useParallax
useScrollProgress
useFormAnimations
useToast

lib/ Directory

Utilities and context:

API client (lib/api/client.ts)
ToastContext
CartContext (example)
See lib/README.md

Component Showcase

Hero Sections

Hero_1

Build Something AmazingBuild Something Amazing

Centered Variant

Create Stunning Experiences

Split Variant

SplitHeroSection

Alle Autos geprueft und bereit fuer deine Probefahrt

Usage Example

ParallaxHero

Scroll to see parallax

Example Code

BackgroundImageHero

Elite Automotive Experiences, RedefinedElite Automotive Experiences, Redefined

Usage Example

Feature Sections

HighlightsStackSection

Redefining Luxury Mobility

Prestige Fleet Curation

Concierge Delivery

Flexible Lifestyle Plans

Priority Support

FeaturedItemsSection

Frisch eingetroffen

BMW 530i xDrive

Mercedes E-Klasse

Audi A6 Avant

ComparisonCardsSection

Two ways to work with SDN Academy

For teams

For individuals

FeatureListSplitSection

Modular learning paths

Hands-on delivery

Progress visibility

ModuleDirectorySection

Available Modules

Effective Site Reliability Engineering

TrainingAcademySection

Effective SRE

1250 CHF

2500 CHF

Custom

Effective SRE

1250 CHF

2500 CHF

Custom

TrainingFitOutcomesSection

Ideal Candidates

SREs & Reliability Leads

DevOps Engineers

Platform Engineers

Learning Outcomes

Implement SLIs/SLOs

Master Observability

Automate Incident Response

You should be comfortable with the following before joining.

TrainingCurriculumSection

The Core Curriculum

Systems Foundation & Topology

Data Architecture & Resilience

Event-Driven Logistics

Security & Synthesis

TrainingExpertsSection

Learn from practitioners and experts

Alex Mercer

Sarah Chen

Marcus Johnson

Learn from practitioners and experts

Alex Mercer

Sarah Chen

Marcus Johnson

TrainingInstructorSpotlightSection

Dr. Sarah Jenkins

UpcomingCohortsSection

Upcoming Cohorts

Upcoming Cohorts

TrainingLedgerSection

Professional Ledger

Build Something Amazing

Elite Automotive Experiences, Redefined