דילוג לתוכן

אתרים מלאים · פנזין ריזוגרף

אתר יריד פנזינים בסגנון ריזוגרף

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

Overprint Zine Fair Website

  • אתר מלא
  • אירועים
  • דפוס
  • מגזיני

הפרומפט המלא

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

CONCEPT: The website of an independent zine and print fair. Everything should look like it came off a Risograph that needs servicing, on purpose.

LAYOUT & CONTENT:
- Nav: logo 'OVERPRINT' stamped, links Program / Exhibitors / Workshops / Visit, a ticket sticker.
- Hero: 'ZINE FAIR 07' in two overprinted ink layers, halftone circle, dates and venue.
- Program: grid of 6 event cards, each with a halftone color block, time, title and room.
- Exhibitors: a dense three-column list of 24 small presses with their city, in Space Mono.
- Workshop spotlight: big two-ink split block 'Learn to print in 3 hours' with a sign-up button.
- Tickets strip: three perforated ticket stubs (Day, Weekend, Supporter).
- Footer: credits 'Printed on a Riso MZ in Jaffa'.

INTERACTIONS & MOTION:
- Hero ink layers offset toward and away from the pointer (pink +8px, blue −6px) via springs.
- Program cards: on hover the two ink layers of the color block slide apart.
- Ticket stubs tear down slightly (rotate 2°, y 6px) on hover.

DESIGN SYSTEM — Risograph Zine:
- Newsprint #F2EFE4, fluorescent pink #FF48B0, riso blue #0078BF; overlaps in multiply make purple.
- Halftone dots, deliberate 3–6px misregistration, grainy edges, stickers and staples.
- Archivo Black for display, Space Mono for program details.

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.