Capítulo 15 – Diseño de la portada – Curso Flutter y Laravel Tienda Delivery

Curso Flutter y Laravel Tienda Delivery

Capitulo 15 ➜ Diseño de la portada

¿Cómo diseñar la portada de una página para una tienda de delivery?

Para diseñar una portada bosquejamos que partes va a tener la página inicial distribuyendo el menú de navegación, el carrusel, los productos más vendidos.

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>AREQUIPA LOCAL | Tienda delivery de abarrotes en Arequipa</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="{{ asset('js/bootstrap.min.js') }}" defer></script>
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
    <link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">

</head>
<body>

        <nav class="navbar navbar-expand-md navbar-dark bg-primary shadow-sm">
            <div class="container">
                <a class="navbar-brand" href="{{ url('/') }}">
                    AREQUIPA <strong class="text-secondary">LOCAL</strong>
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                    </ul>
                    <ul class="navbar-nav mx-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="/">INICIO</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/">MENU 1</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/">MENU 2</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/">MENU 3</a>
                        </li>
                    </ul>
                    <ul class="navbar-nav ml-auto">
                        <!-- Authentication Links -->
                        @guest
                            <li class="nav-item">
                                <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                            </li>
                            @if (Route::has('register'))
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                                </li>
                            @endif
                        @else
                            <li class="nav-item dropdown">
                                <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                                    {{ Auth::user()->name }} <span class="caret"></span>
                                </a>

                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="{{ route('logout') }}"
                                       onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                        {{ __('Logout') }}
                                    </a>

                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                        @csrf
                                    </form>
                                </div>
                            </li>
                        @endguest
                    </ul>
                </div>
            </div>
        </nav>

@yield('content')
<div class="container-fluid text-center bg-warning pt-5 pb-5">
    <p>&copy; Todos los derechos reservados | arequipalocal.com | 2020</p>
</div>
    <style>
    .bg-primary{
        background: #340166 !important;
    }
    </style>
</body>
</html>

2865 visitas

« Capítulo 14 – Roles de usuario

Capítulo 16 – Menú de navegación dinámico »

{ Curso Flutter y Laravel Tienda Delivery }

Compartir link con tus amigos

Descarga el código del proyecto

Descarga el código fuente del proyecto adquiriendo el curso completo

Comprar

Indice

Planteamiento y herramientas

1 Introducción 2 Planteamiento 3 Herramientas y programas 4 Base de datos

BackEnd Administración

5 Instalación de Laravel 6 Módulo Usuarios 7 Módulo Categorías 8 Módulo Subcategorías 9 Módulo Productos 10 Módulo Pedidos 11 Módulo Detalle 12 Carrusel de imágenes 13 Blog para SEO 14 Roles de usuario

FrontEnd página web

15 Diseño de la portada 16 Menú de navegación dinámico 17 Carrusel de imágenes dinámico 18 Productos en la Portada 19 Arquitectura de urls en Laravel 20 Mostrar categorías y subcategorías 21 Mostrar Producto 22 Blog en Laravel 23 Integrar el Carrito de Compra 24 Procesar el Pedido 25 Historial del Pedido

Servicios web API Rest

26 Integrar Json Web Tokens 27 Autenticación con JWT 28 Enviar Productos en JSON 29 Recibir pedidos en Laravel

Desarrollo del aplicativo

30 Planteamiento de la app en Flutter 31 Creación del Proyecto Flutter 32 Estructura de Archivos 33 Implementación del Servicio Web (API) 34 Modelos Categoria, Subcategoria y Producto 35 Creación de la Base de Datos Sqflite 36 Métodos para gestionar la DB DbHelper 37 Modelo Carrito 38 Métodos para la gestión del Carrito 39 Implementación de la Pantalla Inicio 40 Implementación de la Pantalla Login 41 Implementación de la Pantalla Registro 42 Uso de la API para sincronizar la BD 43 Implementación Pantalla Categoria con Sqflite 44 Implementación de la pantalla Productos 45 Implementación Pantalla Producto 46 Logout de la App Delivery 47 Integrar ChangeNotifierProvider 48 Integrar Notificaciones en la AppBar 49 Botón Agregar al Carrito 50 Resumen Carrito de Compra 51 Envío del Pedido Delivery 52 Confirmación del Pedido Delivery

Bonus

53 SEO Onpage en Laravel 54 Maquetación FrontEnd 55 Diseño en Flutter