Instructions for Cascade (Windsurf)

You are working in a Nuxt 4 project with srcDir set to `app/`.
 
Very important constraints:
- Before writing any code, open and read `PROJECT_GUIDELINE.md` at the root of the repo.
- You MUST follow all coding, naming, styling and folder structure conventions described in `PROJECT_GUIDELINE.md`.
- The new page must be created at: `app/pages/lille.vue`.
- You MUST NOT create any new components.
- You MUST ONLY use components that already exist in `app/components`.
- If you want to use a component (e.g. Timeline, Animated List, Background, etc.), first inspect how it is used in existing pages/sections and reuse the same import paths and props. Do not guess the API.
 
Context:
- This is my personal portfolio using Nuxt 4, Vue 3, TailwindCSS and ShadCn UI–style components in `app/components`.
- The library of existing components includes backgrounds, buttons, cards, cursors, miscellaneous visual effects, timelines, animated lists, etc.
- I want to add a fun, lightweight page to showcase “Why Lille is the best city”.
 
Goal:
Create a new page at `app/pages/lille.vue` that is a simple but nicely designed section about Lille.
 
Content requirements:
- The page should be a single-file page component using `<script setup lang="ts">`.
- Wrap the content in a `<main>` element with proper semantic `<section>` blocks.
- The tone of the copy should be playful, friendly and slightly exaggerated, in English, with a few French words allowed (e.g. “estaminet”, “braderie”, “frites”, “bière”).
- Structure the content into:
  1. A hero section with a big title like “Why Lille is secretly the best city”.
     - 1–2 short paragraphs explaining the vibe of Lille (warm people, food, student life, 1h from everywhere, etc.).
  2. A “reasons” section with 3–5 bullet-style highlights (e.g. food, people, location, architecture, nightlife).
  3. A closing section that feels like an invitation: “If you like real city vibes, come to Lille.”
 
Layout & design:
- Use TailwindCSS utility classes for spacing, typography and layout.
- Keep the design simple and readable, consistent with the rest of the app.
- You are allowed to use ONE OR TWO existing visual components from `app/components` to enhance the page, for example:
  - a background component (e.g. Aurora Background, Stars Background, etc.)
  - a misc component such as Timeline, Animated List, Bento Grid, Marquee, etc.
- DO NOT introduce new UI primitives; only use what is already in `app/components`.
- When you choose components, pick ones that make sense for a “story” page (for instance: Timeline to show “A perfect day in Lille”, Animated List to show “Reasons Lille wins”, etc.).
- Make sure imports are valid and match the existing component file names and paths. If needed, search in the repo to confirm.
 
Technical details:
- No new composables, no new plugins.
- No external dependencies.
- No dynamic data fetching; everything is static content for this page.
- The page must render correctly even if the background/visual component fails to load (content first).
- No `any` types and no unused imports.
 
Deliverable:
- Provide the complete content of `app/pages/lille.vue`, fully ready to drop into the project, following `PROJECT_GUIDELINE.md`.
- At the top of your answer, briefly summarise in 3–4 bullet points:
  - Which existing components from `app/components` you chose
  - Why they fit this page
  - How the sections are structured.
 
Now, read `PROJECT_GUIDELINE.md`, inspect `app/components` usage patterns, and then generate the final `app/pages/lille.vue` file.
Créé il y a 1 mois.