House of Legends Documentation v1.0
plans
2026-05-06
2026 05 06 CSS to Tailwind Migration

CSS to Tailwind Migration — Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Migrate all 150+ custom WordPress-era CSS classes (v5-, aurora-, corner-accent, animations) from globals.css to inline Tailwind utilities in JSX components, then remove migrated CSS from globals.css.

Architecture: For each component using custom CSS classes:

  1. Extract the actual Tailwind-equivalent styles from globals.css
  2. Replace className="v5-class" with all inline Tailwind utilities
  3. Delete the custom CSS class from globals.css

Keep reusable complex components (aurora-blobs, corner-accents) as separate TSX components with inline styles for complex animations.

Tech Stack: Next.js 16, Tailwind CSS v4, React

File Structure

apps/frontend/
├── app/globals.css                          # MIGRATE: Remove v5-*, aurora-*, corner-accent classes
├── components/home/
│   ├── hero-section.tsx                     # MIGRATE: v5-hero, v5-hero-yt, v5-hero-bg-media, etc.
│   ├── cta-section.tsx                      # MIGRATE: v5-cta-*
│   ├── upcoming-shows-section.tsx           # MIGRATE: v5-upcoming-*
│   ├── services-section.tsx                # MIGRATE: v5-services-*, v5-service-card-*
│   ├── why-section.tsx                     # MIGRATE: v5-why-*
│   ├── gallery-section.tsx                 # MIGRATE: v5-gallery-*
│   ├── reviews-section.tsx                 # MIGRATE: v5-reviews-*
│   ├── recommended-section.tsx             # MIGRATE: v5-recommended-*
│   ├── partners-section.tsx                # MIGRATE: v5-partners-*
│   ├── contact-form-section.tsx            # MIGRATE: v5-contact-*, v5-partner-form
│   ├── calendar-modal.tsx                  # MIGRATE: v5-calendar-*
│   └── curtain-transition.tsx              # MIGRATE: v5-curtain-*
├── components/ui/
│   ├── corner-accents.tsx                   # KEEP: Complex CSS animation, inlined
│   ├── aurora-corner-accents.tsx           # KEEP: Complex CSS animation, inlined
│   └── aurora-background.tsx               # KEEP: Complex CSS effects
└── components/features/sections/
    └── partner-logos.tsx                   # MIGRATE: v5-partners-*

CSS Classes Reference (Extracted from globals.css)

Hero Section Classes to Migrate

/* Current globals.css classes for hero */
.v5-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.v5-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.v5-hero-bg-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.v5-hero-yt {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  filter: brightness(0.68) saturate(0.96);
}
.v5-hero-yt--mobile {
  display: none;
}
.v5-hero-yt-iframe {
  position: absolute;
  border: 0;
  top: 50%;
  left: 50%;
  pointer-events: none;
}
.v5-hero-yt-iframe--landscape {
  width: 177.78vh;
  min-width: 100%;
  height: 56.25vw;
  min-height: 100%;
  max-width: none;
  transform: translate(-50%, -50%) scale(1.08);
  transform-origin: center center;
}
.v5-hero-yt-iframe--portrait {
  width: 100vw;
  min-width: 100%;
  height: 177.78vw;
  min-height: 100%;
  max-width: none;
  transform: translate(-50%, -50%) scale(1.06);
  transform-origin: center center;
}
.v5-hero-bg-bottom-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(26, 26, 26, 0) 0%,
    rgba(26, 26, 26, 0.35) 38%,
    rgba(26, 26, 26, 0.88) 78%,
    #1a1a1a 100%
  );
}
.v5-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 3;
}
.v5-hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  color: #fff;
  padding: 2.5rem 2rem;
  max-width: 900px;
  background: rgba(26, 26, 31, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid #2a2a35;
  border-radius: 1rem;
}
.v5-hero-title-wrap {
  margin-bottom: 1.5rem;
}
.v5-hero-title {
  font-family: "Decophile", serif;
  font-size: clamp(2rem, 6vw, 4.5rem);
  line-height: 1.1;
  color: #dec89e;
  font-weight: 400;
  margin-bottom: 1rem;
}
.v5-hero-subtitle {
  font-family: "Mulish", sans-serif;
  font-size: clamp(1rem, 2vw, 1.5rem);
  line-height: 1.5;
  color: #e6e6e6;
  max-width: 700px;
  margin: 0 auto;
}
.v5-hero-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.v5-hero-note-icon-wrap {
  flex-shrink: 0;
}
.v5-hero-note-icon {
  display: block;
}
.v5-hero-note {
  font-family: "Mulish", sans-serif;
  font-size: 1rem;
  color: #b0b0b0;
}
.v5-hero-ctas {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.v5-hero-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 2rem;
  border: 2px solid #dec89e;
  border-radius: 9999px;
  color: #dec89e;
  font-family: "Mulish", sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}
.v5-hero-btn-outline:hover {
  background-color: rgba(222, 200, 158, 0.15);
}
.v5-hero-btn-filled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 2rem;
  background-color: #dec89e;
  border: 2px solid #dec89e;
  border-radius: 9999px;
  color: #1a1a1a;
  font-family: "Mulish", sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.v5-hero-btn-filled:hover {
  background-color: #c4b48a;
}

Services Section Classes to Migrate

.v5-services-section {
  background-color: #2e2e2e;
  padding: 5rem 1rem;
}
.v5-services-grid {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.v5-services-row {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}
.v5-service-card {
  position: relative;
  width: 384px;
  height: 400px;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
}
.v5-service-card-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.v5-service-card-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.v5-service-card:hover .v5-service-card-bg img {
  transform: scale(1.05);
}
.v5-service-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
  transition: background 0.5s ease;
}
.v5-service-card:hover .v5-service-card-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0) 100%
  );
}
.v5-service-card-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 1.5rem;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.v5-service-card:hover .v5-service-card-content {
  transform: translateY(-30px);
}
.v5-service-card-number {
  font-family: "Philosopher", serif;
  font-size: 2rem;
  line-height: 1.2;
  color: #c5a059;
  font-weight: 400;
}
.v5-service-card-title {
  font-family: "Decophile", serif;
  font-size: 2.25rem;
  line-height: 1.2;
  color: #fff;
  font-weight: 400;
  text-align: center;
}
.v5-service-card-desc {
  font-family: "Mulish", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #fff;
  text-align: center;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition:
    opacity 0.4s ease 0.1s,
    max-height 0.5s ease;
}
.v5-service-card:hover .v5-service-card-desc {
  opacity: 1;
  max-height: 120px;
}
.v5-service-card-btn {
  background-color: #c5a059;
  color: #1a1a1a;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-family: "Mulish", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.v5-service-card-btn:hover {
  background-color: #b8944f;
}

Calendar Modal Classes to Migrate

.v5-calendar-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}
.v5-calendar-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.v5-calendar-modal {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 1rem;
  padding: 1.5rem;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
}
.v5-calendar-modal-title {
  font-family: "Decophile", serif;
  font-size: 1.5rem;
  color: #c5a059;
  margin-bottom: 1rem;
}
.v5-calendar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.v5-calendar-month-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.v5-calendar-nav-btn {
  background: none;
  border: none;
  color: #dec89e;
  cursor: pointer;
  padding: 0.5rem;
  font-size: 1.25rem;
}
.v5-calendar-nav-btn:hover {
  color: #fff;
}
.v5-calendar-month-label {
  font-family: "Philosopher", serif;
  font-size: 1.25rem;
  color: #fff;
}
.v5-calendar-legend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.v5-calendar-legend-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background-color: #c5a059;
}
.v5-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.v5-calendar-weekdays span {
  text-align: center;
  font-family: "Mulish", sans-serif;
  font-size: 0.875rem;
  color: #8b8b9b;
}
.v5-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
}
.v5-calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  font-family: "Mulish", sans-serif;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.v5-calendar-day:hover {
  background-color: rgba(222, 200, 158, 0.2);
}
.v5-calendar-day--empty {
  cursor: default;
}
.v5-calendar-day--empty:hover {
  background-color: transparent;
}
.v5-calendar-day.is-selected {
  background-color: #c5a059;
  color: #1a1a1a;
}
.v5-calendar-shows {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #333;
}
.v5-calendar-shows-title {
  font-family: "Philosopher", serif;
  font-size: 1rem;
  color: #dec89e;
  margin-bottom: 0.75rem;
}
.v5-calendar-show-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.v5-calendar-show-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.5rem;
}
.v5-calendar-show-title {
  font-family: "Mulish", sans-serif;
  font-size: 0.875rem;
  color: #fff;
}
.v5-calendar-show-time {
  font-family: "Mulish", sans-serif;
  font-size: 0.875rem;
  color: #8b8b9b;
}
.v5-calendar-empty {
  font-family: "Mulish", sans-serif;
  font-size: 0.875rem;
  color: #8b8b9b;
  text-align: center;
  padding: 2rem;
}
.v5-calendar-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: #8b8b9b;
  cursor: pointer;
  font-size: 1.5rem;
  padding: 0.5rem;
}
.v5-calendar-close:hover {
  color: #fff;
}

Task 1: Migrate hero-section.tsx

Files:

  • Modify: apps/frontend/components/home/hero-section.tsx

  • Step 1: Replace v5-* classes with Tailwind utilities in hero-section.tsx

Current JSX using custom CSS:

<section className="relative min-h-screen overflow-hidden" id="v5-hero">
  <div className="v5-hero-bg-media absolute inset-0 overflow-hidden">
    <div className="v5-hero-yt v5-hero-yt--desktop hidden md:block" aria-hidden="true">
      <iframe
        className="v5-hero-yt-iframe v5-hero-yt-iframe--landscape"
        ...

Migrated to inline Tailwind:

<section className="relative min-h-screen flex items-center justify-center overflow-hidden" id="hero">
  <div className="absolute inset-0 overflow-hidden">
    <div className="absolute inset-0 overflow-hidden pointer-events-none md:block hidden [&>iframe]:hidden" aria-hidden="true">
      <iframe
        className="absolute border-0 top-1/2 left-1/2 pointer-events-none"
        style={{
          width: "177.78vh",
          minWidth: "100%",
          height: "56.25vw",
          minHeight: "100%",
          maxWidth: "none",
          transform: "translate(-50%, -50%) scale(1.08)",
          filter: "brightness(0.68) saturate(0.96)",
        }}
        ...
  • Step 2: Commit
git add apps/frontend/components/home/hero-section.tsx
git commit -m "refactor: migrate hero-section CSS to inline Tailwind"

Task 2: Migrate cta-section.tsx

Files:

  • Modify: apps/frontend/components/home/cta-section.tsx

  • Step 1: Replace v5-cta-* classes with Tailwind utilities

// BEFORE
<section className="v5-cta-section relative px-[7.5rem] pt-[90px] pb-20 flex items-center justify-center overflow-hidden">
  <div className="v5-cta-bg absolute inset-0 z-0 overflow-hidden">
  <div className="v5-cta-content relative z-10 flex flex-col gap-4 items-center text-center">
 
// AFTER
<section className="relative flex items-center justify-center overflow-hidden" style={{ padding: "90px 7.5rem 5rem" }}>
  <div className="absolute inset-0 z-0 overflow-hidden">
  <div className="relative z-10 flex flex-col gap-4 items-center text-center">
  • Step 2: Commit
git add apps/frontend/components/home/cta-section.tsx
git commit -m "refactor: migrate cta-section CSS to inline Tailwind"

Task 3: Migrate services-section.tsx

Files:

  • Modify: apps/frontend/components/home/services-section.tsx

  • Step 1: Replace v5-services-_ and v5-service-card-_ classes with Tailwind utilities

Key transforms:

  • v5-services-section → bg-[#2e2e2e] py-20 px-4

  • v5-services-grid → max-w-[1440px] mx-auto flex flex-col gap-6

  • v5-services-row → flex flex-wrap gap-6 justify-center

  • v5-service-card → relative w-[384px] h-[400px] overflow-hidden cursor-pointer shrink-0

  • v5-service-card-bg → absolute inset-0 z-10

  • v5-service-card-overlay → absolute inset-0 z-20 bg-black/50 transition-colors duration-500 group-hover:bg-transparent

  • v5-service-card-content → absolute inset-0 z-30 flex flex-col items-center justify-center gap-[10px] p-6 transition-transform duration-500 group-hover:-translate-y-[30px]

  • v5-service-card-desc → font-sans text-base leading-relaxed text-white text-center opacity-0 max-h-0 overflow-hidden transition-all duration-500 group-hover:opacity-100 group-hover:max-h-[120px]

  • v5-service-card-btn → bg-[#c5a059] text-[#1a1a1a] py-2 px-4 rounded-full font-sans text-sm font-bold no-underline transition-colors hover:bg-[#b8944f]

  • Step 2: Commit

git add apps/frontend/components/home/services-section.tsx
git commit -m "refactor: migrate services-section CSS to inline Tailwind"

Task 4: Migrate calendar-modal.tsx

Files:

  • Modify: apps/frontend/components/home/calendar-modal.tsx

  • Step 1: Replace v5-calendar-* classes with Tailwind utilities

Key transforms:

  • v5-calendar-modal-overlay → fixed inset-0 bg-black/80 z-[9999] flex items-center justify-center opacity-0 invisible transition-opacity duration-300 [&.is-open]:opacity-100 [&.is-open]:visible

  • v5-calendar-modal → bg-[#1a1a1a] border border-[#333] rounded-2xl p-6 max-w-[90vw] max-h-[90vh] overflow-y-auto

  • v5-calendar-day → aspect-square flex items-center justify-center rounded-lg font-sans text-sm cursor-pointer transition-colors duration-200 hover:bg-[rgba(222,200,158,0.2)] [&.is-selected]:bg-[#c5a059] [&.is-selected]:text-[#1a1a1a]

  • Step 2: Commit

git add apps/frontend/components/home/calendar-modal.tsx
git commit -m "refactor: migrate calendar-modal CSS to inline Tailwind"

Task 5: Migrate curtain-transition.tsx

Files:

  • Modify: apps/frontend/components/home/curtain-transition.tsx

  • Step 1: Replace v5-curtain-* classes with Tailwind utilities

// BEFORE
<div className="v5-curtain-transition">
  <div className="v5-curtain-left" />
  <div className="v5-curtain-right" />
 
// AFTER
<div className="fixed inset-0 z-[99999] bg-[#1a1a1a] flex items-center justify-center transition-transform duration-1000 ease-[cubic-bezier(0.77,0,0.175,1)] origin-top [&.closing]:translate-y-[-100%]">
  <div className="absolute left-0 top-0 bottom-0 w-1/2 bg-gradient-to-r from-[#1a1a1a] to-transparent" />
  <div className="absolute right-0 top-0 bottom-0 w-1/2 bg-gradient-to-l from-[#1a1a1a] to-transparent" />
  • Step 2: Commit
git add apps/frontend/components/home/curtain-transition.tsx
git commit -m "refactor: migrate curtain-transition CSS to inline Tailwind"

Task 6: Migrate contact-form-section.tsx

Files:

  • Modify: apps/frontend/components/home/contact-form-section.tsx

  • Step 1: Replace v5-contact-* classes with Tailwind utilities

Key transforms:

  • v5-contact-section → relative flex items-center justify-center min-h-[40rem] py-20 (with px-[7.5rem])

  • v5-contact-bg → absolute inset-0 z-0

  • v5-contact-form-container → relative z-10 bg-[#1a1a1a] border border-[#5a5a6b] rounded-xl p-8 w-full max-w-[600px]

  • v5-contact-input input → w-full bg-transparent border-b border-[#333] py-3 text-white font-sans text-base outline-none focus:border-[#c5a059] transition-colors placeholder:text-[#5a5a6b]

  • Step 2: Commit

git add apps/frontend/components/home/contact-form-section.tsx
git commit -m "refactor: migrate contact-form-section CSS to inline Tailwind"

Task 7: Migrate gallery-section.tsx

Files:

  • Modify: apps/frontend/components/home/gallery-section.tsx

  • Step 1: Replace v5-gallery-* classes with Tailwind utilities

Key transforms:

  • v5-gallery-section → bg-transparent py-20 overflow-hidden

  • v5-gallery-title → font-display text-4xl leading-none text-[#c5a059] font-normal text-center mb-10

  • v5-gallery-row → flex gap-8 w-max

  • v5-gallery-row--left → animate-[galleryScrollLeft_30s_linear_infinite]

  • v5-gallery-img → w-80 h-60 object-cover rounded-lg shrink-0

  • Step 2: Commit

git add apps/frontend/components/home/gallery-section.tsx
git commit -m "refactor: migrate gallery-section CSS to inline Tailwind"

Task 8: Migrate reviews-section.tsx

Files:

  • Modify: apps/frontend/components/home/reviews-section.tsx

  • Step 1: Replace v5-reviews-* classes with Tailwind utilities

Key transforms:

  • v5-reviews-section → bg-transparent py-20 overflow-hidden (with px-[7.5rem])

  • v5-reviews-title → font-display text-4xl leading-none text-[#c5a059] font-normal

  • v5-review-card → bg-[#1a1a1a] border border-[#2a2a35] rounded-xl p-6

  • v5-review-stars → flex gap-1 text-[#c5a059]

  • Step 2: Commit

git add apps/frontend/components/home/reviews-section.tsx
git commit -m "refactor: migrate reviews-section CSS to inline Tailwind"

Task 9: Migrate upcoming-shows-section.tsx

Files:

  • Modify: apps/frontend/components/home/upcoming-shows-section.tsx

  • Step 1: Replace v5-upcoming-* classes with Tailwind utilities

Key transforms:

  • v5-upcoming-section → bg-transparent py-20 (with px-[7.5rem])

  • v5-upcoming-card → bg-[#252525] rounded-[10px] overflow-hidden

  • v5-upcoming-card-img → w-full h-full object-cover transition-transform duration-600 group-hover:scale-105

  • v5-upcoming-title → font-display text-4xl leading-none text-[#c5a059] font-normal text-center

  • Step 2: Commit

git add apps/frontend/components/home/upcoming-shows-section.tsx
git commit -m "refactor: migrate upcoming-shows-section CSS to inline Tailwind"

Task 10: Migrate why-section.tsx

Files:

  • Modify: apps/frontend/components/home/why-section.tsx

  • Step 1: Replace v5-why-* classes with Tailwind utilities

Key transforms:

  • v5-why-section → bg-transparent py-20 (with px-[7.5rem])

  • v5-why-title → font-display text-4xl leading-none text-[#c5a059] font-normal text-center

  • v5-why-item → flex flex-col items-center gap-6 text-center

  • v5-why-icon → w-16 h-16 flex items-center justify-center text-[#c5a059]

  • Step 2: Commit

git add apps/frontend/components/home/why-section.tsx
git commit -m "refactor: migrate why-section CSS to inline Tailwind"

Task 11: Migrate recommended-section.tsx

Files:

  • Modify: apps/frontend/components/home/recommended-section.tsx

  • Step 1: Replace v5-recommended-* classes with Tailwind utilities

Key transforms:

  • v5-recommended-section → bg-transparent pt-20 pb-10 (with px-[7.5rem])

  • v5-recommended-title → font-display text-4xl leading-none text-[#c5a059] font-normal text-center mb-10

  • v5-recommended-grid → grid grid-cols-1 md:grid-cols-3 gap-8

  • v5-recommended-item → flex flex-col items-center gap-4 text-center p-6 bg-[#1a1a1a] rounded-xl border border-[#2a2a35]

  • Step 2: Commit

git add apps/frontend/components/home/recommended-section.tsx
git commit -m "refactor: migrate recommended-section CSS to inline Tailwind"

Task 12: Migrate partners-section.tsx

Files:

  • Modify: apps/frontend/components/home/partners-section.tsx

  • Step 1: Replace v5-partners-* classes with Tailwind utilities

Key transforms:

  • v5-partners-section → py-20 overflow-hidden

  • v5-partners-track → flex gap-12 items-center w-max animate-[marquee_20s_linear_infinite]

  • Step 2: Commit

git add apps/frontend/components/home/partners-section.tsx
git commit -m "refactor: migrate partners-section CSS to inline Tailwind"

Task 13: Migrate partner-logos.tsx

Files:

  • Modify: apps/frontend/components/features/sections/partner-logos.tsx

  • Step 1: Replace v5-partners-* classes with Tailwind utilities

Key transforms:

  • v5-partners-section → py-20 overflow-hidden

  • v5-partners-inner → max-w-[1200px] mx-auto

  • v5-partners-track → flex gap-12 items-center w-max

  • v5-partner-logo → shrink-0 opacity-60 transition-opacity duration-300 hover:opacity-100

  • Step 2: Commit

git add apps/frontend/components/features/sections/partner-logos.tsx
git commit -m "refactor: migrate partner-logos CSS to inline Tailwind"

Task 14: Remove Migrated CSS from globals.css

Files:

  • Modify: apps/frontend/app/globals.css

  • Step 1: Remove v5-hero related classes (lines ~1009-1209)

Delete:

.v5-hero { ... }
.v5-hero-bg { ... }
.v5-hero-bg-media { ... }
.v5-hero-yt { ... }
.v5-hero-yt--mobile { ... }
.v5-hero-yt-iframe { ... }
.v5-hero-yt-iframe--landscape { ... }
.v5-hero-yt-iframe--portrait { ... }
.v5-hero-bg-bottom-fade { ... }
.v5-hero-overlay { ... }
.v5-hero-content { ... }
.v5-hero-title-wrap { ... }
.v5-hero-title { ... }
.v5-hero-subtitle { ... }
.v5-hero-meta { ... }
.v5-hero-note-icon-wrap { ... }
.v5-hero-note-icon { ... }
.v5-hero-note { ... }
.v5-hero-ctas { ... }
.v5-hero-btn-outline { ... }
.v5-hero-btn-outline:hover { ... }
.v5-hero-btn-filled { ... }
.v5-hero-btn-filled:hover { ... }

  • Step 2: Remove v5-upcoming-* classes (lines ~1211-1388)

  • Step 3: Remove v5-services-* classes (lines ~1391-1550)

  • Step 4: Remove v5-why-* classes (lines ~1551-1615)

  • Step 5: Remove v5-gallery-* classes (lines ~1622-1690)

  • Step 6: Remove v5-reviews-* classes (lines ~1694-1840)

  • Step 7: Remove v5-recommended-* classes (lines ~1842-1910)

  • Step 8: Remove v5-partners-* classes (lines ~1911-1950)

  • Step 9: Remove v5-contact-* classes (lines ~1951-2175)

  • Step 10: Remove v5-cta-* classes (lines ~2177-2228)

  • Step 11: Remove v5-calendar-* classes (lines ~2305-2510)

  • Step 12: Remove v5-curtain-* classes (lines ~2659-2695)

  • Step 13: Remove v5-fade-in classes (lines ~2635-2657)

  • Step 14: Commit

git add apps/frontend/app/globals.css
git commit -m "refactor: remove migrated v5-* CSS classes from globals.css"

Task 15: Verify Build

Files:

  • Review all modified files

  • Step 1: Run TypeScript check

cd apps/frontend && npx tsc --noEmit
  • Step 2: Run build
cd apps/frontend && npm run build
  • Step 3: Verify pages visually

Test:

  • Landing page hero section renders correctly
  • Services section cards have hover effects
  • Calendar modal opens/closes properly
  • Curtain transition works
  • Contact form styling is preserved

Self-Review Checklist

  • All v5-* classes replaced with inline Tailwind utilities
  • No broken layouts - all sections render correctly
  • All hover/transition effects work as before
  • Build passes without errors
  • All custom CSS classes removed from globals.css
  • Complex animations (curtain, aurora) kept as inline styles or separate components
2026 05 06 Aurora Styling Adoption2026 05 06 Design System