דילוג לתוכן

אתרים מלאים · קולאז׳ סקייט

דרופ סניקרס למותג סקייט

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

Dead Curb Sneaker Drop

  • אתר מלא
  • מסחר
  • מדבקות
  • גרירה
  • ריחוף
  • טיפוגרפיה

הפרומפט המלא

הצגת הפרומפט שמגדיר את הפריסה, התנועה ושפת העיצוב
Build a "Dead Curb Sneaker Drop" React component.

CONCEPT: The drop page for a small Tel Aviv skate brand's first sneaker, CURB-01. It should look like a photocopied zine pasted onto a wall: torn colour paper, stickers, tape, huge condensed type and a little glitch.

LAYOUT & CONTENT:
- Nav (64px, 3px ink rule): 'DEAD CURB SK8 CO.', DROP 01 / TEAM / VIDEOS / STOCKISTS, bag icon 'BAG (0)'.
- Hero (760px) over a halftone dot texture: a torn pink paper shape behind 'DEAD' (ink) / 'CURB' (paper fill, ink outline) at 300px; a torn cobalt shape on the right holding the sneaker (SVG side profile: sole with dashed stitching, upper, lightning stripe, laces, heel tab) with a thick paper cut-out outline like a sticker, and a handwritten 'colourway: pigeon'. Three stickers: a yellow 'ONLY 300 PAIRS', a round spinning 'MADE FOR CRACKED CONCRETE', a black handwritten 'skate them, don't save them'. Bottom: 'ENTER THE RAFFLE' with a pink offset shadow and 'DROP IN 02:13:44:09'.
- Caution tape band (yellow, rotated -2deg): 'DROP 01 ✕ FRI 18:00 ✕ RAFFLE ONLY ✕ ONE PAIR PER PERSON ✕ SIZES 36-47'.
- THE DROP: 150px heading, a short spec line, four white product cards with a coloured shoe panel, name, price (₪459 / ₪489) and pair count.
- THE TEAM: three rider names as tilted paper labels, a handwritten line in cobalt, a 'WATCH "PIGEON" (11 MIN)' link.
- WIN A PAIR: black band with a raffle form (email, EU size select, yellow submit with pink shadow).
- Footer: logo, shop area and days, socials.

INTERACTIONS & MOTION:
- Glitch headline: every 2.8s the title jumps for ~0.25s with a pink/cobalt RGB split (text-shadow ±8px) and a skew, using steps(1) keyframes; still the rest of the time.
- Sneaker floats (y 0 to -18, rotate -8 to -4, 3.2s) and swaps colourway every 2.6s (Pigeon, Wet Paint, Bubblegum, Night Bus) with AnimatePresence: enter from x 60 + blur 4px, exit fast to x -60.
- Stickers pop in on springs (300/15), are draggable inside the hero (dragConstraints = hero ref, dragElastic 0.2, scale 1.1 while dragging, touch-action none only on the sticker).
- Countdown ticks every second with tabular numerals.
- Tape and the round sticker loop linearly.
- Product cards: start slightly rotated, straighten and lift on hover; the product name splits into pink and cobalt slices (clip-path bands) that jitter sideways with steps(2).
- Rider labels slide in from the left with stagger; the submit button presses into its shadow.

DESIGN SYSTEM — Skate Collage:
- Xerox paper #ECE6D8, ink #141414, hot pink #FF2E88, cobalt #2340FF, tape yellow #FFC700, grey #8B867B.
- Square corners, 3px ink borders, hard 4-8px ink offset shadows, torn-paper clip-path polygons, 6px halftone dots.
- Bricolage Grotesque 800 at font-stretch 75% for display, Caveat for handwriting, Space Mono for body and labels.

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. Ambient loops pause or go static under prefers-reduced-motion via useReducedMotion() and a CSS media query.
- Copy: real, specific names, prices and times; no em-dashes, no lorem ipsum, no claims the business cannot back up. All brands are fictional.
- Icons: lucide-react where icons are needed; illustrations are inline SVG, CSS or canvas, 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. Nothing on the page may grab focus or scroll the window.

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.