Skip to main content
Macuin organizes its views following Laravel conventions, with Blade templates stored in resources/views/ and organized by feature area. All views extend the main application layout for consistent structure.

​
View Directory Structure

The application organizes views into the following directories: 
resources/views/
├── auth/              # Authentication views
│   ├── login.blade.php
│   └── registro.blade.php
├── carrito/           # Shopping cart views
│   └── carrito.blade.php
├── catalogos/         # Product catalog views
│   └── catalogo.blade.php
├── components/        # Blade component templates
│   ├── alert.blade.php
│   ├── footer.blade.php
│   ├── navbar.blade.php
│   └── product-card.blade.php
├── home/              # Homepage views
│   └── index.blade.php
├── layouts/           # Master layouts
│   └── app.blade.php
└── pedidos/           # Order management views
    ├── pedido.blade.php
    └── pedido-detalle.blade.php

​
Main Views

Home

Landing page with featured products and categories

Catalog

Browse and search automotive parts

Cart

Review and manage cart items

Orders

View order history and details

Authentication

Login and registration forms

​
Home View

Location: resources/views/home/index.blade.php The homepage is the main landing page featuring:
  • Hero Section: Main call-to-action with statistics
  • Categories Grid: Browse by product category
  • Featured Products: Highlighted automotive parts
  • Benefits Section: Key selling points
  • CTA Section: Registration prompt

​
View Structure

@extends('layouts.app')

@section('content')
<div class="home-page">
    <!-- Hero Section -->
    <section class="hero">
        <div class="hero-content">
            <span class="hero-badge">
                <i class="fas fa-truck"></i> Envío gratis en compras mayores a $1,000
            </span>
            <h1 class="hero-title">Autopartes de calidad<br>para tu vehículo</h1>
            <p class="hero-subtitle">Encuentra todo lo que necesitas para mantener tu auto en perfectas condiciones.</p>
            <div class="hero-buttons">
                <a href="{{ route('catalogo') }}" class="btn-primary">
                    <i class="fas fa-search"></i> Explorar Catálogo
                </a>
                <a href="{{ route('registro') }}" class="btn-secondary">
                    Crear Cuenta
                </a>
            </div>
        </div>
    </section>
    
    <!-- Additional sections... -->
</div>
@endsection

​
Hero Statistics

The hero section displays key metrics (resources/views/home/index.blade.php:36-49): 
<div class="hero-stats">
    <div class="stat-item">
        <span class="stat-number">5,000+</span>
        <span class="stat-label">Productos</span>
    </div>
    <div class="stat-item">
        <span class="stat-number">10,000+</span>
        <span class="stat-label">Clientes</span>
    </div>
    <div class="stat-item">
        <span class="stat-number">24h</span>
        <span class="stat-label">Entrega</span>
    </div>
</div>

​
Product Categories

The homepage displays six main product categories (resources/views/home/index.blade.php:67-118):
  • Filtros: 120 products
  • Frenos: 85 products
  • Eléctrico: 200 products
  • Lubricantes: 45 products
  • Suspensión: 90 products
  • Encendido: 65 products

​
Catalog View

Location: resources/views/catalogos/catalogo.blade.php The catalog view displays all available automotive parts with search functionality.

​
View Implementation

@extends('layouts.app')

@section('content')
<main class="main-content">
    <div class="container">
        <h1 class="page-title">Catálogo de Autopartes</h1>
        
        <!-- Search Bar -->
        <div class="search-container">
            <i class="fas fa-search search-icon"></i>
            <input type="text" class="search-input" placeholder="Buscar autopartes...">
        </div>

        <!-- Products Grid -->
        <div class="products-grid">
            <!-- Product cards... -->
        </div>
    </div>
</main>
@endsection

​
Product Card Example

Each product in the catalog uses this structure (resources/views/catalogos/catalogo.blade.php:36-51): 
<div class="product-card">
    <div class="product-image">
        <i class="fas fa-cube"></i>
    </div>
    <div class="product-info">
        <span class="product-category">Filtros</span>
        <h3 class="product-name">Filtro de Aceite</h3>
        <div class="product-footer">
            <span class="product-price">$15</span>
            <span class="product-stock available">
                <i class="fas fa-check-circle"></i> 45 disponibles
            </span>
        </div>
        <button class="btn-add-cart">Agregar al Carrito</button>
    </div>
</div>

​
Stock Status Display

Products with available inventory:
<span class="product-stock available">
    <i class="fas fa-check-circle"></i> 45 disponibles
</span>
<button class="btn-add-cart">Agregar al Carrito</button>

​
Cart View

Location: resources/views/carrito/carrito.blade.php The cart view allows customers to review items before creating an order.

​
View Structure

@extends('layouts.app')
@section('content')
<div class="cart-page">
    <main class="main-content">
        <div class="container">
            <div class="page-header">
                <h1 class="page-title">Crear Pedido</h1>
                <p class="page-subtitle">Revisa y confirma tu pedido</p>
            </div>

            <div class="cart-layout">
                <!-- Cart Items -->
                <div class="cart-items-section">
                    <!-- Cart items here -->
                </div>

                <!-- Order Summary -->
                <div class="cart-summary-section">
                    <!-- Summary here -->
                </div>
            </div>
        </div>
    </main>
</div>
@endsection

​
Cart Item Structure

Each cart item includes quantity controls (resources/views/carrito/carrito.blade.php:37-55): 
<div class="cart-item">
    <div class="cart-item-info">
        <h3 class="cart-item-name">Filtro de Aceite</h3>
        <span class="cart-item-price">$15</span>
    </div>
    <div class="cart-item-controls">
        <button class="qty-btn minus">
            <i class="fas fa-minus"></i>
        </button>
        <span class="qty-value">2</span>
        <button class="qty-btn plus">
            <i class="fas fa-plus"></i>
        </button>
        <span class="cart-item-total">$30</span>
        <button class="btn-remove">
            <i class="fas fa-trash-alt"></i>
        </button>
    </div>
</div>

​
Order Summary

The summary displays pricing breakdown (resources/views/carrito/carrito.blade.php:79-98): 
<div class="cart-summary-card">
    <h3 class="summary-title">Resumen del Pedido</h3>
    <div class="summary-rows">
        <div class="summary-row">
            <span class="summary-label">Subtotal</span>
            <span class="summary-value">$1,190</span>
        </div>
        <div class="summary-row">
            <span class="summary-label">IVA (16%)</span>
            <span class="summary-value">$190.40</span>
        </div>
        <div class="summary-row total">
            <span class="summary-label">Total</span>
            <span class="summary-value total-price">$1,380.40</span>
        </div>
    </div>
    <button class="btn-confirm-order">Confirmar Pedido</button>
</div>

​
Orders View

Location: resources/views/pedidos/ The orders section includes two views:
  • pedido.blade.php: Order listing page
  • pedido-detalle.blade.php: Individual order details

​
Order Detail Route

The order detail view receives an order ID parameter (routes/web.php:29-31): 
Route::get('/pedido-detalle/{id}', function ($id) {
    return view('pedidos.pedido-detalle', ['id' => $id]);
})->name('pedido-detalle');

​
Authentication Views

Location: resources/views/auth/

​
Login View

Location: resources/views/auth/login.blade.php 
@extends('layouts.app')

@section('content')
<div class="auth-page">
    <div class="auth-container">
        <div class="auth-card">
            <div class="auth-header">
                <h1 class="auth-logo">MACUIN</h1>
                <h2 class="auth-title">Iniciar Sesión</h2>
                <p class="auth-subtitle">Portal de Clientes</p>
            </div>

            <form class="auth-form">
                <div class="form-group">
                    <label class="form-label">Correo Electrónico</label>
                    <div class="input-wrapper">
                        <i class="fas fa-envelope input-icon"></i>
                        <input type="email" class="form-input" placeholder="[email protected]">
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">Contraseña</label>
                    <div class="input-wrapper">
                        <i class="fas fa-lock input-icon"></i>
                        <input type="password" class="form-input" placeholder="********">
                    </div>
                </div>

                <button type="submit" class="btn-auth">Iniciar Sesión</button>
            </form>
        </div>
    </div>
</div>
@endsection

​
Registration View

Location: resources/views/auth/registro.blade.php Similar structure to the login view, used for new customer registration.

​
View Routes

All views are mapped to routes in routes/web.php: 
// Homepage
Route::get('/', function () {
    return view('home.index');
})->name('index');

// Catalog
Route::get('/catalogo', function () {
    return view('catalogos.catalogo');
})->name('catalogo');

// Authentication
Route::get('/login', function () {
    return view('auth.login');
})->name('login');

Route::get('/registro', function () {
    return view('auth.registro');
})->name('registro');

// Cart
Route::get('/carrito', function () {
    return view('carrito.carrito');
})->name('carrito');

// Orders
Route::get('/pedidos', function () {
    return view('pedidos.pedido');
})->name('pedidos');

Route::get('/pedido-detalle/{id}', function ($id) {
    return view('pedidos.pedido-detalle', ['id' => $id]);
})->name('pedido-detalle');

​
Data Passing

​
Route Parameters

Views can receive data through route parameters: 
Route::get('/pedido-detalle/{id}', function ($id) {
    return view('pedidos.pedido-detalle', ['id' => $id]);
})->name('pedido-detalle');

​
View Data

Data is passed to views using arrays: 
return view('view.name', [
    'key' => 'value',
    'data' => $data
]);

​
Named Routes

All views use named routes for navigation: 
<a href="{{ route('catalogo') }}">Ver Catálogo</a>
<a href="{{ route('carrito') }}">Mi Carrito</a>
<a href="{{ route('pedido-detalle', ['id' => 123]) }}">Ver Pedido</a>

​
View Hierarchy

All main views follow this inheritance pattern:
  1. Base Layout (layouts/app.blade.php): Defines HTML structure, includes navbar and footer
  2. Feature Views: Extend the base layout and define the content section
  3. Partial Views: Reusable sections included within feature views
<!-- layouts/app.blade.php -->
<body>
    <x-navbar />
    @yield('content')
    <x-footer />
</body>

<!-- home/index.blade.php -->
@extends('layouts.app')
@section('content')
    <!-- Page-specific content -->
@endsection

​
Best Practices

Use Layouts

Always extend the base layout for consistent structure

Named Routes

Use route names instead of hardcoded URLs

Organize by Feature

Group related views in feature directories

Blade Components

Extract reusable UI elements into components

Build docs developers (and LLMs) love

Get started for freeTalk to us