Build a multi-page website for a live jazz and soul band called JAZZAFARI.

BRAND CHARACTER
Dark, nocturnal, premium live-music brand. Think a late-night jazz club poster: near-black surfaces, one warm gold accent, big condensed uppercase display type, and full-bleed photography of musicians performing. Warm and confident, never corporate. There is exactly one accent colour in the entire site: gold. Never introduce a second accent hue.

DESIGN SYSTEM (LOCK THESE, DO NOT CHANGE THEM ON ANY LATER PROMPT)

Colour tokens, define these as CSS variables in index.css and use only these values:
--primary:      #FFFFFF   (all headings, nav links, link default)
--secondary:    #874000   (deep burnt amber, decorative only, never body text)
--text:         #CCCCCC   (every paragraph and secondary label)
--accent:       #DBA14D   (brand gold: buttons, eyebrows, rules, icons, all hover states)
--accent-2:     #FFDB49   (bright gold: button hover fill, light gradient stop)
--netral:       #1A1A1A   (page background, header, and the text colour on gold buttons)
--bg-light:     #252525   (alternate section surface, form field fill)
--divider:      #3C3C3C   (every 1px hairline border)
--add-1:        #331800   (deep brown, submenu backgrounds)
--add-2:        #B97C25   (dark gradient stop)
--add-3:        #FFFBE8   (warm off-white, rare)
Gold gradient: linear-gradient(135deg, #FFDB49 0%, #B97C25 100%)

Typography, load Oswald (400,500,600,700) and Roboto (400,500,600 and 500 italic) from Google Fonts and set them in tailwind.config. Use only these two families.
- Hero title:  Oswald 700, clamp(2.3125rem, 1.7255rem + 2.6087vw, 3.8125rem), line-height 1.12, uppercase
- H1:          Oswald 600, clamp(1.9375rem, 1.4973rem + 1.9565vw, 3.0625rem), line-height 1.25, uppercase
- H2:          Oswald 600, clamp(1.625rem, 1.3071rem + 1.413vw, 2.4375rem), line-height 1.25, letter-spacing -0.5px, uppercase
- H3:          Oswald 500, clamp(1.3125rem, 1.0679rem + 1.087vw, 1.9375rem), line-height 1.27, letter-spacing -0.2px, uppercase
- H4:          Oswald 500, clamp(1.1875rem, 1.0408rem + 0.6522vw, 1.5625rem), line-height 1.27
- H5:          Oswald 500, clamp(1rem, 0.9022rem + 0.4348vw, 1.25rem), line-height 1.3
- Eyebrow/H6:  Roboto 500 italic, clamp(0.8125rem, 0.7636rem + 0.2174vw, 0.9375rem), uppercase, letter-spacing 0.5px, colour accent
- Body:        Roboto 400, clamp(0.875rem, 0.8261rem + 0.2174vw, 1rem), line-height 1.62, colour text
- Medium:      Roboto 500, clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem), line-height 1.5
- Small:       Roboto 400, clamp(0.75rem, 0.7011rem + 0.2174vw, 0.875rem), line-height 1.6
- Button:      Roboto 600, clamp(0.75rem, 0.7011rem + 0.2174vw, 0.875rem), uppercase, line-height 1.2
- Footer:      Roboto 400, clamp(0.6875rem, 0.6386rem + 0.2174vw, 0.8125rem), line-height 1.5
Headings are always white. Body copy is always #CCCCCC, never white. Eyebrows are always gold.

Layout
- Content container max-width 1280px, centred, 1em side padding
- Breakpoints: tablet 768px, desktop 1025px
- Standard section padding 7em top and bottom; compact sections 6em; inner page heroes use min-height 400px with 1em padding
- Section backgrounds alternate between #1A1A1A and #252525

Surfaces
- Border radius 30px on all cards, buttons, inputs and image frames; 10px on inner glass panels; 50% on social icons
- All borders are 1px solid #3C3C3C
- Buttons carry box-shadow 0 5px 10px rgba(0,0,0,.15), reducing to 0 2px 5px on hover
- Cards and sections carry no shadow, they are separated by tone and hairline borders only

COMPONENT RULES
- Primary button: gold #DBA14D fill, #1A1A1A text, 30px pill, padding 13px 24px 12px, uppercase Roboto 600. Hover fill #FFDB49.
- Outline button: transparent fill, gold text and 1px gold border. Hover inverts to gold fill with #1A1A1A text.
- Gradient button: the gold gradient with #1A1A1A text, used for newsletter signup only.
- Ghost button: transparent, white text, 1px #3C3C3C border, hover border and text gold.
- Section opener: a small gold italic uppercase eyebrow, then the H2, and where the layout is centred a 60px 2px gold rule beneath it.
- Social icons: 38px circles, 1px gold border, gold glyph, transparent fill; hover fills gold with a #1A1A1A glyph.
- Form fields: #252525 fill, 1px #3C3C3C border, 30px radius, #CCCCCC text, placeholder at 48% opacity, gold border on focus. Labels sit above in Roboto 500 16px.
- Every photographic section background sits under a #1A1A1A overlay between 60% and 86% opacity so text stays legible.

MOTION
Subtle fade-in on scroll only: fadeInUp for cards, fadeInLeft and fadeInRight alternating down list items, fadeIn for grids. All hover transitions 0.25s ease. No parallax, no looping animation, no transition longer than 400ms.

PAGES TO CREATE
Home, About Us, Album, Single Album, Event List, Gallery, News, Single News, Contact Us, and a 404 page.

SHARED LAYOUT
Create one shared Layout component holding the header and footer, and use it on every page so they never diverge.
Header: 95% width bar on #1A1A1A. Left 15% the JAZZAFARI wordmark. Centre 70% the menu (Home, About Us, Album, Event List, Pages) in Roboto 500 white, gold on hover and active. Right 15% four circular social icons (Facebook, X, Instagram, YouTube). Collapses to a hamburger drawer below 768px.
Footer: a newsletter strip on a #252525 to #1A1A1A vertical gradient with an H2 "Sign Up Newsletter", a short line of copy and a gradient "Subscribe Now" button; then a top hairline and three columns split 50/25/25 holding the logo plus blurb plus copyright, a "Quick Links" list (Event, Contact, About Us, Album, FAQs), and a "Booking Available" list (address, email, phone) with the four social icons beneath.

Start by creating the design system and the shared Layout. Do not build page content yet. Confirm the tokens are in place first.

Using the existing design tokens and shared Layout without changing either, build the Home page with these nine sections in order.

1. HERO. Full-bleed photo of a jazz band on stage under a dark overlay, min-height 840px, two columns split 48/45.
   Left: a short gold rule beside the gold italic uppercase eyebrow "Eargasms guaranteed"; then the hero-title headline "A SYMPHONY OF CLASS AND HARMONY" in white with the words "CLASS" and "HARMONY" filled with the gold gradient; a two-line medium-weight paragraph; the label "Download our music on:"; then three streaming badges (Spotify, SoundCloud, Apple Music) in a row.
   Right: a now-playing card, 25px padding, 30px top corners, 1px gold top border, dark translucent fill. It holds album artwork, the track title "Strangers In Stereo" in H4, the line "Jazzafari - Enigmatic Melodies, Albums", a circular gold-gradient play button, a hairline, and "Reelin Records (2025)" in small text.

2. INTRODUCTION AND STATS. Two columns split 50/50, gap 5em.
   Left: eyebrow "Our Introduction", H2 "We are a group of talented and professional musicians", a 40-word paragraph, and a primary button "See Our Tour".
   Right: an image carousel of band photos.
   Beneath, a row of three statistics separated by vertical hairlines: 30+ "Millions of copies sold worldwide", 4K+ "Successful shows across the country", 12+ "Won multiple global music awards". Numbers in Oswald 700 at hero size in gold, labels in Oswald 500 white beside them, not below.

3. ALBUM FEATURE. Background is a rehearsal-room photo under a dark overlay. Two columns split 40/60, gap 5em.
   Left: album artwork inside a 20px padded frame with a 30px radius and a hairline border.
   Right: H2 "New album out now, listen today, feel the vibes and the grooves"; a meta list "Release Date : 05 May 2025" and "Reelin Records" with gold icons; a hairline; H3 "Album: Enigmatic Melodies"; a paragraph; and a primary button "Watch Video Clip" with a play icon.

4. UPCOMING EVENTS. Background is a live-performance photo under a very heavy dark overlay. Centred header boxed to 860px: eyebrow "Up Coming Events", H2 "Our tour is just around the corner. Stay tuned for upcoming show dates!", and a centred gold rule.
   Then five event rows. Each row is 30px rounded with a 2px right border. A 14%-wide date chip on the left carries the gold gradient with the day in large Oswald 700 and the month in small text, both in near-black. The remaining 86% is a translucent panel with a hairline border and a 180px min-height, holding the event title in H4 white, a one-line description in grey, and a meta line with gold icons showing venue and time, then a vertical hairline and an outline "Buy Ticket" button on the right.
   Events: 03 Aug Tropical Vibes Music Carnival, 10 Aug Java Groove Night Festival, 17 Aug Sunset Soul & Jazz Session, 24 Aug Urban Harmony Street Fest, 31 Aug Island Echoes Music Weekend. All at Central Park Brooklyn, NY 10036 at 10.00 AM. Alternate the entrance animation left and right down the list.

5. DISCOGRAPHY. Header row: eyebrow "Discography" and H2 "Good music, good people, and good times" on the left at 40% width, with a short paragraph on the right at 37%.
   Then six square album cards, three per row. Each card is the album artwork at 406px square with 20px padding and a 30px radius, holding a translucent inner panel with a 10px radius and a faint white border. Inside, centred: the album title in H4 white uppercase, "by: Jazzafari", three circular streaming icons, and the label "Reelin Records" in small text. On hover the inner panel darkens.
   Albums: Midnight Lemonade, Whispers in Harmony, City Lights & Coffee Nights, Sunset Boulevard Dreams, Sketches of a Slow Dance, Velvet Mornings.

6. BAND MEMBERS. Background #252525. A huge decorative watermark heading "MEMBER OF THE BAND" in Oswald 700 at around 95px in a very low-contrast grey, centred, sitting behind the content. Then three portrait photos in columns split 32/36/32 with a 50px gap, the middle column deliberately wider. Under each photo, member names in Oswald 500 gold with the instrument in brackets in white: Brendan S. (Sax), Lester P. (Bass), Stephanie (Voc), Dora H. (Guitar), David C. (Drums), William M. (Keys).

7. SPONSORS. Background is a nightclub photo under a dark overlay, content boxed to 1100px, centred. H2 "Thanks for Supported Us", a two-line paragraph, then a logo carousel showing five logos on desktop, four on tablet, three on mobile.

8. INSTAGRAM. Background #252525. Two columns split 65/35, gap 4em. Left: eight square photo crops in a 4-by-2 mosaic. Right: H2 "Crafting Professional Music Moments", a paragraph, a hairline, then "Follow Our Instagram" in white above "@JAZZAFARI.ID" in H3 gold.

9. NEWS. Header row with H2 "Our News & Updates" on the left and a ghost "More News" button on the right. Then three blog cards. Each card has a photo with a gold date badge floating top-left (day in Oswald over the month in small text) and a gold category pill bottom-left, then a white H5 title, a grey excerpt, and a meta line with gold icons for author and date.

Use the tokens exactly as defined. Do not restyle the header, the footer, or any colour or font.

Using the existing design tokens, shared Layout and existing section components without changing any of them, build the [PAGE NAME] page.

Every inner page opens with the same hero: a crowd-silhouette photo under a heavy dark overlay, min-height 400px, 1em padding, with a left-aligned column at 35 to 45% width holding the H1 page title and, beneath it, a breadcrumb row: "Home" in grey (gold on hover), a small gold chevron-in-circle icon, then the current page name in gold.

Then the page-specific sections:

ABOUT US        H1 "About Us". Reuse, in order: the Introduction and stats section, the Album feature section, the Band members section, and the News section from the Home page. No new sections.

ALBUM           H1 "Our Albums". Then a featured-release section split 50/50: album artwork in a padded frame on the left; on the right the eyebrow "New Release", H3 "Enigmatic Melodies: High-quality music just for you", a paragraph, a second framed artwork, then H4 "Album Tracks:" above five track rows separated by hairlines. Each track row shows the number and title in Oswald with the duration in brackets in gold, and three streaming icons on the right: 1. Midnight Confessions (03.27), 2. Strangers in Stereo (04.05), 3. Sidewalk Serenade (03.59), 4. Lost in the Groove (05.31), 5. Slow Dancing in Echoes (04.47). Then the Discography card grid with a centred header boxed to 720px, then the Sponsors section.

SINGLE ALBUM    H1 "About Album" with the sub-heading "Enigmatic Melodies (2025)" in H2, and no breadcrumb. Then a two-column section split 35/65: left the artwork, an "Available on :" row with three circular streaming icons, and a hairline; right H3 "About Album", a centred gold rule, a two-column detail list (Artist: Jazzafari, Label: Reelin Records, Release Date: 05 May 2025, Genre: Jazz Pop, Album Cover By: Mr. Joehar), then two paragraphs. Beneath, H4 "Album Track List:" centred above five audio-player rows with 30px radius on a #252525 fill, each holding the track title, a player and three streaming icons. Then an "Other Album" section with three album cards and a ghost "View All Album" button, then the Instagram section.

EVENT LIST      H1 "Event List". Then the full event-row list with a centred H2 "Our tour is just around the corner. Stay tuned for upcoming show dates!" and a gold rule, with event titles set in H3 instead of H4. Then the Sponsors section, then the News section.

GALLERY         H1 "Our Gallery". Then a centred header boxed to 700px with H2 "Turning Music into Memorable Moments" and a paragraph, above a twelve-image photo grid. Then a full-width split section on a photographic background: on the left a copy panel at 640px with H2 "Stephanie : Nothing expresses who you are quite like music", a paragraph and a ghost "View Our Biography" button; on the right a second photo panel at 650px min-height holding a centred gold play button with a "Play Video" caption beneath it.

NEWS            H1 "News & Articles". Then the full blog archive using the same blog cards as the Home page, three per row, with pagination.

SINGLE NEWS     A 3em-padded article hero with the post title as H1 and a meta row of gold icons showing date and category. Then a two-column body split 68/32: the article with a featured image, paragraphs and an H2 sub-heading "Precision in Every Note", a tags row with social share icons, and an author box bounded by hairlines top and bottom. The sidebar holds a newsletter card with a 5px gold top border, 30px radius, H3 "Subscribe Newsletter", the line "Get the latest updates straight to your inbox. Subscribe now!" and an email field with a gold submit; below it a second card with "Recent Post" and "Categories" lists. Finish with a "Related Post" heading above three blog cards.

CONTACT US      H1 "Contact Us". Then a 30px-rounded two-panel card split 40/60. The left panel is a musician photo under a dark overlay with 4em padding, holding H2 "Let's start a conversation with Hi!", a short paragraph, a "Follow & subscribe:" label and four social icons. The right panel is #252525 with 4em padding, opening with a "Send us a message" divider heading above a form with Name, Email, Phone, Subject and Message fields and a full-width gold "Send Message" button. Beneath the card, three equal columns divided by faint vertical hairlines: "General Inquiries", "Managements" and "Booking / Show", each with a centred H4, a centred gold rule and three gold-iconed lines showing 789 Oak St, Smalltown, TX 23456, US / hello@jazzafarimsc.com / +1 (234) 567-8910. Then a full-width map with a 30px radius.

404             No hero. A full-height photographic background under a dark overlay with a single centred card at 40% width, 3em padding, 30px radius and a 1px gold top border, holding "404" in Oswald 700 at around 95px with the gold gradient as a text fill, "Page not found" in H2, a short paragraph, and a primary "Back to Homepage" button.

Build only this one page. Do not modify the design system, the Layout, or any section already built.

Stop redesigning. The design system is final and must not change.

Do not alter any colour value, font family, font size, clamp value, border radius, spacing scale, header or footer.
Do not add a new accent colour. The only accent is gold #DBA14D with #FFDB49 as its hover and gradient partner.
Do not switch any heading to a font other than Oswald, or any body text to a font other than Roboto.
Do not set body copy to white. Body copy is #CCCCCC.
Do not use square corners. Cards, buttons and inputs are 30px rounded.
Do not place text on a photograph without a dark overlay behind it.

Change only what I name in this message, and leave every other element exactly as it is.

Wire the site up before publishing:

1. Connect the Contact form to the CRM so submissions create a contact with Name, Email, Phone, Subject and Message mapped to their fields, and tag the contact "website-contact".
2. Connect the newsletter forms (footer strip and news sidebar) to create or update a contact with the tag "newsletter".
3. Point every "Buy Ticket" button at the booking or ticket URL for that event.
4. Point every "Book Us" or booking-related call to action at the contact page or the booking calendar.
5. Set page titles and meta descriptions for all ten pages.
6. Set the favicon and the social share image using the wordmark on the near-black background.
7. Check the mobile view of the hero, the event rows and the footer columns at 375px.
8. Confirm the header and footer are identical on every page.