feat: landing page

Co-authored-by: Tomás Palma <[email protected]>
NIAEFEUP · Jul 29, 2024 · 77bb096 · 77bb096
1 parent 10d2a33
commit 77bb096
Show file tree

Hide file tree

Showing 23 changed files with 80 additions and 108 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/fonts/SpaceGrotesk-Bold.ttf b/public/fonts/SpaceGrotesk-Bold.ttf
diff --git a/public/fonts/SpaceGrotesk-Light.ttf b/public/fonts/SpaceGrotesk-Light.ttf
diff --git a/public/fonts/SpaceGrotesk-Medium.ttf b/public/fonts/SpaceGrotesk-Medium.ttf
diff --git a/public/fonts/SpaceGrotesk-Regular.ttf b/public/fonts/SpaceGrotesk-Regular.ttf
diff --git a/public/fonts/SpaceGrotesk-SemiBold.ttf b/public/fonts/SpaceGrotesk-SemiBold.ttf
diff --git a/public/images/enei-logo.png b/public/images/enei-logo.png
diff --git a/public/images/landing-page-background.png b/public/images/landing-page-background.png
diff --git a/resources/css/app.css b/resources/css/app.css
@@ -2,6 +2,25 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  @font-face {
+    font-family: 'Space Grotesk';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('/fonts/SpaceGrotesk-Regular.ttf') format('truetype');
+  }
+
+  @font-face {
+    font-family: 'Space Grotesk';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('/fonts/SpaceGrotesk-Bold.ttf') format('truetype');
+  }
+}
+
+/* Custom utility for hiding elements */
 [x-cloak] {
     display: none;
 }
diff --git a/resources/js/Components/Navbar.vue b/resources/js/Components/Navbar.vue
@@ -19,17 +19,17 @@ interface Route {
 type Routes = Record<string, Route>;
 
 const homeSections: Routes = {
-    aboutus: {
+    /*aboutus: {
         label: "Sobre nós",
     },
     speakers: { label: "Oradores" },
-    sponsors: { label: "Patrocínios" },
+    sponsors: { label: "Patrocínios" },*/
 };
 
 const pageRoutes: Routes = {
-    program: { label: "Programa" },
+    /*program: { label: "Programa" },
     "shop.show": { label: "Loja" },
-    team: { label: "Equipa" },
+    team: { label: "Equipa" },*/
 };
 
 const editionRoutes = [2022, 2021, 2020, 2019, 2018];
@@ -46,14 +46,14 @@ const isAdmin = checkIsAdmin(props.auth.user);
 </script>
 
 <template>
-    <nav class="flex border-b-2 border-black bg-2023-bg py-2">
+    <nav class="flex bg-enei-beige py-4">
         <Dropdown align="center" width="32" class="ml-10 max-md:hidden">
             <template #trigger>
                 <DropdownTrigger class="group">
                     <a :href="route('home')">
                         <img
-                            class="w-24 max-md:w-16"
-                            src="/images/cy-sinf-small.svg"
+                            class="w-48 max-md:w-24"
+                            src="/images/enei-logo.png"
                             alt="Stylized SINF logo"
                         />
                     </a>
@@ -72,7 +72,7 @@ const isAdmin = checkIsAdmin(props.auth.user);
         <NavLink :href="route('home')" class="md:hidden">
             <img
                 class="w-24 max-md:w-16"
-                src="/images/cy-sinf-small.svg"
+                src="/images/enei-logo.png"
                 alt="Stylized SINF logo"
             />
         </NavLink>
@@ -92,7 +92,8 @@ const isAdmin = checkIsAdmin(props.auth.user);
                     {{ label }}
                 </NavLink>
             </template>
-            <Dropdown
+            <!-- COMPETITIONS DROPDOWN -->
+            <!--<Dropdown
                 v-if="props.competitions.length > 0"
                 align="center"
                 width="32"
@@ -112,31 +113,10 @@ const isAdmin = checkIsAdmin(props.auth.user);
                         </DropdownLink>
                     </template>
                 </template>
-            </Dropdown>
+            </Dropdown>-->
         </div>
 
         <div class="mr-4 flex w-full justify-end">
-            <div class="hidden h-full gap-1 md:flex lg:gap-4">
-                <Dropdown align="center" width="20">
-                    <template #trigger>
-                        <DropdownTrigger> 2023 </DropdownTrigger>
-                    </template>
-                    <template #content>
-                        <template
-                            v-for="edition in editionRoutes"
-                            :key="edition"
-                        >
-                            <DropdownLink
-                                as="a"
-                                :href="`https://${edition}.sinf.pt`"
-                            >
-                                {{ edition }}
-                            </DropdownLink>
-                        </template>
-                    </template>
-                </Dropdown>
-            </div>
-
             <div class="ml-2 flex items-center lg:mx-4">
                 <template v-if="$page.props.auth.user">
                     <Dropdown align="right" :width="isAdmin ? '32' : '20'">
@@ -164,9 +144,10 @@ const isAdmin = checkIsAdmin(props.auth.user);
                     </Dropdown>
                 </template>
                 <template v-else>
-                    <a :href="route('login')">
-                        <OhVueIcon name="io-person" scale="1.7" fill="#025259">
-                        </OhVueIcon>
+                    <a :href="route('login')" class="bg-enei-blue text-enei-beige px-2 py-2 md:px-4 font-space-grotesk font-bold">
+                        Login
+                        <!--<OhVueIcon name="io-person" scale="1.7" fill="#025259">
+                        </OhVueIcon>-->
                     </a>
                 </template>
             </div>

diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
@@ -14,18 +14,25 @@ defineProps<Props>();
 <template>
     <div>
         <Head :title="title" />
-        <div class="sticky top-0 z-30">
-            <Navbar />
-            <Banner />
+        <div class="test">
+            <div class="sticky top-0 z-30">
+                <Navbar />
+
+            </div>
+            <main class="min-h-screen ">
+                <slot />
+            </main>
         </div>
-        <main class="min-h-screen bg-2023-bg">
-            <slot />
-        </main>
         <Footer />
     </div>
 </template>
 
 <style>
+.test{
+    background-image: url('/images/landing-page-background.png');
+    background-size: cover;
+    background-repeat: no-repeat;
+}
 html {
     scroll-behavior: smooth;
 }

diff --git a/resources/js/Pages/Home.vue b/resources/js/Pages/Home.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import AppLayout from "@/Layouts/AppLayout.vue";
-import SpeakersCarousel from "@/Components/Home/SpeakersCarousel.vue";
+/*import SpeakersCarousel from "@/Components/Home/SpeakersCarousel.vue";
 import SponsorBanner from "@/Components/Home/SponsorBanner.vue";
-import EnrollSection from "@/Components/Home/EnrollSection.vue";
+import EnrollSection from "@/Components/Home/EnrollSection.vue";*/
 import InfoPopup from "@/Components/Home/InfoPopup.vue";
 import type Edition from "@/Types/Edition";
 import type EventDay from "@/Types/EventDay";
 import type { User } from "@/Types/User";
 import { OhVueIcon } from "oh-vue-icons";
 import type SponsorTier from "@/Types/SponsorTier";
-import { default as MapComponent } from "@/Components/Home/Map.vue";
+//import { default as MapComponent } from "@/Components/Home/Map.vue";
 
 interface Props {
     edition: Edition;
@@ -60,54 +60,26 @@ const formattedDate = (
         </a>
         <!-- LOGO & DATE -->
         <section
-            class="relative flex min-h-screen flex-col content-center items-center justify-evenly gap-16 py-16"
+            class="relative flex flex-col min-h-screen md:justify-evenly gap-8 py-36 md:py-16"
         >
-            <img
-                id="svg-1"
-                class="absolute left-[7%] w-36 animate-2023-maintenance-jump opacity-50 max-ml:hidden"
-                src="images/cy-sinf.svg"
-                alt="Stylized SINF logo"
-            />
-            <img
-                id="svg-2"
-                class="absolute right-[7%] top-16 w-32 animate-2023-maintenance-jump opacity-50 max-ml:hidden"
-                src="images/rc-sinf.svg"
-                alt="Stylized SINF logo"
-            />
-            <img
-                id="svg-3"
-                class="absolute bottom-24 right-[15%] w-24 animate-2023-maintenance-jump opacity-50 max-ml:hidden"
-                src="images/oc-sinf.svg"
-                alt="Stylized SINF logo"
-            />
-
-            <div class="relative">
-                <img
-                    class="w-96 max-ml:w-[300px]"
-                    src="images/sinf logo.png"
-                    alt="Stylized SINF logo"
-                />
-                <span
-                    class="margin-0 absolute -bottom-5 right-0 text-xl font-bold text-2023-teal"
-                    >{{ edition.year }}</span
+            <div class="mx-auto md:ml-36">
+                <h1 class="font-space-grotesk font-bold text-white w-3/12 text-5xl md:text-7xl text-justify tracking-tight">
+                    <p class="whitespace-nowrap">ENCONTRO</p>
+                    <p class="whitespace-nowrap">NACIONAL DE</p>
+                    <p class="whitespace-nowrap">ESTUDANTES DE</p>
+                    <p class="whitespace-nowrap">INFORMÁTICA</p>
+                </h1>
+                <p class="text-white text-2xl md:text-4xl font-space-grotesk">
+                    PORTO 2025
+                </p>
+            </div>
+            <div class="mx-auto">
+                <p
+                    class="mr-2 p-2.5 px-8 text-lg font-bold bg-2023-bg text-enei-blue font-space-grotesk font-bold text-lg text-center w-48"
                 >
+                    BREVEMENTE
+                </p>
             </div>
-            <p
-                class="mr-2 border border-solid border-black p-2.5 px-8 text-lg font-bold text-2023-teal shadow-md shadow-2023-teal"
-            >
-                semana_de_informática
-            </p>
-            <p class="margin-0 text-2xl font-bold text-2023-teal">
-                {{
-                    days.length > 0
-                        ? formattedDate(
-                              $d(new Date(days[0].date), "long"),
-                              $t("general.to"),
-                              $d(new Date(days[days.length - 1].date), "long"),
-                          )
-                        : ""
-                }}
-            </p>
         </section>
         <!-- ABOUT US -->
         <section
@@ -127,7 +99,7 @@ const formattedDate = (
             </p>
         </section>
         <!-- GENERAL INFO -->
-        <section class="relative flex flex-col py-24 max-xs:items-center">
+        <!--<section class="relative flex flex-col py-24 max-xs:items-center">
             <h2
                 class="absolute left-[calc(10%+70px)] top-14 w-fit border border-solid border-black bg-2023-orange p-2 text-2xl font-bold text-white shadow-md shadow-2023-teal-dark max-xs:relative max-xs:left-0 max-xs:top-6"
             >
@@ -165,9 +137,9 @@ const formattedDate = (
                     Muitas novidades para ti! Está quase...
                 </div>
             </template>
-        </section>
+        </section>-->
         <!-- SPEAKERS -->
-        <section
+        <!--<section
             id="speakers"
             class="grid-rows-[repeat(3, 1fr)] my-10 mb-5 grid grid-cols-1 gap-10"
         >
@@ -186,9 +158,9 @@ const formattedDate = (
                     Em breve...
                 </p>
             </template>
-        </section>
+        </section>-_>
         <!-- SPONSORS -->
-        <section id="sponsors" class="flex flex-col gap-10 px-20 py-20">
+        <!--<section id="sponsors" class="flex flex-col gap-10 px-20 py-20">
             <p
                 class="mr-[5px] flex w-min place-self-center border border-solid border-black bg-2023-teal-dark p-3 text-2xl font-bold text-white shadow shadow-2023-bg"
             >
@@ -202,26 +174,16 @@ const formattedDate = (
                 :color="tier.color"
                 :idx="idx"
             ></SponsorBanner>
-        </section>
+        </section>-->
         <!-- CALL TO ACTION -->
-        <EnrollSection v-if="canEnroll" id="enroll-wrapper" />
+        <!--<EnrollSection v-if="canEnroll" id="enroll-wrapper" />-->
         <!-- MAP -->
-        <section class="bg-2023-orange p-10">
+        <!--<section class="bg-2023-orange p-10">
             <MapComponent />
-        </section>
+        </section>-->
     </AppLayout>
 </template>
 
 <style>
-#svg-1 {
-    animation-delay: -0.5s;
-}
-
-#svg-2 {
-    animation-delay: -1s;
-}
 
-#svg-3 {
-    animation-delay: -0.8s;
-}
 </style>
diff --git a/storage/app/.gitignore b/storage/app/.gitignore
diff --git a/storage/app/public/.gitignore b/storage/app/public/.gitignore
diff --git a/storage/debugbar/.gitignore b/storage/debugbar/.gitignore
diff --git a/storage/framework/.gitignore b/storage/framework/.gitignore
diff --git a/storage/framework/cache/.gitignore b/storage/framework/cache/.gitignore
diff --git a/storage/framework/cache/data/.gitignore b/storage/framework/cache/data/.gitignore
diff --git a/storage/framework/sessions/.gitignore b/storage/framework/sessions/.gitignore
diff --git a/storage/framework/testing/.gitignore b/storage/framework/testing/.gitignore
diff --git a/storage/framework/views/.gitignore b/storage/framework/views/.gitignore
diff --git a/storage/logs/.gitignore b/storage/logs/.gitignore
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -19,6 +19,7 @@ export default {
         extend: {
             fontFamily: {
                 sans: ["Figtree", ...defaultTheme.fontFamily.sans],
+                'space-grotesk': ['Space Grotesk', 'sans-serif'],
             },
             colors: {
                 "2023-bg": "rgb(248, 245, 231)",
@@ -27,6 +28,8 @@ export default {
                 "2023-teal": "rgb(0, 113, 114)",
                 "2023-teal-dark": "rgb(2, 82, 89)",
                 "2023-orange": "rgb(242, 147, 37)",
+                "enei-blue": "#0B4F6C",
+                "enei-beige": "#dcd7c2"
             },
             boxShadow: {
                 sm: "2px 2px 0 -1px var(--tw-shadow-color, currentColor), 2px 2px 0 0 black",