very lazy english version

This commit is contained in:
Filipe Medeiros 2024-10-06 23:44:59 +02:00
parent 43e0c4040b
commit c4ef0f3e23
Signed by: filipe
GPG key ID: 9533BD5467CC1E78
3 changed files with 437 additions and 50 deletions

90
src/layouts/Layout.astro Normal file
View 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
View 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"
>&larr;</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"
>&rarr;</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>

View file

@ -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>