# EdenStudio — Astro Theme Customization Map

> Machine-readable guide for developers and AI assistants customizing this theme.
> Human-readable docs: see README.md in the project root.

## Overview

EdenStudio is a premium portfolio/agency theme for Astro 7.0.7.
Target audience: freelancers, design agencies, creative studios.
Author: Noel Dario Andres | License: MIT

Stack: Astro 7, Lenis smooth scroll, Content Collections, vanilla CSS, @astrojs/sitemap.
No Tailwind. No React/Vue/Svelte islands on the homepage.

---

## Quick Customization Checklist

1. astro.config.mjs → site URL
2. src/layouts/Layout.astro → SEO defaults, Schema.org, Lenis config
3. src/styles/global.css → colors, fonts, design tokens
4. src/components/Navbar.astro → brand name, nav links, social links, email
5. src/components/Footer.astro → brand, tagline, links, copyright
6. src/components/Hero.astro → headline, badge, CTAs, hero image
7. src/components/Services.astro → service cards (inline HTML)
8. src/components/Process.astro → steps array
9. src/components/Contact.astro → email, location, form options, backend hook
10. src/content/portfolio/*.md → case studies + cover images in src/assets/
11. src/content/blog/*.md → blog posts (optional, can be removed entirely)
12. public/og-image.png → add Open Graph image (not included)
13. public/robots.txt → update sitemap domain

---

## File Map

### Configuration

| File | Purpose | Key edits |
|------|---------|-----------|
| astro.config.mjs | Astro config | `site` (production URL), sitemap integration, prefetch |
| src/content.config.ts | Content schemas | `portfolio` and `blog` collection field definitions |
| package.json | Dependencies | Node >= 22.12.0 required |
| public/robots.txt | Crawler rules | Sitemap URL line |

### Layout & Global

| File | Purpose | Key edits |
|------|---------|-----------|
| src/layouts/Layout.astro | Base HTML shell | Default title/description/ogImage props, Schema.org JSON-LD (name, founder, address), background grid + gradient blobs, Lenis init script, imports Navbar/Footer/CustomCursor |
| src/styles/global.css | Design system | :root CSS variables (colors, fonts, easing, container width), typography, utility classes (.text-gradient, .glass-panel, .section-badge, .container), Lenis scroll lock class |
| src/pages/index.astro | Homepage assembly | Import/order of section components: Hero, Services, Portfolio, Process, Contact |

### Components (Homepage Sections)

| File | Section ID | Key edits |
|------|-----------|-----------|
| src/components/Hero.astro | #hero | Badge text, headline (.char-reveal lines), description, CTA buttons/links, hero image import (src/assets/hero-bg.png), parallax script |
| src/components/Services.astro | #services | Section header copy, 3 hardcoded service cards (icon SVG, title, desc, bullet list). Duplicate .service-card-wrapper to add cards |
| src/components/Portfolio.astro | #portfolio | Section header copy only — projects loaded from content collection |
| src/components/Process.astro | #process | `steps` array (num, title, desc, tag), section header copy, scroll-tracked timeline script |
| src/components/Contact.astro | #contact | Email, location, section copy, `projectTypes` checkbox array, form labels. Submit handler is simulated — replace setTimeout in script with real API call |
| src/components/Navbar.astro | — | Logo text (Eden/Studio), desktop nav links, mobile drawer links, CTA button, mobile email + socials |
| src/components/Footer.astro | — | CTA heading, brand logo + tagline, nav/social/resource columns, copyright, legal links |
| src/components/CustomCursor.astro | — | Custom cursor behavior. Remove from Layout.astro to disable. Responds to data-cursor-hover and data-cursor-text attributes |

### Pages (Dynamic Routes)

| File | Route | Key edits |
|------|-------|-----------|
| src/pages/portfolio/[id].astro | /portfolio/{slug} | Project detail template — reads from portfolio collection. Back link, hero, markdown body, next-project navigation |
| src/pages/blog/index.astro | /blog | Blog listing — reads from blog collection, filters drafts |
| src/pages/blog/[id].astro | /blog/{slug} | Blog post detail — markdown body, sidebar meta, next-post link |

### Content Collections

| Directory | Schema fields | Notes |
|-----------|--------------|-------|
| src/content/portfolio/ | title, client, year, tags[], cover (image), order?, description | Filename = URL slug. Body = markdown case study. Cover path relative to file: ../../assets/image.png |
| src/content/blog/ | title, description, pubDate, author, tags[], cover? (image), draft? | Filename = URL slug. Set draft: true to hide. Body = markdown article |

Schema definitions: src/content.config.ts

### Assets

| Path | Used by |
|------|---------|
| src/assets/hero-bg.png | Hero.astro |
| src/assets/project-1.png | content/portfolio/project-1.md |
| src/assets/project-2.png | content/portfolio/project-2.md |
| src/assets/project-3.png | content/portfolio/project-3.md |
| public/favicon.svg | Layout.astro head |
| public/favicon.ico | Browser fallback |
| public/og-image.png | NOT INCLUDED — add for social sharing |

Images in src/assets/ are optimized by Astro's Image component at build time.

---

## Design Tokens (src/styles/global.css)

```
--bg-dark: #030303
--accent-emerald: hsl(150, 80%, 48%)    ← primary accent
--accent-purple: hsl(263, 85%, 65%)     ← secondary accent
--text-primary: #ffffff
--text-secondary: #a0a0a5
--text-muted: #646469
--font-heading: 'Outfit', sans-serif
--font-body: 'Plus Jakarta Sans', sans-serif
--container-max-width: 1400px
```

Fonts loaded via Google Fonts @import at top of global.css.

---

## Navigation Anchors

Homepage sections use hash anchors:
- /#hero → Hero
- /#services → Services
- /#portfolio → Portfolio (works)
- /#process → Process
- /#contact → Contact
- /blog → Blog index (separate page)

Nav links defined in Navbar.astro and Footer.astro.

---

## Contact Form Integration

File: src/components/Contact.astro (script block at bottom)
Current behavior: preventDefault → loading state → 1.5s setTimeout → success overlay.
No backend connected. Integrate Formspree, Netlify Forms, or custom fetch() in the submit handler.

Form fields: name, email, services (checkboxes from projectTypes array), message (textarea).

---

## Lenis Smooth Scroll

File: src/layouts/Layout.astro (script block at bottom)
Config: duration 1.2, wheelMultiplier 1.1, touchMultiplier 1.5.
Re-initializes on astro:page-load (view transitions).
Emits custom event: lenis-scroll (used by Process timeline).

---

## Removing Features

### Remove blog
1. Delete src/pages/blog/
2. Delete src/content/blog/
3. Remove blog collection from src/content.config.ts
4. Remove Blog links from Navbar.astro and Footer.astro

### Remove custom cursor
Remove <CustomCursor /> from src/layouts/Layout.astro

### Remove a homepage section
Remove import + component tag from src/pages/index.astro
Remove corresponding nav link from Navbar.astro and Footer.astro

---

## SEO & Structured Data

Default meta: src/layouts/Layout.astro props (title, description, ogImage).
Per-page overrides: pass props to <Layout> on any page.
Schema.org: ProfessionalService type in Layout.astro (name, founder, address, priceRange).
Sitemap: auto-generated by @astrojs/sitemap at /sitemap-index.xml on build.

---

## Deployment

Static output. Build: npm run build → dist/
Set astro.config.mjs site URL and public/robots.txt before deploy.
Compatible with Vercel, Netlify, Cloudflare Pages, GitHub Pages.

---

## Missing Pages (buyer must create or update links)

Footer links to /privacy-policy and /terms-of-service — pages not included.
Either create src/pages/privacy-policy.astro and src/pages/terms-of-service.astro,
or update hrefs in Footer.astro.

---

## Authorship

Theme Creator: Noel Dario Andres
License: MIT License (see LICENSE file)