Merge branch 'main' into 1950-Search-bar-UI

Author: gurjeetsinghvirdee

src/routes/(init)/+layout.svelte

@@ -9,14 +9,19 @@
     }
 
     const { children }: Props = $props();
+    const showLockUp = $state(
+        page.route.id?.includes('/init/tickets') &&
+            !page.route.id?.includes('/init/tickets/[username]') &&
+            !isStarted
+    );
 </script>
 
 <Main>
     <div
         class="flex min-h-screen flex-col bg-[url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDI1MCA1MDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHk9IjI1MSIgd2lkdGg9IjQiIGhlaWdodD0iNCIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eT0iMC4yNCIvPgo8cmVjdCB4PSIxMjAiIHk9IjQ5NiIgd2lkdGg9IjQiIGhlaWdodD0iNCIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eT0iMC4yNCIvPgo8L3N2Zz4K)] bg-[size:calc(100vw_/_11)] bg-[position:center_top]"
     >
         {@render children()}
-        {#if page.url.pathname.includes('/init/tickets') && !isStarted}
+        {#if showLockUp}
             <div class="hidden overflow-y-hidden md:block">
                 <Lockup class="-mb-[16rem] w-full lg:-mb-[24rem]" />
             </div>

src/routes/(init)/init/(assets)/init-giveaway.png

@@ -1,6 +1,6 @@
 <script lang="ts" module>
     export type DayProps = {
-        illustration: string;
+        illustration: string | object;
         release: Date;
         title: string;
         description: string;

src/routes/(init)/init/(components)/day.svelte

@@ -1,21 +1,37 @@
 <script lang="ts">
     import TicketCard from '../tickets/(components)/ticket-card.svelte';
     import Avatar from '../(assets)/avatar.png';
+    import InitGiveaway from '../(assets)/init-giveaway.png';
     import { classNames } from '$lib/utils/classnames';
     import { Button } from '$lib/components/ui';
+    import { Media } from '$lib/UI';
 </script>
 
-<div class="container grid min-h-[65vh] w-full grid-cols-1 place-items-center py-20 md:grid-cols-2">
-    <div>
-        <h2 class="text-title text-primary font-aeonik-pro mb-4">
-            Get a ticket and enter<br /> our Init giveaway
-        </h2>
-        <p class="text-secondary text-body mb-8">
-            Create, customize and share your ticket to get the chance to win exclusive Init swag.
-        </p>
-        <Button href="/init/tickets/customize" variant="secondary">Claim your ticket</Button>
+<div
+    class="container grid min-h-[65vh] w-full grid-cols-1 place-items-center py-5 md:grid-cols-2 md:py-20"
+>
+    <div class="flex flex-col gap-12">
+        <Media
+            src={InitGiveaway}
+            alt="Init giveaway"
+            class="web-media md:max-h-[304px] md:max-w-[467px]"
+        />
+
+        <div>
+            <h2 class="text-title text-primary font-aeonik-pro mb-4">
+                Get a ticket and<br />enter our giveaway
+            </h2>
+            <p class="text-secondary text-body mb-6">
+                Create, customize and share your ticket to get the chance to win exclusive Init
+                swag.
+            </p>
+            <Button href="/init/tickets/customize" variant="secondary">Claim your ticket</Button>
+        </div>
     </div>
-    <div class="relative flex w-full items-center">
+
+    <div
+        class="relative me-8 hidden w-full items-center gap-4 md:me-0 md:flex md:scale-[1.073] md:gap-0"
+    >
         <div style:transform="rotate(4deg)" class="absolute right-40 z-0">
             <TicketCard
                 $id="1"

src/routes/(init)/init/(components)/giveaway.svelte

@@ -20,6 +20,7 @@
     import Hero from './(components)/hero.svelte';
     import Giveaway from './(components)/giveaway.svelte';
     import EventCarousel from './(components)/event-carousel.svelte';
+    import { FooterNav, MainFooter } from '$lib/components';
 
     const title = 'Init - Appwrite';
     const description = 'The start of something new.';
@@ -182,5 +183,43 @@
     </div>
 
     <EventCarousel />
-    <Giveaway />
 {/if}
+
+<Giveaway />
+
+<div class="footer-section extended-borders-footer container">
+    <FooterNav />
+
+    <MainFooter />
+</div>
+
+<style lang="scss">
+    .extended-borders-footer {
+        z-index: 0;
+        position: relative;
+    }
+    .extended-borders-footer::before {
+        content: '';
+        position: absolute;
+        border-top: 2px dashed var(--color-offset);
+        pointer-events: none;
+        z-index: -1;
+        height: 0;
+
+        @media (min-width: 768px) {
+            left: -100%;
+            right: -100%;
+        }
+    }
+
+    .footer-section {
+        & :global(.web-footer-nav) {
+            border-block-start: none;
+            margin-block-start: unset;
+
+            @media (max-width: 768px) {
+                border-block-start: solid 0.0625rem hsl(var(--web-color-smooth));
+            }
+        }
+    }
+</style>