#2 - homepage frontend (#16)

* build: Installed vue heroicons

* chore: added colors to the tailwind configuration

* chore: add assets

* chore: configure default transition in vue

* chore: add homepage route

* feat: add homepage

* feat: added "forgot password" link

* fix: uncanny line removed

* fix: line added

* fix: corrected tailwind dependency

* chore: added `xs` property for responsivness in tailwind

* fix: corrected responsivness for extra small mobile layout

* fix: renamed `RegisterBanner` component to `AuthBanner`

* fix: renamed login button to `Sign In`

* fix: renamed both auth buttons to "Continue"

* fix: changed "/home" path to "/"

* chore: added red color to config

* fix: responsiveness for ultra small screens

* fix: added fields requirements

* style: change fields' outline color

* style: change font "Forgot password?" font size

* style: added animations for fields

* fix: add absent submitForm function

* refactor: remove redundant styles

* feat: added underdeveloped search (option click doesn't always work)

* fix: animation disabled due to inconsistent behaviour

* fix: option click always works

* fix: changed language to polish

* doc: added screenshots

* Update resources/js/components/Home/RegisterForm.vue

Co-authored-by: Ewelina Skrzypacz <[email protected]>

* Update resources/js/components/Home/InformationButton.vue

Co-authored-by: Ewelina Skrzypacz <[email protected]>

* Update resources/js/components/Home/Footer.vue

Co-authored-by: Ewelina Skrzypacz <[email protected]>

* Update resources/js/components/Home/RegisterForm.vue

Co-authored-by: Ewelina Skrzypacz <[email protected]>

* Update resources/js/components/Home/LoginForm.vue

Co-authored-by: Ewelina Skrzypacz <[email protected]>

* Update resources/js/components/Home/LoginForm.vue

Co-authored-by: Ewelina Skrzypacz <[email protected]>

* style: rephrasing sentences

Co-authored-by: Ewelina Skrzypacz <[email protected]>

* rephrasing words and sentences; removing  a comment

* rephrasing and removing a line

* style: changed the position of a school searchbar

* fix: vertical responsiveness

* fix: incorrect banner text color with a dark mode turned on

* style: naming banner title to "Testy"

* fix: footer is now visible on the screen for large displays

* fix: information button hover proportions optimization

* refactor: rewriting a comment

* fix: fixed error on login

* feat: applied styled scrollbar globally

* fix: sponsors' proper positioning

* refactor: clean sponsors block

* refactor: move searchbar from registration to its own component

* fix: proper animation for searchbar

* refactor: deleted empty line

* fix: background responsiveness

* refactor: indentation corrections

Co-authored-by: Kamil Piech <[email protected]>

* refactor: remove empty functions

* fix: localization in the banner

* style: added icon to indicate searchbar

* style: correction of titles

* fix: responsiveness for fields on small screens

* doc: add screenshots

* doc: revert changes in readme

---------

Co-authored-by: Mykyta Mykulskyi <[email protected]>
Co-authored-by: Ewelina Skrzypacz <[email protected]>
Co-authored-by: Kamil Piech <[email protected]>

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": {

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,57 @@
+<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">
+    <div class="flex h-inherit items-center justify-center duration-200 rounded-[.5rem]" :class="{'ring-inset ring ring-primary':isSearchFocused}">
+      <div class="h-full items-center justify-center px-3">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-5 stroke-primary/50">
+          <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+        </svg>
+      </div>
+
+      <input
+        :value="isSearchFocused ? searchQuery : selectedOption"
+        class="outline-none py-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"
+      >
+    </div>
+
+    <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,58 @@
+<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 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">Logowanie</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"
+        >
+          Rejestracja
+        </button>
+      </div>
+    </div>
+  </div>
+</template>