├── .gitignore
├── README.md
├── app.vue
├── assets
    └── css
    │   └── tailwind.css
├── components
    ├── global
    │   ├── Footer.vue
    │   ├── LanguageSelector.vue
    │   └── Navbar.vue
    ├── home
    │   ├── Brand.vue
    │   └── HeroSection.vue
    └── stock
    │   ├── Main.vue
    │   └── SpecificPage.vue
├── composables
    └── useSBClient.ts
├── i18n
    └── lang
    │   ├── de.js
    │   ├── en.js
    │   ├── es.js
    │   ├── fr.js
    │   ├── it.js
    │   ├── pt.js
    │   └── zh-CN.js
├── layouts
    └── default.vue
├── nuxt.config.ts
├── package-lock.json
├── package.json
├── pages
    ├── index.vue
    ├── stock.vue
    └── stockSingle
    │   └── [id].vue
├── plugins
    └── sb-client.ts
├── public
    ├── favicon.ico
    └── images
    │   └── VeluxeAutoLogo.png
├── server
    └── tsconfig.json
├── tailwind.config.js
└── tsconfig.json


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Node.js
 2 | /node_modules
 3 | /.nuxt
 4 | /dist
 5 | /.vite
 6 | /.yarn
 7 | /.pnpm
 8 | yarn-error.log
 9 | npm-debug.log
10 | package-lock.json
11 | yarn.lock
12 | 
13 | # Nuxt.js build files
14 | .nuxt/
15 | 
16 | # VSCode directory
17 | .vscode/
18 | 
19 | # MacOS system files
20 | .DS_Store
21 | 
22 | # Windows system files
23 | Thumbs.db
24 | 
25 | # Log files
26 | *.log
27 | 
28 | # Environment files
29 | .env
30 | .env.local
31 | .env.*.local
32 | 
33 | # NPM / Yarn lock files (optional, depending on your setup)
34 | package-lock.json
35 | yarn.lock
36 | 
37 | # Optional: Ignore coverage folder created by testing libraries
38 | coverage/
39 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Nuxt Minimal Starter
 2 | 
 3 | Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
 4 | 
 5 | ## Setup
 6 | 
 7 | Make sure to install dependencies:
 8 | 
 9 | ```bash
10 | # npm
11 | npm install
12 | 
13 | # pnpm
14 | pnpm install
15 | 
16 | # yarn
17 | yarn install
18 | 
19 | # bun
20 | bun install
21 | ```
22 | 
23 | ## Development Server
24 | 
25 | Start the development server on `http://localhost:3000`:
26 | 
27 | ```bash
28 | # npm
29 | npm run dev
30 | 
31 | # pnpm
32 | pnpm dev
33 | 
34 | # yarn
35 | yarn dev
36 | 
37 | # bun
38 | bun run dev
39 | ```
40 | 
41 | ## Production
42 | 
43 | Build the application for production:
44 | 
45 | ```bash
46 | # npm
47 | npm run build
48 | 
49 | # pnpm
50 | pnpm build
51 | 
52 | # yarn
53 | yarn build
54 | 
55 | # bun
56 | bun run build
57 | ```
58 | 
59 | Locally preview production build:
60 | 
61 | ```bash
62 | # npm
63 | npm run preview
64 | 
65 | # pnpm
66 | pnpm preview
67 | 
68 | # yarn
69 | yarn preview
70 | 
71 | # bun
72 | bun run preview
73 | ```
74 | 
75 | Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
76 | 


--------------------------------------------------------------------------------
/app.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | useHead({
 3 |   link: [
 4 |     {
 5 |       rel: "icon",
 6 |       type: "image/x-icon",
 7 |       href: "/favicon.ico"
 8 |     },
 9 |     {
10 |       rel: "stylesheet",
11 |       href: "https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;700&display=swap"
12 |     }
13 |   ]
14 | });
15 | </script>
16 | 
17 | <template>
18 |   <NuxtLayout />
19 | </template>
20 | 
21 | <style>
22 | ::selection {
23 |   background-color: #d47474;
24 |   color: white; 
25 | }
26 | body {
27 |   font-family: 'Nunito Sans', sans-serif;
28 | }
29 | </style>


--------------------------------------------------------------------------------
/assets/css/tailwind.css:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | @tailwind base;
3 | @tailwind components;
4 | @tailwind utilities;
5 | /* eslint-enable */
6 | 


--------------------------------------------------------------------------------
/components/global/Footer.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | </script>
  3 | 
  4 | <template>
  5 |     <hr class="bar">
  6 |     <hr class="bar2">
  7 |     <div class="w-full bg-[#121212] overflow-hidden relative z-[2]">
  8 |         <div class="pt-2 pb-4">
  9 |             <div class="mx-auto w-full rounded-2xl flex flex-col items-center gap-6">
 10 |                 <div class="icon-container WPP">
 11 |                     <a href="https://wa.me/351933111764?text=Olá, estou interessado em comprar um carro. Podemos conversar?" class="icon-link">
 12 |                         <i class="fa-brands fa-whatsapp text-white text-2xl"></i>
 13 |                     </a>
 14 |                 </div>
 15 |                 <p class="text-xs text-white pt-2 pb-2 z-[2]">
 16 |                     Veluxe Auto®
 17 |                 </p>
 18 |             </div>
 19 |         </div>
 20 |     </div>
 21 | </template>
 22 | 
 23 | <style scoped>
 24 | .bar {
 25 |   border: none; 
 26 |   height: 1px; 
 27 |   background: #b53d3d; /* Bright yellow */
 28 |   box-shadow: 0 -5px 10px #b53d3d, /* Glow above */
 29 |               0 5px 10px #b53d3d,  /* Glow below */
 30 |               0 0 15px #b53d3d,   /* Larger glow around */
 31 |               0 0 30px #b53d3d;   /* Intense glowing effect */
 32 | }
 33 | 
 34 | .bar2 {
 35 |   border: none; 
 36 |   height: 1px; 
 37 |   background: #b53d3d; /* Bright yellow */
 38 |   box-shadow: 0 -5px 10px #b53d3d, /* Glow above */
 39 |               0 5px 10px #D32F2F,  /* Glow below */
 40 |               0 0 15px #b53d3d,   /* Larger glow around */
 41 |               0 0 30px #D32F2F;   /* Intense glowing effect */
 42 |   transform: rotate(180deg);
 43 | }
 44 | 
 45 | /* Container styles */
 46 | .icon-container {
 47 |   position: relative;
 48 |   display: inline-block;
 49 |   width: 50px; /* Adjust size */
 50 |   height: 50px; /* Adjust size */
 51 | }
 52 | 
 53 | /* Icon link styles */
 54 | .icon-link {
 55 |   position: relative;
 56 |   display: inline-flex;
 57 |   justify-content: center;
 58 |   align-items: center;
 59 |   width: 100%;
 60 |   height: 100%;
 61 |   z-index: 2; /* Ensure it is above the circle */
 62 |   text-decoration: none;
 63 | }
 64 | 
 65 | /* Pseudo-element for the circle */
 66 | .icon-container::before {
 67 |   content: '';
 68 |   position: absolute;
 69 |   top: 50%;
 70 |   left: 48%;
 71 |   width: 30px; /* Initial size of the circle */
 72 |   height: 30px; /* Initial size of the circle */
 73 |   border-radius: 50%;
 74 |   transform: translate(-50%, -50%) scale(0); /* Start small */
 75 |   transition: transform 0.3s ease; /* Animation duration and easing */
 76 |   z-index: 1; /* Below the icon */
 77 | }
 78 | 
 79 | /* Pseudo-element for the circle */
 80 | .INSTA::before {
 81 |   content: '';
 82 |   position: absolute;
 83 |   top: 50%;
 84 |   left: 50%;
 85 |   width: 30px; /* Initial size of the circle */
 86 |   height: 30px; /* Initial size of the circle */
 87 |   border-radius: 50%;
 88 |   transform: translate(-50%, -50%) scale(0); /* Start small */
 89 |   transition: transform 0.3s ease; /* Animation duration and easing */
 90 |   z-index: 1; /* Below the icon */
 91 | }
 92 | 
 93 | /* Hover effect: Grow the circle */
 94 | .icon-container:hover::before {
 95 |   transform: translate(-50%, -50%) scale(1.5); /* Grow to full size */
 96 | }
 97 | 
 98 | .FB::before {
 99 |   background-color: #0866ff; 
100 |   color: #aaacad;
101 | }
102 | 
103 | .TT::before {
104 |   background-color: black;
105 | }
106 | 
107 | .LI::before {
108 |   background-color: #007bb6;
109 | }
110 | 
111 | .INSTA::before {
112 |   background-color: #ff026a; 
113 | }
114 | 
115 | .WPP::before {
116 |   background-color: #c72121; 
117 | }
118 | 
119 | .horizontal-line {
120 |     width: 100%; 
121 |     height: 1px;
122 |     background-color: #ccd6db;
123 |     margin: 14px 0;
124 |     border-radius: 1px; 
125 | }
126 | </style>


--------------------------------------------------------------------------------
/components/global/LanguageSelector.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | import { ref } from 'vue';
  3 | import { onClickOutside } from '@vueuse/core'
  4 | 
  5 | const { t, locale } = useI18n();
  6 | const router = useRouter();
  7 | const route = useRoute();
  8 | 
  9 | const languages = [
 10 |   { code: 'en', name: 'English', flag: 'https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages/languageSelector/en.svg' },
 11 |   { code: '', name: 'Português', flag: 'https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages/languageSelector/pt.svg' },
 12 |   { code: 'es', name: 'Español', flag: 'https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages/languageSelector/es.svg' },
 13 |   { code: 'fr', name: 'Français', flag: 'https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages/languageSelector/fr.svg' },
 14 |   { code: 'it', name: 'Italiano', flag: 'https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages/languageSelector/it.svg' },
 15 |   { code: 'de', name: 'Deutsch', flag: 'https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages/languageSelector/de.svg' },
 16 |   { code: 'zh-CN', name: '中国人', flag: 'https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages/languageSelector/china.svg' }
 17 | ];
 18 | 
 19 | const dropdownOpen = ref(false);
 20 | 
 21 | const openDropdown = () => {
 22 |   dropdownOpen.value = true;
 23 | };
 24 | 
 25 | const closeDropdown = () => {
 26 |   dropdownOpen.value = false;
 27 | };
 28 | 
 29 | const closeNopenDropdown = () => {
 30 |   dropdownOpen.value = !dropdownOpen.value;
 31 | };
 32 | 
 33 | const dropdownRef = ref(null);
 34 | 
 35 | onClickOutside(dropdownRef, () => {
 36 |   dropdownOpen.value = false;
 37 | })
 38 | 
 39 | function changeLanguage(lang: any) {
 40 |   if (route.path.endsWith("/stock")) {
 41 |     if (lang=='') {
 42 |       router.push({ path: "/stock" });
 43 |     } else {
 44 |       router.push({ path: "/"+ lang + "/stock" });
 45 |     }
 46 |   } else if (route.path.includes("/stockSingle")) {
 47 |     if (route.path.startsWith("/stockSingle")) {
 48 |       if (lang=='') {
 49 |         router.push({ path: route.path })
 50 |       } else {
 51 |         router.push({ path: '/' + lang + route.path });
 52 |       }
 53 |     } else {
 54 |       if (lang=='') {
 55 |         router.push({ path: route.path.replace(/\/[^/]*\//, '/') });
 56 |       } else {
 57 |         router.push({ path: route.path.replace(/\/[^/]*\//, '/'+lang+'/') });
 58 |       }
 59 |     }
 60 |   }
 61 |    else {
 62 |     router.push({ path: "/" + lang })
 63 |   }
 64 | }
 65 | 
 66 | const getCurrentFlag = () => {
 67 |   const currentLang = languages.find((lang) => lang.code === locale.value);
 68 |   return currentLang ? currentLang.flag : 'https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages/languageSelector/pt.svg';
 69 | };
 70 | 
 71 | </script>
 72 | 
 73 | <template>
 74 | 
 75 |   <!-- Language Selector -->
 76 |   <div class="relative inline-block text-left py-4 mr-2" @click="closeNopenDropdown()">
 77 |     <!-- Flag Button -->
 78 |     <div class="inline-flex items-center cursor-pointer">
 79 |       <img :src="getCurrentFlag()" class="w-5 h-5" />
 80 |       <span class="caret" :class="{'rotate-caret': dropdownOpen}"></span>
 81 |     </div>
 82 | 
 83 |     <!-- Dropdown Menu (only shown when hovered) -->
 84 |     <div ref="dropdownRef" v-if="dropdownOpen">
 85 |       <ul class="absolute top-8 mt-2 w-32 bg-white rounded-md shadow-lg z-20 py-1 left-[-80px] xl:left-[-50px] font-semibold text-sm">
 86 |         <li v-for="lang in languages" :key="lang.code" @click="changeLanguage(lang.code)" class="text-[#3b4249] hover:text-[#b53d3d] flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 cursor-pointer">
 87 |           <img :src="lang.flag" class="w-5 h-5 mr-2" />
 88 |           <span>{{ lang.name }}</span>
 89 |         </li>
 90 |       </ul>
 91 |     </div>
 92 |   </div>
 93 | </template>
 94 | 
 95 | <style scoped>
 96 | .caret {
 97 |   display: inline-block;
 98 |   width: 0;
 99 |   height: 0;
100 |   margin-left: 6px;
101 |   vertical-align: middle;
102 |   border-left: 5px solid transparent;
103 |   border-right: 5px solid transparent;
104 |   border-top: 5px solid;
105 |   transform: rotate(-90deg);
106 |   transition: transform 0.3s ease;
107 | }
108 | 
109 | .rotate-caret {
110 |   transform: rotate(0deg);
111 |   color: #b53d3d;
112 | }
113 | </style>


--------------------------------------------------------------------------------
/components/global/Navbar.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { ref, onMounted, onBeforeUnmount } from 'vue'
  3 | 
  4 | const route = useRoute();
  5 | const navbarClass = ref('navbar');
  6 | const localCode = useCookie("i18n_redirected");
  7 | const { t, locale } = useI18n(); 
  8 | 
  9 | const handleScroll = () => {
 10 |   if (!(route.path.includes('/stock') || route.path.includes("/stockSingle"))) {
 11 |     if (window.scrollY > 90) {
 12 |         navbarClass.value = 'navbar navbar-scrolled animationEnter';
 13 |     } else {
 14 |         navbarClass.value = 'navbar';
 15 |     }
 16 |   }
 17 | }
 18 | 
 19 | const scrollToBottom = () => {
 20 |   window.scrollTo({
 21 |     top: document.body.scrollHeight,
 22 |     behavior: 'smooth'
 23 |   });
 24 | }
 25 | 
 26 | watch(
 27 |   () => route.path,
 28 |   (newPath) => {
 29 |     if (newPath.includes('/stock') || route.path.includes("/stockSingle")) {
 30 |       navbarClass.value = 'navbar navbar-scrolled';
 31 |     } else {
 32 |       navbarClass.value = 'navbar';
 33 |     }
 34 |   },
 35 |   { immediate: true } 
 36 | );
 37 | 
 38 | onMounted(() => {
 39 |   if (route.path.includes('/stock') || route.path.includes("/stockSingle")) {
 40 |     navbarClass.value = 'navbar navbar-scrolled';
 41 |   } else {
 42 |     window.addEventListener('scroll', handleScroll);
 43 |   }
 44 | });
 45 | 
 46 | onBeforeUnmount(() => {
 47 |   if (!(route.path.includes('/stock') || route.path.includes("/stockSingle"))) {
 48 |     window.removeEventListener('scroll', handleScroll)
 49 |   }
 50 | })
 51 | </script>
 52 | 
 53 | <template>
 54 |     <div :class="navbarClass" class="navbar py-4 px-5 xs:px-10 lg:px-20 flex justify-center items-center relative border-t border-[#121212]">
 55 |         <div class="w-full flex justify-between items-center">
 56 |             <div>
 57 |               <NuxtLink :to="localCode=='pt' ? '/' : '/'+localCode">
 58 |                 <img class="w-40" src="public/images/VeluxeAutoLogo.png" alt="Logo Image">
 59 |               </NuxtLink>
 60 |             </div>
 61 |             <div class="flex justify-center items-center gap-3 sm:gap-10 font-medium text-[13px]">
 62 |                 <NuxtLink
 63 |                 :to="localCode=='pt' ? '/stock' : '/'+localCode+'/stock'" 
 64 |                 active-class="border-[#b53d3d] text-[#b53d3d] border-t-2"
 65 |                 :class="{'border-transparent': !(route.path.endsWith('/stock'))}"
 66 |                 class="flex flex-col justify-center gap-1 items-center hover:text-[#b53d3d] border-t-2 transition duration-300 ease-in-out hover:border-[#b53d3d] pt-2">
 67 |                 <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24"><path fill="currentColor" d="M20.515 13.754a.886.886 0 0 1-.88.88h-3.548a.885.885 0 0 1-.88-.88a.886.886 0 0 1 .88-.88h3.548a.89.89 0 0 1 .88.88m-12.376 0a.885.885 0 0 1-.88.88H3.711a.885.885 0 0 1-.88-.88a.886.886 0 0 1 .88-.88h3.548a.886.886 0 0 1 .879.88zm-1.84-8.167h11.404l1.399 3.562l-.069-.004H4.899zm17.68 2.706a1.33 1.33 0 0 0-1.527-1.094l.008-.001l-2.183.356a1 1 0 0 0-.094.026l.005-.002L18.782 4H5.216L3.81 7.578a1 1 0 0 0-.087-.023l-2.185-.357A1.33 1.33 0 0 0 .019 8.286l-.001.008a1.33 1.33 0 0 0 1.088 1.519l.008.001l1.271.209a4.23 4.23 0 0 0-1.3 2.955v6.091h4.4v-2.3h12.429v2.3h4.4v-3.248c.018-.076.028-.163.028-.253v-2.586a4.24 4.24 0 0 0-1.213-2.876l.001.001l1.766-.29a1.33 1.33 0 0 0 1.092-1.527l.001.008z"/></svg>
 68 |                     {{ t('stock') }}
 69 |                 </NuxtLink>
 70 |                 <button @click="scrollToBottom()" class="flex flex-col justify-center gap-1 items-center hover:text-[#b53d3d] transition duration-300 ease-in-out border-t-2 border-transparent hover:border-[#b53d3d] pt-1.5">
 71 |                     <i class="fa-solid fa-phone text-[19px] py-[5px]"></i>
 72 |                     <span class="text-[12px]">{{ t('contacts') }}</span>
 73 |                 </button>
 74 |                 <LanguageSelector/>
 75 |             </div>
 76 |         </div>
 77 |     </div>
 78 | </template>
 79 | 
 80 | <style scoped>
 81 | .navbar {
 82 |   width: 100%;
 83 |   top: 0;
 84 |   left: 0;
 85 |   transition: transform 0.4s ease-in-out;
 86 |   z-index: 1000;
 87 | }
 88 | 
 89 | .navbar-scrolled {
 90 |   position: sticky;
 91 |   background-color: #121212 ;
 92 |   box-shadow: 0px 10px 30px rgba(255, 255, 255, 0.2);
 93 |   color: white;
 94 | }
 95 | 
 96 | .animationEnter {
 97 |   animation: slideDown 0.4s ease-in-out forwards;
 98 | }
 99 | 
100 | .navbar:not(.navbar-scrolled) {
101 |   background-color: rgba(0, 0, 0, 0);
102 |   color: white;
103 | }
104 | 
105 | @keyframes slideDown {
106 |   0% {
107 |     transform: translateY(-100%);
108 |   }
109 |   100% {
110 |     transform: translateY(0); 
111 |   }
112 | }
113 | </style>


--------------------------------------------------------------------------------
/components/home/Brand.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="h-16 bg-[#121212]"></div>
  3 |     <hr class="bar">
  4 |     <hr class="bar2">
  5 |     <div class="w-full flex flex-col items-center justify-start gap-24 h-[700px] sm:h-[840px] bg-[#121212] overflow-hidden xl:overflow-visible">
  6 |         <div class="mt-8 flex flex-col justify-center items-center">
  7 |             <h1 class="text-[42px] text-center text-white font-extrabold w-fit leading-[55px]">
  8 |                 O que procuras?
  9 |             </h1>
 10 |             <h1 class="text-[42px] text-center text-[#D32F2F] font-extrabold w-fit leading-[55px]">
 11 |                 Marcas
 12 |             </h1>
 13 |         </div>
 14 |         <div class="h-10 sm:h-16"></div>
 15 |         <div class="w-full flex justify-center items-center">
 16 |             <div class="circle-container">
 17 |                 <div class="dotted-circle"></div>
 18 | 
 19 |                 <div class="item item0 center-item bg-[#201818] shadow-md rounded-full flex justify-center items-center">
 20 |                     <img class="w-52" src="public/images/VeluxeAutoLogo.png" alt="Veluxe Auto Logo">
 21 |                 </div>
 22 |                 <NuxtLink to="/stock?marca=Volkswagen">
 23 |                     <div class="moving-element1 item item1 center-item bg-[#201818] shadow-md rounded-full flex justify-center items-center">
 24 |                         <img class="w-[75px] sm:w-[90px]" src="https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages/homePage/volkswagenLogo.png" alt="LogoChannel">
 25 |                     </div>
 26 |                 </NuxtLink>
 27 |                 <NuxtLink to="/stock?marca=BMW">
 28 |                     <div class="moving-element2 item item2 center-item bg-[#201818] shadow-md rounded-full flex justify-center items-center">
 29 |                         <img class="w-[75px] sm:w-[80px]" src="https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages/homePage/bmwLogo.png" alt="LogoChannel">
 30 |                     </div>
 31 |                 </NuxtLink>
 32 |                 <NuxtLink to="/stock?marca=Audi">
 33 |                     <div class="moving-element3 item item3 center-item bg-[#201818] shadow-md rounded-full flex justify-center items-center">
 34 |                         <img class="w-[75px] sm:w-[90px]" src="https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages/homePage/audiLogo.png" alt="LogoChannel">
 35 |                     </div>
 36 |                 </NuxtLink>
 37 |                 <NuxtLink to="/stock?marca=Mercedes">
 38 |                     <div class="moving-element4 item item4 center-item bg-[#201818] shadow-md rounded-full flex justify-center items-center">
 39 |                         <img class="w-[75px] sm:w-[90px]" src="https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages/homePage/mercedesLogo.png" alt="LogoChannel">
 40 |                     </div>
 41 |                 </NuxtLink>
 42 |                 <NuxtLink to="/stock?marca=Fiat">
 43 |                     <div class="moving-element5 item item5 center-item bg-[#201818] shadow-md rounded-full flex justify-center items-center">
 44 |                         <img class="w-[65px] sm:w-[90px]" src="https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages/homePage/fiatLogo.png" alt="LogoChannel">
 45 |                     </div>
 46 |                 </NuxtLink>
 47 |                 <NuxtLink to="/stock?marca=Peugeot">
 48 |                     <div class="moving-element6 item item6 center-item bg-[#201818] shadow-md rounded-full flex justify-center items-center">
 49 |                         <img class="w-[55px] sm:w-[75px]" src="https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages/homePage/peugeoutLogo.png" alt="LogoChannel">
 50 |                     </div>
 51 |                 </NuxtLink>
 52 |                 <NuxtLink to="/stock?marca=Renault">
 53 |                     <div class="moving-element7 item item7 center-item bg-[#201818] shadow-md rounded-full flex justify-center items-center">
 54 |                         <img class="w-[55px] sm:w-[75px]" src="https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages/homePage/renaultLogo.png" alt="LogoChannel">
 55 |                     </div>
 56 |                 </NuxtLink>
 57 |                 <NuxtLink to="/stock?marca=Toyota">
 58 |                     <div class="moving-element8 item item8 center-item bg-[#201818] shadow-md rounded-full flex justify-center items-center">
 59 |                         <img class="w-[75px] sm:w-[90px]" src="https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages/homePage/toyotaLogo.png" alt="LogoChannel">
 60 |                     </div>
 61 |                 </NuxtLink>
 62 |                 <NuxtLink to="/stock?marca=Nissan">
 63 |                     <div class="moving-element9 item item9 center-item bg-[#201818] shadow-md rounded-full flex justify-center items-center">
 64 |                         <img class="w-[75px] sm:w-[110px]" src="https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages/homePage/nissanLogo.png" alt="LogoChannel">
 65 |                     </div>
 66 |                 </NuxtLink>
 67 |                 <NuxtLink to="/stock?marca=Seat">
 68 |                     <div class="moving-element10 item item10 center-item bg-[#201818] shadow-md rounded-full flex justify-center items-center">
 69 |                         <img class="w-[65px] sm:w-[75px]" src="https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages/homePage/seatLogo.png" alt="LogoChannel">
 70 |                     </div>
 71 |                 </NuxtLink>
 72 |             </div>
 73 |         </div>
 74 |     </div>    
 75 | </template>
 76 | 
 77 | <style scoped>
 78 | .bar {
 79 |   border: none; 
 80 |   height: 1px; 
 81 |   background: #b53d3d; /* Bright yellow */
 82 |   box-shadow: 0 -5px 10px #b53d3d, /* Glow above */
 83 |               0 5px 10px #b53d3d,  /* Glow below */
 84 |               0 0 15px #b53d3d,   /* Larger glow around */
 85 |               0 0 30px #b53d3d;   /* Intense glowing effect */
 86 | }
 87 | 
 88 | .bar2 {
 89 |   border: none; 
 90 |   height: 1px; 
 91 |   background: #b53d3d; /* Bright yellow */
 92 |   box-shadow: 0 -5px 10px #b53d3d, /* Glow above */
 93 |               0 5px 10px #D32F2F,  /* Glow below */
 94 |               0 0 15px #b53d3d,   /* Larger glow around */
 95 |               0 0 30px #D32F2F;   /* Intense glowing effect */
 96 |   transform: rotate(180deg);
 97 | }
 98 | 
 99 | .circle-container {
100 |   position: relative;
101 |   width: 120px;
102 |   height: 120px;
103 |   border-radius: 50%;
104 | }
105 | 
106 | 
107 | .dotted-circle {
108 |   position: absolute;
109 |   inset: 0px;
110 |   width: 100%;
111 |   height: 100%;
112 |   border: 5px #D32F2F;
113 |   padding: 240px; 
114 |   border-radius: 50%; 
115 |   pointer-events: none;
116 |   transform: rotate(225deg) translate(255px) rotate(-225deg);
117 |   box-shadow: 0 -5px 10px #b53d3d, /* Glow above */
118 |               0 5px 10px #b53d3d,  /* Glow below */
119 |               0 0 15px #b53d3d,   /* Larger glow around */
120 |               0 0 30px #D32F2F;   /* Intense glowing effect */
121 | }
122 | 
123 | .item {
124 |   position: absolute;
125 |   inset: 0px;
126 |   box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
127 | }
128 | 
129 | .item0 {
130 |   width: 200px;
131 |   height: 200px;
132 |   transform: rotate(230deg) translate(55px) rotate(-230deg);
133 | }
134 | 
135 | .item1 {
136 |     transform: rotate(54deg) translate(240px) rotate(-54deg);
137 | }
138 | 
139 | .item2 {
140 |     transform: rotate(90deg) translate(240px) rotate(-90deg);
141 | }
142 | 
143 | .item3 {
144 |     transform: rotate(126deg) translate(240px) rotate(-126deg);
145 | }
146 | 
147 | .item4 {
148 |     transform: rotate(162deg) translate(240px) rotate(-162deg);
149 | }
150 | 
151 | .item5 {
152 |     transform: rotate(198deg) translate(240px) rotate(-198deg);
153 | }
154 | 
155 | .item6 {
156 |     transform: rotate(234deg) translate(240px) rotate(-234deg);
157 | }
158 | 
159 | .item7 {
160 |     transform: rotate(270deg) translate(240px) rotate(-270deg);
161 | }
162 | 
163 | .item8 {
164 |     transform: rotate(306deg) translate(240px) rotate(-306deg);
165 | }
166 | 
167 | .item9 {
168 |     transform: rotate(342deg) translate(240px) rotate(-342deg);
169 | }
170 | 
171 | .item10 {
172 |     transform: rotate(18deg) translate(240px) rotate(-18deg);
173 | }
174 | 
175 | @media (max-width: 640px) {
176 |     .item0 {
177 |         width: 145px;
178 |         height: 145px;
179 |         transform: rotate(230deg) translate(35px) rotate(-230deg);
180 |     }
181 |     .item1 {
182 |         transform: rotate(54deg) translate(170px) rotate(-54deg);
183 |     }
184 |     .item2 {
185 |         transform: rotate(90deg) translate(170px) rotate(-90deg);
186 |     }
187 |     .item3 {
188 |         transform: rotate(126deg) translate(170px) rotate(-126deg);
189 |     }
190 |     .item4 {
191 |         transform: rotate(162deg) translate(170px) rotate(-162deg);
192 |     }
193 |     .item5 {
194 |         transform: rotate(198deg) translate(170px) rotate(-198deg);
195 |     }
196 |     .item6 {
197 |         transform: rotate(234deg) translate(170px) rotate(-234deg);
198 |     }
199 |     .item7 {
200 |         transform: rotate(270deg) translate(170px) rotate(-270deg);
201 |     }
202 |     .item8 {
203 |         transform: rotate(306deg) translate(170px) rotate(-306deg);
204 |     }
205 |     .item9 {
206 |         transform: rotate(342deg) translate(170px) rotate(-342deg);
207 |     }
208 |     .item10 {
209 |         transform: rotate(18deg) translate(170px) rotate(-18deg);
210 |     }
211 |     .dotted-circle {
212 |         position: absolute;
213 |         inset: 0px;
214 |         width: 100%;
215 |         height: 100%;
216 |         border: 5px #D32F2F;
217 |         padding: 170px; 
218 |         border-radius: 50%; 
219 |         pointer-events: none;
220 |         transform: rotate(225deg) translate(180px) rotate(-225deg);
221 |         box-shadow: 0 -5px 10px #b53d3d, /* Glow above */
222 |               0 5px 10px #b53d3d,  /* Glow below */
223 |               0 0 15px #b53d3d,   /* Larger glow around */
224 |               0 0 30px #D32F2F;   /* Intense glowing effect */
225 |     }
226 |     .circle-container {
227 |         position: relative;
228 |         width: 90px;
229 |         height: 90px;
230 |         border-radius: 50%;
231 |     }
232 | }
233 | 
234 | @media (max-width: 480px) {
235 |     .item0 {
236 |         width: 100px;
237 |         height: 100px;
238 |         transform: rotate(265deg) translate(10px) rotate(-265deg);
239 |     }
240 |     .item1 {
241 |         transform: rotate(58deg) translate(180px) rotate(-58deg);
242 |     }
243 |     .item2 {
244 |         transform: rotate(90deg) translate(195px) rotate(-90deg);
245 |     }
246 |     .item3 {
247 |         transform: rotate(120deg) translate(180px) rotate(-120deg);
248 |     }
249 |     .item4 {
250 |         transform: rotate(154deg) translate(120px) rotate(-154deg);
251 |     }
252 |     .item5 {
253 |         transform: rotate(206deg) translate(120px) rotate(-206deg);
254 |     }
255 |     .item6 {
256 |         transform: rotate(240deg) translate(180px) rotate(-240deg);
257 |     }
258 |     .item7 {
259 |         transform: rotate(270deg) translate(195px) rotate(-270deg);
260 |     }
261 |     .item8 {
262 |         transform: rotate(300deg) translate(180px) rotate(-300deg);
263 |     }
264 |     .item9 {
265 |         transform: rotate(334deg) translate(120px) rotate(-334deg);
266 |     }
267 |     .item10 {
268 |         transform: rotate(26deg) translate(120px) rotate(-26deg);
269 |     }
270 |     .dotted-circle {
271 |         position: absolute;
272 |         inset: 0px;
273 |         width: 100%;
274 |         height: 100%;
275 |         border: 5px #D32F2F;
276 |         padding: 190px 105px; 
277 |         border-radius: 30%; 
278 |         pointer-events: none;
279 |         transform: rotate(246deg) translate(155px) rotate(-246deg);
280 |         box-shadow: 0 -5px 10px #b53d3d, /* Glow above */
281 |               0 5px 10px #b53d3d,  /* Glow below */
282 |               0 0 15px #b53d3d,   /* Larger glow around */
283 |               0 0 30px #D32F2F;   /* Intense glowing effect */
284 |         
285 |     }
286 |     .circle-container {
287 |         position: relative;
288 |         width: 90px;
289 |         height: 90px;
290 |         border-radius: 50%;
291 |     }
292 | }
293 | 
294 | @keyframes circular-motion1 {
295 |   0% {
296 |     transform: rotate(54deg) translate(240px) rotate(-54deg);
297 |   }
298 |   100% {
299 |     transform: rotate(414deg) translate(240px) rotate(-414deg);
300 |   }
301 | }
302 | 
303 | .moving-element1 {
304 |   animation: circular-motion1 25s linear infinite;
305 | }
306 | 
307 | @keyframes circular-motion2 {
308 |   0% {
309 |     transform: rotate(90deg) translate(240px) rotate(-90deg);
310 |   }
311 |   100% {
312 |     transform: rotate(450deg) translate(240px) rotate(-450deg);
313 |   }
314 | }
315 | 
316 | .moving-element2 {
317 |   animation: circular-motion2 25s linear infinite;
318 | }
319 | 
320 | @keyframes circular-motion3 {
321 |   0% {
322 |     transform: rotate(126deg) translate(240px) rotate(-126deg);
323 |   }
324 |   100% {
325 |     transform: rotate(486deg) translate(240px) rotate(-486deg);
326 |   }
327 | }
328 | 
329 | .moving-element3 {
330 |   animation: circular-motion3 25s linear infinite;
331 | }
332 | 
333 | @keyframes circular-motion4 {
334 |   0% {
335 |     transform: rotate(162deg) translate(240px) rotate(-162deg);
336 |   }
337 |   100% {
338 |     transform: rotate(522deg) translate(240px) rotate(-522deg);
339 |   }
340 | }
341 | 
342 | .moving-element4 {
343 |   animation: circular-motion4 25s linear infinite;
344 | }
345 | 
346 | @keyframes circular-motion5 {
347 |   0% {
348 |     transform: rotate(198deg) translate(240px) rotate(-198deg);
349 |   }
350 |   100% {
351 |     transform: rotate(558deg) translate(240px) rotate(-558deg);
352 |   }
353 | }
354 | 
355 | .moving-element5 {
356 |   animation: circular-motion5 25s linear infinite;
357 | }
358 | 
359 | @keyframes circular-motion6 {
360 |   0% {
361 |     transform: rotate(234deg) translate(240px) rotate(-234deg);
362 |   }
363 |   100% {
364 |     transform: rotate(594deg) translate(240px) rotate(-594deg);
365 |   }
366 | }
367 | 
368 | .moving-element6 {
369 |   animation: circular-motion6 25s linear infinite;
370 | }
371 | 
372 | 
373 | @keyframes circular-motion7 {
374 |   0% {
375 |     transform: rotate(270deg) translate(240px) rotate(-270deg);
376 |   }
377 |   100% {
378 |     transform: rotate(630deg) translate(240px) rotate(-630deg);
379 |   }
380 | }
381 | 
382 | .moving-element7 {
383 |   animation: circular-motion7 25s linear infinite;
384 | }
385 | 
386 | @keyframes circular-motion8 {
387 |   0% {
388 |     transform: rotate(306deg) translate(240px) rotate(-306deg);
389 |   }
390 |   100% {
391 |     transform: rotate(666deg) translate(240px) rotate(-666deg);
392 |   }
393 | }
394 | 
395 | .moving-element8 {
396 |   animation: circular-motion8 25s linear infinite;
397 | }
398 | 
399 | @keyframes circular-motion9 {
400 |   0% {
401 |     transform: rotate(342deg) translate(240px) rotate(-342deg);
402 |   }
403 |   100% {
404 |     transform: rotate(702deg) translate(240px) rotate(-702deg);
405 |   }
406 | }
407 | 
408 | .moving-element9 {
409 |   animation: circular-motion9 25s linear infinite;
410 | }
411 | 
412 | @keyframes circular-motion10 {
413 |   0% {
414 |     transform: rotate(18deg) translate(240px) rotate(-18deg);
415 |   }
416 |   100% {
417 |     transform: rotate(378deg) translate(240px) rotate(-378deg);
418 |   }
419 | }
420 | 
421 | .moving-element10 {
422 |   animation: circular-motion10 25s linear infinite;
423 | }
424 | 
425 | @media (max-width: 640px) {
426 |     @keyframes circular-motion1 {
427 |     0% {
428 |         transform: rotate(54deg) translate(170px) rotate(-54deg);
429 |     }
430 |     100% {
431 |         transform: rotate(414deg) translate(170px) rotate(-414deg);
432 |     }
433 |     }
434 | 
435 |     .moving-element1 {
436 |     animation: circular-motion1 25s linear infinite;
437 |     }
438 | 
439 |     @keyframes circular-motion2 {
440 |     0% {
441 |         transform: rotate(90deg) translate(170px) rotate(-90deg);
442 |     }
443 |     100% {
444 |         transform: rotate(450deg) translate(170px) rotate(-450deg);
445 |     }
446 |     }
447 | 
448 |     .moving-element2 {
449 |     animation: circular-motion2 25s linear infinite;
450 |     }
451 | 
452 |     @keyframes circular-motion3 {
453 |     0% {
454 |         transform: rotate(126deg) translate(170px) rotate(-126deg);
455 |     }
456 |     100% {
457 |         transform: rotate(486deg) translate(170px) rotate(-486deg);
458 |     }
459 |     }
460 | 
461 |     .moving-element3 {
462 |     animation: circular-motion3 25s linear infinite;
463 |     }
464 | 
465 |     @keyframes circular-motion4 {
466 |     0% {
467 |         transform: rotate(162deg) translate(170px) rotate(-162deg);
468 |     }
469 |     100% {
470 |         transform: rotate(522deg) translate(170px) rotate(-522deg);
471 |     }
472 |     }
473 | 
474 |     .moving-element4 {
475 |     animation: circular-motion4 25s linear infinite;
476 |     }
477 | 
478 |     @keyframes circular-motion5 {
479 |     0% {
480 |         transform: rotate(198deg) translate(170px) rotate(-198deg);
481 |     }
482 |     100% {
483 |         transform: rotate(558deg) translate(170px) rotate(-558deg);
484 |     }
485 |     }
486 | 
487 |     .moving-element5 {
488 |     animation: circular-motion5 25s linear infinite;
489 |     }
490 | 
491 |     @keyframes circular-motion6 {
492 |     0% {
493 |         transform: rotate(234deg) translate(170px) rotate(-234deg);
494 |     }
495 |     100% {
496 |         transform: rotate(594deg) translate(170px) rotate(-594deg);
497 |     }
498 |     }
499 | 
500 |     .moving-element6 {
501 |     animation: circular-motion6 25s linear infinite;
502 |     }
503 | 
504 | 
505 |     @keyframes circular-motion7 {
506 |     0% {
507 |         transform: rotate(270deg) translate(170px) rotate(-270deg);
508 |     }
509 |     100% {
510 |         transform: rotate(630deg) translate(170px) rotate(-630deg);
511 |     }
512 |     }
513 | 
514 |     .moving-element7 {
515 |     animation: circular-motion7 25s linear infinite;
516 |     }
517 | 
518 |     @keyframes circular-motion8 {
519 |     0% {
520 |         transform: rotate(306deg) translate(170px) rotate(-306deg);
521 |     }
522 |     100% {
523 |         transform: rotate(666deg) translate(170px) rotate(-666deg);
524 |     }
525 |     }
526 | 
527 |     .moving-element8 {
528 |     animation: circular-motion8 25s linear infinite;
529 |     }
530 | 
531 |     @keyframes circular-motion9 {
532 |     0% {
533 |         transform: rotate(342deg) translate(170px) rotate(-342deg);
534 |     }
535 |     100% {
536 |         transform: rotate(702deg) translate(170px) rotate(-702deg);
537 |     }
538 |     }
539 | 
540 |     .moving-element9 {
541 |     animation: circular-motion9 25s linear infinite;
542 |     }
543 | 
544 |     @keyframes circular-motion10 {
545 |     0% {
546 |         transform: rotate(18deg) translate(170px) rotate(-18deg);
547 |     }
548 |     100% {
549 |         transform: rotate(378deg) translate(170px) rotate(-378deg);
550 |     }
551 |     }
552 | 
553 |     .moving-element10 {
554 |     animation: circular-motion10 25s linear infinite;
555 |     }
556 | }
557 | 
558 | @media (max-width: 480px) {
559 |     @keyframes circular-motion1 {
560 |     0% {
561 |         transform: rotate(58deg) translate(180px) rotate(-58deg);
562 |     }
563 |     10% {
564 |         transform: rotate(90deg) translate(195px) rotate(-90deg);
565 |     }
566 |     20% {
567 |         transform: rotate(120deg) translate(180px) rotate(-120deg);
568 |     }
569 |     30% {
570 |         transform: rotate(154deg) translate(120px) rotate(-154deg);
571 |     }
572 |     40% {
573 |         transform: rotate(206deg) translate(120px) rotate(-206deg);
574 |     }
575 |     50% {
576 |         transform: rotate(240deg) translate(180px) rotate(-240deg);
577 |     }
578 |     60% {
579 |         transform: rotate(270deg) translate(195px) rotate(-270deg);
580 |     }
581 |     70% {
582 |         transform: rotate(300deg) translate(180px) rotate(-300deg);
583 |     }
584 |     80% {
585 |         transform: rotate(334deg) translate(120px) rotate(-334deg);
586 |     }
587 |     90% {
588 |         transform: rotate(386deg) translate(120px) rotate(-386deg);
589 |     }
590 |     100% {
591 |         transform: rotate(418deg) translate(180px) rotate(-418deg);
592 |     }
593 |     }
594 | 
595 |     .moving-element1 {
596 |     animation: circular-motion1 25s linear infinite;
597 |     }
598 | 
599 |     @keyframes circular-motion2 {
600 |     0% {
601 |         transform: rotate(90deg) translate(195px) rotate(-90deg);
602 |     }
603 |     10% {
604 |         transform: rotate(120deg) translate(180px) rotate(-120deg);
605 |     }
606 |     20% {
607 |         transform: rotate(154deg) translate(120px) rotate(-154deg);
608 |     }
609 |     30% {
610 |         transform: rotate(206deg) translate(120px) rotate(-206deg);
611 |     }
612 |     40% {
613 |         transform: rotate(240deg) translate(180px) rotate(-240deg);
614 |     }
615 |     50% {
616 |         transform: rotate(270deg) translate(195px) rotate(-270deg);
617 |     }
618 |     60% {
619 |         transform: rotate(300deg) translate(180px) rotate(-300deg);
620 |     }
621 |     70% {
622 |         transform: rotate(334deg) translate(120px) rotate(-334deg);
623 |     }
624 |     80% {
625 |         transform: rotate(386deg) translate(120px) rotate(-386deg);
626 |     }
627 |     90% {
628 |         transform: rotate(418deg) translate(180px) rotate(-418deg);
629 |     }
630 |     100% {
631 |         transform: rotate(450deg) translate(195px) rotate(-450deg);
632 |     }
633 |     }
634 | 
635 |     .moving-element2 {
636 |     animation: circular-motion2 25s linear infinite;
637 |     }
638 | 
639 |     @keyframes circular-motion3 {
640 |     0% {
641 |         transform: rotate(120deg) translate(180px) rotate(-120deg);
642 |     }
643 |     10% {
644 |         transform: rotate(154deg) translate(120px) rotate(-154deg);
645 |     }
646 |     20% {
647 |         transform: rotate(206deg) translate(120px) rotate(-206deg);
648 |     }
649 |     30% {
650 |         transform: rotate(240deg) translate(180px) rotate(-240deg);
651 |     }
652 |     40% {
653 |         transform: rotate(270deg) translate(195px) rotate(-270deg);
654 |     }
655 |     50% {
656 |         transform: rotate(300deg) translate(180px) rotate(-300deg);
657 |     }
658 |     60% {
659 |         transform: rotate(334deg) translate(120px) rotate(-334deg);
660 |     }
661 |     70% {
662 |         transform: rotate(386deg) translate(120px) rotate(-386deg);
663 |     }
664 |     80% {
665 |         transform: rotate(418deg) translate(180px) rotate(-418deg);
666 |     }
667 |     90% {
668 |         transform: rotate(450deg) translate(195px) rotate(-450deg);
669 |     }
670 |     100% {
671 |         transform: rotate(480deg) translate(180px) rotate(-480deg);
672 |     }
673 |     }
674 |     .moving-element3 {
675 |     animation: circular-motion3 25s linear infinite;
676 |     }
677 | 
678 |     @keyframes circular-motion4 {
679 |     0% {
680 |         transform: rotate(154deg) translate(120px) rotate(-154deg);
681 |     }
682 |     10% {
683 |         transform: rotate(206deg) translate(120px) rotate(-206deg);
684 |     }
685 |     20% {
686 |         transform: rotate(240deg) translate(180px) rotate(-240deg);
687 |     }
688 |     30% {
689 |         transform: rotate(270deg) translate(195px) rotate(-270deg);
690 |     }
691 |     40% {
692 |         transform: rotate(300deg) translate(180px) rotate(-300deg);
693 |     }
694 |     50% {
695 |         transform: rotate(334deg) translate(120px) rotate(-334deg);
696 |     }
697 |     60% {
698 |         transform: rotate(386deg) translate(120px) rotate(-386deg);
699 |     }
700 |     70% {
701 |         transform: rotate(418deg) translate(180px) rotate(-418deg);
702 |     }
703 |     80% {
704 |         transform: rotate(450deg) translate(195px) rotate(-450deg);
705 |     }
706 |     90% {
707 |         transform: rotate(480deg) translate(180px) rotate(-480deg);
708 |     }
709 |     100% {
710 |         transform: rotate(514deg) translate(120px) rotate(-514deg);
711 |     }
712 |     }
713 |     .moving-element4 {
714 |     animation: circular-motion4 25s linear infinite;
715 |     }
716 | 
717 |     @keyframes circular-motion5 {
718 |     0% {
719 |         transform: rotate(206deg) translate(120px) rotate(-206deg);
720 |     }
721 |     10% {
722 |         transform: rotate(240deg) translate(180px) rotate(-240deg);
723 |     }
724 |     20% {
725 |         transform: rotate(270deg) translate(195px) rotate(-270deg);
726 |     }
727 |     30% {
728 |         transform: rotate(300deg) translate(180px) rotate(-300deg);
729 |     }
730 |     40% {
731 |         transform: rotate(334deg) translate(120px) rotate(-334deg);
732 |     }
733 |     50% {
734 |         transform: rotate(386deg) translate(120px) rotate(-386deg);
735 |     }
736 |     60% {
737 |         transform: rotate(418deg) translate(180px) rotate(-418deg);
738 |     }
739 |     70% {
740 |         transform: rotate(450deg) translate(195px) rotate(-450deg);
741 |     }
742 |     80% {
743 |         transform: rotate(480deg) translate(180px) rotate(-480deg);
744 |     }
745 |     90% {
746 |         transform: rotate(514deg) translate(120px) rotate(-514deg);
747 |     }
748 |     100% {
749 |         transform: rotate(566deg) translate(120px) rotate(-566deg);
750 |     }
751 |     }
752 |     .moving-element5 {
753 |     animation: circular-motion5 25s linear infinite;
754 |     }
755 | 
756 |     @keyframes circular-motion6 {
757 |     0% {
758 |         transform: rotate(240deg) translate(180px) rotate(-240deg);
759 |     }
760 |     10% {
761 |         transform: rotate(270deg) translate(195px) rotate(-270deg);
762 |     }
763 |     20% {
764 |         transform: rotate(300deg) translate(180px) rotate(-300deg);
765 |     }
766 |     30% {
767 |         transform: rotate(334deg) translate(120px) rotate(-334deg);
768 |     }
769 |     40% {
770 |         transform: rotate(386deg) translate(120px) rotate(-386deg);
771 |     }
772 |     50% {
773 |         transform: rotate(418deg) translate(180px) rotate(-418deg);
774 |     }
775 |     60% {
776 |         transform: rotate(450deg) translate(195px) rotate(-450deg);
777 |     }
778 |     70% {
779 |         transform: rotate(480deg) translate(180px) rotate(-480deg);
780 |     }
781 |     80% {
782 |         transform: rotate(514deg) translate(120px) rotate(-514deg);
783 |     }
784 |     90% {
785 |         transform: rotate(566deg) translate(120px) rotate(-566deg);
786 |     }
787 |     100% {
788 |         transform: rotate(600deg) translate(180px) rotate(-600deg);
789 |     }
790 |     }
791 |     .moving-element6 {
792 |     animation: circular-motion6 25s linear infinite;
793 |     }
794 | 
795 |     @keyframes circular-motion7 {
796 |     0% {
797 |         transform: rotate(270deg) translate(195px) rotate(-270deg);
798 |     }
799 |     10% {
800 |         transform: rotate(300deg) translate(180px) rotate(-300deg);
801 |     }
802 |     20% {
803 |         transform: rotate(334deg) translate(120px) rotate(-334deg);
804 |     }
805 |     30% {
806 |         transform: rotate(386deg) translate(120px) rotate(-386deg);
807 |     }
808 |     40% {
809 |         transform: rotate(418deg) translate(180px) rotate(-418deg);
810 |     }
811 |     50% {
812 |         transform: rotate(450deg) translate(195px) rotate(-450deg);
813 |     }
814 |     60% {
815 |         transform: rotate(480deg) translate(180px) rotate(-480deg);
816 |     }
817 |     70% {
818 |         transform: rotate(514deg) translate(120px) rotate(-514deg);
819 |     }
820 |     80% {
821 |         transform: rotate(566deg) translate(120px) rotate(-566deg);
822 |     }
823 |     90% {
824 |         transform: rotate(600deg) translate(180px) rotate(-600deg);
825 |     }
826 |     100% {
827 |         transform: rotate(630deg) translate(195px) rotate(-630deg);
828 |     }
829 |     }
830 |     .moving-element7 {
831 |     animation: circular-motion7 25s linear infinite;
832 |     }
833 | 
834 |     @keyframes circular-motion8 {
835 |     0% {
836 |         transform: rotate(300deg) translate(180px) rotate(-300deg);
837 |     }
838 |     10% {
839 |         transform: rotate(334deg) translate(120px) rotate(-334deg);
840 |     }
841 |     20% {
842 |         transform: rotate(386deg) translate(120px) rotate(-386deg);
843 |     }
844 |     30% {
845 |         transform: rotate(418deg) translate(180px) rotate(-418deg);
846 |     }
847 |     40% {
848 |         transform: rotate(450deg) translate(195px) rotate(-450deg);
849 |     }
850 |     50% {
851 |         transform: rotate(480deg) translate(180px) rotate(-480deg);
852 |     }
853 |     60% {
854 |         transform: rotate(514deg) translate(120px) rotate(-514deg);
855 |     }
856 |     70% {
857 |         transform: rotate(566deg) translate(120px) rotate(-566deg);
858 |     }
859 |     80% {
860 |         transform: rotate(600deg) translate(180px) rotate(-600deg);
861 |     }
862 |     90% {
863 |         transform: rotate(630deg) translate(195px) rotate(-630deg);
864 |     }
865 |     100% {
866 |         transform: rotate(660deg) translate(180px) rotate(-660deg);
867 |     }
868 |     }
869 |     .moving-element8 {
870 |     animation: circular-motion8 25s linear infinite;
871 |     }
872 | 
873 |     @keyframes circular-motion9 {
874 |     0% {
875 |         transform: rotate(334deg) translate(120px) rotate(-334deg);
876 |     }
877 |     10% {
878 |         transform: rotate(386deg) translate(120px) rotate(-386deg);
879 |     }
880 |     20% {
881 |         transform: rotate(418deg) translate(180px) rotate(-418deg);
882 |     }
883 |     30% {
884 |         transform: rotate(450deg) translate(195px) rotate(-450deg);
885 |     }
886 |     40% {
887 |         transform: rotate(480deg) translate(180px) rotate(-480deg);
888 |     }
889 |     50% {
890 |         transform: rotate(514deg) translate(120px) rotate(-514deg);
891 |     }
892 |     60% {
893 |         transform: rotate(566deg) translate(120px) rotate(-566deg);
894 |     }
895 |     70% {
896 |         transform: rotate(600deg) translate(180px) rotate(-600deg);
897 |     }
898 |     80% {
899 |         transform: rotate(630deg) translate(195px) rotate(-630deg);
900 |     }
901 |     90% {
902 |         transform: rotate(660deg) translate(180px) rotate(-660deg);
903 |     }
904 |     100% {
905 |         transform: rotate(694deg) translate(120px) rotate(-694deg);
906 |     }
907 |     }
908 |     .moving-element9 {
909 |     animation: circular-motion9 25s linear infinite;
910 |     }
911 | 
912 |     @keyframes circular-motion10 {
913 |     0% {
914 |         transform: rotate(386deg) translate(120px) rotate(-386deg);
915 |     }
916 |     10% {
917 |         transform: rotate(418deg) translate(180px) rotate(-418deg);
918 |     }
919 |     20% {
920 |         transform: rotate(450deg) translate(195px) rotate(-450deg);
921 |     }
922 |     30% {
923 |         transform: rotate(480deg) translate(180px) rotate(-480deg);
924 |     }
925 |     40% {
926 |         transform: rotate(514deg) translate(120px) rotate(-514deg);
927 |     }
928 |     50% {
929 |         transform: rotate(566deg) translate(120px) rotate(-566deg);
930 |     }
931 |     60% {
932 |         transform: rotate(600deg) translate(180px) rotate(-600deg);
933 |     }
934 |     70% {
935 |         transform: rotate(630deg) translate(195px) rotate(-630deg);
936 |     }
937 |     80% {
938 |         transform: rotate(660deg) translate(180px) rotate(-660deg);
939 |     }
940 |     90% {
941 |         transform: rotate(694deg) translate(120px) rotate(-694deg);
942 |     }
943 |     100% {
944 |         transform: rotate(746deg) translate(120px) rotate(-746deg);
945 |     }
946 |     }
947 |     .moving-element10 {
948 |     animation: circular-motion10 25s linear infinite;
949 |     }
950 | }
951 | </style>


--------------------------------------------------------------------------------
/components/home/HeroSection.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { onClickOutside } from "@vueuse/core";
  3 | import { ref, onMounted, computed } from 'vue';
  4 | import noUiSlider from 'nouislider';
  5 | import 'nouislider/dist/nouislider.css';
  6 | 
  7 | const { t, locale } = useI18n();
  8 | const selectedRange = ref([1990, 2024]);
  9 | const selectedRange2 = ref([10000, 400000]);
 10 | const selectedRange3 = ref([3000, 50000]); 
 11 | const router = useRouter(); 
 12 | const openFilters = ref(false);
 13 | const marca = ref('')
 14 | const combustivel = ref('')
 15 | const modelo = ref('')
 16 | const transmissao = ref('')
 17 | const tipologia = ref('')
 18 | const lugares = ref('')
 19 | 
 20 | const marcas = [
 21 |   {
 22 |     title: "Audi"
 23 |   },
 24 |   {
 25 |     title: "BMW"
 26 |   },
 27 |   {
 28 |     title: "Mercedes"
 29 |   },
 30 |   {
 31 |     title: "Fiat"
 32 |   },
 33 |   {
 34 |     title: "Toyota"
 35 |   },
 36 |   {
 37 |     title: "Peugeot"
 38 |   }
 39 | ]
 40 | 
 41 | const combustiveis = [
 42 |   {
 43 |     title: t('gasoline'),
 44 |   },
 45 |   {
 46 |     title: t('diesel'),
 47 |   },
 48 |   {
 49 |     title: t('lpg'),
 50 |   },
 51 |   {
 52 |     title: t('eletric')
 53 |   }
 54 | ]
 55 | 
 56 | const transmissoes = [
 57 |   {
 58 |     title: t('manual')
 59 |   },
 60 |   {
 61 |     title: t('automatic')
 62 |   }
 63 | ];
 64 | 
 65 | const lugaresOpcoes = [
 66 |   {
 67 |     title: 2
 68 |   },
 69 |   {
 70 |     title: 3
 71 |   },
 72 |   {
 73 |     title: 4 
 74 |   },
 75 |   {
 76 |     title: 5
 77 |   },
 78 |   {
 79 |     title: 6
 80 |   }
 81 | ];
 82 | 
 83 | const typologies = [
 84 |   {
 85 |     title: t('utility')
 86 |   },
 87 |   {
 88 |     title: t('cityBased')
 89 |   },
 90 |   {
 91 |     title: t('suv')
 92 |   },
 93 |   {
 94 |     title: t('van')
 95 |   },
 96 |   {
 97 |     title: t('monoVolume')
 98 |   }
 99 | ];
100 | 
101 | const pesquisar = () => {
102 |   // Use router.push to navigate to /stock with query parameters
103 |   router.push({
104 |     path: '/stock',
105 |     query: {
106 |       marca: marca.value,
107 |       combustivel: combustivel.value,
108 |       minAno: selectedRange.value[0],
109 |       maxAno: selectedRange.value[1],
110 |       minPreco: selectedRange3.value[0],
111 |       maxPreco: selectedRange3.value[1],
112 |       minKM: selectedRange2.value[0],
113 |       maxKM: selectedRange2.value[1],
114 |       modelo: modelo.value,
115 |       transmissao: transmissao.value,
116 |       tipologia: tipologia.value,
117 |       lugares: lugares.value,
118 |     }
119 |   });
120 | };
121 | 
122 | onMounted(() => {
123 |   const slider = document.getElementById('year-slider') as HTMLElement;
124 |   
125 |   noUiSlider.create(slider, {
126 |     start: selectedRange.value,
127 |     connect: true,
128 |     range: {
129 |       min: 1990,
130 |       max: 2024
131 |     },
132 |     step: 1, 
133 |     tooltips: true, 
134 |     format: {
135 |       to: (value: number) => Math.round(value),
136 |       from: (value: string) => parseInt(value)
137 |     }
138 |   });
139 | 
140 |   // After initializing the slider, style the connect bars
141 |   const connectBars = slider.getElementsByClassName("noUi-connect");
142 |   for (let i = 0; i < connectBars.length; i++) {
143 |     const bar = connectBars[i] as HTMLElement;
144 |     bar.style.background = "#b53d3d"; 
145 |     bar.style.border = "none"; 
146 |     bar.style.outline = "none"; 
147 |     bar.style.boxShadow = "none"; 
148 |     bar.style.height = "6px";
149 |   }
150 | 
151 |   // Style the handles
152 |   const handles = slider.querySelectorAll(".noUi-handle");
153 |   handles.forEach(handle => {
154 |     handle.style.background = "#b53d3d";
155 |     handle.style.border = "2px solid #b53d3d";
156 |     handle.style.borderRadius = "10px";
157 |     handle.style.width = "36px";
158 |     handle.style.height = "24px";
159 |     handle.style.cursor = "grab"; 
160 |     handle.style.boxShadow = "none"; 
161 |     handle.style.outline = "none";
162 | 
163 |     // Add grabbing effect when mouse is down
164 |     handle.addEventListener("mousedown", () => {
165 |       handle.style.cursor = "grabbing";
166 |     });
167 |     handle.addEventListener("mouseup", () => {
168 |       handle.style.cursor = "grab";
169 |     });
170 |   });
171 | 
172 |   // Apply the custom tooltip styling after the slider is initialized
173 |   slider.noUiSlider?.on('update', (values: any) => {
174 |     selectedRange.value = values.map((value: string) => parseInt(value));
175 |     //console.log("Intervalo selecionado: " + selectedRange.value[0] + " - " + selectedRange.value[1]);
176 |   });
177 | 
178 |   // Apply custom styles to the tooltips
179 |   const tooltips = slider.querySelectorAll('.noUi-tooltip');
180 |   tooltips.forEach(tooltip => {
181 |     tooltip.style.backgroundColor = "#b53d3d";
182 |     tooltip.style.color = "white";               
183 |     tooltip.style.borderRadius = "12px";         
184 |     tooltip.style.padding = "3px 10px";          
185 |     tooltip.style.fontSize = "14px";
186 |     tooltip.style.fontWeight = "bold";
187 |     tooltip.style.transform = "translateY(27px) translateX(-19px)"; 
188 |     tooltip.style.textAlign = "center";          
189 |     tooltip.style.zIndex = "10";                
190 |     tooltip.style.border = "none";
191 |   });
192 | });
193 | 
194 | function initializeSliders() {
195 |   const slider2 = document.getElementById('price-slider');
196 |   const slider3 = document.getElementById('kilometer-slider');
197 |   
198 |   if (!slider2 || !slider3) {
199 |     console.warn('One or more sliders are missing from the DOM.');
200 |     return;
201 |   }
202 | 
203 |   // Initialize sliders only if they are visible
204 |   if (slider2.offsetParent !== null && slider3.offsetParent !== null) {
205 |     noUiSlider.create(slider2, {
206 |       start: selectedRange3.value,
207 |       connect: true,
208 |       range: {
209 |         min: 3000,
210 |         max: 50000
211 |       },
212 |       step: 1, 
213 |       tooltips: true, 
214 |       format: {
215 |         to: (value: number) => Math.round(value)+'€',
216 |         from: (value: string) => parseInt(value)
217 |       }
218 |     });
219 | 
220 |     noUiSlider.create(slider3, {
221 |       start: selectedRange2.value,
222 |       connect: true,
223 |       range: {
224 |         min: 10000,
225 |         max: 400000
226 |       },
227 |       step: 1, 
228 |       tooltips: true, 
229 |       format: {
230 |         to: (value: number) => Math.round(value)+'km',
231 |         from: (value: string) => parseInt(value)
232 |       }
233 |     });
234 |   }
235 | 
236 |   const connectBars2 = slider2.getElementsByClassName("noUi-connect");
237 |   for (let i = 0; i < connectBars2.length; i++) {
238 |     const bar = connectBars2[i] as HTMLElement;
239 |     bar.style.background = "#b53d3d"; 
240 |     bar.style.border = "none"; 
241 |     bar.style.outline = "none"; 
242 |     bar.style.boxShadow = "none"; 
243 |     bar.style.height = "6px";
244 |   }
245 |   const connectBars3 = slider3.getElementsByClassName("noUi-connect");
246 |   for (let i = 0; i < connectBars3.length; i++) {
247 |     const bar = connectBars3[i] as HTMLElement;
248 |     bar.style.background = "#b53d3d"; 
249 |     bar.style.border = "none"; 
250 |     bar.style.outline = "none"; 
251 |     bar.style.boxShadow = "none";
252 |     bar.style.height = "6px";
253 |   }
254 |   
255 |   const handles2 = slider2.querySelectorAll(".noUi-handle");
256 |   handles2.forEach(handle => {
257 |     handle.style.background = "#b53d3d";
258 |     handle.style.border = "2px solid #b53d3d";
259 |     handle.style.borderRadius = "10px";
260 |     handle.style.width = "36px";
261 |     handle.style.height = "24px";
262 |     handle.style.cursor = "grab"; 
263 |     handle.style.boxShadow = "none"; 
264 |     handle.style.outline = "none";
265 | 
266 |     // Add grabbing effect when mouse is down
267 |     handle.addEventListener("mousedown", () => {
268 |       handle.style.cursor = "grabbing";
269 |     });
270 |     handle.addEventListener("mouseup", () => {
271 |       handle.style.cursor = "grab";
272 |     });
273 |   });
274 |   const handles3 = slider3.querySelectorAll(".noUi-handle");
275 |   handles3.forEach(handle => {
276 |     handle.style.background = "#b53d3d";
277 |     handle.style.border = "2px solid #b53d3d";
278 |     handle.style.borderRadius = "10px";
279 |     handle.style.width = "36px";
280 |     handle.style.height = "24px";
281 |     handle.style.cursor = "grab"; 
282 |     handle.style.boxShadow = "none"; 
283 |     handle.style.outline = "none";
284 | 
285 |     // Add grabbing effect when mouse is down
286 |     handle.addEventListener("mousedown", () => {
287 |       handle.style.cursor = "grabbing";
288 |     });
289 |     handle.addEventListener("mouseup", () => {
290 |       handle.style.cursor = "grab";
291 |     });
292 |   });
293 | 
294 |   slider2.noUiSlider?.on('update', (values: any) => {
295 |     selectedRange3.value = values.map((value: string) => parseInt(value));
296 |     //console.log("Intervalo selecionado: " + selectedRange.value[0] + " - " + selectedRange.value[1]);
297 |   });
298 |   slider3.noUiSlider?.on('update', (values: any) => {
299 |     selectedRange2.value = values.map((value: string) => parseInt(value));
300 |     //console.log("Intervalo selecionado: " + selectedRange.value[0] + " - " + selectedRange.value[1]);
301 |   });
302 | 
303 |   const tooltips2 = slider2.querySelectorAll('.noUi-tooltip');
304 |   tooltips2.forEach(tooltip => {
305 |     tooltip.style.backgroundColor = "#b53d3d";
306 |     tooltip.style.color = "white";               
307 |     tooltip.style.borderRadius = "12px";         
308 |     tooltip.style.padding = "3px 8px";          
309 |     tooltip.style.fontSize = "14px";
310 |     tooltip.style.fontWeight = "bold";
311 |     tooltip.style.transform = "translateY(27px) translateX(-19px)"; 
312 |     tooltip.style.textAlign = "center";          
313 |     tooltip.style.zIndex = "10";                
314 |     tooltip.style.border = "none";
315 |   });
316 |   const tooltips3 = slider3.querySelectorAll('.noUi-tooltip');
317 |   tooltips3.forEach(tooltip => {
318 |     tooltip.style.backgroundColor = "#b53d3d";
319 |     tooltip.style.color = "white";               
320 |     tooltip.style.borderRadius = "12px";         
321 |     tooltip.style.padding = "3px 8px";          
322 |     tooltip.style.fontSize = "14px";
323 |     tooltip.style.fontWeight = "bold";
324 |     tooltip.style.transform = "translateY(27px) translateX(-19px)"; 
325 |     tooltip.style.textAlign = "center";          
326 |     tooltip.style.zIndex = "10";                
327 |     tooltip.style.border = "none";
328 |   });
329 | }
330 | 
331 | const isHiding = ref(false);
332 | 
333 | function toggleOpenFilters() {
334 |   if (openFilters.value) {
335 |     isHiding.value = true;
336 |     setTimeout(() => {
337 |       openFilters.value = false;
338 |       isHiding.value = false;
339 |     }, 1000); 
340 |   } else {
341 |     openFilters.value = true;
342 |     nextTick(() => {
343 |       initializeSliders();
344 |     });
345 |   }
346 | }
347 | </script>
348 | 
349 | <template>
350 |   <div class="w-full relative mt-[-120px] bg-[#121212] min-h-[480px]">
351 |       <div v-if="openFilters" class="block h-[925px] md:hidden "></div>
352 |       <img class="hidden md:block w-full h-[550px] object-cover" src="https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages/homePage/bgHero.jpg" alt="Background Image Hero Section">
353 |       <div class="absolute inset-0 top-[130px] md:top-[22%] flex flex-col items-center w-full">
354 |         <div class="bg-[#201818] px-0 lg:px-8 pt-10 pb-6 rounded-xl md:rounded-[100px] items-center justify-center w-full max-w-[300px] md:max-w-[700px] lg:max-w-[900px] test">
355 |           <div class="text-[#D32F2F] flex justify-between items-center px-6 md:px-10 mb-4">
356 |             <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 2a8 8 0 0 1 8 8c0 2.4-1 4.5-2.7 6c-1.4-1.3-3.3-2-5.3-2s-3.8.7-5.3 2C5 16.5 4 14.4 4 12a8 8 0 0 1 8-8m2 1.89c-.38.01-.74.26-.9.65l-1.29 3.23l-.1.23c-.71.13-1.3.6-1.57 1.26c-.41 1.03.09 2.19 1.12 2.6s2.19-.09 2.6-1.12c.26-.66.14-1.42-.29-1.98l.1-.26l1.29-3.21l.01-.03c.2-.51-.05-1.09-.56-1.3c-.13-.05-.26-.07-.41-.07M10 6a1 1 0 0 0-1 1a1 1 0 0 0 1 1a1 1 0 0 0 1-1a1 1 0 0 0-1-1M7 9a1 1 0 0 0-1 1a1 1 0 0 0 1 1a1 1 0 0 0 1-1a1 1 0 0 0-1-1m10 0a1 1 0 0 0-1 1a1 1 0 0 0 1 1a1 1 0 0 0 1-1a1 1 0 0 0-1-1"/></svg>
357 |             <h1 class="text-[#D32F2F] text-center text-2xl font-bold mr-0 md:mr-10">
358 |               {{ t('filtersTitle') }}
359 |             </h1>
360 |             <div></div>
361 |           </div>
362 |           <div class="flex flex-col md:flex-row justify-center items-start md:items-center px-0 md:px-3 pl-6 md:pl-0 relative">
363 |             <div class="w-[75%] md:w-[30%] rounded-xl relative pl-0 md:pl-6">
364 |               <label class="text-xs text-[#b53d3d] ml-2 font-semibold">{{ t('brand') }}</label>
365 |               <select v-model="marca" class="bg-transparent hover:bg-transparent w-full px-3 py-2 bg-gray-800 text-white rounded-2xl border appearance-none focus:outline-none border-[#b53d3d]">
366 |                 <option class="bg-[#201818]" value="">{{ t('select') }}</option>
367 |                 <option class="bg-[#201818]" v-for="marca in marcas" :key="marca.title" :value="marca.title">{{ marca.title }}</option>
368 |               </select>
369 |               <svg class="absolute top-[50%] right-2 pointer-events-none" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 12 12"><path fill="white" d="M3.076 4.617A1 1 0 0 1 4 4h4a1 1 0 0 1 .707 1.707l-2 2a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1-.217-1.09"/></svg>
370 |             </div>
371 | 
372 |             <div class="w-[95%] md:w-[44%] ml-[2px] md:ml-[14px] pr-[14px] flex flex-col gap-3 mb-2 py-1.5">
373 |               <label class="text-xs text-[#b53d3d] font-semibold ml-1 md:ml-0 mr-6">{{ t('year') }}</label>
374 |               <div id="year-slider" class="slider relative px-4" :class="{'pr-8': selectedRange.length<50}"></div>
375 |             </div>
376 | 
377 |             <!-- Dropdown Combustível -->
378 |             <div class="w-[90%] md:w-[30%] relative pr-0 md:pr-10">
379 |               <label class="text-xs text-[#b53d3d] ml-2 font-semibold">{{ t('fuel') }}</label>
380 |               <select v-model="combustivel" class="bg-transparent w-full px-3 py-2 bg-gray-800 text-white rounded-2xl border appearance-none focus:outline-none border-[#b53d3d]">
381 |                 <option class="bg-[#201818]" value="">{{ t('select') }}</option>
382 |                 <option class="bg-[#201818]" v-for="combustivel in combustiveis" :key="combustivel.title">{{ combustivel.title }}</option>
383 |               </select>
384 |               <svg class="absolute top-[50%] right-2 md:right-12 pointer-events-none" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 12 12"><path fill="white" d="M3.076 4.617A1 1 0 0 1 4 4h4a1 1 0 0 1 .707 1.707l-2 2a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1-.217-1.09"/></svg>
385 |             </div>
386 |             <button
387 |               @click="toggleOpenFilters()"
388 |               >
389 |               <svg :class="{'rotate-[90deg]': openFilters && !isHiding}" class="absolute right-8 lg:right-[-10px] transition duration-[1s] ease-in-out top-[31px]" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path fill="none" stroke="white" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.5" d="M21.25 12H8.895m-4.361 0H2.75m18.5 6.607h-5.748m-4.361 0H2.75m18.5-13.214h-3.105m-4.361 0H2.75m13.214 2.18a2.18 2.18 0 1 0 0-4.36a2.18 2.18 0 0 0 0 4.36Zm-9.25 6.607a2.18 2.18 0 1 0 0-4.36a2.18 2.18 0 0 0 0 4.36Zm6.607 6.608a2.18 2.18 0 1 0 0-4.361a2.18 2.18 0 0 0 0 4.36Z"/></svg>
390 |             </button>
391 |           </div>
392 |           
393 |           <div 
394 |             v-if="openFilters"
395 |             :class="{
396 |               'appearSmooth': openFilters && !isHiding,
397 |               'disappearSmooth': isHiding
398 |             }"
399 |             class="w-full transition-all duration-[1.5s] ease-in-out"
400 |           >
401 |             <div class="w-full flex justify-center items-center">
402 |               <div class="mt-6 bg-[#b53d3d] opacity-[0.3] h-[1px] w-full ml-10 mr-12 py-[1px]"></div>
403 |             </div>
404 |             <div class="flex flex-col md:flex-row justify-center items-start md:items-center px-0 md:px-3 pt-2 pl-6 md:pl-0">
405 |               <div class="w-[90%] md:w-[30%] rounded-xl relative pl-0 md:pl-6">
406 |                 <label class="text-xs text-[#b53d3d] ml-2 font-semibold">{{ t('model') }}</label>
407 |                 <select v-model="modelo" class="bg-transparent hover:bg-transparent w-full px-3 py-2 bg-gray-800 text-white rounded-2xl border appearance-none focus:outline-none border-[#b53d3d]">
408 |                   <option class="bg-[#201818]" value="">{{ t('select') }}</option>
409 |                   <option class="bg-[#201818]" v-for="marca in marcas" :key="marca.title" :value="marca.title">{{ marca.title }}</option>
410 |                 </select>
411 |                 <svg class="absolute top-[50%] right-2 pointer-events-none" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 12 12"><path fill="white" d="M3.076 4.617A1 1 0 0 1 4 4h4a1 1 0 0 1 .707 1.707l-2 2a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1-.217-1.09"/></svg>
412 |               </div>
413 | 
414 |               <div class="w-[90%] md:w-[40%] ml-0 md:ml-[9px] pl-[5px] md:pl-[3px] pr-[28px] md:pr-[21px] flex flex-col gap-3 mb-2 mr-5 py-1.5">
415 |                 <label class="text-xs text-[#b53d3d] font-semibold mr-6">{{ t('budget') }}</label>
416 |                 <div id="price-slider" class="slider relative px-4"></div>
417 |               </div>
418 | 
419 |               <!-- Dropdown Combustível -->
420 |               <div class="w-[90%] md:w-[30%] relative pr-0 md:pr-10">
421 |                 <label class="text-xs text-[#b53d3d] ml-2 font-semibold">{{ t('typology') }}</label>
422 |                 <select v-model="tipologia" class="bg-transparent w-full px-3 py-2 bg-gray-800 text-white rounded-2xl border appearance-none focus:outline-none border-[#b53d3d]">
423 |                   <option class="bg-[#201818]" value="">{{ t('select') }}</option>
424 |                   <option class="bg-[#201818]" v-for="opt in typologies" :key="opt.title">{{ opt.title }}</option>
425 |                 </select>
426 |                 <svg class="absolute top-[50%] right-2 md:right-12 pointer-events-none" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 12 12"><path fill="white" d="M3.076 4.617A1 1 0 0 1 4 4h4a1 1 0 0 1 .707 1.707l-2 2a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1-.217-1.09"/></svg>
427 |               </div>
428 |             </div>
429 |             <div class="flex flex-col md:flex-row justify-center items-start md:items-center px-0 md:px-3 pt-2 pl-6 md:pl-0">
430 |               <div class="w-[90%] md:w-[30%] rounded-xl pl-0 md:pl-6 relative">
431 |                 <label class="text-xs text-[#b53d3d] ml-2 font-semibold">{{ t('transmission') }}</label>
432 |                 <select v-model="transmissao" class="bg-transparent hover:bg-transparent w-full px-3 py-2 bg-gray-800 text-white rounded-2xl border appearance-none focus:outline-none border-[#b53d3d]">
433 |                   <option class="bg-[#201818]" value="">{{ t('select') }}</option>
434 |                   <option class="bg-[#201818]" v-for="opt in transmissoes" :key="opt.title" :value="opt.title">{{ opt.title }}</option>
435 |                 </select>
436 |                 <svg class="absolute top-[50%] right-2 pointer-events-none" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 12 12"><path fill="white" d="M3.076 4.617A1 1 0 0 1 4 4h4a1 1 0 0 1 .707 1.707l-2 2a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1-.217-1.09"/></svg>
437 |               </div>
438 | 
439 |               <div class="w-[90%] md:w-[40%] pl-[3px] md:pl-[12px] pr-[46px] md:pr-[34px] flex flex-col gap-3 mb-2 mr-7 py-1.5">
440 |                 <label class="text-xs text-[#b53d3d] font-semibold ml-1 md:ml-0 mr-6">{{ t('kilometers') }}</label>
441 |                 <div id="kilometer-slider" class="slider relative px-4"></div>
442 |               </div>
443 | 
444 |               <!-- Dropdown Combustível -->
445 |               <div class="w-[90%] md:w-[30%] relative pr-0 md:pr-10">
446 |                 <label class="text-xs text-[#b53d3d] ml-2 font-semibold">{{ t('capacity') }}</label>
447 |                 <select v-model="lugares" class="bg-transparent w-full px-3 py-2 bg-gray-800 text-white rounded-2xl border appearance-none focus:outline-none border-[#b53d3d]">
448 |                   <option class="bg-[#201818]" value="">{{ t('select') }}</option>
449 |                   <option class="bg-[#201818]" v-for="opt in lugaresOpcoes" :key="opt.title">{{ opt.title + ' ' +  t('seats') }}</option>
450 |                 </select>
451 |                 <svg class="absolute top-[50%] right-2 md:right-12 pointer-events-none" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 12 12"><path fill="white" d="M3.076 4.617A1 1 0 0 1 4 4h4a1 1 0 0 1 .707 1.707l-2 2a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1-.217-1.09"/></svg>
452 |               </div>
453 |             </div>
454 |             <div class="w-full flex justify-center items-center">
455 |               <div class="mt-6 bg-[#b53d3d] opacity-[0.3] h-[1px] w-full ml-10 mr-12 py-[1px]"></div>
456 |             </div>
457 |           </div>
458 |           <div class="flex justify-center text-white font-bold items-center">
459 |             <button @click="pesquisar" class="bg-[#b53d3d] py-3 w-[170px] md:w-[250px] mt-6 rounded-full hover:opacity-[0.9] hover:scale-[1.02] transform transition duration-300 ease-in-out">
460 |               {{ t('search') }} <i class="fa-solid fa-magnifying-glass"></i>
461 |             </button>
462 |           </div>
463 |         </div>
464 |       </div>
465 |   </div>
466 | 
467 | </template>
468 | 
469 | <style scoped>
470 | .test {
471 |   box-shadow: 0 0 30px #511e1e;
472 |   background: linear-gradient(to bottom, #281d1d, #281d1d, #431313);
473 | }
474 | 
475 | .slider {
476 |   width: 100%;
477 |   height: 10px;
478 | }
479 | .noUi-tooltip {
480 |   display: none;
481 | }
482 | 
483 | @keyframes slide-down {
484 |   from {
485 |     opacity: 0;
486 |     max-height: 0;
487 |   }
488 |   to {
489 |     opacity: 1;
490 |     max-height: 500px;
491 |   }
492 | }
493 | 
494 | .appearSmooth {
495 |   animation: slide-down 1.4s ease-in-out;
496 |   overflow: hidden;
497 | }
498 | 
499 | @keyframes slide-up {
500 |   from {
501 |     opacity: 1;
502 |     max-height: 200px;
503 |   }
504 |   to {
505 |     opacity: 0;
506 |     max-height: 0;
507 |   }
508 | }
509 | 
510 | .disappearSmooth {
511 |   animation: slide-up 1s ease-in-out;
512 |   overflow: hidden;
513 | }
514 | 
515 | @media (max-width: 768px) {
516 |   @keyframes slide-up {
517 |     from {
518 |       opacity: 1;
519 |       max-height: 500px;
520 |     }
521 |     to {
522 |       opacity: 0;
523 |       max-height: 0;
524 |     }
525 |   };
526 | }
527 | 
528 | #price-slider .noUi-tooltip,
529 | #kilometer-slider .noUi-tooltip {
530 |   display: none;
531 | }
532 | 
533 | .shadow1 {
534 |   position: absolute;
535 |   width: 1000px; 
536 |   height: 850px;
537 |   bottom: -500px;
538 |   left: -300px;
539 |   background : radial-gradient(closest-side, rgba(157,170,255,0.21), #151316);
540 |   opacity: 0.6;
541 |   z-index: 0;
542 | }
543 | 
544 | .shadow2 {
545 |   position: absolute;
546 |   width: 1000px; 
547 |   height: 850px;
548 |   top: -500px;
549 |   left: -300px;
550 |   background : radial-gradient(closest-side, rgba(157,170,255,0.21), #151316);
551 |   opacity: 0.35;
552 |   z-index: 0;
553 | }
554 | 
555 | .noUi-target {
556 |   background-color: #29333c;
557 |   border: none;
558 |   outline: none;
559 |   box-shadow: none;
560 |   height: 6px;
561 | }
562 | </style>
563 | 


--------------------------------------------------------------------------------
/components/stock/Main.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { computed } from 'vue';
  3 | import { Swiper, SwiperSlide } from 'swiper/vue';
  4 | import { Navigation } from 'swiper/modules';
  5 | import noUiSlider from 'nouislider';
  6 | import 'nouislider/dist/nouislider.css';
  7 | import 'swiper/swiper-bundle.css'; 
  8 | 
  9 | const {t, locale} = useI18n();
 10 | const selectedRange = ref([1990, 2024]);
 11 | const selectedRange2 = ref([10000, 400000]);
 12 | const selectedRange3 = ref([3000, 50000]); 
 13 | const localCode = useCookie("i18n_redirected");
 14 | 
 15 | const props = defineProps({
 16 |   marca: String,
 17 |   combustivel: String,
 18 |   minAno: Number,
 19 |   maxAno: Number,
 20 |   minPreco: Number,
 21 |   maxPreco: Number,
 22 |   minKM: Number,
 23 |   maxKM: Number,
 24 |   modelo: String,
 25 |   transmissao: String,
 26 |   tipologia: String,
 27 |   lugares: String,
 28 | });
 29 | 
 30 | const marca = ref(props.marca ? props.marca : "");
 31 | const combustivel = ref(props.combustivel ? props.combustivel : "");
 32 | const modelo = ref(props.modelo ? props.modelo : "");
 33 | const transmissao = ref(props.transmissao ? props.transmissao : "");
 34 | const tipologia = ref(props.tipologia ? props.tipologia : "");
 35 | const lugares = ref(props.lugares ? props.lugares : "");
 36 | selectedRange.value[0] = props.minAno ? props.minAno : 1990;
 37 | selectedRange.value[1] = props.maxAno ? props.maxAno : 2024;
 38 | selectedRange3.value[0] = props.minPreco ? props.minPreco : 3000;
 39 | selectedRange3.value[1] = props.maxPreco ? props.maxPreco : 50000;
 40 | selectedRange2.value[0] = props.minKM ? props.minKM : 10000;
 41 | selectedRange2.value[1] = props.maxKM ? props.maxKM : 400000;
 42 | 
 43 | const carros = [
 44 |   {
 45 |     id: 1,
 46 |     marca: "Audi",
 47 |     modelo: "A3 Sportback 1.6 TDI Sport",
 48 |     combustivel: "diesel",
 49 |     anoReg: 2013, 
 50 |     preco: "12, 990",
 51 |     transmissao: "manual",
 52 |     tipologia: "utility",
 53 |     lugares: 2,
 54 |     kms: 190000,
 55 |     imagens: [
 56 |       "https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages//mini2.jpg",
 57 |       "https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages//mini12.jpg",
 58 |       "https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages//mini8.jpg"
 59 | 
 60 |     ]
 61 |   },
 62 |   {
 63 |     id: 2,
 64 |     marca: "BMW",
 65 |     modelo: "A3 Sportback 1.6 TDI Sport",
 66 |     combustivel: "diesel",
 67 |     anoReg: 2011, 
 68 |     preco: "12, 990",
 69 |     transmissao: "manual",
 70 |     tipologia: "utility",
 71 |     lugares: 4,
 72 |     kms: 190000,
 73 |     imagens: [
 74 |       "https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages//mini2.jpg",
 75 |       "https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages//mini12.jpg",
 76 |       "https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages//mini8.jpg"
 77 | 
 78 |     ]
 79 |   },
 80 |   {
 81 |     id: 3,
 82 |     marca: "Fiat",
 83 |     modelo: "A3 Sportback 1.6 TDI Sport",
 84 |     combustivel: "diesel",
 85 |     anoReg: 2013, 
 86 |     preco: "12, 990",
 87 |     transmissao: "manual",
 88 |     tipologia: "utility",
 89 |     lugares: 5,
 90 |     kms: 190000,
 91 |     imagens: [
 92 |       "https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages//mini2.jpg",
 93 |       "https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages//mini12.jpg",
 94 |       "https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages//mini8.jpg"
 95 | 
 96 |     ]
 97 |   },
 98 |   {
 99 |     id: 4,
100 |     marca: "Toyota",
101 |     modelo: "A3 Sportback 1.6 TDI Sport",
102 |     combustivel: "eletric",
103 |     anoReg: 2013, 
104 |     preco: "8, 640",
105 |     transmissao: "automatic",
106 |     tipologia: "utility",
107 |     lugares: 5,
108 |     kms: 50000,
109 |     imagens: [
110 |       "https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages//mini2.jpg",
111 |       "https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages//mini12.jpg",
112 |       "https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages//mini8.jpg"
113 | 
114 |     ]
115 |   },
116 |   {
117 |     id: 5,
118 |     marca: "Peugeot",
119 |     modelo: "A3 Sportback 1.6 TDI Sport",
120 |     combustivel: "diesel",
121 |     anoReg: 2013, 
122 |     preco: "12, 990",
123 |     transmissao: "automatic",
124 |     tipologia: "utility",
125 |     lugares: 5,
126 |     kms: 190000,
127 |     imagens: [
128 |       "https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages//mini2.jpg",
129 |       "https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages//mini12.jpg",
130 |       "https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages//mini8.jpg"
131 | 
132 |     ]
133 |   },
134 |   {
135 |     id: 6,
136 |     marca: "Mini",
137 |     modelo: "A3 Sportback 1.6 TDI Sport",
138 |     combustivel: "diesel",
139 |     anoReg: 2013, 
140 |     preco: "12, 990",
141 |     transmissao: "manual",
142 |     tipologia: "cityBased",
143 |     lugares: 5,
144 |     kms: 190000,
145 |     imagens: [
146 |       "https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages//mini2.jpg",
147 |       "https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages//mini12.jpg",
148 |       "https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages//mini8.jpg"
149 |       
150 |     ]
151 |   }
152 | ];
153 | 
154 | const orderByOptions = [
155 |   {
156 |     title: t('higherPrice')
157 |   },
158 |   {
159 |     title: t('lowerPrice')
160 |   },
161 |   {
162 |     title: t('latest')
163 |   },
164 |   {
165 |     title: t('oldest')
166 |   },
167 |   {
168 |     title: t('brandAZ')
169 |   },
170 |   {
171 |     title: t('brandZA')
172 |   },
173 |   {
174 |     title: t('higherKMs')
175 |   },
176 |   {
177 |     title: t('lowerKMs')
178 |   },
179 | ]
180 | 
181 | const marcas = [
182 |   {
183 |     title: "Audi"
184 |   },
185 |   {
186 |     title: "BMW"
187 |   },
188 |   {
189 |     title: "Mercedes"
190 |   },
191 |   {
192 |     title: "Fiat"
193 |   },
194 |   {
195 |     title: "Toyota"
196 |   },
197 |   {
198 |     title: "Peugeot"
199 |   }
200 | ]
201 | 
202 | const combustiveis = [
203 |   {
204 |     title: t('gasoline'),
205 |   },
206 |   {
207 |     title: t('diesel'),
208 |   },
209 |   {
210 |     title: t('lpg'),
211 |   },
212 |   {
213 |     title: t('eletric')
214 |   }
215 | ];
216 | 
217 | const transmissoes = [
218 |   {
219 |     title: t('manual')
220 |   },
221 |   {
222 |     title: t('automatic')
223 |   }
224 | ];
225 | 
226 | const lugaresOpcoes = [
227 |   {
228 |     title: 2
229 |   },
230 |   {
231 |     title: 3
232 |   },
233 |   {
234 |     title: 4 
235 |   },
236 |   {
237 |     title: 5
238 |   },
239 |   {
240 |     title: 6
241 |   }
242 | ];
243 | 
244 | const typologies = [
245 |   {
246 |     title: t('utility')
247 |   },
248 |   {
249 |     title: t('cityBased')
250 |   },
251 |   {
252 |     title: t('suv')
253 |   },
254 |   {
255 |     title: t('van')
256 |   },
257 |   {
258 |     title: t('monoVolume')
259 |   }
260 | ];
261 | 
262 | function extractNumber(input: string): number {
263 |     const match = input.match(/\d+/);
264 |     return match ? parseInt(match[0], 10) : NaN;
265 | }
266 | 
267 | function parseFormattedNumber(input: string): number {
268 |     return parseInt(input.replace(/\D/g, ""), 10);
269 | }
270 | 
271 | const orderFilter = ref("");
272 | 
273 | const filteredCarros = computed(() => {
274 |   let filtered = carros.filter(carro => {
275 |     const isMarcaValid = marca.value ? carro.marca.toLowerCase().includes(marca.value.toLowerCase()) : true;
276 |     const isCombustivelValid = combustivel.value ? t(carro.combustivel).toLowerCase().includes(combustivel.value.toLowerCase()) : true;
277 |     const isTransmissionValid = transmissao.value ? t(carro.transmissao).toLowerCase().includes(transmissao.value.toLowerCase()) : true;
278 |     const isTipologiaValid = tipologia.value ? t(carro.tipologia).toLowerCase().includes(tipologia.value.toLowerCase()) : true;
279 |     const isLugaresValid = lugares.value ? carro.lugares==extractNumber(lugares.value) : true;
280 |     const isAnoValid = (selectedRange.value[0]!== undefined ? carro.anoReg >= selectedRange.value[0] : true) &&
281 |                        (selectedRange.value[1] !== undefined ? carro.anoReg <= selectedRange.value[1] : true);
282 |     const isPrecoValid = (selectedRange3.value[0]!== undefined ? parseFormattedNumber(carro.preco) >= selectedRange3.value[0] : true) &&
283 |                        (selectedRange3.value[1] !== undefined ? parseFormattedNumber(carro.preco) <= selectedRange3.value[1] : true);
284 |     const isKMValid = (selectedRange2.value[0]!== undefined ? carro.kms >= selectedRange2.value[0] : true) &&
285 |                        (selectedRange2.value[1] !== undefined ? carro.kms <= selectedRange2.value[1] : true);
286 | 
287 |     return isMarcaValid && isCombustivelValid && isAnoValid && isTransmissionValid && isTipologiaValid && isPrecoValid && isKMValid && isLugaresValid;
288 |   });
289 | 
290 |   return filtered.sort((a, b) => {
291 |     switch (orderFilter.value) {
292 |       case t('lowerPrice'):
293 |         return parseFloat(a.preco.replace(",", ".")) - parseFloat(b.preco.replace(",", "."));
294 |       case t('higherPrice'):
295 |         return parseFloat(b.preco.replace(",", ".")) - parseFloat(a.preco.replace(",", "."));
296 |       case t('latest'):
297 |         return a.anoReg - b.anoReg;
298 |       case t('oldest'):
299 |         return b.anoReg - a.anoReg;
300 |       case t('brandAZ'):
301 |         return a.marca.localeCompare(b.marca);
302 |       case t('brandZA'):
303 |         return b.marca.localeCompare(a.marca);
304 |       case t('lowerKMs'):
305 |         return a.kms - b.kms;
306 |         case t('higherKMs'):
307 |         return b.kms - a.kms;
308 |       default:
309 |         return 0;
310 |     }
311 |   });
312 | });
313 | 
314 | function initializeSliders() {
315 |   const slider = document.getElementById('year-slider') as HTMLElement;
316 |   
317 |   noUiSlider.create(slider, {
318 |     start: selectedRange.value,
319 |     connect: true,
320 |     range: {
321 |       min: 1990,
322 |       max: 2024
323 |     },
324 |     step: 1, 
325 |     tooltips: true, 
326 |     format: {
327 |       to: (value: number) => Math.round(value),
328 |       from: (value: string) => parseInt(value)
329 |     }
330 |   });
331 | 
332 |   // After initializing the slider, style the connect bars
333 |   const connectBars = slider.getElementsByClassName("noUi-connect");
334 |   for (let i = 0; i < connectBars.length; i++) {
335 |     const bar = connectBars[i] as HTMLElement;
336 |     bar.style.background = "#b53d3d"; 
337 |     bar.style.border = "none"; 
338 |     bar.style.outline = "none"; 
339 |     bar.style.boxShadow = "none";
340 |     bar.style.height = "6px";
341 |   }
342 | 
343 |   // Style the handles
344 |   const handles = slider.querySelectorAll(".noUi-handle");
345 |   handles.forEach(handle => {
346 |     handle.style.background = "#b53d3d";
347 |     handle.style.border = "2px solid #b53d3d";
348 |     handle.style.borderRadius = "10px";
349 |     handle.style.width = "36px";
350 |     handle.style.height = "24px";
351 |     handle.style.cursor = "grab"; 
352 |     handle.style.boxShadow = "none"; 
353 |     handle.style.outline = "none";
354 | 
355 |     // Add grabbing effect when mouse is down
356 |     handle.addEventListener("mousedown", () => {
357 |       handle.style.cursor = "grabbing";
358 |     });
359 |     handle.addEventListener("mouseup", () => {
360 |       handle.style.cursor = "grab";
361 |     });
362 |   });
363 | 
364 |   // Apply the custom tooltip styling after the slider is initialized
365 |   slider.noUiSlider?.on('update', (values: any) => {
366 |     selectedRange.value = values.map((value: string) => parseInt(value));
367 |     //console.log("Intervalo selecionado: " + selectedRange.value[0] + " - " + selectedRange.value[1]);
368 |   });
369 | 
370 |   // Apply custom styles to the tooltips
371 |   const tooltips = slider.querySelectorAll('.noUi-tooltip');
372 |   tooltips.forEach(tooltip => {
373 |     tooltip.style.backgroundColor = "#b53d3d";
374 |     tooltip.style.color = "white";               
375 |     tooltip.style.borderRadius = "12px";         
376 |     tooltip.style.padding = "3px 10px";          
377 |     tooltip.style.fontSize = "14px";
378 |     tooltip.style.fontWeight = "bold";
379 |     tooltip.style.transform = "translateY(27px) translateX(-19px)"; 
380 |     tooltip.style.textAlign = "center";          
381 |     tooltip.style.zIndex = "10";                
382 |     tooltip.style.border = "none";
383 |   });
384 | 
385 |   const slider2 = document.getElementById('price-slider');
386 |   const slider3 = document.getElementById('kilometer-slider');
387 |   
388 |   if (!slider2 || !slider3) {
389 |     console.warn('One or more sliders are missing from the DOM.');
390 |     return;
391 |   }
392 | 
393 |   // Initialize sliders only if they are visible
394 |   if (slider2.offsetParent !== null && slider3.offsetParent !== null) {
395 |     noUiSlider.create(slider2, {
396 |       start: selectedRange3.value,
397 |       connect: true,
398 |       range: {
399 |         min: 3000,
400 |         max: 50000
401 |       },
402 |       step: 1, 
403 |       tooltips: true, 
404 |       format: {
405 |         to: (value: number) => Math.round(value)+'€',
406 |         from: (value: string) => parseInt(value)
407 |       }
408 |     });
409 | 
410 |     noUiSlider.create(slider3, {
411 |       start: selectedRange2.value,
412 |       connect: true,
413 |       range: {
414 |         min: 10000,
415 |         max: 400000
416 |       },
417 |       step: 1, 
418 |       tooltips: true, 
419 |       format: {
420 |         to: (value: number) => Math.round(value)+'km',
421 |         from: (value: string) => parseInt(value)
422 |       }
423 |     });
424 |   }
425 | 
426 |   const connectBars2 = slider2.getElementsByClassName("noUi-connect");
427 |   for (let i = 0; i < connectBars2.length; i++) {
428 |     const bar = connectBars2[i] as HTMLElement;
429 |     bar.style.background = "#b53d3d"; 
430 |     bar.style.border = "none"; 
431 |     bar.style.outline = "none"; 
432 |     bar.style.boxShadow = "none";
433 |     bar.style.height = "6px";
434 |   }
435 |   const connectBars3 = slider3.getElementsByClassName("noUi-connect");
436 |   for (let i = 0; i < connectBars3.length; i++) {
437 |     const bar = connectBars3[i] as HTMLElement;
438 |     bar.style.background = "#b53d3d"; 
439 |     bar.style.border = "none"; 
440 |     bar.style.outline = "none"; 
441 |     bar.style.boxShadow = "none"; 
442 |     bar.style.height = "6px";
443 |   }
444 |   
445 |   const handles2 = slider2.querySelectorAll(".noUi-handle");
446 |   handles2.forEach(handle => {
447 |     handle.style.background = "#b53d3d";
448 |     handle.style.border = "2px solid #b53d3d";
449 |     handle.style.borderRadius = "10px";
450 |     handle.style.width = "36px";
451 |     handle.style.height = "24px";
452 |     handle.style.cursor = "grab"; 
453 |     handle.style.boxShadow = "none"; 
454 |     handle.style.outline = "none";
455 | 
456 |     // Add grabbing effect when mouse is down
457 |     handle.addEventListener("mousedown", () => {
458 |       handle.style.cursor = "grabbing";
459 |     });
460 |     handle.addEventListener("mouseup", () => {
461 |       handle.style.cursor = "grab";
462 |     });
463 |   });
464 |   const handles3 = slider3.querySelectorAll(".noUi-handle");
465 |   handles3.forEach(handle => {
466 |     handle.style.background = "#b53d3d";
467 |     handle.style.border = "2px solid #b53d3d";
468 |     handle.style.borderRadius = "10px";
469 |     handle.style.width = "36px";
470 |     handle.style.height = "24px";
471 |     handle.style.cursor = "grab"; 
472 |     handle.style.boxShadow = "none"; 
473 |     handle.style.outline = "none";
474 | 
475 |     // Add grabbing effect when mouse is down
476 |     handle.addEventListener("mousedown", () => {
477 |       handle.style.cursor = "grabbing";
478 |     });
479 |     handle.addEventListener("mouseup", () => {
480 |       handle.style.cursor = "grab";
481 |     });
482 |   });
483 | 
484 |   slider2.noUiSlider?.on('update', (values: any) => {
485 |     selectedRange3.value = values.map((value: string) => parseInt(value));
486 |     //console.log("Intervalo selecionado: " + selectedRange.value[0] + " - " + selectedRange.value[1]);
487 |   });
488 |   slider3.noUiSlider?.on('update', (values: any) => {
489 |     selectedRange2.value = values.map((value: string) => parseInt(value));
490 |     //console.log("Intervalo selecionado: " + selectedRange.value[0] + " - " + selectedRange.value[1]);
491 |   });
492 | 
493 |   const tooltips2 = slider2.querySelectorAll('.noUi-tooltip');
494 |   tooltips2.forEach(tooltip => {
495 |     tooltip.style.backgroundColor = "#b53d3d";
496 |     tooltip.style.color = "white";               
497 |     tooltip.style.borderRadius = "12px";         
498 |     tooltip.style.padding = "3px 8px";          
499 |     tooltip.style.fontSize = "14px";
500 |     tooltip.style.fontWeight = "bold";
501 |     tooltip.style.transform = "translateY(27px) translateX(-19px)"; 
502 |     tooltip.style.textAlign = "center";          
503 |     tooltip.style.zIndex = "10";                
504 |     tooltip.style.border = "none";
505 |   });
506 |   const tooltips3 = slider3.querySelectorAll('.noUi-tooltip');
507 |   tooltips3.forEach(tooltip => {
508 |     tooltip.style.backgroundColor = "#b53d3d";
509 |     tooltip.style.color = "white";               
510 |     tooltip.style.borderRadius = "12px";         
511 |     tooltip.style.padding = "3px 8px";          
512 |     tooltip.style.fontSize = "14px";
513 |     tooltip.style.fontWeight = "bold";
514 |     tooltip.style.transform = "translateY(27px) translateX(-19px)"; 
515 |     tooltip.style.textAlign = "center";          
516 |     tooltip.style.zIndex = "10";                
517 |     tooltip.style.border = "none";
518 |   });
519 | }
520 | 
521 | const isHiding = ref(false);
522 | 
523 | const openFilters = ref(false);
524 | function toggleOpenFilters() {
525 |   if (openFilters.value) {
526 |     isHiding.value = true;
527 |     setTimeout(() => {
528 |       openFilters.value = false;
529 |       isHiding.value = false;
530 |     }, 1000); 
531 |   } else {
532 |     openFilters.value = true;
533 |     nextTick(() => {
534 |       initializeSliders();
535 |     });
536 |   }
537 | }
538 | 
539 | const filledCount = computed(() => {
540 |   let count = 0;
541 |   
542 |   if (marca.value !== "") count++;
543 |   if (combustivel.value !== "") count++;
544 |   if (modelo.value !== "") count++;
545 |   if (transmissao.value !== "") count++;
546 |   if (tipologia.value !== "") count++;
547 |   if (lugares.value !== "") count++;
548 |   if (selectedRange.value[0] !== 1990) count++;
549 |   if (selectedRange.value[1] !== 2024) count++;
550 |   if (selectedRange3.value[0] !== 3000) count++;
551 |   if (selectedRange3.value[1] !== 50000) count++;
552 |   if (selectedRange2.value[0] !== 10000) count++;
553 |   if (selectedRange2.value[1] !== 400000) count++;
554 | 
555 |   return count;
556 | });
557 | 
558 | const resetFilters = () => {
559 |   marca.value = "";
560 |   combustivel.value = "";
561 |   modelo.value = "";
562 |   transmissao.value = "";
563 |   tipologia.value = "";
564 |   lugares.value = "";
565 |   selectedRange.value = [1990, 2024];
566 |   selectedRange3.value = [3000, 50000];
567 |   selectedRange2.value = [10000, 400000];
568 | };
569 | </script>
570 | 
571 | <template>
572 |   <div class="bg-[#121212] pt-8 pb-1 px-5 xs:px-10 lg:px-20 flex justify-between items-end" :class="{'pb-6': !openFilters || isHiding}">
573 |     <div class="w-[140px] text-white flex justify-start items-center">
574 |       <button
575 |         @click="toggleOpenFilters()"
576 |         >
577 |         <svg :class="{'rotate-[90deg]': openFilters && !isHiding}" class="transition mr-2 duration-[1s] ease-in-out" xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 24 24"><path fill="none" stroke="white" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.5" d="M21.25 12H8.895m-4.361 0H2.75m18.5 6.607h-5.748m-4.361 0H2.75m18.5-13.214h-3.105m-4.361 0H2.75m13.214 2.18a2.18 2.18 0 1 0 0-4.36a2.18 2.18 0 0 0 0 4.36Zm-9.25 6.607a2.18 2.18 0 1 0 0-4.36a2.18 2.18 0 0 0 0 4.36Zm6.607 6.608a2.18 2.18 0 1 0 0-4.361a2.18 2.18 0 0 0 0 4.36Z"/></svg>
578 |       </button>
579 |       <div v-if="filledCount!=0" class="pl-3 pr-2 flex justify-center items-center gap-1 py-1 border rounded-full">
580 |         {{ filledCount }}
581 |         <button @click="resetFilters()">
582 |           <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M12 20c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m0-18C6.47 2 2 6.47 2 12s4.47 10 10 10s10-4.47 10-10S17.53 2 12 2m2.59 6L12 10.59L9.41 8L8 9.41L10.59 12L8 14.59L9.41 16L12 13.41L14.59 16L16 14.59L13.41 12L16 9.41z"/></svg>
583 |         </button>
584 |       </div>
585 |     </div>
586 | 
587 |     <div class="relative w-[140px] mt-2">
588 |       <select v-model="orderFilter" class="bg-transparent w-[140px] hover:bg-transparent px-3 py-2 bg-gray-800 text-white rounded-2xl border appearance-none focus:outline-none border-[#b53d3d]">
589 |         <option class="bg-[#121212]" value="">{{ t('orderBy') }}</option>
590 |         <option class="bg-[#121212]" v-for="marca in orderByOptions" :key="marca.title" :value="marca.title">{{ marca.title }}</option>
591 |       </select>
592 |       <svg class="absolute top-[10px] right-1 pointer-events-none" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 12 12"><path fill="white" d="M3.076 4.617A1 1 0 0 1 4 4h4a1 1 0 0 1 .707 1.707l-2 2a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1-.217-1.09"/></svg>
593 |     </div>
594 |   </div>
595 | 
596 | 
597 |   <div v-if="openFilters"
598 |     class="w-full bg-[#121212] pt-1 flex justify-center items-center px-5 xs:px-10 lg:px-20"
599 |   >
600 |     <div 
601 |     :class="{
602 |       'appearSmooth': openFilters && !isHiding,
603 |       'disappearSmooth': isHiding
604 |     }"
605 |     class="w-full bg-[#121212] transition-all duration-[1.5s] ease-in-out"
606 |     > 
607 |     <div class="flex flex-col md:flex-row justify-center items-center pt-2">
608 |         <div class="w-full md:w-[25%] rounded-xl relative">
609 |           <label class="text-xs text-[#b53d3d] ml-2 font-semibold">{{ t('brand') }}</label>
610 |           <select v-model="marca" class="bg-transparent hover:bg-transparent w-full px-3 py-2 bg-gray-800 text-white rounded-2xl border appearance-none focus:outline-none border-[#b53d3d]">
611 |             <option class="bg-[#121212]" value="">{{ t('select') }}</option>
612 |             <option class="bg-[#121212]" v-for="marca in marcas" :key="marca.title" :value="marca.title">{{ marca.title }}</option>
613 |           </select>
614 |           <svg class="absolute top-[50%] right-2 pointer-events-none" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 12 12"><path fill="white" d="M3.076 4.617A1 1 0 0 1 4 4h4a1 1 0 0 1 .707 1.707l-2 2a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1-.217-1.09"/></svg>
615 |         </div>
616 | 
617 |         <div class="w-[96%] md:w-[50%] ml-0 md:ml-[9px] pl-0 md:pl-[3px] pr-0 md:pr-[12px] py-2 flex justify-center flex-col gap-3 mb-2">
618 |           <label class="text-xs text-[#b53d3d] font-semibold mr-6">{{ t('year') }}</label>
619 |           <div id="year-slider" class="slider relative px-4" :class="{'pr-8': selectedRange.length<50}"></div>
620 |         </div>
621 | 
622 |         <div class="w-full md:w-[25%] relative">
623 |           <label class="text-xs text-[#b53d3d] ml-2 font-semibold">{{ t('fuel') }}</label>
624 |           <select v-model="combustivel" class="bg-transparent w-full px-3 py-2 bg-gray-800 text-white rounded-2xl border appearance-none focus:outline-none border-[#b53d3d]">
625 |             <option class="bg-[#121212]" value="">{{ t('select') }}</option>
626 |             <option class="bg-[#121212]" v-for="opt in combustiveis" :key="opt.title">{{ opt.title }}</option>
627 |           </select>
628 |           <svg class="absolute top-[50%] right-2 pointer-events-none" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 12 12"><path fill="white" d="M3.076 4.617A1 1 0 0 1 4 4h4a1 1 0 0 1 .707 1.707l-2 2a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1-.217-1.09"/></svg>
629 |         </div>
630 |       </div>
631 |       <div class="w-full flex justify-center items-center bg-[#121212]">
632 |         <div class="mt-6 bg-[#b53d3d] opacity-[0.3] h-[1px] w-full py-[1px]"></div>
633 |       </div>
634 |       <div class="flex flex-col md:flex-row justify-center items-center pt-2">
635 |         <div class="w-full md:w-[25%] rounded-xl relative">
636 |           <label class="text-xs text-[#b53d3d] ml-2 font-semibold">{{ t('model') }}</label>
637 |           <select v-model="modelo" class="bg-transparent hover:bg-transparent w-full px-3 py-2 bg-gray-800 text-white rounded-2xl border appearance-none focus:outline-none border-[#b53d3d]">
638 |             <option class="bg-[#121212]" value="">{{ t('select') }}</option>
639 |             <option class="bg-[#121212]" v-for="marca in marcas" :key="marca.title" :value="marca.title">{{ marca.title }}</option>
640 |           </select>
641 |           <svg class="absolute top-[50%] right-2 pointer-events-none" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 12 12"><path fill="white" d="M3.076 4.617A1 1 0 0 1 4 4h4a1 1 0 0 1 .707 1.707l-2 2a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1-.217-1.09"/></svg>
642 |         </div>
643 | 
644 |         <div class="w-[96%] md:w-[50%] ml-[9px] pl-[3px] pr-[21px] py-2 flex justify-center flex-col gap-3 mb-2 mr-5">
645 |           <label class="text-xs text-[#b53d3d] font-semibold mr-6">{{ t('budget') }}</label>
646 |           <div id="price-slider" class="slider relative px-4"></div>
647 |         </div>
648 | 
649 |         <div class="w-full md:w-[25%] relative">
650 |           <label class="text-xs text-[#b53d3d] ml-2 font-semibold">{{ t('typology') }}</label>
651 |           <select v-model="tipologia" class="bg-transparent w-full px-3 py-2 bg-gray-800 text-white rounded-2xl border appearance-none focus:outline-none border-[#b53d3d]">
652 |             <option class="bg-[#121212]" value="">{{ t('select') }}</option>
653 |             <option class="bg-[#121212]" v-for="opt in typologies" :key="opt.title">{{ opt.title }}</option>
654 |           </select>
655 |           <svg class="absolute top-[50%] right-2 pointer-events-none" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 12 12"><path fill="white" d="M3.076 4.617A1 1 0 0 1 4 4h4a1 1 0 0 1 .707 1.707l-2 2a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1-.217-1.09"/></svg>
656 |         </div>
657 |       </div>
658 |       <div class="flex-col md:flex-row flex justify-center items-center pt-2">
659 |         <div class="w-full md:w-[25%] rounded-xl relative">
660 |           <label class="text-xs text-[#b53d3d] ml-2 font-semibold">{{ t('transmission') }}</label>
661 |           <select v-model="transmissao" class="bg-transparent hover:bg-transparent w-full px-3 py-2 bg-gray-800 text-white rounded-2xl border appearance-none focus:outline-none border-[#b53d3d]">
662 |             <option class="bg-[#121212]" value="">{{ t('select') }}</option>
663 |             <option class="bg-[#121212]" v-for="opt in transmissoes" :key="opt.title" :value="opt.title">{{ opt.title }}</option>
664 |           </select>
665 |           <svg class="absolute top-[50%] right-2 pointer-events-none" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 12 12"><path fill="white" d="M3.076 4.617A1 1 0 0 1 4 4h4a1 1 0 0 1 .707 1.707l-2 2a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1-.217-1.09"/></svg>
666 |         </div>
667 | 
668 |         <div class="w-[96.5%] md:w-[50%] pl-[12px] pr-[34px] py-2 flex justify-center flex-col gap-3 mb-2 mr-7">
669 |           <label class="text-xs text-[#b53d3d] font-semibold mr-6">{{ t('kilometers') }}</label>
670 |           <div id="kilometer-slider" class="slider relative px-4"></div>
671 |         </div>
672 | 
673 |         <div class="w-full md:w-[25%] relative">
674 |           <label class="text-xs text-[#b53d3d] ml-2 font-semibold">{{ t('capacity') }}</label>
675 |           <select v-model="lugares" class="bg-transparent w-full px-3 py-2 bg-gray-800 text-white rounded-2xl border appearance-none focus:outline-none border-[#b53d3d]">
676 |             <option class="bg-[#121212]" value="">{{ t('select') }}</option>
677 |             <option class="bg-[#121212]" v-for="opt in lugaresOpcoes" :key="opt.title">{{ opt.title + ' ' + t('seats') }}</option>
678 |           </select>
679 |           <svg class="absolute top-[50%] right-2 pointer-events-none" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 12 12"><path fill="white" d="M3.076 4.617A1 1 0 0 1 4 4h4a1 1 0 0 1 .707 1.707l-2 2a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1-.217-1.09"/></svg>
680 |         </div>
681 |       </div>
682 |       <div class="w-full flex justify-center items-center bg-[#121212] text-[#121212]">
683 |         <div class="mt-6 bg-[#b53d3d] opacity-[0.3] h-[1px] w-full py-[1px]"></div>
684 |       </div>
685 |     </div>
686 |   </div>
687 | 
688 |   <div v-if="filteredCarros.length==0" class="bg-[#121212] text-center w-full pb-20 flex justify-center items-center text-3xl lg:text-5xl font-black text-white" :style="{ height: 'calc(100vh - 198px)' }">
689 |     No cars correspond the preferences.
690 |   </div>
691 |   <div v-else class="bg-[#121212] w-full pb-20 px-5 xs:px-10 lg:px-20 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-10" :class="{'pt-6': openFilters}" :style="{ minHeight: 'calc(100vh - 198px)' }">
692 |     <div
693 |     v-for="(carro, index) in filteredCarros" :key="carro.modelo" 
694 |     class="pt-4 pb-1 px-4 test rounded-2xl bg-[#201818] h-fit"
695 |     >
696 |       <div class="w-full flex justify-center items-center text-white test2">
697 |           <p class="py-3 text-3xl font-black italic flex gap-2">
698 |             {{ carro.preco + " €" }}
699 |           </p>
700 |       </div>
701 |       <Swiper
702 |           class="rounded-xl object-fit overflow-hidden test3"
703 |           :modules="[Navigation]"
704 |           :slides-per-view="1"
705 |           space-between="4"
706 |           :loop="true"
707 |           :navigation="{ nextEl: '.swiper-button-next-custom', prevEl: '.swiper-button-prev-custom' }"
708 |           :speed="500"
709 |           :effect="'fade'"
710 |       >
711 |         <SwiperSlide v-for="carIMG in carro.imagens" class="w-full relative">
712 |             <NuxtLink  
713 |             :to="localCode=='pt' ? `/stockSingle/${carro.id}` : '/'+localCode+`/stockSingle/${carro.id}`"
714 |             >
715 |               <img class="hover:scale-[1.05] transition duration-300 ease-in-out max-h-[240px] xs:max-h-[280px] w-full object-cover" :src="carIMG" alt="Car Image">
716 |             </NuxtLink>
717 |         </SwiperSlide>
718 |         <div class="swiper-button-prev-custom transition duration-300 ease-in-out">
719 |           <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 16 16"><path fill="currentColor" d="M9.428 11.84c.663.458 1.571-.013 1.571-.816V4.975c0-.803-.908-1.274-1.571-.816L5.644 6.776a1.486 1.486 0 0 0 0 2.447z"/></svg>
720 |         </div>
721 |         <div class="swiper-button-next-custom transition duration-300 ease-in-out">
722 |           <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 16 16"><path fill="currentColor" d="M7.571 11.84C6.908 12.298 6 11.827 6 11.024V4.975c0-.803.908-1.274 1.571-.816l3.784 2.617a1.486 1.486 0 0 1 0 2.447z"/></svg>
723 |         </div>
724 |       </Swiper>
725 |       <div class="flex flex-col justify-center items-center w-full pl-3 pt-3 pb-2">
726 |         <h1 class="w-full text-white font-bold text-lg md:text-xl xl:text-2xl">{{ carro.marca }}</h1>
727 |         <h2 class="w-full text-white text-[15px] md:text-[17px] xl:text-[20px]">{{ carro.modelo }}</h2>
728 |         <div class="w-full flex items-center justify-start text-white mt-6">
729 |           <div class="w-full flex items-center gap-1 justify-start">
730 |             <svg class="mb-1" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 2048 2048"><path fill="currentColor" d="M1792 993q60 41 107 93t81 114t50 131t18 141q0 119-45 224t-124 183t-183 123t-224 46q-91 0-176-27t-156-78t-126-122t-85-157H128V128h256V0h128v128h896V0h128v128h256zM256 256v256h1408V256h-128v128h-128V256H512v128H384V256zm643 1280q-3-31-3-64q0-86 24-167t73-153h-97v-128h128v86q41-51 91-90t108-67t121-42t128-15q100 0 192 33V640H256v896zm573 384q93 0 174-35t142-96t96-142t36-175q0-93-35-174t-96-142t-142-96t-175-36q-93 0-174 35t-142 96t-96 142t-36 175q0 93 35 174t96 142t142 96t175 36m64-512h192v128h-320v-384h128zM384 1024h128v128H384zm256 0h128v128H640zm0-256h128v128H640zm-256 512h128v128H384zm256 0h128v128H640zm384-384H896V768h128zm256 0h-128V768h128zm256 0h-128V768h128z"/></svg>
731 |             <p class="text-xs lg:text-sm font-semibold">{{ carro.anoReg }}</p>
732 |           </div>
733 |           <div class="w-full flex items-center gap-1 justify-start">
734 |             <svg class="mb-1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g fill="currentColor"><path d="M3 2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5h-5a.5.5 0 0 1-.5-.5z"/><path d="M1 2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v8a2 2 0 0 1 2 2v.5a.5.5 0 0 0 1 0V8h-.5a.5.5 0 0 1-.5-.5V4.375a.5.5 0 0 1 .5-.5h1.495c-.011-.476-.053-.894-.201-1.222a.97.97 0 0 0-.394-.458c-.184-.11-.464-.195-.9-.195a.5.5 0 0 1 0-1q.846-.002 1.412.336c.383.228.634.551.794.907c.295.655.294 1.465.294 2.081v3.175a.5.5 0 0 1-.5.501H15v4.5a1.5 1.5 0 0 1-3 0V12a1 1 0 0 0-1-1v4h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1zm9 0a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v13h8z"/></g></svg>
735 |             <p class="text-xs lg:text-sm font-semibold">{{ t(carro.combustivel) }}</p>
736 |           </div>
737 |           <div class="w-full flex items-center gap-1 justify-start">
738 |             <svg class="mb-1" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2 21.998V11.996m20 10.002V11.996M12 21.998v-1m0-3.001v-1M5.725 5.655l.83.758m0 0c.16-.268.435-.738.527-1.032c.799-2.57.87-3.278 2.103-3.38h5.627c1.234.102 1.304.81 2.103 3.38c.091.294.318.764.477 1.032m-10.837 0C5.951 7.433 5.15 8.1 5.03 8.98c-.02.145 0 1.752 0 2.918c0 .876.844.85 1.666.918c.523.043 1.046.138 1.57.143c2.906.03 4.828.033 7.702.002c.556-.006 1.116-.11 1.67-.158c.625-.053 1.28-.123 1.33-.905c.077-1.165.02-2.773 0-2.918c-.12-.88-.97-1.547-1.575-2.567m-10.837 0h10.837m0 0l.972-.759M5.204 8.43l1.208.92m4.146 1.162h2.939m4.123-1.185l1.335-.425M7.082 12.855L7.004 14.5m9.978-1.623V14.5" color="currentColor"/></svg>
739 |             <p class="text-xs lg:text-sm font-semibold">{{ carro.kms + "km" }}</p>
740 |           </div>
741 |         </div>
742 |         <NuxtLink  
743 |         :to="localCode=='pt' ? `/stockSingle/${carro.id}` : '/'+localCode+`/stockSingle/${carro.id}`"
744 |         class="text-center test1 w-3/4 p-2 rounded-full mt-2 mb-[1px] text-white hover:scale-[1.01] transition duration-300 ease-in-out"
745 |         >
746 |           <i class="fa-solid fa-magnifying-glass"></i> {{ t('moreInfo') }}
747 |         </NuxtLink>
748 |       </div>
749 |     </div>
750 |   </div>
751 | </template>
752 | 
753 | <style scoped>
754 | .test {
755 |   box-shadow: 0 0 0px #381515;
756 | }
757 | 
758 | .test1 {
759 |   background: linear-gradient(to bottom, #511e1e, #a43939);
760 | }
761 | 
762 | .test1:hover {
763 |   background: linear-gradient(to bottom, #511e1e, #bc4242);
764 | }
765 | 
766 | .swiper-button-prev-custom,
767 | .swiper-button-next-custom {
768 |   position: absolute;
769 |   color: white;
770 |   border-radius: 100%;
771 |   background-color: #b53d3d;
772 |   font-weight: 700;
773 |   font-size: 12px;
774 |   cursor: pointer;
775 |   padding: 2px;
776 |   top: 50%;
777 |   z-index: 1;
778 |   opacity: 0.6;
779 | }
780 | 
781 | .swiper-button-prev-custom {
782 |   left: 5px;
783 | }
784 | 
785 | .swiper-button-next-custom {
786 |   right: 5px;
787 | }
788 | 
789 | .swiper-button-prev-custom:hover,
790 | .swiper-button-next-custom:hover {
791 |   opacity: 1;
792 |   background-color: #b53d3d;
793 |   color: white;
794 | }
795 | 
796 | .test:not(:hover) .swiper-button-prev-custom,
797 | .test:not(:hover) .swiper-button-next-custom {
798 |   display: none;
799 | }
800 | 
801 | @media (max-width: 640px) {
802 |   .test:not(:hover) .swiper-button-prev-custom,
803 |   .test:not(:hover) .swiper-button-next-custom {
804 |     display: block !important; 
805 |   }
806 | }
807 | 
808 | .noUi-tooltip {
809 |   display: none;
810 | }
811 | 
812 | @keyframes slide-down {
813 |   from {
814 |     opacity: 0;
815 |     max-height: 0;
816 |   }
817 |   to {
818 |     opacity: 1;
819 |     max-height: 500px;
820 |   }
821 | }
822 | 
823 | .appearSmooth {
824 |   animation: slide-down 1.4s ease-in-out;
825 |   overflow: hidden;
826 | }
827 | 
828 | @keyframes slide-up {
829 |   from {
830 |     opacity: 1;
831 |     max-height: 273px;
832 |   }
833 |   to {
834 |     opacity: 0;
835 |     max-height: 0;
836 |   }
837 | }
838 | 
839 | .disappearSmooth {
840 |   animation: slide-up 1s ease-in-out;
841 |   overflow: hidden;
842 | }
843 | 
844 | @media (max-width: 768px) {
845 |     @keyframes slide-up {
846 |     from {
847 |       opacity: 1;
848 |       max-height: 750px;
849 |     }
850 |     to {
851 |       opacity: 0;
852 |       max-height: 0;
853 |     }
854 |   };
855 |   @keyframes slide-down {
856 |     from {
857 |       opacity: 0;
858 |       max-height: 0;
859 |     }
860 |     to {
861 |       opacity: 1;
862 |       max-height: 750px;
863 |     }
864 |   }
865 | }
866 | #price-slider .noUi-tooltip,
867 | #kilometer-slider .noUi-tooltip {
868 |   display: none;
869 | }
870 | 
871 | .slider {
872 |   width: 100%;
873 |   height: 10px;
874 | }
875 | 
876 | .noUi-target {
877 |   background-color: #29333c;
878 |   border: none;
879 |   outline: none;
880 |   box-shadow: none;
881 |   height: 6px;
882 | }
883 | </style>
884 | 


--------------------------------------------------------------------------------
/components/stock/SpecificPage.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | import { Swiper, SwiperSlide } from 'swiper/vue';
  3 | import { Navigation } from 'swiper/modules';
  4 | 
  5 | const {t, locale} = useI18n();
  6 | 
  7 | const props = defineProps({
  8 |   id: Number,
  9 | });
 10 | 
 11 | 
 12 | const carros = [
 13 |   {
 14 |     id: 1,
 15 |     marca: "Audi",
 16 |     modelo: "A3 Sportback 1.6 TDI Sport",
 17 |     combustivel: "Gasóleo",
 18 |     anoReg: 2013, 
 19 |     preco: "12, 990",
 20 |     potencia: 110,
 21 |     cilindrada: 1598,
 22 |     transmissao: "Manual de 6 velocidades",
 23 |     estado: "Com pouco uso",
 24 |     lugares: 4,
 25 |     portas: 5,
 26 |     cor: "Azul escuro",
 27 |     tipologia: "Utilitário",
 28 |     consumo: 6.3,
 29 |     kms: 190000,
 30 |     imagens: [
 31 |       "https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages//mini2.jpg",
 32 |       "https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages//mini12.jpg",
 33 |       "https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages//mini8.jpg"
 34 | 
 35 |     ]
 36 |   },
 37 |   {
 38 |     id: 2,
 39 |     marca: "BMW",
 40 |     modelo: "A3 Sportback 1.6 TDI Sport",
 41 |     combustivel: "Gasóleo",
 42 |     anoReg: 2011, 
 43 |     preco: "12, 990",
 44 |     potencia: 110,
 45 |     cilindrada: 1598,
 46 |     transmissao: "Manual de 6 velocidades",
 47 |     estado: "Com pouco uso",
 48 |     lugares: 4,
 49 |     portas: 5,
 50 |     cor: "Azul escuro",
 51 |     tipologia: "Utilitário",
 52 |     consumo: 6.3,
 53 |     kms: 190000,
 54 |     imagens: [
 55 |       "https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages//mini2.jpg",
 56 |       "https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages//mini12.jpg",
 57 |       "https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages//mini8.jpg"
 58 |     ]
 59 |   },
 60 |   {
 61 |     id: 3,
 62 |     marca: "Fiat",
 63 |     modelo: "A3 Sportback 1.6 TDI Sport",
 64 |     combustivel: "Gasóleo",
 65 |     anoReg: 2013, 
 66 |     preco: "12, 990",
 67 |     potencia: 110,
 68 |     cilindrada: 1598,
 69 |     transmissao: "Manual de 6 velocidades",
 70 |     estado: "Com pouco uso",
 71 |     lugares: 4,
 72 |     portas: 5,
 73 |     cor: "Azul escuro",
 74 |     tipologia: "Utilitário",
 75 |     consumo: 6.3,
 76 |     kms: 190000,
 77 |     imagens: [
 78 |       "https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages//mini2.jpg",
 79 |       "https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages//mini12.jpg",
 80 |       "https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages//mini8.jpg"
 81 | 
 82 |     ]
 83 |   },
 84 |   {
 85 |     id: 4,
 86 |     marca: "Toyota",
 87 |     modelo: "A3 Sportback 1.6 TDI Sport",
 88 |     combustivel: "Elétrico",
 89 |     anoReg: 2013, 
 90 |     preco: "8, 640",
 91 |     potencia: 110,
 92 |     cilindrada: 1598,
 93 |     transmissao: "Manual de 6 velocidades",
 94 |     estado: "Com pouco uso",
 95 |     lugares: 4,
 96 |     portas: 5,
 97 |     cor: "Azul escuro",
 98 |     tipologia: "Utilitário",
 99 |     consumo: 6.3,
100 |     kms: 50000,
101 |     imagens: [
102 |       "https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages//mini2.jpg",
103 |       "https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages//mini12.jpg",
104 |       "https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages//mini8.jpg"
105 | 
106 |     ]
107 |   },
108 |   {
109 |     id: 5,
110 |     marca: "Peugeot",
111 |     modelo: "A3 Sportback 1.6 TDI Sport",
112 |     combustivel: "Gasóleo",
113 |     anoReg: 2013, 
114 |     preco: "12, 990",
115 |     potencia: 110,
116 |     cilindrada: 1598,
117 |     transmissao: "Manual de 6 velocidades",
118 |     estado: "Com pouco uso",
119 |     lugares: 4,
120 |     portas: 5,
121 |     cor: "Azul escuro",
122 |     tipologia: "Utilitário",
123 |     consumo: 6.3,
124 |     kms: 190000,
125 |     imagens: [
126 |       "https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages//mini2.jpg",
127 |       "https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages//mini12.jpg",
128 |       "https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages//mini8.jpg"
129 | 
130 |     ]
131 |   },
132 |   {
133 |     id: 6,
134 |     marca: "Mini",
135 |     modelo: "A3 Sportback 1.6 TDI Sport",
136 |     combustivel: "Gasóleo",
137 |     anoReg: 2013, 
138 |     preco: "12, 990",
139 |     potencia: 110,
140 |     cilindrada: 1598,
141 |     transmissao: "Manual de 6 velocidades",
142 |     estado: "Com pouco uso",
143 |     lugares: 4,
144 |     portas: 5,
145 |     cor: "Azul escuro",
146 |     tipologia: "Utilitário",
147 |     consumo: 6.3,
148 |     kms: 190000,
149 |     imagens: [
150 |       "https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages//mini2.jpg",
151 |       "https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages//mini12.jpg",
152 |       "https://dvqnsnzkbesefygzzxrq.supabase.co/storage/v1/object/public/carImages//mini8.jpg"
153 |     ]
154 |   }
155 | ];
156 | 
157 | const getCarro = () => carros.find(carro => carro.id === props.id);
158 | 
159 | const isFullscreen = ref(false);
160 | 
161 | const openFullscreen = () => {
162 |   isFullscreen.value = true;
163 | };
164 | 
165 | const closeFullscreen = () => {
166 |   isFullscreen.value = false;
167 | };
168 | 
169 | </script>
170 | <template>
171 |   <div v-if="!getCarro()" class="bg-[#121212] flex justify-center items-center h-screen text-5xl font-black text-white">
172 |     No car was found.
173 |   </div>
174 |   <div v-else class="bg-[#121212] p-10 pt-20" :style="{ height: 'calc(100vh - 92px)' }">
175 |     <div class="flex justify-center test2 rounded-xl">
176 |       <div class="bg-[#201818] w-1/2 rounded-l-xl p-6 text-white">
177 |         <h1 class="text-white text-3xl text-left pb-3 font-black">
178 |           {{ getCarro()?.marca + " - " +  getCarro()?.modelo }}
179 |         </h1>
180 |         <div class="flex flex-wrap justify-between items-center px-4">
181 |           <div class="flex justify-start items-center font-light text-[15px] w-1/3">
182 |             <svg class="mr-3 text-[#b53d3d]" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16">
183 |               <g fill="currentColor">
184 |                 <path d="M3 2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5h-5a.5.5 0 0 1-.5-.5z"/>
185 |                 <path d="M1 2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v8a2 2 0 0 1 2 2v.5a.5.5 0 0 0 1 0V8h-.5a.5.5 0 0 1-.5-.5V4.375a.5.5 0 0 1 .5-.5h1.495c-.011-.476-.053-.894-.201-1.222a.97.97 0 0 0-.394-.458c-.184-.11-.464-.195-.9-.195a.5.5 0 0 1 0-1q.846-.002 1.412.336c.383.228.634.551.794.907c.295.655.294 1.465.294 2.081v3.175a.5.5 0 0 1-.5.501H15v4.5a1.5 1.5 0 0 1-3 0V12a1 1 0 0 0-1-1v4h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1zm9 0a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v13h8z"/>
186 |               </g>
187 |             </svg>
188 |             <div class="flex flex-col justify-center items-start mt-2">
189 |               <p class="leading-[13px] text-gray-500">
190 |                 {{ t('fuel') }}
191 |               </p>
192 |               <p class="font-medium">
193 |                 {{ getCarro()?.combustivel }}
194 |               </p>
195 |               
196 |             </div>
197 |           </div>
198 |           <div class="flex justify-start items-center font-light text-[15px] w-1/3">
199 |             <svg class="mr-3 mt-1 text-[#b53d3d]" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 2048 2048">
200 |               <path fill="currentColor" d="M1792 993q60 41 107 93t81 114t50 131t18 141q0 119-45 224t-124 183t-183 123t-224 46q-91 0-176-27t-156-78t-126-122t-85-157H128V128h256V0h128v128h896V0h128v128h256zM256 256v256h1408V256h-128v128h-128V256H512v128H384V256zm643 1280q-3-31-3-64q0-86 24-167t73-153h-97v-128h128v86q41-51 91-90t108-67t121-42t128-15q100 0 192 33V640H256v896zm573 384q93 0 174-35t142-96t96-142t36-175q0-93-35-174t-96-142t-142-96t-175-36q-93 0-174 35t-142 96t-96 142t-36 175q0 93 35 174t96 142t142 96t175 36m64-512h192v128h-320v-384h128zM384 1024h128v128H384zm256 0h128v128H640zm0-256h128v128H640zm-256 512h128v128H384zm256 0h128v128H640zm384-384H896V768h128zm256 0h-128V768h128zm256 0h-128V768h128z"/>
201 |             </svg>
202 |             <div class="flex flex-col justify-center items-start mt-2">
203 |               <p class="leading-[13px] text-gray-500">
204 |                 {{ t('year') }}
205 |               </p>
206 |               <p class="font-medium">
207 |                 {{ getCarro()?.anoReg }}
208 |               </p>
209 |               
210 |             </div>
211 |           </div>
212 |           <div class="flex justify-start items-center font-light text-[15px] w-1/3">
213 |             <svg class="mr-3 mt-1 text-[#b53d3d]" xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 20 20">
214 |               <path fill="currentColor" d="M10 2a2 2 0 0 0-.5 3.937V9.5a.5.5 0 0 0 1 0V5.937A2 2 0 0 0 10 2M3 5a1 1 0 0 1 2 0v4a.5.5 0 0 0 .5.5H8a.5.5 0 0 0 0-1H6V5a2 2 0 1 0-4 0v11a2 2 0 1 0 4 0v-3.5h2V16a2 2 0 1 0 4 0v-3h4.5a1.5 1.5 0 0 0 1.5-1.5V5a2 2 0 1 0-4 0v3.5h-2a.5.5 0 0 0 0 1h2.5A.5.5 0 0 0 15 9V5a1 1 0 1 1 2 0v6.5a.5.5 0 0 1-.5.5h-5a.5.5 0 0 0-.5.5V16a1 1 0 1 1-2 0v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4a1 1 0 1 1-2 0z"/>
215 |             </svg>
216 |             <div class="flex flex-col justify-center items-start mt-2">
217 |               <p class="leading-[22px] text-gray-500">
218 |                 {{ t('transmission') }}
219 |               </p>
220 |               <p class="font-medium leading-[14px]">
221 |                 {{ getCarro()?.transmissao }}
222 |               </p>
223 |               
224 |             </div>
225 |           </div>
226 |         </div>
227 | 
228 |         <div class="flex flex-wrap justify-between items-center mt-8 px-4">
229 |           <div class="flex justify-start items-center font-light text-[15px] w-1/3">
230 |             <svg class="mr-3 text-[#b53d3d]" xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 24 24">
231 |               <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2 21.998V11.996m20 10.002V11.996M12 21.998v-1m0-3.001v-1M5.725 5.655l.83.758m0 0c.16-.268.435-.738.527-1.032c.799-2.57.87-3.278 2.103-3.38h5.627c1.234.102 1.304.81 2.103 3.38c.091.294.318.764.477 1.032m-10.837 0C5.951 7.433 5.15 8.1 5.03 8.98c-.02.145 0 1.752 0 2.918c0 .876.844.85 1.666.918c.523.043 1.046.138 1.57.143c2.906.03 4.828.033 7.702.002c.556-.006 1.116-.11 1.67-.158c.625-.053 1.28-.123 1.33-.905c.077-1.165.02-2.773 0-2.918c-.12-.88-.97-1.547-1.575-2.567m-10.837 0h10.837m0 0l.972-.759M5.204 8.43l1.208.92m4.146 1.162h2.939m4.123-1.185l1.335-.425M7.082 12.855L7.004 14.5m9.978-1.623V14.5" color="currentColor"/>
232 |             </svg>
233 |             <div class="flex flex-col justify-center items-start mt-2">
234 |               <p class="leading-[13px] text-gray-500">
235 |                 {{ t('kilometers') }}
236 |               </p>
237 |               <p class="font-medium">
238 |                 {{ getCarro()?.kms + " km" }}
239 |               </p>
240 |               
241 |             </div>
242 |           </div>
243 |           <div class="flex justify-start items-center font-light text-[15px] w-1/3">
244 |             <svg class="mr-3 mt-1 text-[#b53d3d]" xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24">
245 |               <path fill="currentColor" d="M17 4.5C17 5.9 15.9 7 14.5 7S12 5.9 12 4.5S13.1 2 14.5 2S17 3.1 17 4.5M15 8h-.8c-2.1 0-4.1-1.2-5.1-3.1c-.1-.1-.2-.2-.2-.3l-1.8.8c.5 1.4 2.1 3.2 4.4 4.1l-1.8 5l-3.9-1.1L3 18.9l2 .5l1.8-3.6l4.5 1.2c1 .2 2-.3 2.4-1.2L16 9.4c.2-.7-.3-1.4-1-1.4m3.9-1l-3.4 9.4c-.6 1.6-2.1 2.6-3.7 2.6c-.3 0-.7 0-1-.1l-2.9-.8l-.9 1.8l2 .5l1.4.4c.5.1 1 .2 1.5.2c2.5 0 4.7-1.5 5.6-3.9L21 7z"/>
246 |             </svg>
247 |             <div class="flex flex-col justify-center items-start mt-2">
248 |               <p class="leading-[13px] text-gray-500">
249 |                 {{ t('capacity') }}
250 |               </p>
251 |               <p class="font-medium">
252 |                 {{ getCarro()?.lugares }}
253 |               </p>
254 |               
255 |             </div>
256 |           </div>
257 |           <div class="flex justify-start items-center font-light text-[15px] w-1/3">
258 |             <svg class="mr-3 mt-1 text-[#b53d3d]" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
259 |               <path fill="currentColor" d="M19 14h-3v2h3zm3 7H3V11l8-8h10a1 1 0 0 1 1 1zM11.83 5l-6 6H20V5z"/>
260 |             </svg>
261 |             <div class="flex flex-col justify-center items-start mt-2">
262 |               <p class="leading-[13px] text-gray-500">
263 |                 {{ t('doors') }}
264 |               </p>
265 |               <p class="font-medium">
266 |                 {{ getCarro()?.portas }}
267 |               </p>
268 |               
269 |             </div>
270 |           </div>
271 |         </div>
272 | 
273 |         <div class="flex flex-wrap justify-between items-center mt-8 px-4">
274 |           <div class="flex justify-start items-center font-light text-[15px] w-1/3">
275 |             <svg class="mr-3 mt-1 text-[#b53d3d]" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="currentColor">
276 |               <path d="M5 6v-.5c0-.943 0-1.414.293-1.707S6.057 3.5 7 3.5s1.414 0 1.707.293S9 4.557 9 5.5V6m6-1h3"/>
277 |               <path d="M16 2h-1.333C12.793 2 12 2.934 12 4.667C12 5.533 11.603 6 10.667 6H7c-1.886 0-2.828 0-3.414.586S3 8.114 3 10v5c0 3.3 0 4.95 1.025 5.975S6.7 22 10 22h4c3.3 0 4.95 0 5.975-1.025S21 18.3 21 15V7c0-2.357 0-3.536-.732-4.268C19.535 2 18.357 2 16 2"/>
278 |               <path d="M9 14.587c0-1.464 1.264-2.911 2.15-3.747a1.23 1.23 0 0 1 1.7 0c.886.836 2.15 2.283 2.15 3.747a2.933 2.933 0 0 1-3 2.913c-1.864 0-3-1.477-3-2.913"/></g>
279 |             </svg>
280 |             <div class="flex flex-col justify-center items-start mt-2">
281 |               <p class="leading-[13px] text-gray-500">
282 |                 {{ t('consumption') }}
283 |               </p>
284 |               <p v-if="getCarro()?.combustivel=='Elétrico'" class="font-medium">
285 |                 {{ getCarro()?.consumo + " kWh/100 km" }}
286 |               </p>
287 |               <p v-else class="font-medium">
288 |                 {{ getCarro()?.consumo + " L/100 km" }}
289 |               </p>
290 |               
291 |               
292 |             </div>
293 |           </div>
294 |           <div class="flex justify-start items-center font-light text-[15px] w-1/3">
295 |             <svg class="mr-3 mt-1 text-[#b53d3d]" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 16 16">
296 |               <g fill="currentColor">
297 |                 <path d="M8 2a.5.5 0 0 1 .5.5V4a.5.5 0 0 1-1 0V2.5A.5.5 0 0 1 8 2M3.732 3.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707M2 8a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 8m9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5m.754-4.246a.39.39 0 0 0-.527-.02L7.547 7.31A.91.91 0 1 0 8.85 8.569l3.434-4.297a.39.39 0 0 0-.029-.518z"/>
298 |                 <path fill-rule="evenodd" d="M6.664 15.889A8 8 0 1 1 9.336.11a8 8 0 0 1-2.672 15.78zm-4.665-4.283A11.95 11.95 0 0 1 8 10c2.186 0 4.236.585 6.001 1.606a7 7 0 1 0-12.002 0"/>
299 |               </g>
300 |             </svg>
301 |             <div class="flex flex-col justify-center items-start mt-2">
302 |               <p class="leading-[13px] text-gray-500">
303 |                 {{ t('potency') }}
304 |               </p>
305 |               <p class="font-medium">
306 |                 {{ getCarro()?.potencia + " Cv" }}
307 |               </p>
308 |               
309 |             </div>
310 |           </div>
311 |           <div class="flex justify-start items-center font-light text-[15px] w-1/3">
312 |             <svg class="mr-3 mt-1 text-[#b53d3d]" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
313 |               <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
314 |                 <path stroke-dasharray="48" stroke-dashoffset="48" d="M11 9h6v10h-6.5l-2 -2h-2.5v-6.5l1.5 -1.5Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.6s" values="48;0"/></path>
315 |                 <path fill="currentColor" fill-opacity="0" d="M17 13h0v-3h0v8h0v-3h0z" opacity="0"><animate fill="freeze" attributeName="d" begin="0.6s" dur="0.2s" values="M17 13h0v-3h0v8h0v-3h0z;M17 13h4v-3h1v8h-1v-3h-4z"/><set fill="freeze" attributeName="fill-opacity" begin="0.8s" to="1"/><set fill="freeze" attributeName="opacity" begin="0.6s" to="1"/></path>
316 |                 <path d="M6 14h0M6 11v6" opacity="0"><animate fill="freeze" attributeName="d" begin="0.8s" dur="0.2s" values="M6 14h0M6 11v6;M6 14h-4M2 11v6"/><set fill="freeze" attributeName="opacity" begin="0.8s" to="1"/></path>
317 |                 <path d="M11 9v0M8 9h6" opacity="0"><animate fill="freeze" attributeName="d" begin="1s" dur="0.2s" values="M11 9v0M8 9h6;M11 9v-4M8 5h6"/><set fill="freeze" attributeName="opacity" begin="1s" to="1"/></path>
318 |               </g>
319 |             </svg>
320 |             <div class="flex flex-col justify-center items-start mt-2">
321 |               <p class="leading-[13px] text-gray-500">
322 |                 {{ t('cylinderCapacity') }}
323 |               </p>
324 |               <p class="font-medium">
325 |                 {{ getCarro()?.cilindrada + " Cc" }}
326 |               </p>
327 |               
328 |             </div>
329 |           </div>
330 |         </div>
331 | 
332 |         <div class="flex flex-wrap justify-between items-center mt-8 px-4">
333 |           <div class="flex justify-start items-center font-light text-[15px] w-1/3">
334 |             <svg class="mr-3 mt-1 text-[#b53d3d]" xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 24 24">
335 |               <path fill="currentColor" d="M17.5 12a1.5 1.5 0 0 1-1.5-1.5A1.5 1.5 0 0 1 17.5 9a1.5 1.5 0 0 1 1.5 1.5a1.5 1.5 0 0 1-1.5 1.5m-3-4A1.5 1.5 0 0 1 13 6.5A1.5 1.5 0 0 1 14.5 5A1.5 1.5 0 0 1 16 6.5A1.5 1.5 0 0 1 14.5 8m-5 0A1.5 1.5 0 0 1 8 6.5A1.5 1.5 0 0 1 9.5 5A1.5 1.5 0 0 1 11 6.5A1.5 1.5 0 0 1 9.5 8m-3 4A1.5 1.5 0 0 1 5 10.5A1.5 1.5 0 0 1 6.5 9A1.5 1.5 0 0 1 8 10.5A1.5 1.5 0 0 1 6.5 12M12 3a9 9 0 0 0-9 9a9 9 0 0 0 9 9a1.5 1.5 0 0 0 1.5-1.5c0-.39-.15-.74-.39-1c-.23-.27-.38-.62-.38-1a1.5 1.5 0 0 1 1.5-1.5H16a5 5 0 0 0 5-5c0-4.42-4.03-8-9-8"/>
336 |             </svg>
337 |             <div class="flex flex-col justify-center items-start mt-2">
338 |               <p class="leading-[13px] text-gray-500">
339 |                 {{ t('color') }}
340 |               </p>
341 |               <p class="font-medium">
342 |                 {{ getCarro()?.cor }}
343 |               </p>
344 |               
345 |             </div>
346 |           </div>
347 |           <div class="flex justify-start items-center font-light text-[15px] w-1/3">
348 |             <svg class="mr-3 mt-1 text-[#b53d3d]" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
349 |               <path fill="none" stroke="currentColor" stroke-width="2" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10ZM7 12l4 3l5-7"/>
350 |             </svg>
351 |             <div class="flex flex-col justify-center items-start mt-2">
352 |               <p class="leading-[13px] text-gray-500">
353 |                 {{ t('state') }}
354 |               </p>
355 |               <p class="font-medium">
356 |                 {{ getCarro()?.estado }}
357 |               </p>
358 |               
359 |             </div>
360 |           </div>
361 |           <div class="flex justify-start items-center font-light text-[15px] w-1/3">
362 |             <svg class="mr-3 mt-1 text-[#b53d3d]" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 100 100">
363 |               <path fill="currentColor" d="M49.369 11.228c-11.647-.171-27.826.079-31.157 9.027l-8.184 19.204a2.84 2.84 0 0 0-1.37-.865l-3.295-.927a2.86 2.86 0 0 0-3.535 1.983L.109 45.754a2.86 2.86 0 0 0 1.983 3.534l3.296.928c.11.03.22.04.33.058c-.63 1.57-1.022 3.296-1.022 4.323v22.32c0 1.144.48 1.674 1.242 1.922v5.946a4.01 4.01 0 0 0 4.017 4.017h10.777a4.01 4.01 0 0 0 4.017-4.017v-5.728h50.503v5.728a4.01 4.01 0 0 0 4.018 4.017h10.775a4.01 4.01 0 0 0 4.019-4.017V78.84c.763-.248 1.24-.778 1.24-1.922v-22.32c0-1.027-.393-2.753-1.022-4.323c.11-.017.22-.027.33-.058l3.297-.928a2.86 2.86 0 0 0 1.982-3.534l-1.717-6.104a2.86 2.86 0 0 0-3.536-1.983l-3.295.927a2.86 2.86 0 0 0-1.371.865l-8.184-19.204c-3.57-9.084-20.773-8.856-32.42-9.027m33.357 29.444c.194.576-.386.96-.993.995c0 0-1.984.168-4.72.389c-2.082-4.864-6.92-8.292-12.525-8.292c-6.151 0-11.373 4.13-13.048 9.754c-.464.006-1.003.026-1.434.026c-10.597 0-31.739-1.877-31.739-1.877c-.606-.036-1.187-.42-.993-.995c8.142-24.821 8.385-22.955 32.276-22.694c23.89.26 24.029-1.513 33.176 22.694m-18.238-2.217a8.89 8.89 0 0 1 7.447 3.991c-4.785.355-10.292.718-15.424.929a8.88 8.88 0 0 1 7.977-4.92M9.407 46.51c.072.107.142.214.222.317h-.31zm5.294 6.234c2.096-.034 13.348 3.753 13.348 3.753c1.405.396 2.642 3.052 2.635 4.512c-.021 4.917-12.709 3.21-17.86 3.23a2.63 2.63 0 0 1-2.635-2.634V55.38c0-1.46 2.416-2.6 4.512-2.636m70.598 0c2.096.035 4.512 1.176 4.512 2.636v6.225a2.63 2.63 0 0 1-2.635 2.635c-5.15-.02-17.839 1.686-17.86-3.231c-.007-1.46 1.23-4.116 2.635-4.512c0 0 11.252-3.787 13.348-3.753" color="currentColor"/>
364 |             </svg>
365 |             <div class="flex flex-col justify-center items-start mt-2">
366 |               <p class="leading-[13px] text-gray-500">
367 |                 {{ t('typology') }}
368 |               </p>
369 |               <p class="font-medium">
370 |                 {{ getCarro()?.tipologia }}
371 |               </p>
372 |               
373 |             </div>
374 |           </div>
375 |         </div>
376 |         
377 |         <div class="px-4 w-full flex">
378 |           <div class="w-1/2 flex justify-center items-center flex-col mt-12">
379 |             <div class="flex justify-center items-center">
380 |               <h1 class="text-gray-500 text-lg">
381 |                 {{ t('price') }}
382 |               </h1>
383 |             </div>
384 |             <h1 class="text-white text-3xl font-bold italic">
385 |               {{ getCarro()?.preco + " €" }}
386 |             </h1>
387 |           </div>
388 | 
389 |           <div class="w-1/2 flex justify-center items-center flex-col mt-14">
390 |             <button class="border-2 btc italic border-[#b53d3d] hover:bg-[#b53d3d] btc text-[#b53d3d] p-4 ps-8 pe-8 rounded-xl hover:scale-[1.02] transition duration-300 ease-in-out">
391 |               {{ t('interested') }}
392 |               <i class="fa-regular fa-paper-plane text-[19px] text-[#b53d3d] py-[5px] icn transition duration-300 ease-in-out"></i>
393 |             </button>
394 |           </div>
395 |         </div>
396 |       </div>
397 |       <div class="w-1/2">
398 |         <Swiper
399 |             class="rounded-r-xl object-fit overflow-hidden"
400 |             :modules="[Navigation]"
401 |             :slides-per-view="1"
402 |             space-between="4"
403 |             :loop="true"
404 |             :navigation="{ nextEl: '.swiper-button-next-custom', prevEl: '.swiper-button-prev-custom' }"
405 |             :speed="500"
406 |             :effect="'fade'"
407 |         >
408 |           <SwiperSlide v-for="(carIMG, index) in getCarro()?.imagens" :key="index" class="w-full relative p-3 bg-[#201818]">
409 |               <img class="max-h-[500px] rounded-xl w-full h-auto object-cover" :src="carIMG" alt="Car Image">
410 |               <!-- Fullscreen Button -->
411 |               <button @click="openFullscreen()" class="fullscreen-btn">
412 |                 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
413 |                   <path fill="currentColor" d="M7 14H5v5h5v-2H7zm-2-4h2V7h3V5H5zm12 7h-3v2h5v-5h-2zM14 5v2h3v3h2V5z"/>
414 |                 </svg>
415 |               </button>
416 |           </SwiperSlide>
417 |           <div class="swiper-button-prev-custom transition duration-300 ease-in-out">
418 |             <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 16 16"><path fill="currentColor" d="M9.428 11.84c.663.458 1.571-.013 1.571-.816V4.975c0-.803-.908-1.274-1.571-.816L5.644 6.776a1.486 1.486 0 0 0 0 2.447z"/></svg>
419 |           </div>
420 |           <div class="swiper-button-next-custom transition duration-300 ease-in-out">
421 |             <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 16 16"><path fill="currentColor" d="M7.571 11.84C6.908 12.298 6 11.827 6 11.024V4.975c0-.803.908-1.274 1.571-.816l3.784 2.617a1.486 1.486 0 0 1 0 2.447z"/></svg>
422 |           </div>
423 |         </Swiper>
424 |       </div>
425 |     </div>
426 | 
427 |     <div v-if="isFullscreen" class="fullscreen-overlay">
428 |       <div class="fullscreen-content">
429 |         <Swiper
430 |           class="w-full h-full"
431 |           :modules="[Navigation]"
432 |           :slides-per-view="1"
433 |           space-between="4"
434 |           :loop="true"
435 |           :navigation="{ nextEl: '.swiper-button-next-custom', prevEl: '.swiper-button-prev-custom' }"
436 |           :speed="500"
437 |           :effect="'fade'"
438 |         >
439 |           <SwiperSlide v-for="carIMG in getCarro()?.imagens" class="w-full relative flex justify-center items-center">
440 |             <img class="max-h-[90vh] w-full object-contain" :src="carIMG" alt="Car Image">
441 |           </SwiperSlide>
442 |           <div class="swiper-button-prev-custom transition duration-300 ease-in-out">
443 |             <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" d="M9.428 11.84c.663.458 1.571-.013 1.571-.816V4.975c0-.803-.908-1.274-1.571-.816L5.644 6.776a1.486 1.486 0 0 0 0 2.447z"/></svg>
444 |           </div>
445 |           <div class="swiper-button-next-custom transition duration-300 ease-in-out">
446 |             <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" d="M7.571 11.84C6.908 12.298 6 11.827 6 11.024V4.975c0-.803.908-1.274 1.571-.816l3.784 2.617a1.486 1.486 0 0 1 0 2.447z"/></svg>
447 |           </div>
448 |         </Swiper>
449 | 
450 |         <!-- Close Button -->
451 |         <button @click="closeFullscreen" class="close-fullscreen">
452 |           <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
453 |             <path fill="currentColor" d="M5 16h3v3h2v-5H5zm3-8H5v2h5V5H8zm6 11h2v-3h3v-2h-5zm2-11V5h-2v5h5V8z"/>
454 |           </svg>
455 |         </button>
456 |       </div>
457 |     </div>
458 | 
459 |   </div>
460 | </template>
461 | 
462 | <style scoped>
463 | .swiper-button-prev-custom,
464 | .swiper-button-next-custom {
465 |   position: absolute;
466 |   color: white;
467 |   border-radius: 100%;
468 |   background-color: #b53d3d;
469 |   font-weight: 700;
470 |   font-size: 12px;
471 |   cursor: pointer;
472 |   padding: 1px;
473 |   top: 50%;
474 |   z-index: 1;
475 |   opacity: 0.6;
476 | }
477 | 
478 | .swiper-button-prev-custom {
479 |   left: 15px;
480 | }
481 | 
482 | .swiper-button-next-custom {
483 |   right: 15px;
484 | }
485 | 
486 | .swiper-button-prev-custom:hover,
487 | .swiper-button-next-custom:hover {
488 |   opacity: 1;
489 |   background-color: #b53d3d;
490 |   color: white;
491 | }
492 | 
493 | 
494 | .fullscreen-btn {
495 |   position: absolute;
496 |   top: 10px;
497 |   right: 10px;
498 |   color: white;
499 |   border: none;
500 |   border-bottom-left-radius: 50%;
501 |   padding: 8px;
502 |   cursor: pointer;
503 |   transition: scale 0.3s ease-in-out;
504 | }
505 | 
506 | .fullscreen-btn:hover {
507 |   scale: 1.10;
508 | }
509 | 
510 | .fullscreen-overlay {
511 |   position: fixed;
512 |   top: 0;
513 |   left: 0;
514 |   width: 100vw;
515 |   height: 100vh;
516 |   background: rgba(0, 0, 0, 0.9);
517 |   display: flex;
518 |   justify-content: center;
519 |   align-items: center;
520 |   z-index: 1000;
521 | }
522 | 
523 | .fullscreen-content {
524 |   position: relative;
525 |   width: 80%;
526 |   height: 90%;
527 |   display: flex;
528 |   justify-content: center;
529 |   align-items: center;
530 | }
531 | 
532 | .close-fullscreen {
533 |   position: absolute;
534 |   top: 15px;
535 |   right: 15px;
536 |   color: white;
537 |   cursor: pointer;
538 |   transition: scale 0.3s ease-in-out;
539 |   z-index: 5;
540 | }
541 | 
542 | .close-fullscreen:hover {
543 |   scale: 1.10;
544 | }
545 | 
546 | .btc:hover,
547 | .btc:hover .icn {
548 |   color: white;
549 | }
550 | 
551 | </style>


--------------------------------------------------------------------------------
/composables/useSBClient.ts:
--------------------------------------------------------------------------------
1 | import { SupabaseClient } from "@supabase/supabase-js";
2 | 
3 | export const useSupabase = (): SupabaseClient => {
4 |     const supabase = inject<SupabaseClient>("supabase");
5 |     if (!supabase) {
6 |         throw new Error("Error Initializing Supabase Client");
7 |     }
8 |     return supabase as SupabaseClient;
9 | }


--------------------------------------------------------------------------------
/i18n/lang/de.js:
--------------------------------------------------------------------------------
1 | export default {
2 |     filtersTitle: "Finden Sie Ihr Auto"
3 |   }
4 |   


--------------------------------------------------------------------------------
/i18n/lang/en.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     filtersTitle: "Find your car",
 3 |     brand: "Brand",
 4 |     year: "Year",
 5 |     fuel: "Fuel",
 6 |     model: "Model",
 7 |     budget: "Bugdet",
 8 |     typology: "Typology",
 9 |     transmission: "Transmission", 
10 |     kilometers: "Kilometers",
11 |     capacity: "Seats",
12 |     search: "Search",
13 |     select: "Select",
14 |     doors: "Doors",
15 |     price: "Price",
16 |     consumption: "Comsumption",
17 |     higherPrice: "Higher price",
18 |     lowerPrice: "Lower price",
19 |     latest: "Latest",
20 |     oldest: "Oldest",
21 |     brandAZ: "Brand (A-Z)",
22 |     brandZA: "Brand (Z-A)",
23 |     higherKMs: "Higher KMs",
24 |     lowerKMs: "Lower KMs",
25 |     potency: "Potency",
26 |     cylinderCapacity: "Cylinder capacity",
27 |     color: "Color",
28 |     state: "State",
29 |     interested: "Interested? Contact us",
30 |     stock: "Stock",
31 |     contacts: "Contacts",
32 |     manual: "Manual",
33 |     automatic: "Automatic",
34 |     seats: "Seats",
35 |     gasoline: "Gasoline",
36 |     diesel: "Diesel",
37 |     eletric: "Eletric",
38 |     lpg: "LPG",
39 |     utility: "Utility",
40 |     cityBased: "City-based",
41 |     suv: "SUV",
42 |     van: "Van",
43 |     monoVolume: "Monovolume",
44 |     orderBy: "Order by",
45 |     moreInfo: "More info"
46 |   }
47 |   


--------------------------------------------------------------------------------
/i18n/lang/es.js:
--------------------------------------------------------------------------------
1 | export default {
2 |     filtersTitle: "Encuentra tu auto",
3 |     lpg: "GPL"
4 |   }
5 |   


--------------------------------------------------------------------------------
/i18n/lang/fr.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   filtersTitle: "Trouve ta voiture",
3 |   lpg: "GPL"
4 | };
5 | 


--------------------------------------------------------------------------------
/i18n/lang/it.js:
--------------------------------------------------------------------------------
1 | export default {
2 |     filtersTitle: "Trova la tua auto",
3 |     lpg: "GPL"
4 | };
5 |   


--------------------------------------------------------------------------------
/i18n/lang/pt.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   filtersTitle: "Encontra o teu carro",
 3 |   brand: "Marca",
 4 |   year: "Ano",
 5 |   fuel: "Combustível",
 6 |   model: "Modelo",
 7 |   budget: "Orçamento",
 8 |   typology: "Tipologia",
 9 |   transmission: "Transmissão", 
10 |   kilometers: "Quilómetros",
11 |   capacity: "Lugares",
12 |   search: "Procurar",
13 |   select: "Selecionar",
14 |   doors: "Portas",
15 |   price: "Preço",
16 |   consumption: "Consumo",
17 |   higherPrice: "Maior preço",
18 |   lowerPrice: "Menor preço",
19 |   latest: "Mais recente",
20 |   oldest: "Mais antigo",
21 |   brandAZ: "Marca (A-Z)",
22 |   brandZA: "Marca (Z-A)",
23 |   higherKMs: "Mais KMs",
24 |   lowerKMs: "Menos KMs",
25 |   potency: "Potência",
26 |   cylinderCapacity: "Cilindrada",
27 |   color: "Cor",
28 |   state: "Estado",
29 |   interested: "Interessado? Contacta-nos",
30 |   stock: "Inventário",
31 |   contacts: "Contactos",
32 |   manual: "Manual",
33 |   automatic: "Automático",
34 |   seats: "Lugares",
35 |   gasoline: "Gasolina",
36 |   diesel: "Gasóleo",
37 |   eletric: "Elétrico",
38 |   lpg: "GPL",
39 |   utility: "Utilitário",
40 |   cityBased: "Citadino",
41 |   suv: "SUV",
42 |   van: "Carrinha",
43 |   monoVolume: "Monovolume",
44 |   orderBy: "Ordernar por",
45 |   moreInfo: "Saber mais"
46 | }
47 | 


--------------------------------------------------------------------------------
/i18n/lang/zh-CN.js:
--------------------------------------------------------------------------------
1 | export default {
2 |     filtersTitle: "找到你的车"
3 |   }
4 |   


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { NuxtPage } from '#components';
 3 | import { SpeedInsights } from "@vercel/speed-insights/nuxt"
 4 | import { Analytics } from '@vercel/analytics/nuxt'
 5 | </script>
 6 | 
 7 | <template>
 8 |   <div class="bg-[#121212]">
 9 |     <SpeedInsights/>
10 |     <Analytics />
11 |     <Navbar />
12 |     <NuxtPage />
13 |     <Footer />
14 |   </div>
15 | </template>
16 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | export default defineNuxtConfig({
 2 |   modules: ['@nuxtjs/i18n'],
 3 |   i18n: {
 4 |     locales: [
 5 |       { code: 'pt', name: 'Português', file: 'pt.js' },
 6 |       { code: 'es', name: 'Español', file: 'es.js' },
 7 |       { code: 'en', name: 'English', file: 'en.js' },
 8 |       { code: 'fr', name: 'Français', file: 'fr.js' },
 9 |       { code: 'de', name: 'Deutsch', file: 'de.js' },
10 |       { code: 'it', name: 'Italiano', file: 'it.js' },
11 |       { code: 'zh-CN', name: '中国人', file: 'zh-CN.js' }
12 |     ],
13 |     lazy: true, 
14 |     langDir: 'lang/', 
15 |     defaultLocale: 'pt', 
16 |     fallbackLocale: 'pt',
17 |   },
18 |   css: [
19 |     '@/assets/css/tailwind.css',
20 |     '@fortawesome/fontawesome-free/css/all.css'
21 |   ],
22 | 
23 |   postcss: {
24 |     plugins: {
25 |       tailwindcss: {},
26 |       autoprefixer: {},
27 |     },
28 |   },
29 |   	
30 |   runtimeConfig: {
31 |     public: {
32 |       SUPABASE_URL: process.env.SUPABASE_URL,
33 |       SUPABASE_ANON_KEY: process.env.SUPABASE_ANON_KEY,
34 |     }
35 |   },
36 |   
37 |   components: true,
38 |   compatibilityDate: '2025-02-21',
39 | })
40 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "veluxe-auto",
 3 |   "private": true,
 4 |   "type": "module",
 5 |   "scripts": {
 6 |     "build": "nuxt build",
 7 |     "dev": "nuxt dev",
 8 |     "generate": "nuxt generate",
 9 |     "preview": "nuxt preview",
10 |     "postinstall": "nuxt prepare"
11 |   },
12 |   "dependencies": {
13 |     "@fortawesome/fontawesome-free": "^6.7.2",
14 |     "@nuxt/types": "^2.18.1",
15 |     "@nuxtjs/i18n": "^9.2.1",
16 |     "@supabase/supabase-js": "^2.49.1",
17 |     "@vercel/analytics": "^1.5.0",
18 |     "@vercel/speed-insights": "^1.2.0",
19 |     "@vueuse/core": "^12.5.0",
20 |     "nouislider": "^15.8.1",
21 |     "nuxt": "^3.15.1",
22 |     "swiper": "^11.2.0",
23 |     "vue": "latest",
24 |     "vue-router": "latest"
25 |   },
26 |   "devDependencies": {
27 |     "autoprefixer": "^10.4.20",
28 |     "postcss": "^8.4.49",
29 |     "tailwindcss": "^3.4.17"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | definePageMeta({
 3 |   layout: 'default' 
 4 | });
 5 | useHead({
 6 |   title: "Veluxe Auto | Showroom"
 7 | });
 8 | </script>
 9 | 
10 | <template>
11 |   <div class="bg-[#121212]">
12 |     <HomeHeroSection />
13 |     <HomeBrand />
14 |   </div>
15 | </template>
16 | 
17 | 
18 | 


--------------------------------------------------------------------------------
/pages/stock.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useRoute } from 'vue-router';
 3 | const {t, locale} = useI18n();
 4 | useHead({
 5 |   title: `Veluxe Auto | ${t('stock')}`
 6 | });
 7 | const route = useRoute();
 8 | 
 9 | const marca = route.query.marca as string;
10 | const combustivel = route.query.combustivel as string;
11 | const minAno = parseInt(route.query.minAno as string) || undefined;
12 | const maxAno = parseInt(route.query.maxAno as string) || undefined;
13 | const minPreco = parseInt(route.query.minPreco as string) || undefined;
14 | const maxPreco = parseInt(route.query.maxPreco as string) || undefined;
15 | const minKM = parseInt(route.query.minKM as string) || undefined;
16 | const maxKM = parseInt(route.query.maxKM as string) || undefined;
17 | const modelo = route.query.combustivel as string;
18 | const transmissao = route.query.transmissao as string;
19 | const tipologia = route.query.tipologia as string;
20 | const lugares = route.query.lugares as string;
21 | 
22 | </script>
23 | 
24 | <template>
25 |   <div class="bg-[#121212]">
26 |     <StockMain
27 |       :marca="marca"
28 |       :combustivel="combustivel"
29 |       :minAno="minAno"
30 |       :maxAno="maxAno"
31 |       :minPreco="minPreco" 
32 |       :maxPreco="maxPreco" 
33 |       :minKM="minKM" 
34 |       :maxKM="maxKM" 
35 |       :modelo="modelo"
36 |       :transmissao="transmissao"
37 |       :tipologia="tipologia"
38 |       :lugares="lugares"
39 |     />
40 |   </div>
41 | </template>
42 | 


--------------------------------------------------------------------------------
/pages/stockSingle/[id].vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useRoute } from 'vue-router';
 3 | useHead({
 4 |   title: `Veluxe Auto | Showroom`
 5 | });
 6 | const route = useRoute();
 7 | 
 8 | const id = parseInt(route.params.id as string) || undefined;
 9 | </script>
10 | 
11 | <template>
12 |   <div class="bg-[#121212]">
13 |       <StockSpecificPage
14 |         :id="id"
15 |       />
16 |     </div>
17 | </template>
18 | 


--------------------------------------------------------------------------------
/plugins/sb-client.ts:
--------------------------------------------------------------------------------
1 | import { createClient } from '@supabase/supabase-js';
2 | 
3 | export default defineNuxtPlugin((app) => {
4 |     const config = useRuntimeConfig();
5 | 
6 |     const supabase = createClient(config.public.SUPABASE_URL as string, config.public.SUPABASE_ANON_KEY as string);
7 | 
8 |     app.vueApp.provide('supabase', supabase);
9 | });


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fumatecdev/Veluxe_next/6451728f383301eb490bc84794f07ab373c32e3f/public/favicon.ico


--------------------------------------------------------------------------------
/public/images/VeluxeAutoLogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fumatecdev/Veluxe_next/6451728f383301eb490bc84794f07ab373c32e3f/public/images/VeluxeAutoLogo.png


--------------------------------------------------------------------------------
/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../.nuxt/tsconfig.server.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     './app.vue',
 5 |     './pages/**/*.{vue,js,ts}',
 6 |     './components/**/*.{vue,js,ts}',
 7 |     './layouts/**/*.{vue,js,ts}',
 8 |     './plugins/**/*.{js,ts}',
 9 |     './nuxt.config.{js,ts}',
10 |   ],
11 |   theme: {
12 |     extend: {
13 |       screens: {
14 |         // Custom screen sizes
15 |         'xs': '480px',    // Extra small devices
16 |         'sm': '640px',    // Small devices (default)
17 |         'md': '768px',    // Medium devices (default)
18 |         'midlg': '850px',
19 |         'lg': '1024px',   // Large devices (default)
20 |         'xl': '1280px',   // Extra large devices (default)
21 |         '2xl': '1536px',  // 2x Extra large devices (default)
22 |         '3xl': '1920px',  // Custom large screen
23 |       },
24 |     },
25 |   },
26 |   plugins: [],
27 | }
28 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // https://nuxt.com/docs/guide/concepts/typescript
 3 |   "extends": "./.nuxt/tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "target": "esnext",
 6 |     "module": "esnext",
 7 |     "moduleResolution": "node",
 8 |     "strict": true,
 9 |     "jsx": "preserve",
10 |     "esModuleInterop": true,
11 |     "skipLibCheck": true,
12 |     "resolveJsonModule": true,
13 |     "lib": ["dom", "esnext"]
14 |   }
15 | }


--------------------------------------------------------------------------------