filipe/website-casa-cidalisa
1
Fork 0
Code Issues Pull requests Activity

fix map and add notice

Browse source
This commit is contained in:
Filipe Medeiros 2025-02-01 17:01:31 +01:00
parent 3f32f44e36
commit 41ddecbb44
Signed by: filipe
GPG key ID: 9533BD5467CC1E78
6 changed files with 54 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
bun.lockb
View file

Binary file not shown.

2
package.json
View file

@ -13,6 +13,6 @@
"dependencies": {
"@tailwindcss/vite": "^4.0.3",
"astro": "^5.2.3",
"tailwindcss": "^3"
"tailwindcss": "^4.0.3"
}
}

35
src/pages/en/index.astro
View file

@ -52,7 +52,7 @@ const logoImage = await getImage({ src: Logo });
<nav
class="flex justify-center sm:justify-center max-sm:bg-green p-5 sticky sm:absolute sm:w-full top-0 z-10 before:flex-1 before:content-['']"
>
<Image src={Logo} alt="TODO" class="sr-only" />
<Image src={Logo} alt="Casa Cidalisa's logo" class="sr-only" />
<div
class="h-12 sm:h-20 w-[8.4rem] sm:w-56 bg-seasalt sm:bg-sunglow"
style={{
@ -65,7 +65,7 @@ const logoImage = await getImage({ src: Logo });
<div class="flex-1 flex justify-end items-center">
<a
href="/"
class="p-1.5 text-sm leading-none text-delftBlue bg-olivine rounded hover:brightness-90 transition"
class="p-1.5 text-sm leading-none text-delftBlue bg-olivine rounded-sm hover:brightness-90 transition"
>
PT
</a>
@ -92,7 +92,7 @@ const logoImage = await getImage({ src: Logo });
href="https://airbnb.com/h/casacidalisa"
target="_blank"
rel="noreferrer noopener"
class="bg-[#ff385c] flex-1 text-center shadow flex items-center justify-center hover:bg-[#ff0a37] cursor-pointer px-3 py-2 rounded-xl transition-colors"
class="bg-[#ff385c] flex-1 text-center shadow-sm flex items-center justify-center hover:bg-[#ff0a37] cursor-pointer px-3 py-2 rounded-xl transition-colors"
>
<Image
src={LogoAirbnb}
@ -105,7 +105,7 @@ const logoImage = await getImage({ src: Logo });
href="https://www.booking.com/hotel/pt/casa-cidalisa-povoacao"
target="_blank"
rel="noreferrer noopener"
class="bg-[#003580] flex-1 flex items-center justify-center text-center shadow hover:bg-[#001580] cursor-pointer px-3 py-4 rounded-xl transition-colors"
class="bg-[#003580] flex-1 flex items-center justify-center text-center shadow-sm hover:bg-[#001580] cursor-pointer px-3 py-4 rounded-xl transition-colors"
>
<Image
src={LogoBooking}
@ -160,7 +160,7 @@ const logoImage = await getImage({ src: Logo });
class="py-8 sm:py-20 max-sm:*:ms-5 max-sm:*:me-16 max-sm:*:max-w-prose [&>h2]:text-2xl max-sm:[&>img]:w-[95%] max-sm:[&>img]:mx-auto [&_b]:font-medium sm:grid sm:grid-cols-2 sm:grid-rows-[content_2fr_1fr_1fr_2fr] sm:gap-8 lg:gap-20"
>
<h2
class="!max-w-full !me-0 max-xs:!text-xl max-sm:mb-7 sm:col-span-2 sm:ps-10 lg:ps-28 sm:!text-3xl"
class="max-w-full! me-0! max-xs:text-xl! max-sm:mb-7 sm:col-span-2 sm:ps-10 lg:ps-28 sm:text-3xl!"
>
Welcome to <span class="font-cinzel">Casa Cidalisa</span>
</h2>
@ -176,7 +176,7 @@ const logoImage = await getImage({ src: Logo });
<Image
src={Photo1}
alt="TODO"
class="rounded max-sm:my-7 sm:row-start-2 sm:row-span-2 sm:col-start-2 sm:w-full"
class="rounded-sm max-sm:my-7 sm:row-start-2 sm:row-span-2 sm:col-start-2 sm:w-full"
/>
<p class="sm:col-start-2 sm:row-start-4 sm:pr-5">
@ -188,13 +188,13 @@ const logoImage = await getImage({ src: Logo });
<Image
src={Photo2}
alt="TODO"
class="rounded max-sm:mt-7 max-sm:mb-2 sm:row-start-3 sm:row-span-2 sm:self-end sm:ps-5 lg:ps-10"
class="rounded-sm max-sm:mt-7 max-sm:mb-2 sm:row-start-3 sm:row-span-2 sm:self-end sm:ps-5 lg:ps-10"
/>
<Image
src={Photo3}
alt="TODO"
class="rounded max-sm:mb-7 sm:col-start-2 sm:row-start-5 sm:pe-10 lg:pe-20"
class="rounded-sm max-sm:mb-7 sm:col-start-2 sm:row-start-5 sm:pe-10 lg:pe-20"
/>
<div class="sm:row-start-5 sm:self-end sm:ps-10 lg:pl-28">
@ -252,13 +252,14 @@ const logoImage = await getImage({ src: Logo });
href="https://www.google.no/maps/place/Casa+Cidalisa/@37.760956,-25.1577077,38167m/data=!3m1!1e3!4m6!3m5!1s0xb5d1d561969d301:0x186fe1b893d26dcf!8m2!3d37.7609663!4d-25.1570757!16s%2Fg%2F11lnrchxn2?entry=ttu&g_ep=EgoyMDI0MDkxOC4xIKXMDSoASAFQAw%3D%3D"
target="_blank"
rel="noreferrer noopener"
class="w-[95%] max-w-xl mx-auto block"
>
<figure>
<Image
src={Map}
alt="TODO"
alt="Mapa da ilha de São Miguel, com um marcador vermelho na Casa Cidalisa, no canto sudeste da ilha."
height={500}
class="w-[95%] max-w-xl mx-auto rounded inline"
class="rounded-sm"
/>
<figcaption class="mt-2">
Click on the image to open your map app.
@ -277,12 +278,12 @@ const logoImage = await getImage({ src: Logo });
(Helena)
</span>
</div>
<div class="flex gap-5 mb-3">
<div class="flex gap-5 mb-5 sm:mb-3">
<a
href="https://airbnb.com/h/casacidalisa"
target="_blank"
rel="noreferrer noopener"
class="bg-[#ff385c] flex-1 text-center shadow flex items-center justify-center hover:bg-[#ff0a37] cursor-pointer px-3 sm:px-8 py-2 rounded-xl transition-colors"
class="bg-[#ff385c] flex-1 text-center shadow-sm flex items-center justify-center hover:bg-[#ff0a37] cursor-pointer px-3 sm:px-8 py-2 rounded-xl transition-colors"
>
<Image
src={LogoAirbnb}
@ -295,7 +296,7 @@ const logoImage = await getImage({ src: Logo });
href="https://www.booking.com/hotel/pt/casa-cidalisa-povoacao"
target="_blank"
rel="noreferrer noopener"
class="bg-[#003580] flex-1 flex items-center justify-center text-center shadow hover:bg-[#001580] cursor-pointer px-3 sm:px-8 py-4 rounded-xl transition-colors"
class="bg-[#003580] flex-1 flex items-center justify-center text-center shadow-sm hover:bg-[#001580] cursor-pointer px-3 sm:px-8 py-4 rounded-xl transition-colors"
>
<Image
src={LogoBooking}
@ -306,10 +307,7 @@ const logoImage = await getImage({ src: Logo });
</a>
</div>
</div>
<p class="text-xs text-center">
Copyright © 2024 casa-cidalisa.com - All rights reserved.
</p>
<div class="flex justify-center gap-10 mt-3 text-sm">
<div class="flex justify-center gap-10 text-sm">
<a
href="https://www.livroreclamacoes.pt"
target="_blank"
@ -327,6 +325,9 @@ const logoImage = await getImage({ src: Logo });
Privacy notice
</a>
</div>
<p class="text-xs text-center mt-3">
Copyright © 2024 casa-cidalisa.com - All rights reserved.
</p>
</footer>
</main>

39
src/pages/index.astro
View file

@ -52,7 +52,7 @@ const logoImage = await getImage({ src: Logo });
<nav
class="flex justify-center sm:justify-center max-sm:bg-green p-5 sticky sm:absolute sm:w-full top-0 z-10 before:flex-1 before:content-['']"
>
<Image src={Logo} alt="TODO" class="sr-only" />
<Image src={Logo} alt="Logo da Casa Cidalisa" class="sr-only" />
<div
class="h-12 sm:h-20 w-[8.4rem] sm:w-56 bg-seasalt sm:bg-sunglow"
style={{
@ -65,7 +65,7 @@ const logoImage = await getImage({ src: Logo });
<div class="flex-1 flex justify-end items-center">
<a
href="/en"
class="p-1.5 text-sm leading-none text-delftBlue bg-olivine rounded hover:brightness-90 transition"
class="p-1.5 text-sm leading-none text-delftBlue bg-olivine rounded-sm hover:brightness-90 transition"
>
EN
</a>
@ -92,7 +92,7 @@ const logoImage = await getImage({ src: Logo });
href="https://airbnb.com/h/casacidalisa"
target="_blank"
rel="noreferrer noopener"
class="bg-[#ff385c] flex-1 text-center shadow flex items-center justify-center hover:bg-[#ff0a37] cursor-pointer px-3 py-2 rounded-xl transition-colors"
class="bg-[#ff385c] flex-1 text-center shadow-sm flex items-center justify-center hover:bg-[#ff0a37] cursor-pointer px-3 py-2 rounded-xl transition-colors"
>
<Image
src={LogoAirbnb}
@ -105,7 +105,7 @@ const logoImage = await getImage({ src: Logo });
href="https://www.booking.com/hotel/pt/casa-cidalisa-povoacao"
target="_blank"
rel="noreferrer noopener"
class="bg-[#003580] flex-1 flex items-center justify-center text-center shadow hover:bg-[#001580] cursor-pointer px-3 py-4 rounded-xl transition-colors"
class="bg-[#003580] flex-1 flex items-center justify-center text-center shadow-sm hover:bg-[#001580] cursor-pointer px-3 py-4 rounded-xl transition-colors"
>
<Image
src={LogoBooking}
@ -131,7 +131,7 @@ const logoImage = await getImage({ src: Logo });
>
<Image
src={IconFacebook}
alt="TODO"
alt="Logo do Facebook"
class="h-8 w-auto hover:brightness-75 transition"
/>
</a>
@ -144,7 +144,7 @@ const logoImage = await getImage({ src: Logo });
>
<Image
src={IconInstagram}
alt="TODO"
alt="Logo do Instagram"
class="h-8 w-auto hover:brightness-75 transition"
/>
</a>
@ -160,7 +160,7 @@ const logoImage = await getImage({ src: Logo });
class="py-8 sm:py-20 max-sm:*:ms-5 max-sm:*:me-16 max-sm:*:max-w-prose [&>h2]:text-2xl max-sm:[&>img]:w-[95%] max-sm:[&>img]:mx-auto [&_b]:font-medium sm:grid sm:grid-cols-2 sm:grid-rows-[content_2fr_1fr_1fr_2fr] sm:gap-8 lg:gap-20"
>
<h2
class="!max-w-full !me-0 max-xs:!text-xl max-sm:mb-7 sm:col-span-2 sm:ps-10 lg:ps-28 sm:!text-3xl"
class="max-w-full! me-0! max-xs:text-xl! max-sm:mb-7 sm:col-span-2 sm:ps-10 lg:ps-28 sm:text-3xl!"
>
Bem-vindo à <span class="font-cinzel">Casa Cidalisa</span>
</h2>
@ -175,7 +175,7 @@ const logoImage = await getImage({ src: Logo });
<Image
src={Photo1}
alt="TODO"
class="rounded max-sm:my-7 sm:row-start-2 sm:row-span-2 sm:col-start-2 sm:w-full"
class="rounded-sm max-sm:my-7 sm:row-start-2 sm:row-span-2 sm:col-start-2 sm:w-full"
/>
<p class="sm:col-start-2 sm:row-start-4 sm:pr-5">
@ -187,13 +187,13 @@ const logoImage = await getImage({ src: Logo });
<Image
src={Photo2}
alt="TODO"
class="rounded max-sm:mt-7 max-sm:mb-2 sm:row-start-3 sm:row-span-2 sm:self-end sm:ps-5 lg:ps-10"
class="rounded-sm max-sm:mt-7 max-sm:mb-2 sm:row-start-3 sm:row-span-2 sm:self-end sm:ps-5 lg:ps-10"
/>
<Image
src={Photo3}
alt="TODO"
class="rounded max-sm:mb-7 sm:col-start-2 sm:row-start-5 sm:pe-10 lg:pe-20"
class="rounded-sm max-sm:mb-7 sm:col-start-2 sm:row-start-5 sm:pe-10 lg:pe-20"
/>
<div class="sm:row-start-5 sm:self-end sm:ps-10 lg:pl-28">
@ -251,13 +251,14 @@ const logoImage = await getImage({ src: Logo });
href="https://www.google.no/maps/place/Casa+Cidalisa/@37.760956,-25.1577077,38167m/data=!3m1!1e3!4m6!3m5!1s0xb5d1d561969d301:0x186fe1b893d26dcf!8m2!3d37.7609663!4d-25.1570757!16s%2Fg%2F11lnrchxn2?entry=ttu&g_ep=EgoyMDI0MDkxOC4xIKXMDSoASAFQAw%3D%3D"
target="_blank"
rel="noreferrer noopener"
class="w-[95%] max-w-xl mx-auto block"
>
<figure>
<Image
src={Map}
alt="TODO"
alt="Mapa da ilha de São Miguel, com um marcador vermelho na Casa Cidalisa, no canto sudeste da ilha."
height={500}
class="w-[95%] max-w-xl mx-auto rounded inline"
class="rounded-sm"
/>
<figcaption class="mt-2">
Clique na imagem para abrir a sua aplicação de mapas.
@ -276,12 +277,12 @@ const logoImage = await getImage({ src: Logo });
(Helena)
</span>
</div>
<div class="flex gap-5 mb-3">
<div class="flex gap-5 mb-5 sm:mb-3">
<a
href="https://airbnb.com/h/casacidalisa"
target="_blank"
rel="noreferrer noopener"
class="bg-[#ff385c] flex-1 text-center shadow flex items-center justify-center hover:bg-[#ff0a37] cursor-pointer px-3 sm:px-8 py-2 rounded-xl transition-colors"
class="bg-[#ff385c] flex-1 text-center shadow-sm flex items-center justify-center hover:bg-[#ff0a37] cursor-pointer px-3 sm:px-8 py-2 rounded-xl transition-colors"
>
<Image
src={LogoAirbnb}
@ -294,7 +295,7 @@ const logoImage = await getImage({ src: Logo });
href="https://www.booking.com/hotel/pt/casa-cidalisa-povoacao"
target="_blank"
rel="noreferrer noopener"
class="bg-[#003580] flex-1 flex items-center justify-center text-center shadow hover:bg-[#001580] cursor-pointer px-3 sm:px-8 py-4 rounded-xl transition-colors"
class="bg-[#003580] flex-1 flex items-center justify-center text-center shadow-sm hover:bg-[#001580] cursor-pointer px-3 sm:px-8 py-4 rounded-xl transition-colors"
>
<Image
src={LogoBooking}
@ -305,10 +306,7 @@ const logoImage = await getImage({ src: Logo });
</a>
</div>
</div>
<p class="text-xs text-center">
Copyright © 2024 casa-cidalisa.com - Todos os direitos reservados.
</p>
<div class="flex justify-center gap-10 mt-3 text-sm">
<div class="flex justify-center gap-10 text-sm">
<a
href="https://www.livroreclamacoes.pt"
target="_blank"
@ -326,6 +324,9 @@ const logoImage = await getImage({ src: Logo });
Nota de privacidade
</a>
</div>
<p class="text-xs text-center mt-3">
Copyright © 2024 casa-cidalisa.com - Todos os direitos reservados.
</p>
</footer>
</main>

15
src/styles/global.css
View file

@ -1 +1,16 @@
@import "tailwindcss";
@theme {
--color-seasalt: #fafafa;
--color-green: #1d462a;
--color-olivine: #9bbb92;
--color-delft-blue: #1e3061;
--color-sky-blue: #8ac0d0;
--color-sunglow: #ffca26;
--color-night: #161618;
--font-cinzel: Cinzel;
--font-montserrat: Montserrat;
--breakpoint-xs: 455px;
}

26
tailwind.config.mjs
View file

@ -1,26 +0,0 @@
/** @type {import('tailwindcss').Config} */
export default {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
theme: {
extend: {
colors: {
seasalt: '#FAFAFA',
green: '#1D462A',
olivine: '#9BBB92',
delftBlue: '#1E3061',
skyBlue: '#8AC0D0',
sunglow: '#FFCA26',
night: '#161618'
},
fontFamily: {
cinzel: 'Cinzel',
montserrat: 'Montserrat'
},
screens: {
xs: '455px'
}
},
},
plugins: [],
}