דילוג לתוכן

אתרים מלאים · רטרו שנות ה־70

אתר פסטיבל מוזיקה בסגנון שנות ה־70

אתר לפסטיבל מדבר בסגנון שנות ה־70: קשתות שקיעה שבהן תזוזת הסמן קובעת את גובה השמש ומחממת את השמיים, פוסטר הופעות שבו כל שם מקפיץ מדבקה עם שעת ההופעה, לשוניות לוח זמנים, כרטיסים עם חותמת אזל ומפת מתחם.

Sunwave Festival Website

  • אתר מלא
  • אירועים
  • מוזיקה
  • רטרו

הפרומפט המלא

הצגת הפרומפט שמגדיר את הפריסה, התנועה ושפת העיצוב
Build a "Sunwave Festival Website" React component.

CONCEPT: The website of a three-day desert music festival with a 1970s soul. It sells tickets and shows the lineup like a vintage poster.

LAYOUT & CONTENT:
- Nav: logo 'Sunwave' in Shrikhand, links Lineup / Schedule / Tickets / Camping, a 'Get tickets' pill.
- Hero: concentric sunset arcs rising behind 'Sunwave '26', dates 'Aug 14-16, Mitzpe Ramon crater, 2026', a big mustard sun behind the arcs and a small 'Move to set the sun' pill.
- Lineup poster: headliners big, then smaller rows, in alternating colors, centered like a poster.
- Schedule: tabs Fri / Sat / Sun switching a list of set times on three stages.
- Tickets: three tiers (Day pass, Weekend, Weekend + Camping) with prices and sold-out state on the first.
- Camping: a stylized map block made of shapes with labels (Stage, Camp, Pool, Food).
- Footer: wavy top edge, socials, newsletter.

INTERACTIONS & MOTION:
- Sunset arcs rise from scaleY 0.2 with a springy stagger on load; the logo letters sway gently.
- Pointer Y over the hero moves the sun (spring stiffness 60, damping 18) so it can set behind the arcs, and the sky colour shifts from sand #F6E7CB to dusk #F3B98A.
- Lineup names are buttons: hover or focus pops a tilted mustard sticker with the artist's day, time and stage (spring 500/20).
- Schedule tab change crossfades the list with a slide.
- Ticket cards lift 8px and tilt -1° on a spring; the sold-out card has a rotated 'SOLD OUT' stamp.

DESIGN SYSTEM — Retro 70s:
- Cream #F6E7CB, burnt orange #E2711D, mustard #F2B134, chocolate #4A2C1D, teal #2A7F7A.
- Rounded sunset stripes, wavy dividers, pill shapes; warm and loose.
- Shrikhand for display, DM Sans bold for UI.

CRAFT RULES:
- Motion: Framer Motion with spring physics (type: "spring") for anything interactive; ease-out cubic-bezier(0.23, 1, 0.32, 1) for entrances, under 300ms for UI feedback, exits faster than entrances. Animate transform, opacity, clip-path and SVG attributes only. Respect prefers-reduced-motion via useReducedMotion() (loops and cursor effects become static).
- Copy: real, specific names, prices and times; no em-dashes, no lorem ipsum, no claims the business cannot back up.
- Icons: lucide-react where icons are needed; illustrations are inline SVG or CSS, no external images.
- Accessibility: real <button>/<a>/<label> elements, visible focus ring, keyboard operable, aria attributes where state changes, tabular numerals for times and prices.

OUTPUT: one self-contained React component file (Tailwind CSS v4 utility classes, framer-motion, lucide-react), no external images, default export, ready to paste into a Next.js App Router page with "use client". Load any Google Font it needs with next/font/google.

איך משתמשים בפרומפט

  1. 1. מעתיקיםלחיצה על „העתקת הפרומפט” מעתיקה את כל ההנחיות: פריסה, תנועה וכללי עיצוב.
  2. 2. מדביקים ב-Claudeכדאי להוסיף בתחילת הפרומפט את שם העסק, הטקסטים והצבעים שלך.
  3. 3. משלבים באתרמתקבל קובץ React אחד. צריך להתקין את framer-motion ואת lucide-react.