#2 - homepage frontend

package.json

@@ -10,12 +10,12 @@
         "tsc": "vue-tsc"
     },
     "dependencies": {
+        "@heroicons/vue": "^2.1.5",
         "@inertiajs/vue3": "^1.0.14",
         "@tailwindcss/forms": "^0.5.7",
         "@tailwindcss/typography": "^0.5.10",
         "laravel-vite-plugin": "^1.0.2",
         "lodash": "^4.17.21",
-        "tailwindcss": "^3.4.1",
         "vue": "^3.4.21"
     },
     "devDependencies": {
@@ -28,6 +28,7 @@
         "eslint-plugin-tailwindcss": "^3.15.1",
         "eslint-plugin-vue": "^9.23.0",
         "postcss": "^8.4.31",
+        "tailwindcss": "^3.4.8",
         "vite": "^5.2.6",
         "vue-tsc": "^2.0.7"
     }

resources/css/app.css

@@ -1,3 +1,13 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}

resources/js/Pages/Home.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { ref, provide } from 'vue'
+import Footer from '@/components/Home/Footer.vue'
+import RegisterBanner from '@/components/Home/RegisterBanner.vue'
+import GeneralSection from '@/components/Home/GeneralSection.vue'
+import AuthSection from '@/components/Home/AuthSection.vue'
+import BackgroundEffect from '@/components/Home/BackgroundEffect.vue'
+
+const isLogin = ref(null)
+provide('isLoginRef', isLogin)
+</script>
+
+<template>
+  <BackgroundEffect />
+  <RegisterBanner :is-login="isLogin" />
+  <div class="flex flex-col lg:flex-row lg:justify-evenly lg:gap-x-[5vw] lg:px-[5vw]">
+    <GeneralSection />
+    <AuthSection ref="isLogin" />
+  </div>
+  <Footer />
+</template>

resources/js/components/Common/AuthButton.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+
+const props = defineProps<{isLogin: boolean}>()
+
+const emit = defineEmits<(e: 'update:isLogin', value: boolean) => void>()
+
+const handleCheckboxChange = () => {
+  emit('update:isLogin', !props.isLogin)
+}
+</script>
+
+<template>
+  <label class="flex p-2 relative w-full cursor-pointer border-2 border-primary/30 rounded-xl  bg-white/30">
+    <input type="checkbox" class="sr-only" @change="handleCheckboxChange">
+    <span 
+      :class="{ 'translate-x-full' : props.isLogin}"
+      class="left-2 w-[calc(50%-.5rem)] absolute h-[calc(100%-1rem)] rounded-md bg-primary duration-200"
+    />
+    <span :class="{ 'text-white': !props.isLogin}" class="z-10 w-full text-center duration-200 py-3 text-primary font-bold">Sign Up</span>
+    <span :class="{ 'text-white': props.isLogin }" class="z-10 w-full text-center duration-200 py-3 text-primary font-bold">Sign In</span>
+  </label>
+</template>

resources/js/components/Common/Checkbox.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="inline-flex items-center">
+    <label class="relative flex items-center rounded-full cursor-pointer" htmlFor="checkbox">
+      <input 
+        id="checkbox"
+        type="checkbox"
+        class="before:content[''] peer relative size-5 cursor-pointer appearance-none rounded-md border border-blue-gray-200 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:size-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity checked:border-primary checked:bg-primary checked:before:bg-primary hover:before:opacity-10" checked
+      >
+      <span
+        class="absolute text-white transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" viewBox="0 0 20 20" fill="currentColor"
+             stroke="currentColor" stroke-width="1"
+        >
+          <path fill-rule="evenodd"
+                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                clip-rule="evenodd"
+          />
+        </svg>
+      </span>
+    </label>
+  </div>
+</template>

resources/js/components/Home/AuthSection.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ref, defineExpose } from 'vue'
+import AuthButton from '@/components/Common/AuthButton.vue'
+import RegisterForm from '@/components/Home/RegisterForm.vue'
+import LoginForm from '@/components/Home/LoginForm.vue'
+const isLogin = ref(false)
+defineExpose({ isLogin })
+</script>
+
+
+<template>
+  <section class="h-screen w-full flex flex-col items-center overflow-hidden backdrop-blur bg-white/30 lg:backdrop-blur-none lg:bg-transparent">
+    <div class="w-full flex flex-col gap-10 max-w-lg px-5 pt-20">
+      <AuthButton v-model:is-login="isLogin" />
+      <div class="grid">
+        <Transition :name="isLogin ? 'slide-right' : 'slide-left'">
+          <LoginForm v-if="isLogin" key="on" />
+          <RegisterForm v-else key="off" />
+        </Transition>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style>
+.slide-left-enter-active,
+.slide-right-enter-active,
+.slide-left-leave-active,
+.slide-right-leave-active {
+  transition: all .3s;
+  transition-timing-function: cubic-bezier(0,.5,.5,1);
+}
+
+.slide-left-enter-from,
+.slide-right-leave-to {
+    transform: translateX(-100%);
+    opacity: 0;
+}
+
+.slide-left-leave-to,
+.slide-right-enter-from {
+    transform: translateX(100%);
+    opacity: 0;
+}
+</style>

resources/js/components/Home/BackgroundEffect.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+const margin = ref(0)
+function setBannerVisibility() {
+  const scrollHeight = window.document.documentElement.scrollHeight / 2
+  margin.value = window.scrollY / scrollHeight * 10
+}
+onMounted(() => window.addEventListener('scroll', setBannerVisibility))
+onUnmounted(() => window.removeEventListener('scroll', setBannerVisibility))
+</script>
+
+<template>
+  <div :style="{marginTop: `${margin}rem`}" class="fixed blur-2xl size-7/12 -z-10">
+    <div class="
+      size-full
+      bg-gradient-to-r
+      from-[#ff80b5]
+      to-primary-600
+      opacity-30
+    " style="
+      clip-path: polygon(
+        75% 42%, 98% 74%, 100% 35%, 93% 0%, 86% 0%, 75% 27%, 59% 55%, 50% 57%, 47% 44%, 48% 17%, 25% 54%, 0% 28%, 12% 75%, 25% 54%, 67% 100%, 75% 42%
+      );"
+    />
+  </div>
+  <div class="inset-0 top-16  h-[22rem] lg:top-0 bg-white/30 absolute -z-10" />
+</template>

resources/js/components/Home/Footer.vue

@@ -0,0 +1,21 @@
+<template>
+  <footer class="bg-white shadow dark:bg-primary-950">
+    <div class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-between">
+      <span class="text-sm text-gray-500 sm:text-center dark:text-gray-200">© All rights reserved</span>
+      <ul class="flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-200 sm:mt-0">
+        <li>
+          <a href="#" class="hover:underline me-4 md:me-6">About</a>
+        </li>
+        <li>
+          <a href="#" class="hover:underline me-4 md:me-6">Privacy Policy</a>
+        </li>
+        <li>
+          <a href="#" class="hover:underline me-4 md:me-6">Licensing</a>
+        </li>
+        <li>
+          <a href="#" class="hover:underline">Contact</a>
+        </li>
+      </ul>
+    </div>
+  </footer>
+</template>

resources/js/components/Home/GeneralSection.vue

@@ -0,0 +1,29 @@
+
+<script lang="ts" setup>
+import InformationButton from '@/components/Home/InformationButton.vue'
+</script>
+
+<template>
+  <section class="w-full h-[calc(100vh-4rem)] lg:h-screen flex flex-col overflow-hidden">
+    <div data-name="left" class="flex flex-col justify-center w-full gap-10 p-10 pb-16">
+      <img class="h-40 object-contain" src="@/../assets/header-logo.png" alt="header logo">
+      <InformationButton />
+    </div>
+
+    <div data-name="right" class="flex flex-col size-full justify-center">
+      <h1 class="text-center text-[1.5rem] font-bold">SPONSORS</h1>
+      <div>
+        <div class="mx-auto max-w-7xl px-6 lg:px-8">
+          <h2 class="text-center text-lg font-semibold leading-8 text-gray-900">Trusted by the world’s most innovative teams</h2>
+          <div class="mx-auto mt-10 grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-10 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10">
+            <img class="cursor-pointer duration-200 hover:scale-110 col-span-2 max-h-12 w-full object-contain" src="https://tailwindui.com/img/logos/158x48/transistor-logo-gray-900.svg" alt="Transistor" width="158" height="48">
+            <img class="cursor-pointer duration-200 hover:scale-110 col-span-2 max-h-12 w-full object-contain" src="https://tailwindui.com/img/logos/158x48/reform-logo-gray-900.svg" alt="Reform" width="158" height="48">
+            <img class="cursor-pointer duration-200 hover:scale-110 col-span-2 max-h-12 w-full object-contain" src="https://tailwindui.com/img/logos/158x48/tuple-logo-gray-900.svg" alt="Tuple" width="158" height="48">
+            <img class="cursor-pointer duration-200 hover:scale-110 col-span-2 max-h-12 w-full object-contain sm:col-start-2" src="https://tailwindui.com/img/logos/158x48/savvycal-logo-gray-900.svg" alt="SavvyCal" width="158" height="48">
+            <img class="cursor-pointer duration-200 hover:scale-110 col-span-2 col-start-2 max-h-12 w-full object-contain sm:col-start-auto" src="https://tailwindui.com/img/logos/158x48/statamic-logo-gray-900.svg" alt="Statamic" width="158" height="48">
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

resources/js/components/Home/InformationButton.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import InformationModalWindow from '@/components/Home/InformationModalWindow.vue'
+import { ref } from 'vue'
+
+const isInformationVisible = ref(false)
+const setVisible = () => {
+  isInformationVisible.value = true
+}
+</script>
+
+
+<template>
+  <div class="flex h-12 justify-center items-center">
+    <button class="text-primary text-[1.5rem] font-bold text-center hover:text-[1.75rem] duration-200" @click="setVisible">INFORMATION</button>
+  </div>
+  <InformationModalWindow v-model:is-visible="isInformationVisible" />
+</template>

resources/js/components/Home/InformationModalWindow.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const props = defineProps<{ isVisible: boolean }>()
+const emit = defineEmits<(e: 'update:isVisible', value: boolean) => void>()
+function setHidden() {
+  emit('update:isVisible', false)
+}
+</script>
+
+<template>
+  <Transition>
+    <div v-show="props.isVisible"
+         class="inset-0 h-screen w-full bg-black/15 backdrop-blur-md fixed z-20 p-5 flex justify-center items-center" @click="setHidden"
+    >
+      <div class="bg-white/85 backdrop-blur-md rounded-xl w-full flex flex-col max-w-2xl" @click.stop>
+        <h1 class="p-5 font-bold text-xl">Title</h1>
+        <hr>
+        <p class="p-5 text-[1.1rem]">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit.
+          Esse corrupti provident voluptas ducimus neque libero reprehenderit eos voluptate quisquam minus.
+          Dolorum quos animi fugit blanditiis repellendus voluptas sequi ex ea.
+        </p>
+        <hr>
+        <div class="flex justify-end p-5">
+          <button class="font-bold text-primary" @click="setHidden">Return</button>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>