El Meu Treball
CustomDes de €1.500
Nido Home — Lloc Web de Comerç Electrònic per a Articles de la Llar
Un lloc web de comerç electrònic modern i estètic dissenyat per a una marca d'articles per a la llar i decoració, amb un enfocament especial en la comoditat de compra, l'atractiu visual i la conversió.
El lloc presenta catàlegs de productes, novetats, els més venuts i ofertes promocionals mitjançant una estructura clara i organitzada. Disposa d'una navegació fluida per categories, barra de cerca interactiva, llista de desitjos, carret de la compra, suport multilingüe (EN / ES) i múltiples punts de contacte perquè els clients puguin trobar productes i fer comandes fàcilment.
A més, està equipat amb un panell d'administració personalitzat que inclou mètriques i analítiques (dashboard). Això permet al propietari del negoci gestionar de manera integral el catàleg de productes, comandes, bàners, seccions de la pàgina principal, menus de navegació, missatges, opinions de clients, configuracions de SEO i registres d'activitat sense necessitat de coneixements tècnics.
Característiques clau:
• Estil i disseny: Una interfície minimalista i acollidora en tons pastel que crea una atmosfera de confiança i harmonia. La paleta de colors, els bàners i la tipografia es poden personalitzar completament des del panell d'administració.
• Escalabilitat i flexibilitat: Ideal tant per a showrooms locals com per a grans botigues en línia. Permet afegir fàcilment noves categories de productes, configurar descomptes, assignar etiquetes promocionals (Best seller, Sale) i gestionar la seva visibilitat a la botiga.
• Gestió total del contingut: El seu principal avantatge és un panell d'administració intuïtiu i fàcil d'utilitzar, amb analítiques visuals de vendes, seguiment de l'estat de les comandes i informes de tràfic de visitants, cosa que permet gestionar tota la botiga sense necessitat de saber programar.
Tecnologies utilitzades:
Utilitza tecnologies d'avantguarda per garantir el màxim rendiment, velocitat de càrrega ràpida i alta seguretat a la vostra botiga en línia:
✔ Nuxt.js (Vue.js) — Proporciona una velocitat de càrrega de pàgines extremadament ràpida, transicions fluides i un posicionament SEO òptim (SSR), fonamental per atreure nous clients des dels motors de cerca.
✔ Laravel — Un framework de backend potent i robust que garanteix un processament estable de les comandes fins i tot amb un alt volum de tràfic, protegint les dades i gestionant les API.
✔ Tailwind CSS & SCSS — Eines de disseny modernes que asseguren un disseny adaptatiu impecable en qualsevol pantalla (mòbil, tauleta, PC) i faciliten la personalització de l'estil de marca.
✔ MySQL — Base de dades d'alt rendiment dissenyada per a l'emmagatzematge ràpid i el processament eficient de la informació sobre productes, categories, clients, comandes i historial de visites.
Pàgina Principal (Home Page)
La pàgina principal de Nido Home està dissenyada com una eina eficaç per presentar als usuaris el catàleg de productes, les ofertes promocionals i les meves categories clau. Combina una navegació fluida amb una cuidada estètica visual, impulsant l'interès del client des del primer segon.
Seccions clau i funcionalitat:
• Capçalera (Header) i Navegació:
– Inclou accés ràpid a contactes, selector d'idioma (EN / ES), barra de cerca interactiva de productes, icona de llista de desitjos (Wishlist) i carret de la compra.
– Un menú lateral desplegable de categories ("Shop all") permet als usuaris navegar ràpidament cap a grups de productes específics (jarrons, espelmes, tèxtils, il·luminació, etc.).
• Bàner promocional principal (Hero Banner Slider):
– Slider dinàmic amb bàners a pantalla completa, dissenyat per destacar col·leccions de temporada, rebaixes i ofertes especials (per exemple, fins a un 30% de descompte). Totalment gestionable des del panell d'administració.
• Els més venuts (Best sellers):
– Aparador amb els productes més populars de la marca. Les fitxes de producte inclouen distintius visuals ("Best seller", percentatge de descompte), botó per afegir a favorits i botó d'afegit ràpid al carret ("Add to cart").
• Novetats (New arrivals):
– Secció dedicada a presentar les últimes incorporacions al catàleg, permetent als clients habituals descobrir fàcilment les noves tendències i productes.
• En oferta (On sale):
– Bloc especialitzat per a productes amb descompte. Mostra el preu original ratllat, el nou preu promocional i el percentatge d'estalvi. Per als articles no disponibles, es mostra l'indicador "Out of stock".
• Peu de pàgina (Footer):
– Conté la informació de contacte completa (telèfon, correu electrònic, adreça, horari d'atenció), enllaços de navegació secundaris, llista de categories, accessos a xarxes socials i informació legal (política de cookies, drets d'autor).
Pàgina de Catàleg (Catalog / Shop Page)
La pàgina de catàleg està dissenyada per facilitar la cerca, filtrat i selecció de productes de tot l'assortiment de la botiga. Ofereix als compradors una interfície funcional equipada amb eines flexibles d'ordenació i navegació.
Seccions clau i funcionalitat:
• Miques de pa (Breadcrumbs):
– Permeten a l'usuari rastrejar fàcilment la seva ubicació actual al lloc web i tornar ràpidament als nivells anteriors del catàleg.
• Panell lateral de filtres (Sidebar Filters):
– Filtre per categories: navegació ràpida per subcategories (jarrons i testos, espelmes i aromes, tèxtils, decoració, il·luminació, vaixella, emmagatzematge).
– Filtre per preu: ajust còmode del rang de preus ("From / To") amb botó d'aplicació ("Apply").
• Barra d'ordenació i comptador de productes:
– Comptador "Products found" que mostra la quantitat exacta d'articles trobats (per exemple, 24).
– Menú desplegable d'ordenació ("Sort by: Featured", preu, novetats, etc.).
• Graella de productes (Product Grid):
– Fitxes de producte interactives amb imatges, títols, distintius ("Best seller", percentatge de descompte), preu original i rebaixat.
– Botó per afegir a favorits (icona de cor) i botó d'afegit ràpid al carret ("Add to cart").
• Paginació (Pagination):
– Navegació intuïtiva per pàgines al final de la graella per explorar còmodament catàlegs amplis.
Pàgina de Producte (Product Page)
La pàgina de producte està dissenyada per oferir la màxima claredat i conversió. Combina una presentació visual detallada, especificacions tècniques, descripcions completes i un sistema d'opinions verificades controlat des del panell d'administració.
Seccions clau i funcionalitat:
• Galeria visual (Product Media):
– Visor interactiu amb imatges d'alta qualitat des de diferents angles, la qual cosa permet apreciar detalladament els materials, textures i acabats del producte.
• Pestanyes de contingut (Content Tabs):
– Description (Descripció): Text detallat que destaca les característiques essencials i el valor estètic de l'article.
– Specifications (Especificacions): Taula clara amb paràmetres tècnics, dimensions, materials i detalls del producte.
– Reviews (Opinions): Secció de valoracions i experiències reals dels clients.
• Sistema d'opinions autenticat i moderació:
– La publicació d'opinions està reservada exclusivament a usuaris registrats, la qual cosa garanteix l'autenticitat de les valoracions i evita l'espam.
– Control total al panell d'administració: les opinions queden pendents de moderació ("Reviews awaiting moderation") fins que l'administrador les aprova, rebutja o respon oficialment.
Carret de la Compra (Shopping Cart Page)
La pàgina del carret garanteix un procés clar i còmode de revisió de la comanda abans de la compra. Permet al client gestionar fàcilment els articles seleccionats i, quan es confirma, la comanda s'envia de manera instantània al panell d'administració per ser processada.
Seccions clau i funcionalitat:
• Taula de productes seleccionats (Cart Items Table):
– Miniatura de la imatge, nom del producte, preu unitari, selector de quantitat ("– / +") i import total de la línia ("Amount").
– Opció per eliminar articles individuals (icona de creu) i funció de buidatge complet del carret ("Clear cart").
• Resum i inici de compra (Total Summary & Checkout):
– Càlcul automàtic de l'import total de la comanda ("Total: 108.30 USD").
– Botó principal d'acció "Checkout" per iniciar la tramitació i transferència de dades.
– Opció "Continue shopping" per tornar ràpidament al catàleg.
• Integració amb el panell d'administració:
– En completar la comanda, aquesta es transmet immediatament a la secció "Orders" del panell d'administració, assignant-li l'estat "New" i actualitzant les analítiques de vendes en temps real.
Pàgina de Contacte (Contact Us Page)
La pàgina de contacte ofereix un canal de comunicació directe i intuïtiu entre els clients i l'equip de la botiga. Inclou la informació de contacte oficial i un formulari interactiu amb missatges que s'envien directament al panell d'administració.
Seccions clau i funcionalitat:
• Dades de contacte (Our Details):
– Telèfon d'atenció al client ("+1 (555) 010-2030").
– Adreça física de la botiga o oficina ("123 Example Street, Your City").
– Correu electrònic oficial ("hello@nidohome.example").
– Horari d'atenció al públic ("Open Mon–Sun, 9:00–20:00").
• Formulari de contacte (Send Us a Message):
– Camps clars per al nom ("Your name *"), correu electrònic ("Your email *"), telèfon opcional ("Phone (optional)") i missatge ("Message *").
– Botó d'enviament ("Send message") per transmetre la sol·licitud.
• Integració amb el panell d'administració:
– Tots els missatges entrants es dirigeixen automàticament a la secció "Messages" del panell d'administració, permetent respondre ràpidament a les consultes dels clients.