desktop version done (simple)
This commit is contained in:
parent
e640b95009
commit
706417d5b8
GPG key ID:
9533BD5467CC1E78
3
src/assets/logo-sun.svg
Normal file
3
src/assets/logo-sun.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="56" height="28" viewBox="0 0 56 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M28.1667 24.5864C28.1108 24.5864 28.055 24.5878 27.9992 24.5905L26.8216 0.619446C27.2692 0.597458 27.7177 0.586426 28.1667 0.586426C28.6158 0.586426 29.0643 0.597458 29.5119 0.619445L28.3343 24.5905C28.2785 24.5878 28.2227 24.5864 28.1667 24.5864ZM27.6659 24.6234C27.5554 24.6398 27.4457 24.6616 27.3373 24.6887L21.5058 1.40797C22.3762 1.18995 23.2568 1.0148 24.1443 0.883138L27.6659 24.6234ZM28.9962 24.6887C28.8878 24.6616 28.7781 24.6398 28.6676 24.6234L32.1892 0.883138C33.0767 1.0148 33.9573 1.18995 34.8277 1.40797L28.9962 24.6887ZM29.4731 24.8463C29.4214 24.8249 29.3693 24.8048 29.3167 24.786L37.4021 2.18891C37.824 2.33988 38.2426 2.50132 38.6575 2.67316C39.0723 2.845 39.4825 3.02682 39.8876 3.21842L29.6263 24.9142C29.5758 24.8903 29.5247 24.8677 29.4731 24.8463ZM27.0168 24.786C26.9642 24.8048 26.9121 24.8249 26.8604 24.8463C26.8088 24.8677 26.7577 24.8903 26.7072 24.9142L16.4459 3.21842C16.851 3.02683 17.2612 2.845 17.676 2.67316C18.0909 2.50132 18.5095 2.33988 18.9314 2.18892L27.0168 24.786ZM26.4118 25.0721C26.316 25.1295 26.223 25.1916 26.1333 25.2582L11.8365 5.9812C12.5572 5.4467 13.3037 4.94789 14.0733 4.4866L26.4118 25.0721ZM30.2002 25.2582C30.1105 25.1916 30.0175 25.1295 29.9217 25.0721L42.2602 4.4866C43.0298 4.94789 43.7763 5.4467 44.497 5.9812L30.2002 25.2582ZM25.8743 25.4707C25.833 25.5082 25.7925 25.5467 25.753 25.5862C25.7134 25.6258 25.6749 25.6663 25.6374 25.7076L7.85464 9.59016C8.15557 9.25813 8.4649 8.93319 8.78242 8.61568C9.09994 8.29816 9.42488 7.98882 9.75691 7.68789L25.8743 25.4707ZM30.5805 25.5862C30.541 25.5467 30.5005 25.5082 30.4592 25.4707L46.5766 7.68789C46.9086 7.98882 47.2336 8.29816 47.5511 8.61568C47.8686 8.93319 48.1779 9.25813 48.4789 9.59016L30.696 25.7076C30.6586 25.6663 30.6201 25.6258 30.5805 25.5862ZM25.4249 25.9665C25.3584 26.0563 25.2963 26.1492 25.2388 26.2451L4.65335 13.9066C5.11464 13.137 5.61345 12.3905 6.14795 11.6698L25.4249 25.9665ZM31.0947 26.2451C31.0372 26.1492 30.9751 26.0563 30.9086 25.9665L50.1855 11.6698C50.7201 12.3905 51.2189 13.137 51.6801 13.9066L31.0947 26.2451ZM31.3205 26.6937C31.2991 26.642 31.2764 26.5909 31.2526 26.5405L52.9483 16.2792C53.1399 16.6843 53.3217 17.0944 53.4936 17.5093C53.6654 17.9241 53.8269 18.3427 53.9778 18.7646L31.3808 26.85C31.362 26.7975 31.3419 26.7454 31.3205 26.6937ZM25.0809 26.5405C25.0571 26.5909 25.0344 26.642 25.013 26.6937C24.9916 26.7454 24.9715 26.7975 24.9527 26.85L2.35566 18.7646C2.50663 18.3427 2.66807 17.9241 2.83991 17.5093C3.01175 17.0944 3.19357 16.6843 3.38517 16.2792L25.0809 26.5405ZM31.5434 27.4991C31.527 27.3886 31.5052 27.2789 31.478 27.1706L54.7588 21.3391C54.9768 22.2094 55.152 23.09 55.2836 23.9776L31.5434 27.4991ZM24.8555 27.1706C24.8283 27.2789 24.8065 27.3886 24.7901 27.4991L1.04988 23.9776C1.18154 23.09 1.3567 22.2094 1.57472 21.3391L24.8555 27.1706ZM31.5803 28C31.5803 27.9441 31.5789 27.8882 31.5762 27.8325L55.5473 26.6549C55.5693 27.1025 55.5803 27.551 55.5803 28H31.5803ZM24.7573 27.8325C24.7545 27.8882 24.7532 27.9441 24.7532 28H0.753174C0.753174 27.551 0.764206 27.1025 0.786193 26.6549L24.7573 27.8325Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
3
src/assets/logo.svg
Normal file
3
src/assets/logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
|
|
@ -4,6 +4,8 @@ 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 Logo from "../assets/logo.svg";
|
||||
import LogoSun from "../assets/logo-sun.svg";
|
||||
import Map from "../assets/mapa.png";
|
||||
import LogoAirbnb from "../assets/logo-airbnb.svg";
|
||||
import LogoBooking from "../assets/logo-booking.svg";
|
||||
|
|
@ -29,7 +31,7 @@ const reviews = [
|
|||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="pt-PT">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="description" content="Astro description" />
|
||||
|
|
@ -52,27 +54,39 @@ const reviews = [
|
|||
</style>
|
||||
</head>
|
||||
<body class="m-0 text-night bg-seasalt font-montserrat">
|
||||
<nav class="flex justify-between bg-green p-5 sticky top-0">
|
||||
<nav
|
||||
class="flex justify-between sm:justify-center max-sm:bg-green p-5 sticky sm:absolute sm:w-full top-0"
|
||||
>
|
||||
<span
|
||||
class="font-cinzel font-thin leading-none text-2xl text-seasalt"
|
||||
class="font-cinzel font-thin leading-none text-2xl sm:text-3xl text-seasalt sm:text-sunglow sm:mx-auto"
|
||||
>
|
||||
Casa<br />Cidalisa
|
||||
Casa<Image
|
||||
src={LogoSun}
|
||||
alt="TODO"
|
||||
class="inline w-11 -translate-y-1 ml-1.5"
|
||||
style={{
|
||||
filter: "invert(90%) sepia(12%) saturate(3828%) hue-rotate(335deg) brightness(104%) contrast(101%)",
|
||||
}}
|
||||
/><br />Cidalisa
|
||||
</span>
|
||||
|
||||
<!-- <button class="text-seasalt">MENU</button> -->
|
||||
</nav>
|
||||
<header class="h-[calc(100vh-88px)] flex flex-col">
|
||||
<div
|
||||
class="bg-cover flex-1 p-5 flex justify-end flex-col"
|
||||
style={{
|
||||
backgroundImage: `url(${optimizedBackgroundImage.src})`,
|
||||
}}
|
||||
|
||||
<!-- Secção Hero -->
|
||||
<header
|
||||
class="h-[calc(100dvh-88px)] sm:h-dvh flex flex-col bg-cover flex-1 justify-end bg-[30%_center] sm:pb-32"
|
||||
style={{
|
||||
backgroundImage: `url(${optimizedBackgroundImage.src})`,
|
||||
}}
|
||||
>
|
||||
<h1
|
||||
class="text-seasalt text-[50px] p-5 sm:text-center font-medium leading-[60px] sm:max-w-4xl sm:mx-auto"
|
||||
>
|
||||
<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">
|
||||
Relaxe no paraíso escondido de São Miguel.
|
||||
</h1>
|
||||
|
||||
<div class="p-5 max-sm:bg-olivine flex gap-5 sm:mx-auto">
|
||||
<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"
|
||||
|
|
@ -85,8 +99,8 @@ const reviews = [
|
|||
/>
|
||||
</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"
|
||||
href="https://www.booking.com"
|
||||
class="bg-[#003580] flex-1 flex items-center justify-center text-center shadow hover:bg-[#001580] cursor-pointer px-3 py-4 rounded-xl"
|
||||
>
|
||||
<Image
|
||||
src={LogoBooking}
|
||||
|
|
@ -96,16 +110,20 @@ const reviews = [
|
|||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<Image src={HeroImage} alt="TODO" class="sr-only" />
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Secção Images -->
|
||||
<section
|
||||
class="py-8 *:ms-5 *:me-16 *:max-w-prose [&>h2]:text-2xl [&>img]:w-[95%] [&>img]:mx-auto [&_b]:font-medium"
|
||||
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="mb-7">
|
||||
<h2 class="max-sm:mb-7 sm:col-span-2 sm:ps-10 lg:pl-28">
|
||||
Bem-vindo à <span class="font-cinzel">Casa Cidalisa</span>
|
||||
</h2>
|
||||
|
||||
<p>
|
||||
<p class="sm:row-start-2 sm:ps-10 lg:pl-28">
|
||||
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, é
|
||||
|
|
@ -114,42 +132,58 @@ const reviews = [
|
|||
</b>.
|
||||
</p>
|
||||
|
||||
<Image src={Photo1} alt="TODO" class="block rounded my-7" />
|
||||
<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"
|
||||
/>
|
||||
|
||||
<p>
|
||||
<p class="sm:col-start-2 sm:row-start-4 sm:pr-5">
|
||||
<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={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"
|
||||
/>
|
||||
|
||||
<Image src={Photo3} alt="TODO" class="rounded mb-7" />
|
||||
<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"
|
||||
/>
|
||||
|
||||
<h2 class="mb-7">No meio da Natureza</h2>
|
||||
<div class="sm:row-start-5 sm:self-end sm:ps-10 lg:pl-28">
|
||||
<h2 class="mb-7 text-xl">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>
|
||||
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 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>
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
<section class="bg-olivine text-center py-8">
|
||||
|
||||
<!-- Secção Opiniões -->
|
||||
<!-- <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"
|
||||
|
|
@ -171,52 +205,58 @@ const reviews = [
|
|||
>→</button
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
<section class="text-center py-8">
|
||||
<h2 class="text-delftBlue text-2xl mb-7">Mapa</h2>
|
||||
</section> -->
|
||||
|
||||
<a href="http://maps.apple.com/maps?q=37.7609595,-25.15731">
|
||||
<!-- Secção Mapa -->
|
||||
<section class="text-center py-8 bg-olivine mb-7">
|
||||
<h2 class="text-green text-2xl mb-7">Mapa</h2>
|
||||
|
||||
<a
|
||||
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"
|
||||
>
|
||||
<Image
|
||||
src={Map}
|
||||
alt="TODO"
|
||||
height={500}
|
||||
class="w-[95%] mx-auto"
|
||||
class="w-[95%] max-w-xl mx-auto rounded inline"
|
||||
/>
|
||||
</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>
|
||||
<div class="sm:flex sm:justify-between">
|
||||
<div class="flex sm:flex-col max-sm: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 sm:px-8 py-2 rounded-xl"
|
||||
>
|
||||
<Image
|
||||
src={LogoAirbnb}
|
||||
alt="Airbnb logo"
|
||||
height={550}
|
||||
class="h-10 sm:h-6 w-auto"
|
||||
/>
|
||||
</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>
|
||||
<a
|
||||
href="https://www.booking.com"
|
||||
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"
|
||||
>
|
||||
<Image
|
||||
src={LogoBooking}
|
||||
alt="Booking logo"
|
||||
height={500}
|
||||
class="h-8 sm:h-4 w-auto"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-center">
|
||||
Copyright © 2024 casa-cidalisa.com - Todos os direitos
|
||||
|
|
|
|||
Loading…
Reference in a new issue