lots of things… sorry
This commit is contained in:
parent
60dc41a348
commit
e640b95009
GPG key ID:
9533BD5467CC1E78
BIN
src/assets/imagem 1.png
Normal file
BIN
src/assets/imagem 1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 MiB |
BIN
src/assets/imagem 2.png
Normal file
BIN
src/assets/imagem 2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
src/assets/imagem 3.png
Normal file
BIN
src/assets/imagem 3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 MiB |
BIN
src/assets/mapa.png
Normal file
BIN
src/assets/mapa.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
|
|
@ -1,9 +1,31 @@
|
|||
---
|
||||
import { getImage, Image } from "astro:assets";
|
||||
import HeroImage from "../assets/Frente 6 Bartolomeu.jpg";
|
||||
import Photo1 from "../assets/imagem 1.png";
|
||||
import Photo2 from "../assets/imagem 2.png";
|
||||
import Photo3 from "../assets/imagem 3.png";
|
||||
import Map from "../assets/mapa.png";
|
||||
import LogoAirbnb from "../assets/logo-airbnb.svg";
|
||||
import LogoBooking from "../assets/logo-booking.svg";
|
||||
const optimizedBackgroundImage = await getImage({ src: HeroImage });
|
||||
|
||||
const reviews = [
|
||||
{
|
||||
quote: "Adorei estender-me na rede e balançar-me, com Santa Maria no horizonte.",
|
||||
name: "Ana",
|
||||
country: "Portugal",
|
||||
},
|
||||
{
|
||||
quote: "O fim de tarde no quintal foi maravilhoso. Pássaros e mais pássaros e um vitelo mugiu ali ao lado.",
|
||||
name: "Ana",
|
||||
country: "Portugal",
|
||||
},
|
||||
{
|
||||
quote: "Adorei estender-me na rede e balançar-me, com Santa Maria no horizonte.",
|
||||
name: "Ana",
|
||||
country: "Portugal",
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
|
|
@ -36,7 +58,7 @@ const optimizedBackgroundImage = await getImage({ src: HeroImage });
|
|||
>
|
||||
Casa<br />Cidalisa
|
||||
</span>
|
||||
<button class="text-seasalt">MENU</button>
|
||||
<!-- <button class="text-seasalt">MENU</button> -->
|
||||
</nav>
|
||||
<header class="h-[calc(100vh-88px)] flex flex-col">
|
||||
<div
|
||||
|
|
@ -48,17 +70,18 @@ const optimizedBackgroundImage = await getImage({ src: HeroImage });
|
|||
<h1 class="text-seasalt text-[50px] font-medium leading-[60px]">
|
||||
Relaxe<br />no paraíso<br />escondido<br />de São Miguel.
|
||||
</h1>
|
||||
<Image src={HeroImage} alt="TODO" class="sr-only" />
|
||||
</div>
|
||||
<div class="p-5 bg-olivine flex gap-5">
|
||||
<a
|
||||
href="https://www.airbnb.com"
|
||||
class="bg-[#ff385c] flex-1 text-center shadow flex items-center justify-center hover:bg-[#ff0a37] cursor-pointer px-3 py-4 rounded-xl"
|
||||
class="bg-[#ff385c] flex-1 text-center shadow flex items-center justify-center hover:bg-[#ff0a37] cursor-pointer px-3 py-2 rounded-xl"
|
||||
>
|
||||
<Image
|
||||
src={LogoAirbnb}
|
||||
alt="Airbnb logo"
|
||||
height={500}
|
||||
class="h-8 w-auto inline"
|
||||
class="h-10 w-auto"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
|
|
@ -69,12 +92,161 @@ const optimizedBackgroundImage = await getImage({ src: HeroImage });
|
|||
src={LogoBooking}
|
||||
alt="Booking logo"
|
||||
height={500}
|
||||
class="h-8 w-auto inline"
|
||||
class="h-8 w-auto"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
<main></main>
|
||||
<div>something else</div>
|
||||
<main>
|
||||
<section
|
||||
class="py-8 *:ms-5 *:me-16 *:max-w-prose [&>h2]:text-2xl [&>img]:w-[95%] [&>img]:mx-auto [&_b]:font-medium"
|
||||
>
|
||||
<h2 class="mb-7">
|
||||
Bem-vindo à <span class="font-cinzel">Casa Cidalisa</span>
|
||||
</h2>
|
||||
|
||||
<p>
|
||||
A nossa serena vivenda, entre o mar e a montanha, está na
|
||||
família há três gerações. Com jardim e quintal, dois quartos
|
||||
e sala com vista para o Atlântico e ilha de Santa Maria, é
|
||||
<b>
|
||||
ideal para quatro pessoas à procura do sossego açoriano
|
||||
</b>.
|
||||
</p>
|
||||
|
||||
<Image src={Photo1} alt="TODO" class="block rounded my-7" />
|
||||
|
||||
<p>
|
||||
<b>Água Retorta</b> é a aldeia mais remota da ilha de São Miguel:
|
||||
está a 75 minutos do Aeroporto João Paulo II, 40 das Furnas,
|
||||
25 da Ponta da Madrugada e a 15 da Ponta do Sossego e do Miradouro
|
||||
do Pôr-do-Sol.
|
||||
</p>
|
||||
|
||||
<Image src={Photo2} alt="TODO" class="rounded mt-7 mb-2" />
|
||||
|
||||
<Image src={Photo3} alt="TODO" class="rounded mb-7" />
|
||||
|
||||
<h2 class="mb-7">No meio da Natureza</h2>
|
||||
|
||||
<p>
|
||||
Existem <b>nove trilhos pedestres</b> nas imediações. A rota
|
||||
circular de Água Retorta (PRC13 SMI), de dificuldade moderada,
|
||||
demora 2 horas. Passa mesmo aqui à porta.
|
||||
</p>
|
||||
|
||||
<p class="my-5">
|
||||
As melhores paisagens da ilha podem ser vistas e registadas
|
||||
nos vários <b>miradouros</b> que rodeiam a aldeia, como a Ponta
|
||||
da Madrugada ou o Pico Longo.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<b
|
||||
>Praias selvagens, parques florestais, e piscinas
|
||||
termais</b
|
||||
>: eis algumas das atrações da zona oriental da ilha de São
|
||||
Miguel.
|
||||
</p>
|
||||
</section>
|
||||
<section class="bg-olivine text-center py-8">
|
||||
<h2 class="text-green text-2xl mb-7">Opiniões</h2>
|
||||
<div class="flex justify-center gap-1 items-center">
|
||||
<button id="scroll-reviews-left-button" class="text-5xl"
|
||||
>←</button
|
||||
>
|
||||
<ul
|
||||
id="review-list"
|
||||
class="flex overflow-x-scroll w-72 px-8 pb-8 gap-10 snap-x snap-mandatory"
|
||||
>
|
||||
{
|
||||
reviews.map(({ quote, name, country }) => (
|
||||
<li class="border border-green h-fit p-8 w-64 rounded-lg shadow-lg shrink-0 snap-center">
|
||||
“{quote}”
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
<button id="scroll-reviews-right-button" class="text-5xl"
|
||||
>→</button
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text-center py-8">
|
||||
<h2 class="text-delftBlue text-2xl mb-7">Mapa</h2>
|
||||
|
||||
<a href="http://maps.apple.com/maps?q=37.7609595,-25.15731">
|
||||
<Image
|
||||
src={Map}
|
||||
alt="TODO"
|
||||
height={500}
|
||||
class="w-[95%] mx-auto"
|
||||
/>
|
||||
</a>
|
||||
</section>
|
||||
<footer class="bg-skyBlue py-5 px-3">
|
||||
<div class="flex justify-between mb-3">
|
||||
<span>Mais informações</span>
|
||||
<span>
|
||||
<a href="tel:+351963535226">
|
||||
<b class="font-semibold">+351 963 535 226</b>
|
||||
</a>
|
||||
(Helena)
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex gap-5 mb-3">
|
||||
<a
|
||||
href="https://www.airbnb.com"
|
||||
class="bg-[#ff385c] flex-1 text-center shadow flex items-center justify-center hover:bg-[#ff0a37] cursor-pointer px-3 py-2 rounded-xl"
|
||||
>
|
||||
<Image
|
||||
src={LogoAirbnb}
|
||||
alt="Airbnb logo"
|
||||
height={550}
|
||||
class="h-10 w-auto"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="https://www.airbnb.com"
|
||||
class="bg-[#003580] flex-1 flex items-center justify-center text-center shadow hover:bg-[#ff0a37] cursor-pointer px-3 py-4 rounded-xl"
|
||||
>
|
||||
<Image
|
||||
src={LogoBooking}
|
||||
alt="Booking logo"
|
||||
height={500}
|
||||
class="h-8 w-auto"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<p class="text-xs text-center">
|
||||
Copyright © 2024 casa-cidalisa.com - Todos os direitos
|
||||
reservados.
|
||||
</p>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function scrollReviews(right = true) {
|
||||
document
|
||||
.querySelector("#review-list")
|
||||
.scrollBy({ left: right ? 40 : -40, behavior: "smooth" });
|
||||
}
|
||||
|
||||
(
|
||||
document.querySelector(
|
||||
"#scroll-reviews-left-button",
|
||||
) as HTMLButtonElement
|
||||
).addEventListener("click", () => {
|
||||
scrollReviews(false);
|
||||
});
|
||||
|
||||
(
|
||||
document.querySelector(
|
||||
"#scroll-reviews-right-button",
|
||||
) as HTMLButtonElement
|
||||
).addEventListener("click", () => {
|
||||
scrollReviews();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue