Skip to main content

​
About Us Page

The About Us page (/nosotros) provides a comprehensive company profile with team member showcases, image gallery, embedded video tutorial, and a PQRS (Peticiones, Quejas, Reclamos y Sugerencias) contact form.

​
Overview

Access the About Us page at /nosotros featuring:

Team Showcase

Display team members with avatars, roles, and descriptions

Image Gallery

Visual gallery showcasing company images and work

Video Tutorial

Embedded video content for user education

PQRS Form

Contact form for requests, complaints, claims, and suggestions

​
Route Configuration

The About Us page is defined in routes/web.php: 
Route::get('/nosotros', fn() => view('nosotros'))->name('nosotros');
View file: resources/views/nosotros.blade.php

​
Page Layout

The About Us page extends the app layout with custom styling: 
@extends('layouts.app')

@section('title', 'Nosotros - Dashboard')
@section('nav_nosotros', 'active')
@section('side_nosotros', 'active')

@section('content')
    <!-- About Us content -->
@endsection

​
Hero Section

Features company information with decorative elements: 
<div class="hero-nosotros">
    <div class="hero-text">
        <h1>Acerca de <span>Nosotros</span></h1>
        <p>Conoce nuestro equipo, misión y visión empresarial</p>
        <div class="hero-badges">
            <span class="hero-badge">🚀 Innovación</span>
            <span class="hero-badge">💼 Profesionalismo</span>
            <span class="hero-badge">🤝 Compromiso</span>
        </div>
    </div>
</div>
The hero section uses the Soft UI design system with decorative circular backgrounds in yellow and pink.

​
Team Section

Displays team members with custom card styling: 
<div class="row mb-4">
    <div class="col-md-6 mb-3">
        <div class="team-card tc-yellow">
            <div class="team-avatar">SM</div>
            <h5 class="team-name">Sara Sofia Mora Trujillo</h5>
            <p class="team-role">Desarrollador Frontend</p>
            <p class="team-desc">
                Especialista en diseño UI/UX, Vistas Blade, CSS Soft UI y Bootstrap 5
            </p>
        </div>
    </div>
    <div class="col-md-6 mb-3">
        <div class="team-card tc-pink">
            <div class="team-avatar">JM</div>
            <h5 class="team-name">Jose Mauricio Cantuca Narvaez</h5>
            <p class="team-role">Desarrollador Backend</p>
            <p class="team-desc">
                Experto en Laravel, PHP, PostgreSQL, Rutas y Controladores
            </p>
        </div>
    </div>
</div>

​
Statistics Pills

Displays key metrics about the platform: 
<div class="row mb-4">
    <div class="col-md-3 mb-3">
        <div class="stat-pill">
            <div class="stat-pill-icon" style="background:rgba(232,212,77,0.2); color:#6a5800;">
                <i class="fas fa-users"></i>
            </div>
            <div>
                <div class="stat-pill-num">2,450</div>
                <div class="stat-pill-label">Usuarios Activos</div>
            </div>
        </div>
    </div>
    <!-- More stat pills... -->
</div>
Showcases company work with article-style cards:
1

Gallery Structure

Three-column responsive grid with image cards
2

Card Components

Each card includes:
  • Feature image (160px height, object-fit cover)
  • Color-coded tag (yellow/pink/green/blue)
  • Title and description
  • Metadata footer with date
3

Hover Effects

Cards transform vertically (-4px) and enhance shadow on hover

​
Embedded Video Tutorial

Video section with labeled iframe: 
<div class="row mb-4">
    <div class="col-12">
        <div class="video-wrapper">
            <div class="video-label">📺 Tutorial</div>
            <iframe 
                src="https://www.youtube.com/embed/VIDEO_ID" 
                allowfullscreen>
            </iframe>
        </div>
    </div>
</div>
The video uses a 16:9 aspect ratio with aspect-ratio CSS property for responsive sizing.

​
PQRS Contact Form

Comprehensive contact form for user inquiries:
Nombre (Name)
  • Text input, required field
  • User’s full name
Correo Electrónico (Email)
  • Email input, required field
  • Valid email format required
Tipo de Solicitud (Request Type)
  • Select dropdown with options:
    • Petición (Request)
    • Queja (Complaint)
    • Reclamo (Claim)
    • Sugerencia (Suggestion)
Mensaje (Message)
  • Textarea, required field
  • Minimum 10 characters
  • Detailed user message

​
Form Implementation

<form class="contact-form" method="POST" action="/pqrs">
    @csrf
    <div class="mb-3">
        <label for="nombre" class="form-label">Nombre</label>
        <input type="text" class="form-control" id="nombre" name="nombre" required>
    </div>
    
    <div class="mb-3">
        <label for="email" class="form-label">Correo Electrónico</label>
        <input type="email" class="form-control" id="email" name="email" required>
    </div>
    
    <div class="mb-3">
        <label for="tipo" class="form-label">Tipo de Solicitud</label>
        <select class="form-select" id="tipo" name="tipo" required>
            <option value="">Seleccionar...</option>
            <option value="peticion">Petición</option>
            <option value="queja">Queja</option>
            <option value="reclamo">Reclamo</option>
            <option value="sugerencia">Sugerencia</option>
        </select>
    </div>
    
    <div class="mb-3">
        <label for="mensaje" class="form-label">Mensaje</label>
        <textarea class="form-control" id="mensaje" name="mensaje" rows="5" required></textarea>
    </div>
    
    <button type="submit" class="btn btn-primary">Enviar</button>
</form>

​
Design System

The About Us page uses the Soft UI design system:

​
Colors

  • Hero background: #1a1a1a (dark)
  • Accent yellow: var(--card-yellow) from design system
  • Accent pink: var(--card-pink) from design system

​
Typography

  • Headings: DM Serif Display serif font
  • Body text: DM Sans sans-serif font
  • Font sizes range from 0.65rem (tags) to 2.4rem (hero title)

​
Component Styling

  • Border radius: 14px - 20px for cards and pills
  • Box shadows: 0 4px 20px rgba(0,0,0,0.07) for depth
  • Hover transforms: translateY(-4px) for interactivity

​
Nosotros Model

The page is associated with a minimal Eloquent model: 
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Nosotros extends Model
{
    //
}
The model uses default Eloquent behavior with timestamps. Currently has no custom fillable fields or relationships.

​
Usage Example

Accessing the About Us page:
Navigate to /nosotros from the sidebar menu or directly via URL

​
Key Features

Team Profiles

Professional team member showcases with roles and expertise

Visual Content

Image gallery and video tutorials for engagement

User Feedback

PQRS form for comprehensive user communication

Responsive Design

Fully responsive layout optimized for all devices

Configuration

Settings and preferences

Messages

View user messages and inquiries

Views

Learn about Blade template structure

Build docs developers (and LLMs) love

Get started for freeTalk to us