OLEARA — Single-Origin Olive OilFull Creative Direction & Website Build Prompt (one brand, maximum depth)PART 0 — THE IDEA (read this before anything else)Most olive oil sites do one of two things: a "luxury lifestyle" photo-dump, or a "farm-to-table" cliché with sun flares and rustic fonts. OLEARA does neither. The creative premise: an olive is basically a fruit doing slow chemistry — light, time, and pressure turning into flavor. The whole site treats oil the way a serious wine or fragrance brand treats its product: with lab precision and sensory romance, never choosing one over the other.This means the page should feel like it has two voices in conversation, section by section:The poetic voice (Sage-caliber): giant serif type cropped against texture/light, slow, generous, sensory.The precise voice (Agroton-caliber): harvest dates, acidity %, polyphenol counts, a literal lab-report aesthetic — numbers presented as proof, not decoration.The story voice (Creacy-caliber): a dark, slowed-down "process" section that feels like stepping into a gallery — one image, one idea, lots of negative space, no rush.The commerce voice (Purelis-caliber): when it's time to sell, the page snaps into clean, confident, trust-signaled e-commerce — no poetry, just clarity.The transitions between these voices ARE the design. Each section change should feel like a deliberate shift in register, signaled by background color/material change, not just "next div."What this explicitly is NOT: no left-text-right-image halves repeated four times, no generic 3-icon-row "why choose us," no stock-photo olive branch on white background, no rounded-pill buttons used as a default without reason.PART 1 — GLOBAL SYSTEMStack: React + TypeScript + Vite + Tailwind CSS, Framer Motion for scroll-triggered moments (used sparingly — restraint is part of the premium feel), lucide-react only where an icon genuinely clarifies something (not as decoration).Typography — two fonts, doing distinct jobs:"Fraunces" (serif, optical size "soft", weights 300/400/500, italic available) — used ONLY for: the wordmark, big editorial headlines in the poetic sections, and the large numerals in the data section. This font carries all the emotion."Inter" (400/500/600) — used for: nav, body copy, data labels, product cards, buttons. This font carries all the clarity.Rule of thumb embedded in the code comments: if a sentence is meant to be felt, it's Fraunces; if it's meant to be used, it's Inter.Color system — base neutral, with each section "tinting" the same base differently via background/material rather than introducing new brand colors:--background: 40 30% 97% /* warm bone white, base for poetic + commerce sections */ --foreground: 90 10% 12% /* near-black with a green undertone */ --muted-foreground: 90 5% 40% --olive: 80 25% 30% /* the one true brand color — deep, muted olive green */ --olive-light: 80 20% 85% /* tints, backgrounds, hover states */ --ink: 90 15% 8% /* near-black used for the dark "process" section bg */ --ink-foreground: 40 20% 92% /* warm off-white text on dark sections */ --gold: 35 55% 55% /* used ONLY for one accent: harvest-date stamps, price */ --border: 90 10% 88% No other hues anywhere. Olive, gold, ink, bone — that's the entire palette, used with discipline.Texture, not decoration: instead of drop shadows or gradients for depth, use a very faint paper-grain noise texture (NOISE_GRAIN asset, opacity-[0.03] mix-blend-multiply) applied globally — gives the bone-white sections a tactile, printed quality rather than flat digital white.Motion philosophy: Nothing bounces, nothing spins, nothing has a "wow" easing curve. Every transition is a slow fade/rise (0.8–1.2s, cubic-bezier(0.22, 1, 0.36, 1)), because the brand's whole identity is about slowness as a virtue (slow cold-press, slow harvest, slow reading). Speed would contradict the product.PART 2 — ASSET PROMPTS (generate these first; the site is built around them, not thereverse)HERO_IMG (hero background, poetic voice):Extreme close-up macro photograph of green olive oil being poured in a thin, glossy stream against a dark backdrop, single dramatic side-light catching the oil's translucency and viscosity, dark olive-green and black tones, shallow depth of field, high-end studio food photography, no text, no hands, no bottle visible — abstract and sensory.GROVE_IMG (about/origin section):Wide aerial drone photograph of an ancient olive grove at golden hour, rows of // gnarled silver-green trees on terraced hillside soil, warm low sunlight, soft long shadows, Mediterranean landscape, documentary agricultural photography, no people, no text.FOUNDER_IMG (dark process section):Black and white photograph of a weathered hand holding a single dark green olive close to the camera, dramatic single-source side lighting creating deep shadow, the rest of the frame in near-darkness, studio portrait-photography style, extremely high contrast, no other elements visible, painterly and quiet.PRESS_GRAPE_IMG (process section, stage image):Macro photograph of crushed olive paste mid-press inside a traditional stone mill, dark green-black paste texture, single warm spotlight, shallow depth of field, documentary food-production photography, no people, no text.LAB_CHART_BG (data section, subtle background texture):Extremely minimal, abstract grid-paper texture resembling a laboratory notebook page, faint cream and pale olive-green lines on off-white, top-down flat lay, no text, no objects — purely a background texture for overlaying data graphics.BOTTLE_01–BOTTLE_03 (commerce section, product shots):Clean studio product photograph of a minimalist dark glass olive oil bottle with a simple kraft-paper label, soft single shadow, neutral warm-beige background, centered composition, e-commerce product photography style, no props. (Vary the label text placeholder area slightly per bottle: "Early Harvest" / "Estate Reserve" / "Organic Blend" — leave label area generic/blank, no actual text needs rendering.)POUR_TEXTURE_VIDEO (footer background, subtle looping motion):Slow-motion close-up video of olive oil settling and swirling gently inside a glass vessel after being poured, dark green tones, soft single-light reflection moving slowly across the surface, seamless 10-second loop, no text, calm and minimal motion.PART 3 — SECTION-BY-SECTION BUILDNav (persistent, fixed top-0 inset-x-0 z-50)flex justify-between items-center px-8 lg:px-16 py-6. Background starts fully transparent over the hero, then crossfades to bg-background/90 backdrop-blur-md border-b border-border once scrolled past 80vh (useState + scroll listener, not a hard toggle — interpolate opacity for a smooth material change).Left: wordmark "Oleara" — font-display text-2xl tracking-tight text-current (color inverts white→ink as nav background changes). Center (hidden lg:flex gap-10 text-sm font-medium): "Origin", "The Process", "The Oil", "Shop". Right: a single quiet text link, not a button — "Find a Stockist →" (text-sm font-medium hover:opacity-70). No nav CTA button here; the commerce push happens later, deliberately, not upfront.Section 1 — Hero (poetic voice). h-[100vh] relative bg-inkHERO_IMG as absolute inset-0 object-cover z-0 opacity-90. No overlay gradient — the image's natural darkness is the design.Content is NOT centered, NOT left-aligned-with-image-right. Instead: a single line of huge type sits low-left, almost cropped by the viewport edge, as if the words are part of the photograph's composition:absolute bottom-16 left-8 lg:left-16 max-w-3xl:font-display italic text-[13vw] lg:text-[7vw] leading-[0.95] text-[hsl(40,20%,92%)]: "Pressed in" (line 1, normal weight) / "silence." (line 2, italic, larger, the emotional payload word).Below, small and quiet (mt-6 text-sm text-[hsl(40,20%,92%)]/70 max-w-sm tracking-wide): "A single estate. One harvest a year. Nothing rushed."Top-right corner (absolute top-28 right-8 lg:right-16 text-right), small and understated — this is the ONLY hint of a CTA in the entire hero, deliberately de-emphasized: "Scroll to begin ↓" (text-xs text-white/50 tracking-widest uppercase).On load: the headline rises and clarifies from a soft blur (opacity:0, translateY(20px), filter:blur(14px) → full clarity, 1.3s, no stagger — it arrives as one held breath, not a sequence of reveals).Section 2 — Origin (poetic + light data hybrid). `min-h-screen bg-backgroundrelative py-32 px-8 lg:px-16`This is NOT a left-image-right-text split. Instead: GROVE_IMG is the FULL-BLEED background of the top 70% of this section (absolute top-0 inset-x-0 h-[70%] object-cover), and the text block physically overlaps the bottom edge of the image, breaking out of it — a card that interrupts the photograph rather than sitting beside it:relative z-10 mt-[45vh] max-w-2xl bg-background rounded-sm p-10 lg:p-14 shadow-[0_8px_40px_-12px_rgba(0,0,0,0.15)]:Small label: "ORIGIN — CRETE, GREECE" (text-xs tracking-[0.25em] text-olive uppercase mb-5)font-display text-3xl lg:text-4xl leading-snug mb-5: "Trees older than the country that grows them."Body (text-muted-foreground leading-relaxed max-w-lg): "Our grove sits on a single hillside in Crete, planted by hand more than three centuries ago. We don't blend regions or harvests — every bottle comes from this one place, in this one year."A small inline data row, NOT a separate icon-grid section but woven directly into this card (mt-8 flex gap-10 pt-6 border-t border-border): three numbers in font-display text-2xl text-olive, labels beneath in text-xs text-muted-foreground uppercase tracking-wide: "340 / Years of the Oldest Tree", "1 / Single Harvest Per Year", "4.2ha / Total Grove Size".This single section does what most sites split into "hero stats + about text + image" — collapsed into one composed, overlapping moment.Section 3 — The Process (Creacy-caliber dark gallery voice). `bg-ink text-ink-foregroundrelative`This section behaves like a slow-scrolling gallery, not a 3-step icon list.Sub-section 3a — Opening frame (min-h-[70vh] flex items-center px-8 lg:px-16): FOUNDER_IMG positioned w-full lg:w-[45%] aspect-[3/4] object-cover on the left, large negative space on the right holding only:(01) — Harvest (text-xs tracking-[0.25em] text-gold uppercase mb-6)font-display italic text-3xl lg:text-5xl leading-snug max-w-md: "We pick by hand, not by calendar."text-ink-foreground/60 leading-relaxed max-w-sm mt-5: "Each olive is hand-checked for ripeness before picking — too early and the oil is bitter, too late and it's flat. The window is sometimes only nine days."Fade/rise on scroll into view, no parallax gimmick — restraint again.Sub-section 3b — Press stage (min-h-[70vh] flex items-center px-8 lg:px-16 flex-row-reverse): mirrored layout (image right this time, breaking any left/right habit), PRESS_GRAPE_IMG w-full lg:w-[45%] aspect-[3/4] object-cover:(02) — Cold Press (text-gold)font-display italic text-3xl lg:text-5xl: "Pressed within hours, never heated."Body: "Heat speeds extraction but kills flavor compounds. Our oil is stone-pressed at room temperature, within six hours of picking — before the fruit even has time to oxidize."Sub-section 3c — Closing line (py-32 text-center px-8): Single oversized line, centered, nothing else on screen — a deliberate pause before the data section: font-display italic text-4xl lg:text-6xl max-w-3xl mx-auto leading-tight text-ink-foreground: "The result isn't a product. It's a record of one season."Section 4 — The Lab Report (Agroton-caliber precise voice). `bg-[hsl(40,25%,95%)]relative py-32 px-8 lg:px-16`LAB_CHART_BG tiled at opacity-[0.4] as the section background — establishes the "document" feeling before any content loads.Header row (flex justify-between items-baseline mb-16 border-b border-border pb-6): left font-display text-3xl lg:text-4xl: "Every bottle, lab-verified." Right (hidden sm:block text-sm text-muted-foreground): "Batch No. 24-07 · Harvested Nov 2024".This is presented as an actual lab report layout, not a generic stat-grid: grid grid-cols-2 lg:grid-cols-4 gap-px bg-border border border-border (the gap-px bg-border trick creates thin hairline dividers between cells, like a real table) — each cell bg-[hsl(40,25%,95%)] p-8 flex flex-col gap-2:"Acidity" / font-display text-4xl text-olive "0.18%" / text-xs text-muted-foreground "Extra virgin threshold: <0.8%""Polyphenols" / "612mg/kg" / "Among the highest tested in the region""Peroxide Value" / "4.1 Meq/O₂" / "Indicates minimal oxidation""Harvest Date" / text-gold "Nov 14, 2024" / "Hand-picked over 9 days"Below the table, a single explanatory line (mt-10 max-w-2xl text-sm text-muted-foreground leading-relaxed): "We test every batch independently and publish the results in full — including the ones that don't flatter us. Most brands don't."This section should look like it could be screenshotted and trusted on its own — the opposite aesthetic of the previous dark/poetic section, and that contrast IS the point.Section 5 — The Oil (Purelis-caliber commerce voice). `bg-background py-32 px-8lg:px-16`The register snaps fully into clean e-commerce here — no more poetry, no more lab aesthetic, just clear product presentation, signaling "now we're asking you to buy."Header (flex justify-between items-end mb-12): left font-display text-3xl lg:text-4xl: "Choose your bottle." Right: small filter-style tabs (flex gap-2 text-sm): "All", "Early Harvest", "Reserve" — active tab bg-olive text-white rounded-full px-4 py-1.5, inactive text-muted-foreground hover:text-foreground.Product grid (grid grid-cols-1 sm:grid-cols-3 gap-8), each card:BOTTLE_0X, aspect-[3/4] object-cover rounded-sm bg-olive-light/30Below image (pt-4): name (font-medium text-base), one-line descriptor (text-sm text-muted-foreground), price row (flex justify-between items-center mt-3): price font-display text-lg text-gold, small "Add" button (bg-ink text-background rounded-full w-9 h-9 flex items-center justify-center hover:bg-olive with Plus icon from lucide-react).Names/descriptors: "Early Harvest" / "Bold, grassy, slightly bitter" / "$38" — "Estate Reserve" / "Our flagship blend, balanced and round" / "$52" — "Organic Blend" / "Certified organic, lighter finish" / "$44".Trust strip directly beneath the grid (mt-16 grid grid-cols-2 sm:grid-cols-4 gap-6 pt-10 border-t border-border text-center), small and confident, NOT a generic 4-icon row but specific to this brand's actual claims: "Lab-Tested Every Batch", "Single Estate, Single Harvest", "Cold-Pressed Within 6 Hours", "Carbon-Neutral Shipping" — each text-xs uppercase tracking-wide text-muted-foreground, no icons needed, the text alone carries it.Section 6 — Closing / Footer (returns to poetic voice, full circle). `min-h-[70vh]relative bg-ink overflow-hidden`POUR_TEXTURE_VIDEO as absolute inset-0 object-cover opacity-70, autoPlay muted loop playsInline.Centered content (relative z-10 flex flex-col items-center justify-center h-full text-center px-8):font-display italic text-4xl lg:text-6xl text-ink-foreground max-w-2xl leading-tight: "Taste the season before it's gone."Email-capture row (mt-8 flex gap-3): input (bg-white/10 border border-white/20 rounded-full px-5 py-3 text-sm placeholder-white/50 backdrop-blur text-white w-64, placeholder "Your email"), button (bg-[hsl(40,20%,92%)] text-ink rounded-full px-6 py-3 text-sm font-medium hover:bg-white): "Notify Me at Harvest" — this is the email capture framed around the brand's actual rhythm (one harvest a year), not a generic newsletter signup.Footer row (absolute bottom-0 inset-x-0 flex flex-col sm:flex-row justify-between items-center gap-4 px-8 lg:px-16 py-8 border-t border-white/10 text-xs text-ink-foreground/50): "© Oleara, Single Estate Crete" left; "Origin / Process / Oil / Shop / Contact" right, each hover:text-ink-foreground/90.PART 4 — WHY THIS AVOIDS THE GENERIC PATTERN (design rationale, for reference)No section repeats the same layout shape as the one before or after it — hero is type-over-photo with bottom-cropped headline; origin is overlapping-card breaking a photo; process is alternating full-bleed image/text panels with a dark background; data is a literal table; commerce is a grid; footer is centered-over-video. Six sections, six distinct compositions.The four "voices" (poetic, story, data, commerce) each get exactly the register they're good at, and the section backgrounds (bone → bone → ink → light-document → bone → ink) physically signal the register change before the user reads a word.Every number, claim, and label is specific to olive oil and this brand's actual story (acidity %, polyphenols, 9-day harvest window) — nothing is a placeholder stat that could belong to any company.Restraint is the actual design choice: no bouncing, no parallax tricks, no gradient mesh backgrounds, no glassmorphism for its own sake — slowness and quiet are the brand's identity, so the motion system enforces that rather than fighting it.