#2 - homepage frontend

package.json

@@ -10,12 +10,13 @@
         "tsc": "vue-tsc"
     },
     "dependencies": {
+        "@heroicons/vue": "^2.1.5",
         "@inertiajs/vue3": "^1.0.14",
         "@tailwindcss/forms": "^0.5.7",
         "@tailwindcss/typography": "^0.5.10",
+        "tailwindcss": "^3.4.8",
         "laravel-vite-plugin": "^1.0.2",
         "lodash": "^4.17.21",
-        "tailwindcss": "^3.4.1",
         "vue": "^3.4.21"
     },
     "devDependencies": {

readme.md

@@ -1,6 +1,7 @@
 ## @blumilksoftware/interns2024b
 ### About application
-> placeholder
+![desktop-home](screenshots/desktop/homepage.png)
+![mobile-home](screenshots/mobile/homepage.png)
 
 ### Local development
 ```

resources/css/app.css

@@ -1,3 +1,41 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.3s ease;
+}
+html {
+  overflow-y: scroll;
+}
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  position: fixed;
+}
+
+::-webkit-scrollbar-track {
+  background: #ffffff4c; 
+  position: fixed;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #262c8926;
+  border-radius: 1rem;
+  border: 2px solid transparent;
+  background-clip: content-box;
+  position: fixed;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #262c894c;
+  border: 2px solid transparent;
+  background-clip: content-box;
+  position: fixed;
+}

resources/js/Pages/Home.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { ref, provide } from 'vue'
+import Footer from '@/components/Home/Footer.vue'
+import AuthBanner from '@/components/Home/AuthBanner.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>
+  <div class="flex flex-col h-screen">
+    <BackgroundEffect />
+    <AuthBanner :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 />
+  </div>
+</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">Rejestracja</span>
+    <span :class="{ 'text-white': props.isLogin }" class="z-10 w-full text-center duration-200 py-3 text-primary font-bold">Logowanie</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/Common/Searchbar.vue

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import {computed, ref, defineProps} from 'vue'
+const isSearchFocused = ref(false)
+const searchQuery = ref('')
+const props = defineProps({options: {type: Object, default:()=>{}}})
+const filteredSchools: any = computed(
+  () => {
+    return props.options.filter(
+      (obj:any) => obj.option.toString().includes(searchQuery.value),
+    )
+  },
+)
+const selectedOption = ref('')
+
+const onOptionClick = (obj:any)=>{
+  selectedOption.value = obj.option
+  isSearchFocused.value = false
+}
+</script>
+
+<template>
+  <div :class="{'scale-y-100 max-h-80': isSearchFocused}" class="overflow-hidden duration-200 max-h-12 flex flex-col mt-2 bg-white/30 placeholder:text-gray-400 rounded-[.5rem] ring-2 ring-primary/30 ring-inset">
+    <input
+      :value="isSearchFocused ? searchQuery : selectedOption"
+      class="outline-none focus:duration-200 focus:ring-inset focus:ring focus:ring-primary rounded-[.5rem] p-3 bg-transparent w-full text-gray-900"
+      required name="search-schools" :class="{'cursor-pointer' : !isSearchFocused}"
+      type="text"
+      :placeholder="selectedOption"
+      @input="(e:any)=>searchQuery=e.target.value"
+      @focus="isSearchFocused=true"
+      @blur="isSearchFocused=false"
+    >
+    <Transition>
+      <div v-show="true" class="m-0.5 mt-0 py-2 overflow-auto">
+        <div v-if="filteredSchools.length>0">
+          <span v-for="obj in filteredSchools"
+                :key="obj.id"
+                class="cursor-pointer block px-4 py-2 hover:bg-primary/10 text-[0.9rem]"
+                @mousedown="onOptionClick(obj)"
+          >{{ obj.option }}</span>
+        </div>
+        <span v-else class="block px-4 py-2 text-sm">
+          Nie znaleziono szkoły
+        </span>
+      </div>
+    </Transition>
+  </div>
+</template>

resources/js/components/Home/AuthBanner.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, type Ref } from 'vue'
+import { inject } from 'vue'
+const isLoginRef: Ref<any, any> | undefined = inject('isLoginRef')
+
+
+// const props = defineProps(['isLogin'])
+
+// function gotoAuthSection() {
+// props.authForm.authForm
+// authFormRef.value.authForm
+
+// props.authForm.authForm.value.authForm.scrollIntoView({
+//   behavior: 'smooth',
+//   block: 'center', 
+// })
+
+// }
+
+const isHidden = ref(false)
+
+function setBannerVisibility() {
+  isHidden.value = window.scrollY / 100 >= 5
+}
+onMounted(() => window.addEventListener('scroll', setBannerVisibility))
+onUnmounted(() => window.removeEventListener('scroll', setBannerVisibility))
+
+function gotoAuthSection() {
+  window.scrollTo({
+    top: window.innerHeight,
+    behavior: 'smooth',
+  })
+}
+
+function gotoRegisterSection() {
+  gotoAuthSection()
+  if (isLoginRef)
+    isLoginRef.value.isLogin = false
+}
+
+function gotoLoginSection() {
+  gotoAuthSection()
+  if (isLoginRef)
+    isLoginRef.value.isLogin = true
+}
+
+</script>
+
+<template>
+  <div>
+    <div class="h-16 lg:hidden" />
+    <div :class="{ '-translate-y-full': isHidden }"
+         class="lg:hidden top-0 duration-200 justify-evenly z-10 backdrop-blur-md bg-white/30 lg:bg-white fixed w-full flex items-center gap-x-6 px-6 py-2.5"
+    >
+      <div class="justify-center flex-1 hidden lg:flex" />
+      <div class="hidden lg:justify-center flex-1 xs:flex">
+        <p class="font-bold text-sm leading-6 text-gray-900">Testy</p>
+      </div>
+      <div class="flex justify-end flex-1 gap-6 items-center">
+        <b><button class="text-sm text-primary" @click="gotoLoginSection">Sign In </button></b>
+        <button
+          class="flex-none rounded-lg bg-primary px-3.5 py-3 text-sm font-bold text-white shadow-sm hover:bg-primary-950 duration-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900"
+          @click="gotoRegisterSection"
+        >
+          Sign up now
+        </button>
+      </div>
+    </div>
+  </div>
+</template>