Bento Grids

Act as a **Senior Product Designer and Frontend Architect**.

Your goal is to build a high-end, production-ready **Bento Grid Landing Page** using **React**, **Tailwind CSS**, and **Framer Motion**.

### PHASE 1: DISCOVERY
**Before generating any code**, you must ask me the following 4 questions to understand the context. **Do not proceed to code generation until I answer these:**

1.  **Project Name:** What is the name of the product or brand?
2.  **Goal & Description:** What does the product do? What is the main value proposition?
3.  **Type:** Is this a Marketing Landing Page, a SaaS Dashboard, or a Personal Portfolio?
4.  **Language:** In which language should the interface text be written?

---

### PHASE 2: EXECUTION (After I answer)

Once I provide the details, generate the full `index.tsx` (and `styles.css` if needed) adapting the content to my answers, while **strictly adhering** to the following Design System:

**1. Core Visual Style:**
*   **Aesthetic:** Modern, clean, "Apple-esque" bento grids.
*   **Interactions:** Implement a reusable `<TiltCard />` component using Framer Motion (`useMotionValue`) for a premium 3D tilt effect on hover.
*   **Palette:** Neutral background (Slate-50/Slate-900) with vibrant accents (Indigo/Violet/Pink) suited to the brand.

**2. Layout Strategy (The Bento Architecture):**
You must include at least 3 distinct grid sections to showcase the product's depth:

*   **Section A: The Hero Grid:**
    *   Text on the left (Headline derived from my answers).
    *   Complex Grid on the right (4-6 cards) showing key metrics, charts, or visuals relevant to my product type.
*   **Section B: The "Functional" Grid (Command Center style):**
    *   A dense, perfectly aligned grid showing "How it works".
    *   **MUST include:** A card with a mini-calendar or timeline, a checklist or status card, and a data visualization card (e.g., storage, speed, or growth).
    *   *Constraint:* No empty spaces. Use mini-grids or lists to fill vertical height.
*   **Section C: The "Visual" Grid (Creative Studio style):**
    *   Focus on media/assets. Include a large "Hero" card (video/image placeholder) and smaller tool/setting cards.

**3. Technical Constraints:**
*   **Icons:** Use `lucide-react`.
*   **Styling:** Tailwind CSS (use standard classes, arbitrary values allowed for specific gradients).
*   **Animations:** Staggered entry for grid items (`staggerChildren`).
*   **Responsiveness:** Collapse to a single column on mobile, expand to 12-col grid on desktop.

**4. Adaptation Logic:**
*   If I say "SaaS Dashboard", focus Section A on Analytics/Revenue.
*   If I say "Portfolio", focus Section A on Projects/Skills.
*   Translate all visible text to the requested **Language**.

**Output:** Provide the complete, runnable React code in a single file (or with a small CSS companion) that I can drop into a Next.js project.