very lazy english version
This commit is contained in:
parent
43e0c4040b
commit
c4ef0f3e23
3 changed files with 437 additions and 50 deletions
90
src/layouts/Layout.astro
Normal file
90
src/layouts/Layout.astro
Normal file
|
@ -0,0 +1,90 @@
|
|||
---
|
||||
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 Logo from "../assets/logo.svg";
|
||||
import Map from "../assets/mapa.png";
|
||||
import LogoAirbnb from "../assets/logo-airbnb.svg";
|
||||
import IconFacebook from "../assets/facebook-logo.png";
|
||||
import IconInstagram from "../assets/instagram-logo.png";
|
||||
import LogoBooking from "../assets/logo-booking.svg";
|
||||
|
||||
const optimizedBackgroundImage = await getImage({ src: HeroImage });
|
||||
const logoImage = await getImage({ src: Logo });
|
||||
|
||||
// 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",
|
||||
// },
|
||||
// ];
|
||||
|
||||
interface Props {
|
||||
lang: string;
|
||||
}
|
||||
|
||||
const { lang } = Astro.props;
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang={lang}>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>Casa Cidalisa</title>
|
||||
<slot name="meta" />
|
||||
<meta
|
||||
property="og:image"
|
||||
content={`${Astro.url.origin}/social-image.jpeg`}
|
||||
/>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
sizes="180x180"
|
||||
href="/apple-touch-icon.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="32x32"
|
||||
href="/favicon-32x32.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="16x16"
|
||||
href="/favicon-16x16.png"
|
||||
/>
|
||||
<link rel="manifest" href="/site.webmanifest" />
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: "Cinzel";
|
||||
src: url("/Cinzel-VariableFont_wght.ttf");
|
||||
font-weight: 100 900;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Montserrat";
|
||||
src: url("/Montserrat-VariableFont_wght.ttf");
|
||||
font-weight: 100 900;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="m-0 text-night bg-seasalt font-montserrat">
|
||||
<slot name="body" />
|
||||
</body>
|
||||
</html>
|
326
src/pages/en/index.astro
Normal file
326
src/pages/en/index.astro
Normal file
|
@ -0,0 +1,326 @@
|
|||
---
|
||||
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 Logo from "../../assets/logo.svg";
|
||||
import Map from "../../assets/mapa.png";
|
||||
import LogoAirbnb from "../../assets/logo-airbnb.svg";
|
||||
import IconFacebook from "../../assets/facebook-logo.png";
|
||||
import IconInstagram from "../../assets/instagram-logo.png";
|
||||
import LogoBooking from "../../assets/logo-booking.svg";
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
|
||||
const optimizedBackgroundImage = await getImage({ src: HeroImage });
|
||||
const logoImage = await getImage({ src: Logo });
|
||||
|
||||
// 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",
|
||||
// },
|
||||
// ];
|
||||
---
|
||||
|
||||
<Layout lang="en-EN">
|
||||
<Fragment slot="meta">
|
||||
<meta
|
||||
name="description"
|
||||
content="Relaxe no paraíso escondido de São Miguel. Sossegada vivenda nos Açores, com jardim e quintal, entre o mar e a montanha. Ideal para quatro pessoas."
|
||||
/>
|
||||
<meta property="og:title" content="CASA CIDALISA" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Relaxe no paraíso escondido de São Miguel. Sossegada vivenda nos Açores, com jardim e quintal, entre o mar e a montanha. Ideal para quatro pessoas."
|
||||
/>
|
||||
</Fragment>
|
||||
<Fragment slot="body">
|
||||
<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" />
|
||||
<div
|
||||
class="h-12 sm:h-20 w-[8.4rem] sm:w-56 bg-seasalt sm:bg-sunglow"
|
||||
style={{
|
||||
maskImage: `url(${logoImage.src})`,
|
||||
maskSize: "cover",
|
||||
}}
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex justify-end items-center">
|
||||
<a
|
||||
href="/"
|
||||
class="p-1.5 text-sm leading-none bg-olivine rounded hover:brightness-90 transition"
|
||||
>
|
||||
PT
|
||||
</a>
|
||||
</div>
|
||||
<!-- <button class="text-seasalt">MENU</button> -->
|
||||
</nav>
|
||||
|
||||
<!-- 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-balance text-seasalt drop-shadow-[0_0_40px_black] text-[50px] p-5 sm:text-center font-medium leading-[60px] sm:max-w-4xl sm:mx-auto"
|
||||
>
|
||||
Relax in the hidden paradise of São Miguel Island.
|
||||
</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 transition-colors"
|
||||
>
|
||||
<Image
|
||||
src={LogoAirbnb}
|
||||
alt="Airbnb logo"
|
||||
height={500}
|
||||
class="h-10 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 py-4 rounded-xl transition-colors"
|
||||
>
|
||||
<Image
|
||||
src={LogoBooking}
|
||||
alt="Booking logo"
|
||||
height={500}
|
||||
class="h-8 w-auto translate-y-0.5"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<ul
|
||||
class="absolute max-sm:top-28 right-5 flex gap-4 bottom-6 sm:right-6 sm:gap-6"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.facebook.com/profile.php?id=61565634925731"
|
||||
>
|
||||
<Image
|
||||
src={IconFacebook}
|
||||
alt="Facebook logo"
|
||||
class="h-8 w-auto hover:brightness-75 transition"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.instagram.com/casacidalisa/">
|
||||
<Image
|
||||
src={IconInstagram}
|
||||
alt="Instagram logo"
|
||||
class="h-8 w-auto hover:brightness-75 transition"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<Image src={HeroImage} alt="TODO" class="sr-only" />
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Secção Imagens -->
|
||||
<section
|
||||
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"
|
||||
>
|
||||
Welcome to <span class="font-cinzel">Casa Cidalisa</span>
|
||||
</h2>
|
||||
|
||||
<p class="sm:row-start-2 sm:ps-10 lg:pl-28">
|
||||
Our peaceful little villa, between ocean and mountains, has
|
||||
been in the family for three generations. With a garden and
|
||||
backyard, two bedrooms and a living room with views of the
|
||||
Atlantic and the island of Santa Maria,
|
||||
<b>
|
||||
it is ideal for four people in search of Azorean
|
||||
tranquility
|
||||
</b>.
|
||||
</p>
|
||||
|
||||
<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 class="sm:col-start-2 sm:row-start-4 sm:pr-5">
|
||||
<b>Água Retorta</b> is the most remote village on the island
|
||||
of São Miguel: 75 minutes from João Paulo II Airport, 40 from
|
||||
Furnas, 25 from Ponta da Madrugada and 15 from Ponta do Sossego
|
||||
and Pôr-do-Sol viewpoints.
|
||||
</p>
|
||||
|
||||
<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 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">
|
||||
<h2 class="mb-7 text-xl">In the middle of Nature</h2>
|
||||
|
||||
<p>
|
||||
There are <b>nine walking trails</b> nearby. The circular
|
||||
route of Água Retorta (PRC13 SMI), with moderate difficulty,
|
||||
takes 2 hours. It's right here at the door.
|
||||
</p>
|
||||
|
||||
<p class="my-5">
|
||||
The best landscapes on the island can be seen and
|
||||
recorded at the various <b>viewpoints</b> that surround the
|
||||
village, such as Ponta da Madrugada or Pico Longo.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<b>Wild beaches, forest parks and thermal pools</b>:
|
||||
here are some of the attractions in the eastern part of
|
||||
the island of São Miguel.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 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"
|
||||
>←</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> -->
|
||||
|
||||
<!-- Secção Mapa -->
|
||||
<section class="text-center py-8 bg-olivine mb-7">
|
||||
<h2 class="text-green text-2xl mb-7 sm:text-4xl">Map</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"
|
||||
>
|
||||
<figure>
|
||||
<Image
|
||||
src={Map}
|
||||
alt="TODO"
|
||||
height={500}
|
||||
class="w-[95%] max-w-xl mx-auto rounded inline"
|
||||
/>
|
||||
<figcaption class="mt-2">
|
||||
Click on the image to open your map app.
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</section>
|
||||
<footer class="bg-skyBlue py-5 px-3">
|
||||
<div class="sm:flex sm:justify-between">
|
||||
<div class="flex sm:flex-col max-sm:justify-between mb-3">
|
||||
<span>More info</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 transition-colors"
|
||||
>
|
||||
<Image
|
||||
src={LogoAirbnb}
|
||||
alt="Airbnb logo"
|
||||
height={550}
|
||||
class="h-10 sm:h-6 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 transition-colors"
|
||||
>
|
||||
<Image
|
||||
src={LogoBooking}
|
||||
alt="Booking logo"
|
||||
height={500}
|
||||
class="h-8 sm:h-6 translate-y-0.5 w-auto"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-center">
|
||||
Copyright © 2024 casa-cidalisa.com - All rights reserved.
|
||||
</p>
|
||||
<p class="text-sm text-center mt-3">
|
||||
<a href="www.livroreclamacoes.pt" class="underline">
|
||||
Make a formal complaint
|
||||
</a>
|
||||
</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> -->
|
||||
</Fragment>
|
||||
</Layout>
|
|
@ -10,6 +10,8 @@ import LogoAirbnb from "../assets/logo-airbnb.svg";
|
|||
import IconFacebook from "../assets/facebook-logo.png";
|
||||
import IconInstagram from "../assets/instagram-logo.png";
|
||||
import LogoBooking from "../assets/logo-booking.svg";
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
|
||||
const optimizedBackgroundImage = await getImage({ src: HeroImage });
|
||||
const logoImage = await getImage({ src: Logo });
|
||||
|
||||
|
@ -32,60 +34,21 @@ const logoImage = await getImage({ src: Logo });
|
|||
// ];
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="pt-PT">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="description" content="Astro description" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>Casa Cidalisa</title>
|
||||
<Layout lang="pt-PT">
|
||||
<Fragment slot="meta">
|
||||
<meta
|
||||
name="description"
|
||||
content="Relaxe no paraíso escondido de São Miguel. Sossegada vivenda nos Açores, com jardim e quintal, entre o mar e a montanha. Ideal para quatro pessoas."
|
||||
/>
|
||||
<meta property="og:title" content="CASA CIDALISA" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Relaxe no paraíso escondido de São Miguel. Sossegada vivenda nos Açores, com jardim e quintal, entre o mar e a montanha. Ideal para quatro pessoas."
|
||||
/>
|
||||
<meta
|
||||
property="og:image"
|
||||
content={`${Astro.url.origin}/social-image.jpeg`}
|
||||
/>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
sizes="180x180"
|
||||
href="/apple-touch-icon.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="32x32"
|
||||
href="/favicon-32x32.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="16x16"
|
||||
href="/favicon-16x16.png"
|
||||
/>
|
||||
<link rel="manifest" href="/site.webmanifest" />
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: "Cinzel";
|
||||
src: url("/Cinzel-VariableFont_wght.ttf");
|
||||
font-weight: 100 900;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Montserrat";
|
||||
src: url("/Montserrat-VariableFont_wght.ttf");
|
||||
font-weight: 100 900;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="m-0 text-night bg-seasalt font-montserrat">
|
||||
</Fragment>
|
||||
<Fragment slot="body">
|
||||
<nav
|
||||
class="flex justify-center sm:justify-center max-sm:bg-green p-5 sticky sm:absolute sm:w-full top-0 z-10"
|
||||
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" />
|
||||
<div
|
||||
|
@ -97,6 +60,14 @@ const logoImage = await getImage({ src: Logo });
|
|||
>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex justify-end items-center">
|
||||
<a
|
||||
href="/en"
|
||||
class="p-1.5 text-sm leading-none bg-olivine rounded hover:brightness-90 transition"
|
||||
>
|
||||
EN
|
||||
</a>
|
||||
</div>
|
||||
<!-- <button class="text-seasalt">MENU</button> -->
|
||||
</nav>
|
||||
|
||||
|
@ -353,5 +324,5 @@ const logoImage = await getImage({ src: Logo });
|
|||
// scrollReviews();
|
||||
// });
|
||||
</script> -->
|
||||
</body>
|
||||
</html>
|
||||
</Fragment>
|
||||
</Layout>
|
||||
|
|
Loading…
Add table
Reference in a new issue