Skip to content

Components

Jump to bottom
Rajieb edited this page Apr 1, 2026 · 1 revision

Every component in the project, organized by directory. Each entry covers the file path, what the component does, what props it accepts (if applicable), and any notable behavior.

src/components/home/ - Homepage sections

HeroSection

File: src/components/home/hero-section.js Type: Client component ("use client") Props: None

The full-viewport hero section at the top of the homepage. Renders a background image (/hero.png) with two gradient overlays (a diagonal dark gradient and a bottom-to-top gradient) for text readability. The content is positioned absolutely inside the section to avoid padding-height conflicts.

Content layers from top to bottom:

  • Conference logo (/icami_dark.png) with id="hero-logo" for the traveling logo animation (see Hero Section)
  • Location and date line
  • Full conference title
  • Tagline
  • CTA buttons: "Call for Papers" and "Submit Paper"
  • Bottom info strip: submission deadline, notification, and conference date cards plus a venue link

All content elements use staggered Framer Motion fade-in animations with increasing delays (0s to 0.5s). The useReducedMotion hook disables animations for accessibility.

The section height is 88svh with min-h-[36rem] on mobile and 720px on desktop (lg breakpoint). The content wrapper uses responsive top padding: calc(2rem + safe-area) on mobile vs calc(6rem + safe-area) on desktop.

HomePageClient

File: src/components/home/home-page-client.js Type: Client component ("use client") Props: { announcements } - array of announcement objects from the server

Client-side wrapper that stacks all homepage sections in order. Receives the announcements data as a prop from the server component at src/app/page.js. Each section is wrapped in scroll-reveal motion animations.

ConferenceHighlights

File: src/components/home/conference-highlights.js Type: Server component Props: None

Small grid of "pulse" cards highlighting key conference features: peer review process, proceedings publication, applied focus, and host institution.

AboutSection

File: src/components/home/about-section.js Type: Server component Props: None

"About the conference" section with descriptive copy about ICAMI 2026. Includes the AboutIllustration SVG graphic.

DatesSection

File: src/components/home/dates-section.js Type: Server component Props: None

Grid of important date cards. Imports the importantDates array from src/config/site.js and renders each date as a styled card. Highlighted dates get a distinct visual treatment.

AnnouncementsPreview

File: src/components/home/announcements-preview.js Type: Server component Props: { items } - array of announcement objects

Renders the latest announcements (up to 4) on the homepage as cards in a 2-column grid. Each card is a flex column with:

  • "Announcement" eyebrow label
  • Title (line-clamped to 2 lines)
  • Date (formatted as "Mon DD, YYYY")
  • Excerpt (line-clamped to 3 lines)
  • "Read more" button pinned to the bottom with mt-auto

The AnnouncementCard sub-component handles dynamic link behavior: if item.readMore.external is true, it renders an <a> tag with target="_blank". Otherwise, it renders a Next.js <Link>.

TracksPreview

File: src/components/home/tracks-preview.js Type: Server component Props: None

Shows the first tracksHomePreviewCount tracks (currently 4) from the tracks array in site.js. Each track card shows the title, summary, and a "View all tracks" link.

KeynotesPreview

File: src/components/home/keynotes-preview.js Type: Server component Props: None

Keynote speaker preview grid. Currently renders keynotesHomePreviewCount (3) TBA placeholder cards. Each card shows "TBA" for name, affiliation, and talk title. Uses key={${speaker.name}-${i}} to avoid duplicate key errors when all names are "TBA".

SponsorsSection

File: src/components/home/sponsors-section.js Type: Server component Props: None

Sponsor acknowledgment section. Currently renders a static "TBA" card instead of the full sponsorGroups data.

VenuePreview

File: src/components/home/venue-preview.js Type: Server component Props: None

Venue teaser section with CDN-hosted images and descriptive copy about MMU. Links to the full /venue page.

HeroSpotlight

File: src/components/home/hero-spotlight.js Type: Client component ("use client") Props: None

An optional pointer-following radial glow effect for the hero section. Tracks mouse position and renders a radial gradient that follows the cursor.

MalaysiaHeroAmbience

File: src/components/home/malaysia-hero-ambience.js Type: Server component Props: None

Decorative SVG and CSS layers that add subtle Malaysian-inspired visual atmosphere (batik-inspired wave patterns) to the hero section background.

src/components/layout/ - Layout and navigation

SiteHeader

File: src/components/layout/site-header.js Type: Client component ("use client") Exports: SiteHeader (public), SiteHeaderInner (internal)

The sticky site header. This is the most complex component in the project. It handles:

  • Transparent-to-solid background transition on the homepage
  • Hover-reveal dropdown navigation with dynamic labels
  • Traveling logo animation from hero to navbar on scroll
  • Explore overlay integration
  • Mobile nav dock integration
  • Active link highlighting with special-case logic

See the Navigation and Hero Section wiki pages for detailed breakdowns of the navbar behavior and the traveling logo animation.

The SiteHeader wrapper component re-mounts SiteHeaderInner on pathname change using key={pathname} to reset all internal state when navigating.

SiteFooter

File: src/components/layout/site-footer.js Type: Client component ("use client") Props: None

The site footer. Contains quick links, sponsor/organization references, and developer credit.

MobileNavDock

File: src/components/layout/mobile-nav-dock.js Type: Client component ("use client") Props: { exploreOpen, onOpenExplore }

Fixed-position bottom navigation dock, visible only below the lg breakpoint. Contains four items:

  1. Home - link to /
  2. CfP - link to /call-for-papers
  3. Dates - link to /important-dates
  4. Menu - button that triggers the explore overlay

Each dock item shows an SVG icon and a label. Active items are colored text-sky-700. The "Menu" button is styled text-amber-700.

The dock uses z-[140], is fixed bottom-0, has backdrop-blur-xl, and accounts for safe area insets with pb-[env(safe-area-inset-bottom,0px)].

NavigationOverlay

File: src/components/layout/navigation-overlay.js Type: Client component ("use client") Props: { open, onClose, theme } (forwarded ref for the dialog element)

A native <dialog> element that opens as a modal overlay. Contains searchable grouped navigation organized by navGroups from site.js. Supports keyboard navigation and is iOS-friendly for dialog open/close behavior.

HomeContentSheet

File: src/components/layout/home-content-sheet.js Type: Server component Props: { children }

A rounded "light sheet" container that visually overlaps the bottom of the hero section on the homepage. Creates the transition from the dark hero to the light content area below. Includes LightHudCorners for decorative L-bracket styling.

PageShell

File: src/components/layout/page-shell.js Type: Server component Props: { children, className }

Inner page max-width wrapper. Provides the chamfered panel background and HUD corner decorations that all document pages share.

src/components/page/ - Document page infrastructure

DocumentPage

File: src/components/page/document-page.js Type: Server component Props: { title, eyebrow, children, className }

The standard wrapper for all inner pages. Composes PageShell and InnerDocExperience. Every page that is not the homepage or the 404 uses this component.

InnerDocExperience

File: src/components/page/inner-doc-experience.js Type: Client component ("use client") Props: { title, eyebrow, children }

The "document experience" layer that provides:

  1. Breadcrumb - auto-generated "Home / Page Name" breadcrumb from docPageLabel()
  2. Table of contents - scans all h2 and h3 elements in the content, assigns IDs using slugify(), and renders a clickable TOC sidebar
  3. In-page find - a search panel activated by the / keyboard shortcut. Highlights matching text in the prose content.
  4. Scroll sync - highlights the current TOC item based on scroll position using IntersectionObserver
  5. MotionDocument - wraps the content with animated eyebrow, title rail, and prose container

MotionDocument

File: src/components/page/motion-document.js Type: Client component Props: { title, eyebrow, children }

Animated content wrapper used inside InnerDocExperience. Renders the eyebrow label, page title with heading styling, and the prose content area with Framer Motion entrance animations.

src/components/ui/ - Shared UI primitives

SectionHeading

File: src/components/ui/section-heading.js Props: { index, title, actionHref, actionLabel }

Section title component used on the homepage. Shows an optional section number (like "01", "02"), the section title, and an optional action link (like "All tracks" or "All announcements").

HighlightBrush

File: src/components/ui/highlight-brush.js Props: { children, variant }

Inline span wrapper that applies marker-style gradient backgrounds for text emphasis. Supports variants like "gold" for different highlight colors.

LightHudCorners

File: src/components/ui/light-hud-corners.js Props: None (or minimal)

Decorative L-bracket corner elements placed on light panels like PageShell and HomeContentSheet. Purely visual.

src/components/registration/ - Registration

RegistrationFeeCalculator

File: src/components/registration/fees-calculator.js Type: Client component ("use client") Props: None

Interactive fee calculator rendered on the /registration/fees page. See the Fee Calculator wiki page for the full breakdown of the discount logic and UI.

src/components/committee/ - Organizing committee

AvatarEasterEgg

File: src/components/committee/avatar-easter-egg.js Type: Client component ("use client")

Interactive committee member avatar with a flip animation. Respects prefers-reduced-motion.

src/components/graphics/ - SVG illustrations

AboutIllustration

File: src/components/graphics/about-illustration.js

Inline SVG graphic depicting a network/intelligence concept. Used in the AboutSection homepage component.

VenueIllustration

File: src/components/graphics/venue-illustration.js

Inline SVG placeholder depicting a campus/city scene. Available for use where a stylized venue graphic is needed.

src/components/motion/ - Animation presets

transitions.js

File: src/components/motion/transitions.js

Exports shared Framer Motion spring preset configurations and viewportOnce settings. These are imported by various components to maintain consistent animation behavior across the site.

src/components/providers/ - Context providers

MotionRoot

File: src/components/providers/motion-root.js Type: Client component ("use client") Props: { children }

Wraps the entire application (in layout.js). Provides a MotionConfig context that:

  • Disables Framer Motion animations on mobile viewports (at or below 767px) for performance
  • Respects the prefers-reduced-motion media query on desktop
  • Sets global animation defaults

src/lib/ - Utility libraries

announcements.js

File: src/lib/announcements.js

Server-side markdown loader and parser. See the Announcements wiki page for the full breakdown.

doc-route-labels.js

File: src/lib/doc-route-labels.js

Builds a flat Map<href, label> from all navigation arrays in site.js. Exports:

  • buildDocHrefLabelMap() - creates the map
  • docPageLabel(pathname) - looks up a pathname and returns its human-readable label for breadcrumbs

If a pathname is not found in the map, it falls back to extracting the last URL segment, replacing hyphens with spaces, and title-casing each word.

slugify.js

File: src/lib/slugify.js

Converts heading text to URL-safe anchor IDs for the table of contents. The algorithm:

  1. Lowercase the text
  2. Trim whitespace
  3. Remove non-alphanumeric characters (except spaces and hyphens)
  4. Replace spaces with hyphens
  5. Collapse multiple hyphens
  6. Truncate to 72 characters
  7. Fall back to "section" if the result is empty

Clone this wiki locally