> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/Antony-Figueroa/my-evershop-app/llms.txt
> Use this file to discover all available pages before exploring further.

# Ana's Supplements Theme

> Complete theme reference for the Ana's Supplements e-commerce store

## Overview

Ana's Supplements is a custom EverShop theme designed for a health supplements store. It features a clean, modern design with a green/mint color scheme and Spanish language support.

<Note>
  This theme is located at `themes/anasuplements/` and is activated in `config/default.json`.
</Note>

## Brand Colors

The theme uses a consistent color palette throughout:

| Color      | Hex Code  | Usage                              |
| ---------- | --------- | ---------------------------------- |
| Primary    | `#2D5A3D` | Buttons, headings, accent elements |
| Background | `#F8FAF9` | Page backgrounds, cards            |
| Borders    | `#E8F5E9` | Card borders, dividers             |
| Text       | `#4A5568` | Body text, descriptions            |
| Hover      | `#1E3D2A` | Button hover states                |

### Color Usage Example

```tsx theme={null}
<button className="bg-[#2D5A3D] hover:bg-[#1E3D2A] text-white px-6 py-3 rounded-lg">
  Agregar al Carrito
</button>
```

## Theme Structure

```bash theme={null}
themes/anasuplements/
├── src/pages/
│   ├── all/              # Global components
│   │   ├── Header.tsx
│   │   └── Footer.tsx
│   ├── homepage/         # Homepage sections
│   │   ├── Hero.tsx
│   │   ├── Features.tsx
│   │   └── FeaturedProducts.tsx
│   └── account/          # Account pages
│       ├── Login.tsx
│       ├── Register.tsx
│       └── Dashboard.tsx
├── package.json
└── tsconfig.json
```

## Global Components

These components appear on every page.

### Header

The header provides navigation, cart, and account access.

**Location:** `src/pages/all/Header.tsx`

```tsx theme={null}
import React from 'react';

type HeaderProps = {
  storeName?: string;
  categories?: {
    name: string;
    url: string;
  }[];
};

export default function Header({ 
  storeName = "Ana's Suplements", 
  categories = [] 
}: HeaderProps) {
  return (
    <header className="bg-[#F8FAF9] border-b border-[#E8F5E9]">
      <div className="container mx-auto px-4 py-4">
        <div className="flex items-center justify-between">
          {/* Store name/logo */}
          <a href="/" className="text-2xl font-bold text-[#2D5A3D]">
            {storeName}
          </a>
          
          {/* Navigation */}
          <nav className="hidden md:flex space-x-6">
            {categories.map((category, index) => (
              <a 
                key={index} 
                href={category.url}
                className="text-[#4A5568] hover:text-[#2D5A3D] transition-colors"
              >
                {category.name}
              </a>
            ))}
          </nav>

          {/* Cart & Account icons */}
          <div className="flex items-center space-x-4">
            <a href="/cart" className="text-[#2D5A3D] hover:text-[#1E3D2A]">
              {/* Cart icon SVG */}
            </a>
            <a href="/account" className="text-[#2D5A3D] hover:text-[#1E3D2A]">
              {/* Account icon SVG */}
            </a>
          </div>
        </div>
      </div>
    </header>
  );
}

export const layout = {
  areaId: 'header',
  sortOrder: 1
};
```

**Features:**

* Responsive design with mobile menu support
* Dynamic category navigation
* Shopping cart and account access
* Branded color scheme

### Footer

Multi-column footer with links and newsletter signup.

**Location:** `src/pages/all/Footer.tsx`

**Key Sections:**

1. **About** - Store description
2. **Quick Links** - Catalog, Account, Cart
3. **Customer Service** - Contact, Shipping, Returns
4. **Newsletter** - Email subscription form

<Tip>
  The footer includes dynamic year using `new Date().getFullYear()` for automatic copyright updates.
</Tip>

## Homepage Components

### Hero Section

**Location:** `src/pages/homepage/Hero.tsx`\
**Sort Order:** 1 (renders first)

```tsx theme={null}
export default function Hero() {
  return (
    <section className="bg-[#F8FAF9] py-16">
      <div className="container mx-auto px-4">
        <div className="text-center">
          <h1 className="text-4xl md:text-5xl font-bold text-[#2D5A3D] mb-4">
            Bienvenido a Ana's Suplements
          </h1>
          <p className="text-lg text-[#4A5568] mb-8 max-w-2xl mx-auto">
            Los mejores suplementos para tu salud y bienestar. 
            Productos de calidad premium para cuidar de ti.
          </p>
          <div className="flex justify-center gap-4">
            <a 
              href="/catalog" 
              className="bg-[#2D5A3D] text-white px-8 py-3 rounded-lg hover:bg-[#1E3D2A] transition-colors font-semibold"
            >
              Ver Catálogo
            </a>
            <a 
              href="/contact" 
              className="border-2 border-[#2D5A3D] text-[#2D5A3D] px-8 py-3 rounded-lg hover:bg-[#2D5A3D] hover:text-white transition-colors font-semibold"
            >
              Contactar
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}
```

**Features:**

* Large, centered headline
* Descriptive subtitle
* Two call-to-action buttons (primary and secondary styles)
* Responsive text sizing (`text-4xl md:text-5xl`)

### Features Section

**Location:** `src/pages/homepage/Features.tsx`\
**Sort Order:** 5

Highlights four key benefits with icons:

1. **Calidad Garantizada** - Quality assurance
2. **Envío Rápido** - Fast shipping (24-48 hours)
3. **Asesoría Personalizada** - Expert advice
4. **Natural y Orgánico** - Natural ingredients

```tsx theme={null}
const features = [
  {
    icon: <svg>...</svg>,
    title: 'Calidad Garantizada',
    description: 'Todos nuestros productos cumplen con los más altos estándares de calidad'
  },
  // ... 3 more features
];

return (
  <section className="bg-[#E8F5E9] py-16">
    <div className="container mx-auto px-4">
      <h2 className="text-3xl font-bold text-center text-[#2D5A3D] mb-12">
        ¿Por Qué Elegirnos?
      </h2>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
        {features.map((feature, index) => (
          <div key={index} className="text-center">
            <div className="inline-flex items-center justify-center w-16 h-16 bg-[#2D5A3D] text-white rounded-full mb-4">
              {feature.icon}
            </div>
            <h3 className="font-semibold text-[#2D5A3D] mb-2">{feature.title}</h3>
            <p className="text-[#4A5568] text-sm">{feature.description}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);
```

**Features:**

* Responsive grid (1 column → 2 → 4)
* Circular icon containers
* Light green background (`#E8F5E9`)

### Featured Products

**Location:** `src/pages/homepage/FeaturedProducts.tsx`\
**Sort Order:** 10

Displays a grid of featured products with custom `ProductCard` component.

```tsx theme={null}
type ProductCardProps = {
  product: {
    id: string;
    name: string;
    price: number;
    image?: string;
    url?: string;
  };
};

function ProductCard({ product }: ProductCardProps) {
  return (
    <div className="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow border border-[#E8F5E9] overflow-hidden">
      <div className="aspect-square bg-[#F8FAF9] flex items-center justify-center">
        {product.image ? (
          <img src={product.image} alt={product.name} className="w-full h-full object-cover" />
        ) : (
          <svg className="w-16 h-16 text-[#A0C4B0]">{/* Placeholder icon */}</svg>
        )}
      </div>
      <div className="p-4">
        <h3 className="font-semibold text-[#2D5A3D] mb-2 line-clamp-2">
          {product.name}
        </h3>
        <div className="flex items-center justify-between">
          <span className="text-lg font-bold text-[#2D5A3D]">
            ${product.price?.toFixed(2)}
          </span>
          <button className="bg-[#2D5A3D] text-white px-4 py-2 rounded text-sm hover:bg-[#1E3D2A] transition-colors">
            Agregar
          </button>
        </div>
      </div>
    </div>
  );
}
```

**Sample Products:**

```tsx theme={null}
const products = [
  { id: '1', name: 'Vitamina D3', price: 15.99 },
  { id: '2', name: 'Omega-3', price: 24.99 },
  { id: '3', name: 'Proteína Whey', price: 45.99 },
  { id: '4', name: 'Magnesio', price: 18.99 },
];
```

<Note>
  The product list is currently static for demonstration. In production, this would fetch real products via GraphQL.
</Note>

## Account Pages

### Login Form

**Location:** `src/pages/account/Login.tsx`

```tsx theme={null}
export default function LoginForm() {
  return (
    <div className="max-w-md mx-auto px-4 py-8">
      <div className="bg-white border border-[#E8F5E9] rounded-lg p-8">
        <h1 className="text-2xl font-bold text-[#2D5A3D] text-center mb-6">
          Iniciar Sesión
        </h1>
        
        <form method="POST" action="/customer/login" className="space-y-4">
          <div>
            <label htmlFor="email" className="block text-sm font-medium text-[#4A5568] mb-1">
              Correo Electrónico
            </label>
            <input
              type="email"
              id="email"
              name="email"
              required
              className="w-full px-4 py-2 border border-[#E8F5E9] rounded-lg focus:outline-none focus:border-[#2D5A3D]"
              placeholder="tu@email.com"
            />
          </div>
          
          <div>
            <label htmlFor="password" className="block text-sm font-medium text-[#4A5568] mb-1">
              Contraseña
            </label>
            <input
              type="password"
              id="password"
              name="password"
              required
              className="w-full px-4 py-2 border border-[#E8F5E9] rounded-lg focus:outline-none focus:border-[#2D5A3D]"
              placeholder="••••••••"
            />
          </div>
          
          <button
            type="submit"
            className="w-full bg-[#2D5A3D] text-white py-3 rounded-lg hover:bg-[#1E3D2A] transition-colors font-medium"
          >
            Iniciar Sesión
          </button>
        </form>
        
        <div className="mt-6 text-center">
          <p className="text-[#4A5568]">
            ¿No tienes cuenta?{' '}
            <a href="/register" className="text-[#2D5A3D] hover:text-[#1E3D2A] font-medium">
              Regístrate aquí
            </a>
          </p>
        </div>
      </div>
    </div>
  );
}
```

**Features:**

* Email and password fields
* "Remember me" checkbox
* Forgot password link
* Link to registration page

### Registration Form

**Location:** `src/pages/account/Register.tsx`

**Form Fields:**

* First name and last name (side by side)
* Email address
* Password (minimum 8 characters)
* Password confirmation
* Newsletter opt-in checkbox
* Terms & conditions acceptance (required)

```tsx theme={null}
<div className="grid grid-cols-2 gap-4">
  <div>
    <label htmlFor="firstName" className="block text-sm font-medium text-[#4A5568] mb-1">
      Nombre
    </label>
    <input
      type="text"
      id="firstName"
      name="firstName"
      required
      className="w-full px-4 py-2 border border-[#E8F5E9] rounded-lg focus:outline-none focus:border-[#2D5A3D]"
    />
  </div>
  <div>
    <label htmlFor="lastName" className="block text-sm font-medium text-[#4A5568] mb-1">
      Apellido
    </label>
    <input
      type="text"
      id="lastName"
      name="lastName"
      required
      className="w-full px-4 py-2 border border-[#E8F5E9] rounded-lg focus:outline-none focus:border-[#2D5A3D]"
    />
  </div>
</div>
```

### Account Dashboard

**Location:** `src/pages/account/Dashboard.tsx`

The dashboard displays user information and recent orders using GraphQL data.

```tsx theme={null}
type AccountDashboardProps = {
  customer: {
    firstName?: string;
    lastName?: string;
    email?: string;
  };
  orders?: {
    orderId: string;
    createdAt: string;
    total: number;
    status: string;
  }[];
};

export default function AccountDashboard({ customer, orders = [] }: AccountDashboardProps) {
  const firstName = customer?.firstName || 'Cliente';
  
  return (
    <div className="max-w-6xl mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold text-[#2D5A3D] mb-2">
        Bienvenido, {firstName}
      </h1>
      {/* Dashboard content */}
    </div>
  );
}
```

**GraphQL Query:**

```graphql theme={null}
export const query = `
  query Query {
    customer {
      firstName
      lastName
      email
    }
    orders(limit: 5) {
      orderId
      createdAt
      total
      status
    }
  }
`;
```

**Dashboard Sections:**

1. **Quick Actions** (3-column grid)
   * Mis Pedidos - View all orders
   * Mis Direcciones - Manage shipping addresses
   * Mi Perfil - Update account information

2. **Recent Orders**
   * Last 3 orders displayed
   * Order number, date, total, and status
   * Status badges (delivered, processing, pending)
   * Link to view all orders

<Tip>
  Order status is displayed with color-coded badges for visual clarity:

  * Green for "Entregado" (delivered)
  * Yellow for "Procesando" (processing)
  * Gray for "Pendiente" (pending)
</Tip>

## Styling Patterns

### Buttons

The theme uses two button styles:

```tsx theme={null}
{/* Primary Button */}
<button className="bg-[#2D5A3D] text-white px-8 py-3 rounded-lg hover:bg-[#1E3D2A] transition-colors font-semibold">
  Primary Action
</button>

{/* Secondary Button */}
<button className="border-2 border-[#2D5A3D] text-[#2D5A3D] px-8 py-3 rounded-lg hover:bg-[#2D5A3D] hover:text-white transition-colors font-semibold">
  Secondary Action
</button>
```

### Cards

```tsx theme={null}
<div className="bg-white border border-[#E8F5E9] rounded-lg p-6 hover:shadow-md transition-shadow">
  {/* Card content */}
</div>
```

### Form Inputs

```tsx theme={null}
<input 
  className="w-full px-4 py-2 border border-[#E8F5E9] rounded-lg focus:outline-none focus:border-[#2D5A3D]"
  type="text"
/>
```

### Responsive Grids

```tsx theme={null}
{/* 1 column on mobile, 2 on tablet, 4 on desktop */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
  {/* Grid items */}
</div>
```

## Configuration

### Activate Theme

In `config/default.json`:

```json theme={null}
{
  "system": {
    "theme": "anasuplements"
  }
}
```

### Language Support

All text content is in Spanish:

```json theme={null}
{
  "shop": {
    "language": "es",
    "currency": "USD"
  }
}
```

## Development

### Build Theme

```bash theme={null}
npm run build
```

This compiles TypeScript files from `src/` to `dist/`.

### Development Mode

```bash theme={null}
npm run dev
```

Enables hot-reload for rapid iteration.

### File Locations

| Component Type    | Path Pattern          | Example                  |
| ----------------- | --------------------- | ------------------------ |
| Global components | `src/pages/all/`      | Header.tsx, Footer.tsx   |
| Homepage sections | `src/pages/homepage/` | Hero.tsx, Features.tsx   |
| Account pages     | `src/pages/account/`  | Login.tsx, Dashboard.tsx |
| Product pages     | `src/pages/catalog/`  | ProductList.tsx          |

## Customization Guide

### Change Brand Colors

Replace hex codes throughout the theme:

```tsx theme={null}
// Old
<div className="bg-[#2D5A3D]">

// New
<div className="bg-[#YOUR_COLOR]">
```

### Add New Homepage Section

1. Create component file:
   ```bash theme={null}
   themes/anasuplements/src/pages/homepage/Testimonials.tsx
   ```

2. Implement component:
   ```tsx theme={null}
   export default function Testimonials() {
     return <section>{/* Content */}</section>;
   }

   export const layout = {
     areaId: 'content',
     sortOrder: 15  // After FeaturedProducts (10)
   };
   ```

3. Rebuild theme:
   ```bash theme={null}
   npm run build
   ```

### Modify Header Navigation

Pass categories data to the Header component via props or GraphQL query.

<Card title="Best Practice" icon="check">
  Keep theme components purely presentational. Fetch data using GraphQL queries and pass it as props.
</Card>

## Next Steps

<CardGroup cols={2}>
  <Card title="Theme Overview" icon="book" href="/themes/overview">
    Learn theme fundamentals
  </Card>

  <Card title="Tailwind Styling" icon="paintbrush" href="/themes/anasuplements">
    Master utility-first CSS
  </Card>

  <Card title="GraphQL Queries" icon="database" href="/api/graphql/queries">
    Fetch data in components
  </Card>

  <Card title="Extensions" icon="plug" href="/extensions/overview">
    Add business logic
  </Card>
</CardGroup>