WOGO

Welkom bij de WOGO Website, een website gebouwd met SvelteKit en Contentful. WOGO biedt een dynamisch platform voor cocktailbars en sterke drank merken, met functies zoals, ticketverkoop voor cocktail walks en informatie over samenwerkingen.

Inhoud

Kenmerken

Preview

Live pagina

Gebruikersaanwijzing

Huisstijl

Bronnen

Installatie

Kenmerken

🖋 WOGO Huisstijl: De site is opgezet met de aangeleverde WOGO Huisstijl.

🏠 Homepagina: De gebruiker komt terecht op de homepage. Hier ziet je een overzicht van hoe WOGO werkt, wat WOGO doet en kan je ook de cocktail walks exploren. Ook zie je reviews van mensen die eerder een WOGO cocktail ervaring hebben gekocht.

🚶🏽‍♀️Route Pagina: Bij de Rotterdam Route pagina is meer detail te vinden over wat je eigenlijk koopt. Er is te lezen dat je 3 barren bezoekt, cocktails inclusief zijn en meer over de boeking.

🛠SvelteKit & Contentful: De website is gebouwd met SvelteKit en haalt de data dynamisch op via de Contentful API.

Preview

Live pagina

Bekijk de live pagina hier

Gebruikersaanwijzing

Navigeren door de pagina

Homepagina:

• De gebruiker begint op de homepagina, hier kan je naar beneden scrollen om de what we do en how it works te bekijken.

Navigatie:

• De gebruiker gaat via de navigatie naar de rotterdam tickets pagina.

Rotterdam tickets:

• Na dat er is geklikt op Rotterdam tickets ziet de gebruiker nu een banner over de rotterdam walks. Ook ziet de gebruiker kaarten met details over wat je precies krijgt.

Huisstijl

Wij hebben van WOGO kleuren en fonts gehad waar wij mee kunnen werken.

Dit gaat om de fonts Lulo Clean One en Brandon Grotesque.

Hoe wij deze gebruiken/ toepassen in het project is te lezen in onze wiki onder Conventies

Animaties

Zowel de homepage als rotterdam ticket page bevatten animaties. Bij de hero komt de tekst van links in beeld naar rechts. Voor de kaarten van How it Works (homepage) komen de kaarten tevoorschijn zodra je scrollt.

Bronnen

Hier vind je de bronnen van de tools die we hebben gebruikt.

Sveltekit - Voor het bouwen van de site

Svelte Docs - Over het dynamisch maken van de site

Vercel Docs - Voor het live zetten van de site

Contentful - Voor het ophalen van de data

Atomic Web Design - Werken met atoms, molecules, organisms

Installatie

Instructies voor het lokaal opzetten van de squadpage, zodat ontwikkelaars het project kunnen downloaden, installeren en zelf kunnen draaien met behulp van SvelteKit.

1. Vereisten

Zorg ervoor dat je de volgende software hebt geïnstalleerd:

• Node.js
• Packetmanager zoals npm of yarn

Ook heb je voor dit project een .env file nodig. Bekijk onze .env.example wat hier in komt te staan

2. git repository clonen

Je kunt op de main pagina de repo clonen en je eigen lokale versie opvragen.

3. SvelteKit en packets installeren

Om aan het project te werken, moet je eerst een nieuw SvelteKit-project opzetten. Dit kan eenvoudig gedaan worden met create-svelte.

Open je terminal. Voer npm install of yarn install uit om de juiste packets te installeren om aan het project te werken.

4. Deployen op vercel

Op vercel.com kun je verder op weg met het deployen van een svelteproject.