initial draft for Luis design
This commit is contained in:
parent
fb115e3809
commit
60dc41a348
GPG key ID:
9533BD5467CC1E78
BIN
public/Cinzel-VariableFont_wght.ttf
Normal file
BIN
public/Cinzel-VariableFont_wght.ttf
Normal file
Binary file not shown.
BIN
public/Montserrat-VariableFont_wght.ttf
Normal file
BIN
public/Montserrat-VariableFont_wght.ttf
Normal file
Binary file not shown.
9
src/assets/logo-airbnb.svg
Normal file
9
src/assets/logo-airbnb.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 68 KiB |
129
src/assets/logo-booking.svg
Normal file
129
src/assets/logo-booking.svg
Normal file
|
|
@ -0,0 +1,129 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
version="1.1"
|
||||||
|
id="svg4517"
|
||||||
|
viewBox="0 0 500.00001 83.077672"
|
||||||
|
height="23.446365mm"
|
||||||
|
width="141.11111mm">
|
||||||
|
<defs
|
||||||
|
id="defs4519">
|
||||||
|
<clipPath
|
||||||
|
id="clipPath4233"
|
||||||
|
clipPathUnits="userSpaceOnUse">
|
||||||
|
<path
|
||||||
|
id="path4235"
|
||||||
|
d="m 589.4997,28.97182 94.5002,0 0,-16.03433 -94.5002,0 0,16.03433 z" />
|
||||||
|
</clipPath>
|
||||||
|
<clipPath
|
||||||
|
id="clipPath4239"
|
||||||
|
clipPathUnits="userSpaceOnUse">
|
||||||
|
<path
|
||||||
|
id="path4241"
|
||||||
|
d="m 589.4998,12.93748 94.50024,0 0,16.03433 -94.50024,0 0,-16.03433 z" />
|
||||||
|
</clipPath>
|
||||||
|
<clipPath
|
||||||
|
id="clipPath4209"
|
||||||
|
clipPathUnits="userSpaceOnUse">
|
||||||
|
<path
|
||||||
|
id="path4211"
|
||||||
|
d="m 589.4997,28.97182 94.5002,0 0,-16.03433 -94.5002,0 0,16.03433 z" />
|
||||||
|
</clipPath>
|
||||||
|
<clipPath
|
||||||
|
id="clipPath4215"
|
||||||
|
clipPathUnits="userSpaceOnUse">
|
||||||
|
<path
|
||||||
|
id="path4217"
|
||||||
|
d="m 589.4998,28.65624 94.4801,0 0,-15.69829 -94.4801,0 0,15.69829 z" />
|
||||||
|
</clipPath>
|
||||||
|
<clipPath
|
||||||
|
id="clipPath4221"
|
||||||
|
clipPathUnits="userSpaceOnUse">
|
||||||
|
<path
|
||||||
|
id="path4223"
|
||||||
|
d="m 589.4998,12.93748 94.50024,0 0,16.03433 -94.50024,0 0,-16.03433 z" />
|
||||||
|
</clipPath>
|
||||||
|
<clipPath
|
||||||
|
id="clipPath4181"
|
||||||
|
clipPathUnits="userSpaceOnUse">
|
||||||
|
<path
|
||||||
|
id="path4183"
|
||||||
|
d="m 589.4997,28.97182 94.5002,0 0,-16.03433 -94.5002,0 0,16.03433 z" />
|
||||||
|
</clipPath>
|
||||||
|
<clipPath
|
||||||
|
id="clipPath4187"
|
||||||
|
clipPathUnits="userSpaceOnUse">
|
||||||
|
<path
|
||||||
|
id="path4189"
|
||||||
|
d="m 589.4998,12.93748 94.50024,0 0,16.03433 -94.50024,0 0,-16.03433 z" />
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
<metadata
|
||||||
|
id="metadata4522">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
transform="translate(-41.273811,-420.31721)"
|
||||||
|
id="layer1">
|
||||||
|
<path
|
||||||
|
d="m 237.39392,427.9362 c 0,-4.21212 3.39968,-7.61899 7.58471,-7.61899 4.19932,0 7.61223,3.40687 7.61223,7.61899 0,4.20668 -3.41291,7.61715 -7.61223,7.61715 -4.18503,0 -7.58471,-3.41047 -7.58471,-7.61715"
|
||||||
|
style="fill:#FFFFFF;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||||
|
id="path4191" />
|
||||||
|
<path
|
||||||
|
d="m 357.29547,478.61328 c 0,-4.21387 3.39809,-7.6244 7.58312,-7.6244 4.19773,0 7.61011,3.41053 7.61011,7.6244 0,4.20308 -3.41238,7.6172 -7.61011,7.6172 -4.18503,0 -7.58312,-3.41412 -7.58312,-7.6172"
|
||||||
|
style="fill:#499fdd;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||||
|
id="path4193" />
|
||||||
|
<path
|
||||||
|
d="m 112.67388,475.32019 c -6.5448,0 -11.09287,-5.19789 -11.09287,-12.62553 0,-7.42578 4.54807,-12.62008 11.09287,-12.62008 6.58237,0 11.18072,5.1943 11.18072,12.62008 0,7.54496 -4.50256,12.62553 -11.18072,12.62553 z m 0,-36.34187 c -13.846375,0 -23.895105,9.97687 -23.895105,23.71634 0,13.73947 10.04873,23.71454 23.895105,23.71454 13.89824,0 23.98878,-9.97507 23.98878,-23.71454 0,-13.73947 -10.09054,-23.71634 -23.98878,-23.71634"
|
||||||
|
style="fill:#FFFFFF;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||||
|
id="path4195" />
|
||||||
|
<path
|
||||||
|
d="m 222.67593,463.88084 c -0.53821,-1.01286 -1.15527,-1.87045 -1.81256,-2.55108 l -0.41861,-0.44417 0.44031,-0.42247 c 0.63559,-0.66983 1.28546,-1.46423 1.91205,-2.38496 l 12.21904,-18.16461 -14.83336,0 -9.18082,14.20884 c -0.51968,0.76191 -1.56912,1.14649 -3.13983,1.14649 l -2.09251,0 0,-26.86326 c 0,-5.37301 -3.34729,-6.10423 -6.96341,-6.10423 l -6.19075,0 0.0106,63.40914 13.14358,0 0,-19.0204 1.23148,0 c 1.49821,0 2.51853,0.17331 2.98636,0.98756 l 7.25077,13.68529 c 2.02531,3.71381 4.04373,4.34755 7.84085,4.34755 l 10.07254,0 -7.50162,-12.40887 -4.97409,-9.42082"
|
||||||
|
style="fill:#FFFFFF;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||||
|
id="path4197" />
|
||||||
|
<path
|
||||||
|
d="m 286.48389,438.87719 c -6.68557,0 -10.95157,2.96995 -13.34204,5.48134 l -0.79805,0.80706 -0.28154,-1.0977 c -0.70227,-2.69016 -3.06945,-4.17064 -6.6316,-4.17064 l -5.89068,0 0.037,45.79703 13.05414,0 0,-21.10752 c 0,-2.06362 0.26831,-3.85459 0.81393,-5.48854 1.45323,-4.94514 5.50648,-8.01982 10.57266,-8.01982 4.07495,0 5.66736,2.1503 5.66736,7.70748 l 0,19.94658 c 0,4.74293 2.19359,6.96182 6.94012,6.96182 l 6.21245,0 -0.0212,-29.12729 c 0,-11.57292 -5.64407,-17.6898 -16.32892,-17.6898"
|
||||||
|
style="fill:#FFFFFF;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||||
|
id="path4199" />
|
||||||
|
<path
|
||||||
|
d="m 245.15221,439.91715 -6.18758,0 0.0423,35.41024 -0.004,0 0,10.37769 6.6046,0 c 0.0831,0 0.14977,0.009 0.23285,0.009 l 3.07633,-0.009 3.06203,0 0,-0.018 0.0212,0 0.0265,-38.81711 c 0,-4.68333 -2.2391,-6.95277 -6.86973,-6.95277"
|
||||||
|
style="fill:#FFFFFF;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||||
|
id="path4201" />
|
||||||
|
<path
|
||||||
|
d="m 163.95003,475.32019 c -6.54427,0 -11.10134,-5.19789 -11.10134,-12.62553 0,-7.42578 4.55707,-12.62008 11.10134,-12.62008 6.56861,0 11.17966,5.1943 11.17966,12.62008 0,7.54496 -4.50097,12.62553 -11.17966,12.62553 z m 0,-36.34187 c -13.86014,0 -23.91098,9.97687 -23.91098,23.71634 0,13.73947 10.05084,23.71454 23.91098,23.71454 13.88395,0 23.99089,-9.97507 23.99089,-23.71454 0,-13.73947 -10.10694,-23.71634 -23.99089,-23.71634"
|
||||||
|
style="fill:#FFFFFF;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||||
|
id="path4203" />
|
||||||
|
<path
|
||||||
|
id="path4225"
|
||||||
|
style="fill:#499fdd;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||||
|
d="m 443.76969,475.32019 c -6.54162,0 -11.10187,-5.19789 -11.10187,-12.62553 0,-7.42578 4.56025,-12.62008 11.10187,-12.62008 6.56967,0 11.18284,5.1943 11.18284,12.62008 0,7.54496 -4.50309,12.62553 -11.18284,12.62553 z m 0,-36.34187 c -13.85696,0 -23.9078,9.97687 -23.9078,23.71634 0,13.73947 10.05084,23.71454 23.9078,23.71454 13.88554,0 23.99037,-9.97507 23.99037,-23.71454 0,-13.73947 -10.10483,-23.71634 -23.99037,-23.71634" />
|
||||||
|
<path
|
||||||
|
id="path4227"
|
||||||
|
style="fill:#FFFFFF;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||||
|
d="m 330.34203,473.30526 c -7.13699,0 -9.67722,-6.22696 -9.67722,-12.06218 0,-2.57093 0.64988,-10.95004 8.99136,-10.95004 4.14534,0 9.66981,1.18798 9.66981,11.38156 0,9.61398 -4.88888,11.63066 -8.98395,11.63066 z m 15.76161,-33.51089 c -2.47726,0 -4.38349,0.98757 -5.33872,2.79124 l -0.36093,0.70047 -0.60489,-0.52535 c -2.10733,-1.82352 -5.8854,-3.98642 -12.02058,-3.98642 -12.20687,0 -20.42505,9.16807 -20.42505,22.8118 0,13.62755 8.50342,23.15125 20.6706,23.15125 4.15592,0 7.44023,-0.96953 10.04344,-2.94106 l 1.00762,-0.75646 0,1.27281 c 0,6.11688 -3.95588,9.49126 -11.12674,9.49126 -3.48488,0 -6.65699,-0.84855 -8.77808,-1.61771 -2.76991,-0.83589 -4.39301,-0.14442 -5.51601,2.63417 l -1.0362,2.56373 -1.46593,3.74451 0.90814,0.48386 c 4.58935,2.43555 10.56365,3.88894 15.96376,3.88894 11.11774,0 24.09885,-5.69076 24.09885,-21.70511 l 0.0476,-42.00193 -6.0648,0" />
|
||||||
|
<path
|
||||||
|
d="m 64.056507,474.79479 -10.626633,-0.0106 0,-12.70491 c 0,-2.7154 1.052608,-4.12729 3.379566,-4.45223 l 7.247067,0 c 5.172545,0 8.514536,3.26245 8.518241,8.53973 -0.0037,5.41635 -3.26261,8.62466 -8.518241,8.62826 z m -10.626633,-34.27285 0,-3.34369 c 0,-2.92661 1.238363,-4.3186 3.95588,-4.49737 l 5.437682,0 c 4.663441,0 7.456636,2.79124 7.456636,7.46013 0,3.56034 -1.912053,7.71468 -7.28517,7.71468 l -9.565028,0 0,-7.33375 z m 24.198345,12.67967 -1.921049,-1.07966 1.677081,-1.43353 c 1.950157,-1.67724 5.219646,-5.447 5.219646,-11.96105 0,-9.96612 -7.73077,-16.39894 -19.695786,-16.39894 l -13.654271,0 0,-0.004 -1.554833,0 c -3.547326,0.13003 -6.385505,3.0151 -6.425196,6.58449 l 0,56.5701 6.266432,0 c 0.01588,0.004 0.02117,0 0.02646,0.004 l 15.611306,-0.004 c 13.300755,0 21.885677,-7.23987 21.885677,-18.45351 0,-6.03739 -2.774673,-11.19919 -7.438114,-13.8243"
|
||||||
|
style="fill:#FFFFFF;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||||
|
id="path4243" />
|
||||||
|
<path
|
||||||
|
d="m 526.07476,439.02527 c -5.41651,0 -10.65256,2.53663 -14.01414,6.79024 l -0.94623,1.19883 -0.74196,-1.34145 c -2.41745,-4.40889 -6.5792,-6.64762 -12.36563,-6.64762 -6.06798,0 -10.13764,3.38517 -12.028,5.39825 l -1.23677,1.33965 -0.47629,-1.76212 c -0.6901,-2.53663 -2.94826,-3.93408 -6.36963,-3.93408 l -5.4869,0 -0.0529,45.62006 12.46671,0 0,-20.13794 c 0,-1.76393 0.21856,-3.50981 0.66046,-5.33512 1.19179,-4.86566 4.46181,-10.09964 9.95929,-9.57609 3.39068,0.32499 5.04606,2.94471 5.04606,8.00538 l 0,27.04377 12.5551,0 0,-20.13794 c 0,-2.20445 0.20586,-3.85465 0.70279,-5.51024 1.0108,-4.6454 4.42477,-9.40817 9.72909,-9.40817 3.83839,0 5.25775,2.17375 5.25775,8.01258 l 0,20.37445 c 0,4.6093 2.05599,6.66932 6.66175,6.66932 l 5.86793,0 0.0106,-29.12364 c 0,-11.63431 -5.12227,-17.53812 -15.2017,-17.53812"
|
||||||
|
style="fill:#499fdd;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||||
|
id="path4245" />
|
||||||
|
<path
|
||||||
|
d="m 412.6434,469.84784 c -0.037,0.045 -5.4017,5.70161 -12.4646,5.70161 -6.43472,0 -12.93613,-3.94853 -12.93613,-12.76271 0,-7.60995 5.04078,-12.92882 12.25556,-12.92882 2.34336,0 5.00796,0.83955 5.42498,2.25139 l 0.0614,0.23835 c 0.96052,3.20107 3.86962,3.37258 4.4417,3.37258 l 6.83005,0.007 0,-5.9706 c 0,-7.87535 -10.01698,-10.73157 -16.75812,-10.73157 -14.41475,0 -24.87415,10.03645 -24.87415,23.85716 0,13.81531 10.34562,23.83731 24.6106,23.83731 12.37622,0 19.10677,-8.1353 19.16975,-8.21659 l 0.35933,-0.44051 -5.4091,-8.97305 -0.71126,0.75826"
|
||||||
|
style="fill:#499fdd;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||||
|
id="path4247" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB |
|
|
@ -1,22 +0,0 @@
|
||||||
---
|
|
||||||
interface Props {
|
|
||||||
title: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { title } = Astro.props;
|
|
||||||
---
|
|
||||||
|
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<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>{title}</title>
|
|
||||||
</head>
|
|
||||||
<body class="m-0 text-night bg-seasalt">
|
|
||||||
<slot />
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,42 +1,80 @@
|
||||||
---
|
---
|
||||||
import Layout from "../layouts/Layout.astro";
|
|
||||||
|
|
||||||
import { getImage, Image } from "astro:assets";
|
import { getImage, Image } from "astro:assets";
|
||||||
import HeroImage from "../assets/Frente 6 Bartolomeu.jpg";
|
import HeroImage from "../assets/Frente 6 Bartolomeu.jpg";
|
||||||
import Logo from "../assets/logo.png";
|
import LogoAirbnb from "../assets/logo-airbnb.svg";
|
||||||
|
import LogoBooking from "../assets/logo-booking.svg";
|
||||||
const optimizedBackgroundImage = await getImage({ src: HeroImage });
|
const optimizedBackgroundImage = await getImage({ src: HeroImage });
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="Casa Cidalisa">
|
<!doctype html>
|
||||||
<main>
|
<html lang="en">
|
||||||
<section class="sm:h-screen sm:grid grid-cols-2 bg-skyBlue">
|
<head>
|
||||||
<div class="py-8 grid grid-rows-2 items-center">
|
<meta charset="UTF-8" />
|
||||||
<h1
|
<meta name="description" content="Astro description" />
|
||||||
class="m-0 text-center justify-self-center self-center font-light text-5xl"
|
<meta name="viewport" content="width=device-width" />
|
||||||
>
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
Bem-vindo à
|
<meta name="generator" content={Astro.generator} />
|
||||||
<Image src={Logo} alt="TODO" height={100} />
|
<title>Casa Cidalisa</title>
|
||||||
</h1>
|
<style>
|
||||||
|
@font-face {
|
||||||
|
font-family: "Cinzel";
|
||||||
|
src: url("/Cinzel-VariableFont_wght.ttf");
|
||||||
|
font-weight: 100 900;
|
||||||
|
}
|
||||||
|
|
||||||
<div
|
@font-face {
|
||||||
class="bg-gray-50 self-end justify-self-center font-semibold shadow-lg px-6 py-5 rounded-3xl flex gap-8 items-center md:text-2xl w-fit border-[#ff385c] border-4"
|
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">
|
||||||
|
<nav class="flex justify-between bg-green p-5 sticky top-0">
|
||||||
|
<span
|
||||||
|
class="font-cinzel font-thin leading-none text-2xl text-seasalt"
|
||||||
>
|
>
|
||||||
<span>Reserve no Airbnb</span>
|
Casa<br />Cidalisa
|
||||||
<a
|
</span>
|
||||||
href="https://www.airbnb.com"
|
<button class="text-seasalt">MENU</button>
|
||||||
class="bg-[#ff385c] shadow hover:bg-[#ff0a37] cursor-pointer text-white px-3 py-2 rounded-xl"
|
</nav>
|
||||||
>Reserve!</a
|
<header class="h-[calc(100vh-88px)] flex flex-col">
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
<div
|
||||||
class="bg-cover h-full max-h-full bg-[30%_center]"
|
class="bg-cover flex-1 p-5 flex justify-end flex-col"
|
||||||
style={{
|
style={{
|
||||||
backgroundImage: `url(${optimizedBackgroundImage.src})`,
|
backgroundImage: `url(${optimizedBackgroundImage.src})`,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
<h1 class="text-seasalt text-[50px] font-medium leading-[60px]">
|
||||||
|
Relaxe<br />no paraíso<br />escondido<br />de São Miguel.
|
||||||
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<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"
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src={LogoAirbnb}
|
||||||
|
alt="Airbnb logo"
|
||||||
|
height={500}
|
||||||
|
class="h-8 w-auto inline"
|
||||||
|
/>
|
||||||
|
</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 inline"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main></main>
|
||||||
<div>something else</div>
|
<div>something else</div>
|
||||||
</main>
|
</body>
|
||||||
</Layout>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,10 @@ export default {
|
||||||
skyBlue: '#8AC0D0',
|
skyBlue: '#8AC0D0',
|
||||||
sunglow: '#FFCA26',
|
sunglow: '#FFCA26',
|
||||||
night: '#161618'
|
night: '#161618'
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
cinzel: 'Cinzel',
|
||||||
|
montserrat: 'Montserrat'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue