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

logos and stuff

Browse source
This commit is contained in:
Filipe Medeiros 2024-09-28 21:31:22 +02:00
parent 29caf2e71a
commit 3e1a854d85
Signed by: filipe
GPG key ID: 9533BD5467CC1E78
6 changed files with 83 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/social-image.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3 MiB

BIN
src/assets/Frente 6 Bartolomeu.jpg
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 MiB

After

Width:  |  Height:  |  Size: 11 MiB

BIN
src/assets/facebook-logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
src/assets/instagram-logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.6 KiB

120
src/pages/index.astro
View file

@ -7,27 +7,29 @@ import Photo3 from "../assets/imagem 3.png";
import Logo from "../assets/logo.svg"; import Logo from "../assets/logo.svg";
import Map from "../assets/mapa.png"; import Map from "../assets/mapa.png";
import LogoAirbnb from "../assets/logo-airbnb.svg"; 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 LogoBooking from "../assets/logo-booking.svg";
const optimizedBackgroundImage = await getImage({ src: HeroImage }); const optimizedBackgroundImage = await getImage({ src: HeroImage });
const logoImage = await getImage({ src: Logo }); const logoImage = await getImage({ src: Logo });
const reviews = [ // const reviews = [
{ // {
quote: "Adorei estender-me na rede e balançar-me, com Santa Maria no horizonte.", // quote: "Adorei estender-me na rede e balançar-me, com Santa Maria no horizonte.",
name: "Ana", // name: "Ana",
country: "Portugal", // country: "Portugal",
}, // },
{ // {
quote: "O fim de tarde no quintal foi maravilhoso. Pássaros e mais pássaros e um vitelo mugiu ali ao lado.", // quote: "O fim de tarde no quintal foi maravilhoso. Pássaros e mais pássaros e um vitelo mugiu ali ao lado.",
name: "Ana", // name: "Ana",
country: "Portugal", // country: "Portugal",
}, // },
{ // {
quote: "Adorei estender-me na rede e balançar-me, com Santa Maria no horizonte.", // quote: "Adorei estender-me na rede e balançar-me, com Santa Maria no horizonte.",
name: "Ana", // name: "Ana",
country: "Portugal", // country: "Portugal",
}, // },
]; // ];
--- ---
<!doctype html> <!doctype html>
@ -39,6 +41,15 @@ const reviews = [
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<title>Casa Cidalisa</title> <title>Casa Cidalisa</title>
<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`}
/>
<style> <style>
@font-face { @font-face {
font-family: "Cinzel"; font-family: "Cinzel";
@ -55,7 +66,7 @@ const reviews = [
</head> </head>
<body class="m-0 text-night bg-seasalt font-montserrat"> <body class="m-0 text-night bg-seasalt font-montserrat">
<nav <nav
class="flex justify-center sm:justify-center max-sm:bg-green p-5 sticky sm:absolute sm:w-full top-0" class="flex justify-center sm:justify-center max-sm:bg-green p-5 sticky sm:absolute sm:w-full top-0 z-10"
> >
<Image src={Logo} alt="TODO" class="sr-only" /> <Image src={Logo} alt="TODO" class="sr-only" />
<div <div
@ -78,7 +89,7 @@ const reviews = [
}} }}
> >
<h1 <h1
class="text-seasalt text-[50px] p-5 sm:text-center font-medium leading-[60px] sm:max-w-4xl sm:mx-auto" class="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"
> >
Relaxe no paraíso escondido de São Miguel. Relaxe no paraíso escondido de São Miguel.
</h1> </h1>
@ -108,6 +119,31 @@ const reviews = [
</a> </a>
</div> </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="TODO"
class="h-8 w-auto"
/>
</a>
</li>
<li>
<a href="https://www.instagram.com/casacidalisa/">
<Image
src={IconInstagram}
alt="TODO"
class="h-8 w-auto"
/>
</a>
</li>
</ul>
<Image src={HeroImage} alt="TODO" class="sr-only" /> <Image src={HeroImage} alt="TODO" class="sr-only" />
</header> </header>
@ -116,7 +152,9 @@ const reviews = [
<section <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" 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-sm:mb-7 sm:col-span-2 sm:ps-10 lg:pl-28"> <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"
>
Bem-vindo à <span class="font-cinzel">Casa Cidalisa</span> Bem-vindo à <span class="font-cinzel">Casa Cidalisa</span>
</h2> </h2>
@ -262,28 +300,28 @@ const reviews = [
</footer> </footer>
</main> </main>
<script> <!-- <script>
function scrollReviews(right = true) { // function scrollReviews(right = true) {
document // document
.querySelector("#review-list") // .querySelector("#review-list")
.scrollBy({ left: right ? 40 : -40, behavior: "smooth" }); // .scrollBy({ left: right ? 40 : -40, behavior: "smooth" });
} // }
( // (
document.querySelector( // document.querySelector(
"#scroll-reviews-left-button", // "#scroll-reviews-left-button",
) as HTMLButtonElement // ) as HTMLButtonElement
).addEventListener("click", () => { // ).addEventListener("click", () => {
scrollReviews(false); // scrollReviews(false);
}); // });
( // (
document.querySelector( // document.querySelector(
"#scroll-reviews-right-button", // "#scroll-reviews-right-button",
) as HTMLButtonElement // ) as HTMLButtonElement
).addEventListener("click", () => { // ).addEventListener("click", () => {
scrollReviews(); // scrollReviews();
}); // });
</script> </script> -->
</body> </body>
</html> </html>

4
tailwind.config.mjs
View file

@ -15,6 +15,10 @@ export default {
fontFamily: { fontFamily: {
cinzel: 'Cinzel', cinzel: 'Cinzel',
montserrat: 'Montserrat' montserrat: 'Montserrat'
},
screens: {
xs: '455px'
} }
}, },
}, },