# ফ্যাশন ফটোগ্রাফার ওয়েবসাইট — UI ডেভেলপমেন্ট প্রম্পট সিরিজ

**Stack:** Laravel 12 + Inertia.js + Vue 3 + Tailwind CSS
**Pages:** Home, About, Gallery, Video, Store (Coming Soon), Contact
**লক্ষ্য:** প্রথমে সম্পূর্ণ পাবলিক UI বানানো, এডমিন প্যানেল পরের ধাপে

---

## কীভাবে ব্যবহার করবে

প্রতিটা Phase আলাদা আলাদাভাবে VS Code-এ Claude Code-কে দাও, একটার পর একটা। প্রতিটা Phase শেষ হলে `git add . && git commit -m "phase X done"` করে পরেরটায় যাও — এতে কোনো সমস্যা হলে রোলব্যাক করা সহজ হবে।

আমি Laravel + Inertia.js + Vue 3 ব্যবহার করেছি কারণ একই রিপোতে ব্যাকএন্ড + ফ্রন্টএন্ড থাকবে, রাউটিং সহজ হবে, আর পরে যখন এডমিন প্যানেল বানাবে তখন একই আর্কিটেকচার রিইউজ করতে পারবে।

---

## Phase 0 — Project Setup

```
Set up a fresh Laravel 12 project with Inertia.js and Vue 3 (Composition API, <script setup> syntax) using the Laravel Breeze Inertia+Vue starter kit as base, then strip out the default auth UI styling so we can rebuild it later — but keep the auth scaffolding (login/register routes) intact since we'll need it for the admin panel in phase 2.

Requirements:
- Tailwind CSS configured with a custom design token setup (see below)
- Install and configure: @vueuse/core, vue3-carousel (or embla-carousel-vue), a lightbox library (vue-easy-lightbox or similar), AOS (Animate On Scroll) or a lightweight scroll-reveal alternative
- Set up Google Fonts: a modern serif for headings (e.g. "Cormorant Garamond" or "Playfair Display") + a clean sans-serif for body text (e.g. "Inter" or "Manrope") — load via @fontsource packages, not CDN
- Create a Tailwind theme extension with:
  - Color palette: near-black (#0A0A0A), off-white (#FAFAF8), one accent color (muted gold #C9A961 or your choice — ask me if unsure), and greys in between
  - Custom font families mapped to the fonts above
  - Container max-width and consistent spacing scale
- Create the base folder structure:
  - resources/js/Layouts/PublicLayout.vue (wraps all public pages)
  - resources/js/Components/Public/ (shared components folder)
  - resources/js/Pages/Public/ (Home.vue, About.vue, Gallery.vue, Video.vue, Store.vue, Contact.vue)
- Set up routes in web.php for: / (home), /about, /gallery, /video, /store, /contact — all rendering their respective Inertia pages with placeholder content for now
- Configure SEO basics: a reusable <SeoHead> component (using @inertiajs/vue3's Head) that accepts title/description/ogImage props, used on every page

Do not build any page content yet — just confirm the project boots, Tailwind works, fonts load, and all 6 routes render a blank page with the correct layout wrapper.
```

---

## Phase 1 — Design System & Shared Layout Components

```
Build the shared layout components for the fashion photographer site inside resources/js/Components/Public/ and resources/js/Layouts/PublicLayout.vue.

Design direction: minimal, high-contrast, editorial/magazine feel — think fashion magazine website, NOT a generic template. Lots of whitespace, large imagery, subtle animation, confident typography. Reference aesthetic: Vogue.com meets a boutique photographer portfolio — elegant, not cluttered.

Build these components:

1. **NavBar.vue**
   - Fixed/sticky, transparent on page load (over hero image) that transitions to solid background on scroll (use @vueuse/core's useScroll or a scroll listener)
   - Logo/name on the left (text-based logo is fine, styled in the serif font)
   - Nav links: Home, About, Gallery, Video, Store, Contact — right aligned, with an elegant underline-on-hover animation
   - Mobile: hamburger menu that opens a full-screen overlay menu with large centered links and a fade/slide transition
   - "Store" link should show a small "Soon" badge

2. **Footer.vue**
   - Dark background, off-white text
   - Columns: brand blurb, quick links (repeat nav), social icons (Instagram, YouTube, Facebook — use lucide-vue-next icons), contact snippet (email/phone/location)
   - Bottom bar: copyright + subtle credit line
   - Newsletter signup input (UI only for now, no backend wiring yet)

3. **PageHero.vue** (reusable)
   - Props: title, subtitle, backgroundImage
   - Full-width banner used at the top of About/Gallery/Video/Store/Contact (Home will have its own custom hero)
   - Dark overlay gradient over image for text legibility, large serif title with fade/slide-up entrance animation

4. **SectionHeading.vue** (reusable)
   - Props: eyebrow (small label text), title, align (left/center)
   - Consistent heading style used across all sections site-wide, with a thin decorative line accent

5. **Button.vue** (reusable)
   - Variants: primary (solid black/accent), outline, ghost
   - Consistent hover states (subtle scale or underline reveal), used everywhere instead of raw <button> tags

Wire PublicLayout.vue to include NavBar + <slot /> + Footer, with a scroll-to-top behavior on route change.

Keep everything in Composition API with <script setup>, fully responsive (mobile-first), and add subtle AOS/scroll-reveal entrance animations to headings and images throughout — but keep animations tasteful and fast IN
(200–500ms), not gimmicky.
```

---

## Phase 2 — Home Page

```
Build resources/js/Pages/Public/Home.vue for the fashion photographer's homepage using the components from Phase 1.

Sections, in order:

1. **Hero** — full-viewport-height section with a large background photo (use a placeholder image path resources/images/placeholder/hero.jpg, I'll swap real photos later), photographer's name in large serif type, a short tagline underneath, and a subtle scroll-down indicator animation. Add a soft parallax effect on the background image on scroll (respect prefers-reduced-motion).

2. **Featured Work / Intro strip** — a short 2-3 sentence introduction to the photographer's style/philosophy, centered, generous whitespace, serif pull-quote style.

3. **Gallery Preview** — a masonry or asymmetric grid showing 6-8 featured photos (placeholder images), each with a subtle zoom-on-hover effect and a caption overlay that appears on hover (shoot name / category). Include a "View Full Gallery →" button linking to /gallery.

4. **About Teaser** — split layout: photo on one side, short bio excerpt + "Read More →" (links to /about) on the other. Alternate this split direction from the gallery preview above for visual rhythm.

5. **Video Highlight** — one embedded/thumbnail YouTube preview (use a placeholder video ID) with a play button overlay, linking through to /video page for the full list.

6. **Instagram-style strip** (optional but nice) — a row of 4-6 square images styled like an Instagram grid, "Follow on Instagram" CTA.

7. **Contact CTA banner** — full-width dark section, short heading like "Let's create something beautiful", button linking to /contact.

Make every section have scroll-reveal entrance animations, staggered where there are grids of images. Ensure the whole page feels like scrolling through a fashion editorial spread — generous vertical spacing between sections, consistent max-width containers, fully responsive down to mobile (stack all split-layouts vertically on small screens).
```

---

## Phase 3 — About Page

```
Build resources/js/Pages/Public/About.vue.

Structure:
1. PageHero component with title "About" and a suitable background image
2. Two-column bio section: large portrait photo on one side, biography text on the other (photographer's story, style, philosophy) — use serif for a pull-quote highlight within the text
3. "Skills / Specialties" section — icon + label grid (e.g. Editorial, Runway, Campaign, Portrait, Lookbook) using lucide-vue-next icons, 3-4 columns on desktop collapsing to 1-2 on mobile
4. "Behind the Scenes" small gallery strip — 4-5 candid/BTS placeholder images in a horizontal scroll or grid
5. "Clients / Brands worked with" — a simple logo strip (placeholder grey boxes for now), grayscale-to-color on hover
6. Closing CTA linking to /contact ("Want to work together?")

Same design language as Home — serif headings, scroll-reveal animations, generous spacing, fully responsive.
```

---

## Phase 4 — Gallery Page

```
Build resources/js/Pages/Public/Gallery.vue — this is the most important page, make it feel premium.

Structure:
1. PageHero with title "Gallery"
2. Filter bar — category pills/tabs (e.g. All, Editorial, Runway, Campaign, Portrait, Lookbook) that filter the grid below client-side with a smooth fade/reflow transition (no page reload). Active filter styled with the accent color underline.
3. Masonry-style photo grid (use CSS columns or a lightweight masonry approach — avoid heavy JS libraries if possible) displaying placeholder images with:
   - Hover: subtle zoom + dark overlay with shoot title and category label
   - Click: opens a lightbox/modal viewer (using the lightbox library from Phase 0) with next/prev navigation, image caption, and close button
   - Lazy-load images as they enter viewport (v-lazy or Intersection Observer) for performance
4. "Load More" button at the bottom (client-side pagination simulation for now — just reveals more placeholder items) — structure the component so wiring to a real API endpoint later is a one-line change (accept a photos prop and a loadMore function).

Data structure: create a placeholder JS array of ~20 gallery items with { id, src, category, title } so the grid and filters are fully functional with dummy data. Structure this so it's trivial to later replace with props coming from a Laravel controller.

Ensure the grid gracefully reflows on all breakpoints (1 col mobile, 2 col tablet, 3-4 col desktop).
```

---

## Phase 5 — Video Page

```
Build resources/js/Pages/Public/Video.vue.

Structure:
1. PageHero with title "Videos"
2. A responsive grid of video cards (2-3 columns desktop, 1 column mobile), each showing:
   - YouTube thumbnail (use the YouTube thumbnail URL pattern: https://img.youtube.com/vi/{videoId}/maxresdefault.jpg) with a play-button overlay icon
   - Video title + short description below
   - Clicking a card opens the video: either (a) inline — replaces the thumbnail with an embedded YouTube iframe player in place, or (b) opens a modal with the embedded player. Use approach (a), it's simpler and more elegant here.
3. Create a placeholder array of ~6 video objects { id, youtubeId, title, description } as dummy data, structured so it's easy to later move into the database/admin panel.
4. Add a "Subscribe on YouTube" button/banner near the bottom linking to the channel URL (placeholder link).

Keep the same visual language — serif headings, generous spacing, scroll-reveal on the grid items (staggered).
```

---

## Phase 6 — Store (Coming Soon) Page

```
Build resources/js/Pages/Public/Store.vue as an elegant "coming soon" page — not a boring placeholder, make it feel intentional and on-brand.

Structure:
1. Full-height centered layout (can skip the standard PageHero for something more custom here)
2. Large serif heading: "Store — Coming Soon"
3. A short line of supporting text about what will be available (prints, presets, merchandise — generic placeholder copy)
4. An email signup form ("Be the first to know when we launch") — UI only, POST to a placeholder route /store/notify for now, with a success state shown after "submission" (simulate with a local ref, no real backend call yet)
5. A subtle background — could be a blurred/darkened fashion photo, or a tasteful animated gradient — avoid making it look like a broken page
6. Keep the NavBar/Footer from PublicLayout so it doesn't feel disconnected from the rest of the site

Add a gentle fade-in animation on load for the whole section.
```

---

## Phase 7 — Contact Page

```
Build resources/js/Pages/Public/Contact.vue.

Structure:
1. PageHero with title "Contact"
2. Two-column layout:
   - Left: contact form (Name, Email, Subject/Shoot Type dropdown, Message) — build with Inertia's useForm(), client-side validation (required fields, valid email format), a submit button with a loading state, and a success message shown after submit. Wire it to POST /contact (create the route + a simple ContactController@store that validates and — for now — just returns back with a success flash message; no email sending logic yet, leave a TODO comment for that).
   - Right: contact info block — email, phone, studio location/address, business hours, and social icons — plus an embedded Google Map (use a static placeholder iframe embed for now)
3. Below the two columns: a full-width FAQ accordion (3-4 common questions like "What's your booking process?", "Do you travel for shoots?") with smooth expand/collapse animation

Match the site's visual language throughout — serif headings, accent color on focus states for form inputs, generous spacing, fully responsive (stack columns on mobile).
```

---

## Phase 8 — Final Polish Pass

```
Do a full responsive + polish pass across all 6 public pages (Home, About, Gallery, Video, Store, Contact):

1. Audit every page at 375px, 768px, 1024px, 1440px widths — fix any overflow, cramped spacing, or broken grid issues
2. Add a global page-transition effect between route changes (Inertia supports this — use a simple fade or subtle slide)
3. Add a loading progress bar for Inertia navigations (e.g. using @inertiajs/progress or NProgress) styled in the accent color
4. Verify all images have proper alt text, lazy loading, and explicit width/height (or aspect-ratio) to prevent layout shift
5. Run a Lighthouse-style self-check: ensure no console errors, no unused imports, consistent component naming
6. Add a favicon + basic meta tags (og:title, og:description, og:image) per page via the SeoHead component from Phase 0
7. Verify prefers-reduced-motion is respected for all scroll/hover animations
8. Create a simple 404 page matching the site's design (Laravel's default Inertia error page can be restyled)

Give me a summary at the end of what was fixed and flag anything that still needs real content (images, copy, video IDs, map embed, contact details) before this goes live.
```

---

## পরের ধাপ (এই UI কমপ্লিট হওয়ার পর)

- Phase 9+: Laravel এডমিন প্যানেল (Gallery photos, Videos, Contact submissions, Store waitlist ম্যানেজ করার জন্য) — এটা আলাদা প্রম্পট সিরিজ হিসেবে বানাবো, তুমি চাইলে এখন বলো, আমি সেটাও রেডি করে দেই।
- ছবি/ভিডিও আপলোড হ্যান্ডলিং, real contact form email (Laravel Mail), Google Map real embed, real social/YouTube links — এগুলো এডমিন প্যানেলের সাথে বা তার পরের ফেজে যুক্ত হবে।

**টিপ:** প্রতিটা Phase দেওয়ার সময় VS Code-এ Claude Code terminal-এ `/clear` বা `/compact` ব্যবহার করো যদি আগের Phase-এর context অনেক বড় হয়ে যায় — তোমার আগের কনভারসেশনে এই নিয়ে আলোচনা হয়েছিল।