Create homepage

Photo-card layout, button, typography

src/components/atoms/Button.svelte

@@ -1,10 +1,17 @@
 <script lang="ts">
     export let text: string
-    export let tag: string
+    export let tag: string = 'button'
+    export let url: string = undefined
 </script>
 
 {#if tag === 'button'}
-    <button class="{$$props.class}">
+    <button class="button {$$props.class}">
+        <slot />
         {text}
     </button>
+{:else if tag === 'a'}
+    <a href={url} class="button {$$props.class}">
+        <slot />
+        <span>{text}</span>
+    </a>
 {/if}

src/components/molecules/PhotoCard.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import Image from '$components/atoms/Image.svelte'
+
+    export let id: string
+    export let alt: string
+</script>
+
+<div class="photo-card">
+    <Image id={id} alt={alt} width={864} height={576} />
+</div>

src/routes/index.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
     import { getContext } from 'svelte'
     // Components
-    import Metas from '$components/Metas.svelte'
+    import Button from '$components/atoms/Button.svelte'
     import Locations from '$components/organisms/Locations.svelte'
+    import Metas from '$components/Metas.svelte'
+    import PhotoCard from '$components/molecules/PhotoCard.svelte'
+
+    export let photos: any
 
     const globalData: any = getContext('global')
 </script>
@@ -13,8 +17,51 @@
     image=""
 />
 
-<h1>Houses Of</h1>
+<main class="homepage">
+    <section class="homepage__intro">
+        <h1 class="title-huge">Houses</h1>
+        <p class="text-medium">Houses Of is a project that showcases houses of character around the world.</p>
+        <Button text="Explore locations" url="#" tag="a">
+            <img src="/images/icons/globe.svg" alt="explore globe">
+        </Button>
+    </section>
 
-<Locations
+    <section class="homepage__photos">
-    locations={globalData.location}
+        <div class="homepage__collage">
-/>
+            {#each photos as { image: { id, title } }}
+                <PhotoCard id={id} alt={title} />
+            {/each}
+        </div>
+    </section>
+
+    <Locations
+        locations={globalData.location}
+    />
+</main>
+
+
+
+<script context="module" lang="ts">
+    import { fetchAPI } from '$utils/api'
+
+    export async function load ({ page, session, fetch, context }) {
+        const res = await fetchAPI(`
+            query {
+                photo (limit: 11, sort: ["-date_created"]) {
+                    image {
+                        id
+                        title
+                    }
+                }
+            }
+        `)
+
+        const { data } = res
+
+        return {
+            props: {
+                photos: data.photo,
+            }
+        }
+    }
+</script>

src/style/_typography.scss

@@ -0,0 +1,24 @@
+// TYPOGRAPHY
+
+// Titles
+.title-huge {
+    font-size: clamp(200px, 38vw, 700px);
+    font-family: $font-serif;
+    font-weight: 200;
+    letter-spacing: -0.04em;
+}
+
+// Texts
+.text-medium {
+    font-size: rem(28px);
+    font-family: $font-sans;
+    font-weight: 300;
+    line-height: 1.5;
+}
+
+.text-large {
+    font-size: rem(32px);
+    font-family: $font-sans;
+    font-weight: 400;
+    line-height: 1.5;
+}

src/style/_variables.scss

@@ -10,6 +10,7 @@ $color-tertiary: #FFE0C5;
 $color-lightpurple: #8B50B2;
 $color-gray: #666;
 $color-lightgray: #999;
+$color-shadow-brown: #7A5D44;
 
 // CSS Variables
 :root {

src/style/atoms/_button.scss

@@ -0,0 +1,18 @@
+.button {
+    display: inline-flex;
+    align-items: center;
+    background: #fff;
+    border-radius: 100vh;
+    padding: 12px 24px;
+    text-decoration: none;
+    font-size: rem(18px);
+    color: $color-text;
+    font-weight: 600;
+    border: none;
+
+    // Icon
+    img {
+        display: block;
+        margin-right: 12px;
+    }
+}

src/style/molecules/_photo-card.scss

@@ -0,0 +1,15 @@
+.photo-card {
+    picture {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        border-radius: 8px;
+        box-shadow: 0 16px 12px rgba(#000, 0.15), 0 26px 52px rgba(#000, 0.2);
+    }
+    img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+}

src/style/pages/_homepage.scss

@@ -0,0 +1,132 @@
+// Homepage
+.homepage {
+
+    // Intro Section
+    &__intro {
+        background-color: $color-tertiary;
+        color: $color-text;
+        text-align: center;
+        overflow: hidden;
+        padding-bottom: clamp(100px, 27vw, 600px);
+
+        // Title
+        h1 {
+            color: $color-secondary;
+            line-height: 1;
+            margin-top: -100px;
+        }
+        // Text
+        p {
+            max-width: 524px;
+            margin: 0 auto 32px;
+        }
+        // Button
+        .button {
+            box-shadow: 0 1px 1px rgba($color-shadow-brown, 0.05), 0 2px 2px rgba($color-shadow-brown, 0.05), 0 4px 4px rgba($color-shadow-brown, 0.05), 0 16px 16px rgba($color-shadow-brown, 0.05);
+            margin-bottom: 40px;
+        }
+    }
+
+    // Photos Collage
+    &__photos {
+        position: relative;
+        max-width: 2000px;
+        height: clamp(500px, 45vw, 900px);
+        margin: calc(-1 * clamp(300px, 20vw, 500px)) auto 0;
+    }
+    &__collage {
+        display: grid;
+        grid-template-columns: repeat(32, 1fr);
+        grid-template-rows: repeat(2, 1fr);
+        margin: 0 -140px;
+
+        .photo-card {
+            position: relative;
+            display: block;
+            grid-column-end: span 8;
+            height: clamp(133px, 18vw, 400px);
+            margin-left: auto;
+            margin-right: auto;
+            transform: rotate(var(--rotation)) translateZ(0);
+
+            // First row
+            &:nth-child(1) {
+                --rotation: -10.5deg;
+                z-index: 11;
+                grid-column-start: 2;
+                grid-row: 1;
+                top: clamp(24px, 8vw, 128px);
+            }
+            &:nth-child(2) {
+                --rotation: 3deg;
+                z-index: 7;
+                grid-column-start: 7;
+                grid-row: 1;
+                margin-left: 0;
+                top: clamp(16px, 3vw, 48px);
+            }
+            &:nth-child(3) {
+                z-index: 6;
+                grid-column-start: 13;
+                grid-row: 1;
+            }
+            &:nth-child(4) {
+                --rotation: -3deg;
+                z-index: 2;
+                grid-column-start: 19;
+                grid-row: 1;
+                top: clamp(16px, 3vw, 48px);
+            }
+            &:nth-child(5) {
+                --rotation: 10.5deg;
+                z-index: 1;
+                grid-column-start: 24;
+                grid-row: 1;
+                top: clamp(24px, 8vw, 128px);
+            }
+
+            // Second row
+            &:nth-child(6) {
+                --rotation: -5.5deg;
+                z-index: 10;
+                grid-column-start: 1;
+                grid-row: 2;
+                top: clamp(24px, 5.5vw, 132px);
+            }
+            &:nth-child(7) {
+                --rotation: -8deg;
+                grid-column-start: 5;
+                z-index: 9;
+                grid-row: 2;
+            }
+            &:nth-child(8) {
+                --rotation: 8deg;
+                z-index: 5;
+                grid-column-start: 11;
+                grid-row: 2;
+                top: calc(-1 * clamp(20px, 3vw, 48px));
+            }
+            &:nth-child(9) {
+                --rotation: 2deg;
+                z-index: 4;
+                grid-column-start: 15;
+                grid-row: 2;
+                top: calc(-1 * clamp(20px, 3vw, 48px));
+            }
+            &:nth-child(10) {
+                --rotation: 8deg;
+                z-index: 3;
+                grid-column-start: 21;
+                grid-row: 2;
+            }
+            &:nth-child(11) {
+                --rotation: 5.5deg;
+                z-index: 2;
+                grid-column-start: 25;
+                grid-row: 2;
+                top: clamp(24px, 5.5vw, 132px);
+                margin-right: 0;
+            }
+        }
+    }
+}

src/style/style.scss

@@ -17,13 +17,16 @@
 // Layout
 @import "layout/grid";
 
+// Pages
+@import "pages/homepage";
+
 
 // Atomic Design System
 // Atoms
-// @import "atoms/atom";
+@import "atoms/button";
 
 // Molecules
-// @import "molecules/molecule";
+@import "molecules/photo-card";
 
 // Organisms
 // @import "organisms/organism";