Index Page

package.json

@@ -19,13 +19,15 @@
         "@typescript-eslint/eslint-plugin": "^6.5.0",
         "@typescript-eslint/parser": "^6.5.0",
         "@vitejs/plugin-vue": "^4.3.4",
+        "@vue-leaflet/vue-leaflet": "^0.10.1",
         "@vue/tsconfig": "^0.4.0",
         "autoprefixer": "^10.4.15",
         "axios": "^1.5.0",
         "eslint": "^8.48.0",
         "eslint-config-prettier": "^9.0.0",
         "eslint-plugin-vue": "^9.17.0",
         "laravel-vite-plugin": "^0.8.0",
+        "leaflet": "^1.9.4",
         "oh-vue-icons": "^1.0.0-rc3",
         "postcss": "^8.4.28",
         "prettier": "^3.0.3",
@@ -36,5 +38,10 @@
         "vue": "^3.3.4",
         "vue-tsc": "^1.8.8",
         "ziggy-js": "^1.6.2"
+    },
+    "dependencies": {
+        "oh-vue-icons": "^1.0.0-rc3",
+        "vue-final-modal": "^4.4.5",
+        "vue3-carousel": "^0.3.1"
     }
 }

resources/js/Components/Footer.vue

@@ -62,7 +62,11 @@ const contacts = [
             </div>
         </section>
         <div class="container mx-auto text-center font-bold text-2023-teal">
-            <p>Copyright &copy; 2023 niaefeup, todos os direitos reservados</p>
+            <p>
+                Copyright &copy; 2023
+                <a href="https://ni.fe.up.pt/">NIAEFEUP</a>, todos os direitos
+                reservados
+            </p>
         </div>
     </footer>
 </template>

resources/js/Components/Home/Map.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { LMap, LTileLayer, LMarker, LIcon } from "@vue-leaflet/vue-leaflet";
+import "leaflet/dist/leaflet.css";
+
+const zoom = 17;
+const center = [41.17835293313974, -8.595830311142494];
+const url = "https://tile.openstreetmap.de/{z}/{x}/{y}.png";
+const attribution =
+    '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
+</script>
+
+<template>
+    <div
+        class="align-center flex h-full w-full justify-center overflow-hidden rounded"
+    >
+        <LMap
+            v-model:zoom="zoom"
+            class="cursor-auto border border-solid border-black"
+            :minZoom="4"
+            :maxZoom="18"
+            :zoomAnimation="true"
+            :center="center"
+            :use-global-leaflet="false"
+            style="height: 400px; width: 800px"
+        >
+            <LTileLayer
+                :url="url"
+                :attribution="attribution"
+                layer-type="base"
+            />
+            <LMarker :lat-lng="[41.17835293313974, -8.595830311142494]">
+                <LIcon>
+                    <v-icon
+                        class="absolute -bottom-[9px] -right-[14px]"
+                        name="io-location-sharp"
+                        fill="#d94f04"
+                        scale="2"
+                    ></v-icon>
+                </LIcon>
+            </LMarker>
+        </LMap>
+    </div>
+</template>

resources/js/Components/Home/SpeakerSlide.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts"></script>
+
+<template>
+    <div class="transition-all duration-500">
+        <img
+            src="https://picsum.photos/200"
+            class="w-[200px] rounded-full border-2 border-solid border-black object-cover"
+            alt=""
+        />
+        <p class="py-4 text-lg text-2023-teal-dark">John Doe</p>
+    </div>
+</template>
+
+<style>
+.carousel__slide--active div {
+    transform: scale(1.1);
+}
+.carousel__slide--active {
+    z-index: 99;
+}
+</style>

resources/js/Components/Home/SpeakersCarousel.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { Carousel, Slide } from "vue3-carousel";
+import "vue3-carousel/dist/carousel.css";
+import SpeakerSlide from "./SpeakerSlide.vue";
+
+const carousel = ref<typeof Carousel | null>(null);
+
+const breakpoints = {
+    1024: {
+        itemsToShow: 4,
+    },
+};
+
+const next = () => {
+    carousel.value?.next();
+};
+
+const prev = () => {
+    carousel.value?.prev();
+};
+
+const wrapperHeight = () => {
+    const wrapperHeight: number | undefined = document.querySelector(
+        "li.carousel__slide--next > div",
+    )?.scrollHeight;
+    const track: HTMLElement | null =
+        document.querySelector("ol.carousel__track");
+
+    if (track)
+        track.style.height = wrapperHeight ? wrapperHeight + 80 + "px" : "100%";
+};
+
+onMounted(async () => {
+    window.addEventListener("resize", wrapperHeight);
+
+    await new Promise((r) => setTimeout(r, 500)).then(wrapperHeight);
+});
+</script>
+
+<template>
+    <Carousel
+        ref="carousel"
+        snap-align="center"
+        :autoplay="0"
+        :items-to-show="2"
+        :wrap-around="true"
+        :breakpoints="breakpoints"
+    >
+        <Slide v-for="slide in 10" :key="slide">
+            <SpeakerSlide />
+        </Slide>
+    </Carousel>
+    <div class="align-center flex justify-center gap-3">
+        <button @click="prev">
+            <v-icon name="fa-arrow-left" fill="#007172" scale="2"></v-icon>
+        </button>
+        <button @click="next">
+            <v-icon name="fa-arrow-right" fill="#007172" scale="2"></v-icon>
+        </button>
+    </div>
+</template>
+
+<style>
+.carousel__slide--active {
+    opacity: 1;
+    transform: scale(1.1);
+}
+</style>

resources/js/Components/Home/Sponsor.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { VueFinalModal } from "vue-final-modal";
+import "vue-final-modal/style.css";
+
+const options = ref({
+    modelValue: false,
+});
+
+defineProps<{
+    src: string;
+    description: number;
+    title: number;
+    url: string;
+    position?: string;
+}>();
+</script>
+
+<template>
+    <div class="ml-auto mr-auto cursor-pointer" :style="position">
+        <img
+            class="ml-auto mr-auto"
+            :src="src"
+            :alt="title + ''"
+            @click="options.modelValue = true"
+        />
+        <VueFinalModal
+            v-model="options.modelValue"
+            class="flex items-center justify-center"
+            content-class="max-w-xl mx-4 p-4 bg-2023-bg border border-black border-solid flex relative justify-center felx-col"
+        >
+            <img
+                :src="src"
+                class="absolute -top-20 w-48 border border-solid border-black shadow-xl shadow-2023-teal-dark"
+            />
+            <div
+                class="flex w-full flex-col items-center gap-4 pt-20 text-2023-red"
+            >
+                <a
+                    class="text-xl font-bold underline"
+                    :href="url"
+                    target="_blank"
+                >
+                    Title: {{ title }}
+                    <v-icon
+                        class="ml-1"
+                        name="io-open"
+                        fill="#d94f04"
+                        scale="1.3"
+                    ></v-icon>
+                </a>
+                <p class="text-justify">
+                    {{ description }}
+                    <br />
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                    Natus adipisci voluptatem quod reprehenderit commodi nostrum
+                    ipsum eius eligendi qui vitae rerum dicta iure, officiis
+                    reiciendis totam veniam animi quidem laborum.
+                </p>
+            </div>
+        </VueFinalModal>
+    </div>
+</template>

resources/js/Components/Home/SponsorBanner.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { Carousel, Slide } from "vue3-carousel";
+import Sponsor from "./Sponsor.vue";
+
+const carousel = ref<typeof Carousel | null>(null);
+
+const shadowColor: Record<string, string> = {
+    orange: "shadow-2023-orange",
+    "teal-dark": "shadow-2023-teal-dark",
+    "red-dark": "shadow-2023-red-dark",
+};
+
+const textColor: Record<string, string> = {
+    orange: "text-2023-orange",
+    "teal-dark": "text-2023-teal-dark",
+    "red-dark": "text-2023-red-dark",
+};
+
+const next = () => {
+    carousel.value?.next();
+};
+
+const prev = () => {
+    carousel.value?.prev();
+};
+
+const props = defineProps<{
+    sponsors: number;
+    color: string;
+    title: string;
+}>();
+
+const numCols: number =
+    props.sponsors > 3
+        ? props.sponsors % 2
+            ? Math.ceil(props.sponsors / 2) * 2
+            : Math.ceil(props.sponsors / 2)
+        : props.sponsors;
+const numRows: number = props.sponsors > 3 ? 2 : 1;
+
+const calculateSponsorPosition = (sponsor: number) => {
+    const span = props.sponsors > 3 ? (props.sponsors % 2 ? 2 : 1) : 1;
+    const col =
+        props.sponsors % 2 ? sponsor : sponsor % Math.ceil(props.sponsors / 2);
+    const row = props.sponsors > 3 ? (sponsor % 2 ? 1 : 2) : 1;
+    console.log(`grid-area: ${col} ${col + span} ${row} ${row + 1};`);
+
+    return `grid-area: ${row} / ${col} / ${row + 1} / ${col + span} ;`;
+};
+</script>
+
+<template>
+    <div>
+        <p class="text-2xl font-bold" :class="textColor[color]">{{ title }}</p>
+        <div
+            class="grid justify-around gap-4 border border-solid border-black p-10 shadow-2xl max-lg:hidden"
+            :class="shadowColor[color]"
+            :style="`grid-template-columns: repeat(${numCols}, 1fr); grid-template-rows: repeat(${numRows}, 1fr);`"
+        >
+            <Sponsor
+                v-for="sponsor in sponsors"
+                :key="sponsor"
+                :position="calculateSponsorPosition(sponsor)"
+                src="https://picsum.photos/300/200"
+                :url="'https://google.com'"
+                :title="sponsor"
+                :description="sponsor"
+            ></Sponsor>
+        </div>
+        <div
+            class="relative border border-solid border-black p-10 shadow-2xl lg:hidden"
+            :class="shadowColor[color]"
+        >
+            <Carousel ref="carousel" :wrap-around="true" :autoplay="2000">
+                <Slide v-for="sponsor in sponsors" :key="sponsor">
+                    <Sponsor
+                        src="https://picsum.photos/300/200"
+                        :url="'https://google.com'"
+                        :title="sponsor"
+                        :description="sponsor"
+                    ></Sponsor>
+                </Slide>
+            </Carousel>
+            <button class="absolute left-2 top-[calc(50%-20px)]" @click="prev">
+                <v-icon name="fa-arrow-left" fill="#f29325" scale="2"></v-icon>
+            </button>
+            <button class="absolute right-2 top-[calc(50%-20px)]" @click="next">
+                <v-icon name="fa-arrow-right" fill="#f29325" scale="2"></v-icon>
+            </button>
+        </div>
+    </div>
+</template>
+
+<style>
+.vfm__overlay {
+    background-color: rgba(248, 245, 231, 0.5);
+}
+</style>

resources/js/Layouts/AppLayout.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { Head } from "@inertiajs/vue3";
 import Banner from "@/Components/Banner.vue";
+import Footer from "../Components/Footer.vue";
 
 interface Props {
     title: string;
@@ -27,9 +28,10 @@ defineProps<Props>();
             </header>
 
             <!-- Page Content -->
-            <main>
+            <main class="bg-2023-bg">
                 <slot />
             </main>
+            <Footer></Footer>
         </div>
     </div>
 </template>