init
commit
5ffc7af543
|
|
@ -0,0 +1,7 @@
|
||||||
|
node_modules
|
||||||
|
.DS_Store
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
debug.log
|
||||||
|
.idea
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
MUKTI
|
||||||
|
license Mukti/Moksh - 'the liberation' is a basic realization that the result of distribution or giving away does not always come short, specially when things are non physical. MUKTI is not a license but a step towards a license free civilization.
|
||||||
|
Human race is better with 'some sense' rather a bunch of license. [have some sense, not licenses.]
|
||||||
|
|
||||||
|
till all the licenses are deprecated and decentralize [ specially for software, hardware, education, experience,even the network protocol (internet) ], lets use freedom centric and/or having "take if it helps you, just don't sue us - kind of mentality" licenses like GPL, MIT, BSD ...
|
||||||
|
|
||||||
|
this will not be registered / certified / legalise in any manner, as it's not about enforcement - it is about freedom to share.
|
||||||
|
|
||||||
|
example of 'some sense':
|
||||||
|
verbose incremental documentation with versioning, attaching contributor information.
|
||||||
|
try to make some OFFERING to the contributor or the contributing organization with or without a subscription / support.
|
||||||
|
maximize the use of freedom centric tools[hardware, software, os ...] enen if it costs and costs more, try not to be the product.
|
||||||
|
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
|
||||||
|
### Getting Started
|
||||||
|
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm i
|
||||||
|
npm run dev
|
||||||
|
npm run build
|
||||||
|
npm run serve
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
// Generated by 'unplugin-auto-import'
|
||||||
|
export {}
|
||||||
|
declare global {
|
||||||
|
const EffectScope: typeof import('vue')['EffectScope']
|
||||||
|
const computed: typeof import('vue')['computed']
|
||||||
|
const createApp: typeof import('vue')['createApp']
|
||||||
|
const customRef: typeof import('vue')['customRef']
|
||||||
|
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
|
||||||
|
const defineComponent: typeof import('vue')['defineComponent']
|
||||||
|
const defineLoader: typeof import('vue-router/auto')['defineLoader']
|
||||||
|
const definePage: typeof import('vue-router/auto')['definePage']
|
||||||
|
const effectScope: typeof import('vue')['effectScope']
|
||||||
|
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
|
||||||
|
const getCurrentScope: typeof import('vue')['getCurrentScope']
|
||||||
|
const h: typeof import('vue')['h']
|
||||||
|
const inject: typeof import('vue')['inject']
|
||||||
|
const isProxy: typeof import('vue')['isProxy']
|
||||||
|
const isReactive: typeof import('vue')['isReactive']
|
||||||
|
const isReadonly: typeof import('vue')['isReadonly']
|
||||||
|
const isRef: typeof import('vue')['isRef']
|
||||||
|
const markRaw: typeof import('vue')['markRaw']
|
||||||
|
const nextTick: typeof import('vue')['nextTick']
|
||||||
|
const onActivated: typeof import('vue')['onActivated']
|
||||||
|
const onBeforeMount: typeof import('vue')['onBeforeMount']
|
||||||
|
const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
|
||||||
|
const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
|
||||||
|
const onDeactivated: typeof import('vue')['onDeactivated']
|
||||||
|
const onErrorCaptured: typeof import('vue')['onErrorCaptured']
|
||||||
|
const onMounted: typeof import('vue')['onMounted']
|
||||||
|
const onRenderTracked: typeof import('vue')['onRenderTracked']
|
||||||
|
const onRenderTriggered: typeof import('vue')['onRenderTriggered']
|
||||||
|
const onScopeDispose: typeof import('vue')['onScopeDispose']
|
||||||
|
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
|
||||||
|
const onUnmounted: typeof import('vue')['onUnmounted']
|
||||||
|
const onUpdated: typeof import('vue')['onUpdated']
|
||||||
|
const provide: typeof import('vue')['provide']
|
||||||
|
const reactive: typeof import('vue')['reactive']
|
||||||
|
const readonly: typeof import('vue')['readonly']
|
||||||
|
const ref: typeof import('vue')['ref']
|
||||||
|
const resolveComponent: typeof import('vue')['resolveComponent']
|
||||||
|
const shallowReactive: typeof import('vue')['shallowReactive']
|
||||||
|
const shallowReadonly: typeof import('vue')['shallowReadonly']
|
||||||
|
const shallowRef: typeof import('vue')['shallowRef']
|
||||||
|
const toRaw: typeof import('vue')['toRaw']
|
||||||
|
const toRef: typeof import('vue')['toRef']
|
||||||
|
const toRefs: typeof import('vue')['toRefs']
|
||||||
|
const triggerRef: typeof import('vue')['triggerRef']
|
||||||
|
const unref: typeof import('vue')['unref']
|
||||||
|
const useAttrs: typeof import('vue')['useAttrs']
|
||||||
|
const useCssModule: typeof import('vue')['useCssModule']
|
||||||
|
const useCssVars: typeof import('vue')['useCssVars']
|
||||||
|
const useHead: typeof import('@vueuse/head')['useHead']
|
||||||
|
const useRoute: typeof import('vue-router/auto')['useRoute']
|
||||||
|
const useRouter: typeof import('vue-router/auto')['useRouter']
|
||||||
|
const useSlots: typeof import('vue')['useSlots']
|
||||||
|
const watch: typeof import('vue')['watch']
|
||||||
|
const watchEffect: typeof import('vue')['watchEffect']
|
||||||
|
const watchPostEffect: typeof import('vue')['watchPostEffect']
|
||||||
|
const watchSyncEffect: typeof import('vue')['watchSyncEffect']
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
// generated by unplugin-vue-components
|
||||||
|
// We suggest you to commit this file into source control
|
||||||
|
// Read more: https://github.com/vuejs/core/pull/3399
|
||||||
|
import '@vue/runtime-core'
|
||||||
|
|
||||||
|
export {}
|
||||||
|
|
||||||
|
declare module '@vue/runtime-core' {
|
||||||
|
export interface GlobalComponents {
|
||||||
|
ButtonRepo: typeof import('./src/components/ButtonRepo.vue')['default']
|
||||||
|
Copy: typeof import('./src/components/Header - Copy.vue')['default']
|
||||||
|
Footer: typeof import('./src/components/Footer.vue')['default']
|
||||||
|
Header: typeof import('./src/components/Header.vue')['default']
|
||||||
|
'Header - Copy': typeof import('./src/components/Header - Copy.vue')['default']
|
||||||
|
MainMenu: typeof import('./src/components/MainMenu.vue')['default']
|
||||||
|
RouterLink: typeof import('vue-router')['RouterLink']
|
||||||
|
RouterView: typeof import('vue-router')['RouterView']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Amigo</title>
|
||||||
|
<link
|
||||||
|
rel="preload"
|
||||||
|
href="/font/Inter-roman.var.woff2"
|
||||||
|
as="font"
|
||||||
|
type="font/woff2"
|
||||||
|
crossorigin="anonymous"
|
||||||
|
/>
|
||||||
|
<!-- <link rel="preload" href="/font/Inter-italic.var.woff2" as="font" type="font/woff2" crossorigin="anonymous"> -->
|
||||||
|
<link rel="stylesheet" href="/font/inter.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
{
|
||||||
|
"name": "vite-vue3-tailwind-starter",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite --host",
|
||||||
|
"build": "vue-tsc --noEmit && vite build",
|
||||||
|
"serve": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@vueuse/head": "^0.7.9",
|
||||||
|
"vue": "^3.2.38",
|
||||||
|
"vue-router": "^4.1.5"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@headlessui/vue": "^1.6.7",
|
||||||
|
"@heroicons/vue": "^2.0.10",
|
||||||
|
"@tailwindcss/aspect-ratio": "^0.4.2",
|
||||||
|
"@tailwindcss/forms": "^0.5.3",
|
||||||
|
"@tailwindcss/line-clamp": "^0.4.2",
|
||||||
|
"@tailwindcss/typography": "^0.5.7",
|
||||||
|
"@vitejs/plugin-vue": "^3.1.0",
|
||||||
|
"@vue/tsconfig": "^0.1.3",
|
||||||
|
"autoprefixer": "^10.4.8",
|
||||||
|
"prettier-plugin-tailwindcss": "^0.1.13",
|
||||||
|
"tailwindcss": "^3.1.8",
|
||||||
|
"typescript": "^4.8.2",
|
||||||
|
"unplugin-auto-import": "^0.11.2",
|
||||||
|
"unplugin-vue-components": "^0.22.4",
|
||||||
|
"unplugin-vue-router": "^0.2.1",
|
||||||
|
"vite": "^3.1.0",
|
||||||
|
"vue-tsc": "^0.40.7"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
RewriteEngine On
|
||||||
|
#RewriteCond %{HTTPS} !=on
|
||||||
|
#RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301,NE]
|
||||||
|
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
|
||||||
|
RewriteRule ^(.*)$ https://%1/$1 [R=301,L]
|
||||||
|
RewriteCond %{REQUEST_FILENAME} !-f
|
||||||
|
RewriteCond %{REQUEST_FILENAME} !-d
|
||||||
|
RewriteRule ^(.*) /
|
||||||
Binary file not shown.
|
|
@ -0,0 +1,16 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Inter var';
|
||||||
|
font-weight: 100 900;
|
||||||
|
font-display: swap;
|
||||||
|
font-style: normal;
|
||||||
|
font-named-instance: 'Regular';
|
||||||
|
src: url('Inter-roman.var.woff2') format('woff2');
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Inter var';
|
||||||
|
font-weight: 100 900;
|
||||||
|
font-display: swap;
|
||||||
|
font-style: italic;
|
||||||
|
font-named-instance: 'Italic';
|
||||||
|
src: url('Inter-italic.var.woff2') format('woff2');
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
|
|
@ -0,0 +1,2 @@
|
||||||
|
User-agent: *
|
||||||
|
Allow: /
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<script setup>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<Header />
|
||||||
|
<main>
|
||||||
|
<router-view />
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
<Footer />
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
<template>
|
||||||
|
<div class="ml-3 inline-flex rounded-md shadow">
|
||||||
|
<a
|
||||||
|
target="_blank"
|
||||||
|
href="https://github.com/web2033/vite-vue3-tailwind-starter"
|
||||||
|
class="inline-flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium leading-6 text-indigo-600 transition duration-150 ease-in-out hover:text-indigo-500 focus:outline-none"
|
||||||
|
>Learn more</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,164 @@
|
||||||
|
<template>
|
||||||
|
|
||||||
|
<footer class="text-center lg:text-left bg-gray-100 text-gray-600 mt-4">
|
||||||
|
<div class="flex justify-center items-center lg:justify-between p-6 border-b border-gray-300">
|
||||||
|
<div class="mr-12 hidden lg:block">
|
||||||
|
<span>Get connected with us on social networks:</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-center">
|
||||||
|
<a href="#!" class="mr-6 text-gray-600">
|
||||||
|
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook-f"
|
||||||
|
class="w-2.5" role="img" xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 320 512">
|
||||||
|
<path fill="currentColor"
|
||||||
|
d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="#!" class="mr-6 text-gray-600">
|
||||||
|
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter"
|
||||||
|
class="w-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||||
|
<path fill="currentColor"
|
||||||
|
d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="#!" class="mr-6 text-gray-600">
|
||||||
|
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="google"
|
||||||
|
class="w-3.5" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512">
|
||||||
|
<path fill="currentColor"
|
||||||
|
d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="#!" class="mr-6 text-gray-600">
|
||||||
|
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="instagram"
|
||||||
|
class="w-3.5" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
|
||||||
|
<path fill="currentColor"
|
||||||
|
d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="#!" class="mr-6 text-gray-600">
|
||||||
|
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="linkedin-in"
|
||||||
|
class="w-3.5" role="img" xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 448 512">
|
||||||
|
<path fill="currentColor"
|
||||||
|
d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="#!" class="text-gray-600">
|
||||||
|
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github"
|
||||||
|
class="w-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
|
||||||
|
<path fill="currentColor"
|
||||||
|
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mx-6 py-10 text-center md:text-left">
|
||||||
|
<div class="grid grid-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
<div class="">
|
||||||
|
<h6 class=" uppercase font-semibold mb-4 flex items-center justify-center md:justify-start ">
|
||||||
|
|
||||||
|
Amigo
|
||||||
|
</h6>
|
||||||
|
<p>
|
||||||
|
lorem some company text details
|
||||||
|
lorem some company text details
|
||||||
|
lorem some company text details
|
||||||
|
lorem some company text details
|
||||||
|
lorem some company text details
|
||||||
|
lorem some company text details
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="">
|
||||||
|
<h6 class="uppercase font-semibold mb-4 flex justify-center md:justify-start">
|
||||||
|
Products
|
||||||
|
</h6>
|
||||||
|
<p class="mb-4">
|
||||||
|
<router-link to="/category/forhim"
|
||||||
|
class="text-gray-600"
|
||||||
|
aria-current="page">For Him</router-link>
|
||||||
|
</p>
|
||||||
|
<p class="mb-4">
|
||||||
|
<router-link to="/category/forher"
|
||||||
|
class="text-gray-600"
|
||||||
|
aria-current="page">For Him</router-link>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- <div class="">
|
||||||
|
<h6 class="uppercase font-semibold mb-4 flex justify-center md:justify-start">
|
||||||
|
Useful links
|
||||||
|
</h6>
|
||||||
|
<p class="mb-4">
|
||||||
|
<a href="#!" class="text-gray-600">Pricing</a>
|
||||||
|
</p>
|
||||||
|
<p class="mb-4">
|
||||||
|
<a href="#!" class="text-gray-600">Settings</a>
|
||||||
|
</p>
|
||||||
|
<p class="mb-4">
|
||||||
|
<a href="#!" class="text-gray-600">Orders</a>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<a href="#!" class="text-gray-600">Help</a>
|
||||||
|
</p>
|
||||||
|
</div> -->
|
||||||
|
<div class="">
|
||||||
|
<h6 class="uppercase font-semibold mb-4 flex justify-center md:justify-start">
|
||||||
|
Contact
|
||||||
|
</h6>
|
||||||
|
<p class="flex items-center justify-center md:justify-start mb-4">
|
||||||
|
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="home"
|
||||||
|
class="w-4 mr-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
|
||||||
|
<path fill="currentColor"
|
||||||
|
d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
New York, NY 10012, US
|
||||||
|
</p>
|
||||||
|
<p class="flex items-center justify-center md:justify-start mb-4">
|
||||||
|
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="envelope"
|
||||||
|
class="w-4 mr-4" role="img" xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 512 512">
|
||||||
|
<path fill="currentColor"
|
||||||
|
d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
info@example.com
|
||||||
|
</p>
|
||||||
|
<p class="flex items-center justify-center md:justify-start mb-4">
|
||||||
|
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="phone"
|
||||||
|
class="w-4 mr-4" role="img" xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 512 512">
|
||||||
|
<path fill="currentColor"
|
||||||
|
d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
+ 01 234 567 88
|
||||||
|
</p>
|
||||||
|
<p class="flex items-center justify-center md:justify-start">
|
||||||
|
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="print"
|
||||||
|
class="w-4 mr-4" role="img" xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 512 512">
|
||||||
|
<path fill="currentColor"
|
||||||
|
d="M448 192V77.25c0-8.49-3.37-16.62-9.37-22.63L393.37 9.37c-6-6-14.14-9.37-22.63-9.37H96C78.33 0 64 14.33 64 32v160c-35.35 0-64 28.65-64 64v112c0 8.84 7.16 16 16 16h48v96c0 17.67 14.33 32 32 32h320c17.67 0 32-14.33 32-32v-96h48c8.84 0 16-7.16 16-16V256c0-35.35-28.65-64-64-64zm-64 256H128v-96h256v96zm0-224H128V64h192v48c0 8.84 7.16 16 16 16h48v96zm48 72c-13.25 0-24-10.75-24-24 0-13.26 10.75-24 24-24s24 10.74 24 24c0 13.25-10.75 24-24 24z">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
+ 01 234 567 89
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center p-6 bg-gray-200">
|
||||||
|
<span>© 2022 Copyright:</span>
|
||||||
|
<a class="text-gray-600 font-semibold" href="#!"> All Rights Reserved</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,462 @@
|
||||||
|
<template>
|
||||||
|
|
||||||
|
<!-- This example requires Tailwind CSS v2.0+ -->
|
||||||
|
<div class="relative bg-white">
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6">
|
||||||
|
<div class="flex items-center justify-between border-b-2 border-gray-100 py-6 md:justify-start md:space-x-10">
|
||||||
|
<div class="flex justify-start lg:w-0 lg:flex-1">
|
||||||
|
<a href="#">
|
||||||
|
<span class="sr-only">Your Company</span>
|
||||||
|
<img class="h-8 w-auto sm:h-10" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="-my-2 -mr-2 md:hidden">
|
||||||
|
<button type="button" class="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-expanded="false">
|
||||||
|
<span class="sr-only">Open menu</span>
|
||||||
|
<!-- Heroicon name: outline/bars-3 -->
|
||||||
|
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<nav class="hidden space-x-10 md:flex">
|
||||||
|
<div class="relative">
|
||||||
|
<!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
|
||||||
|
<button type="button" class="text-gray-500 group inline-flex items-center rounded-md bg-white text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" aria-expanded="false">
|
||||||
|
<span>Solutions</span>
|
||||||
|
<!--
|
||||||
|
Heroicon name: mini/chevron-down
|
||||||
|
|
||||||
|
Item active: "text-gray-600", Item inactive: "text-gray-400"
|
||||||
|
-->
|
||||||
|
<svg class="text-gray-400 ml-2 h-5 w-5 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||||
|
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
'Solutions' flyout menu, show/hide based on flyout menu state.
|
||||||
|
|
||||||
|
Entering: "transition ease-out duration-200"
|
||||||
|
From: "opacity-0 translate-y-1"
|
||||||
|
To: "opacity-100 translate-y-0"
|
||||||
|
Leaving: "transition ease-in duration-150"
|
||||||
|
From: "opacity-100 translate-y-0"
|
||||||
|
To: "opacity-0 translate-y-1"
|
||||||
|
-->
|
||||||
|
<div class="absolute z-10 -ml-4 mt-3 w-screen max-w-md transform px-2 sm:px-0 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2">
|
||||||
|
<div class="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
|
||||||
|
<div class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
|
||||||
|
<a href="#" class="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50">
|
||||||
|
<!-- Heroicon name: outline/chart-bar -->
|
||||||
|
<svg class="h-6 w-6 flex-shrink-0 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
|
||||||
|
</svg>
|
||||||
|
<div class="ml-4">
|
||||||
|
<p class="text-base font-medium text-gray-900">Analytics</p>
|
||||||
|
<p class="mt-1 text-sm text-gray-500">Get a better understanding of where your traffic is coming from.</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="#" class="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50">
|
||||||
|
<!-- Heroicon name: outline/cursor-arrow-rays -->
|
||||||
|
<svg class="h-6 w-6 flex-shrink-0 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zM12 2.25V4.5m5.834.166l-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243l-1.59-1.59" />
|
||||||
|
</svg>
|
||||||
|
<div class="ml-4">
|
||||||
|
<p class="text-base font-medium text-gray-900">Engagement</p>
|
||||||
|
<p class="mt-1 text-sm text-gray-500">Speak directly to your customers in a more meaningful way.</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="#" class="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50">
|
||||||
|
<!-- Heroicon name: outline/shield-check -->
|
||||||
|
<svg class="h-6 w-6 flex-shrink-0 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
|
||||||
|
</svg>
|
||||||
|
<div class="ml-4">
|
||||||
|
<p class="text-base font-medium text-gray-900">Security</p>
|
||||||
|
<p class="mt-1 text-sm text-gray-500">Your customers' data will be safe and secure.</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="#" class="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50">
|
||||||
|
<!-- Heroicon name: outline/squares-2x2 -->
|
||||||
|
<svg class="h-6 w-6 flex-shrink-0 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
|
||||||
|
</svg>
|
||||||
|
<div class="ml-4">
|
||||||
|
<p class="text-base font-medium text-gray-900">Integrations</p>
|
||||||
|
<p class="mt-1 text-sm text-gray-500">Connect with third-party tools that you're already using.</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="#" class="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50">
|
||||||
|
<!-- Heroicon name: outline/arrow-path -->
|
||||||
|
<svg class="h-6 w-6 flex-shrink-0 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12c0-1.232.046-2.453.138-3.662a4.006 4.006 0 013.7-3.7 48.678 48.678 0 017.324 0 4.006 4.006 0 013.7 3.7c.017.22.032.441.046.662M4.5 12l-3-3m3 3l3-3m12 3c0 1.232-.046 2.453-.138 3.662a4.006 4.006 0 01-3.7 3.7 48.657 48.657 0 01-7.324 0 4.006 4.006 0 01-3.7-3.7c-.017-.22-.032-.441-.046-.662M19.5 12l-3 3m3-3l3 3" />
|
||||||
|
</svg>
|
||||||
|
<div class="ml-4">
|
||||||
|
<p class="text-base font-medium text-gray-900">Automations</p>
|
||||||
|
<p class="mt-1 text-sm text-gray-500">Build strategic funnels that will drive your customers to convert</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-6 bg-gray-50 px-5 py-5 sm:flex sm:space-y-0 sm:space-x-10 sm:px-8">
|
||||||
|
<div class="flow-root">
|
||||||
|
<a href="#" class="-m-3 flex items-center rounded-md p-3 text-base font-medium text-gray-900 hover:bg-gray-100">
|
||||||
|
<!-- Heroicon name: outline/play -->
|
||||||
|
<svg class="h-6 w-6 flex-shrink-0 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z" />
|
||||||
|
</svg>
|
||||||
|
<span class="ml-3">Watch Demo</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flow-root">
|
||||||
|
<a href="#" class="-m-3 flex items-center rounded-md p-3 text-base font-medium text-gray-900 hover:bg-gray-100">
|
||||||
|
<!-- Heroicon name: outline/phone -->
|
||||||
|
<svg class="h-6 w-6 flex-shrink-0 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z" />
|
||||||
|
</svg>
|
||||||
|
<span class="ml-3">Contact Sales</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="#" class="text-base font-medium text-gray-500 hover:text-gray-900">Pricing</a>
|
||||||
|
<a href="#" class="text-base font-medium text-gray-500 hover:text-gray-900">Docs</a>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
|
||||||
|
<button type="button" class="text-gray-500 group inline-flex items-center rounded-md bg-white text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" aria-expanded="false">
|
||||||
|
<span>More</span>
|
||||||
|
<!--
|
||||||
|
Heroicon name: mini/chevron-down
|
||||||
|
|
||||||
|
Item active: "text-gray-600", Item inactive: "text-gray-400"
|
||||||
|
-->
|
||||||
|
<svg class="text-gray-400 ml-2 h-5 w-5 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||||
|
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
'More' flyout menu, show/hide based on flyout menu state.
|
||||||
|
|
||||||
|
Entering: "transition ease-out duration-200"
|
||||||
|
From: "opacity-0 translate-y-1"
|
||||||
|
To: "opacity-100 translate-y-0"
|
||||||
|
Leaving: "transition ease-in duration-150"
|
||||||
|
From: "opacity-100 translate-y-0"
|
||||||
|
To: "opacity-0 translate-y-1"
|
||||||
|
-->
|
||||||
|
<div class="absolute left-1/2 z-10 mt-3 w-screen max-w-md -translate-x-1/2 transform px-2 sm:px-0">
|
||||||
|
<div class="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
|
||||||
|
<div class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
|
||||||
|
<a href="#" class="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50">
|
||||||
|
<!-- Heroicon name: outline/lifebuoy -->
|
||||||
|
<svg class="h-6 w-6 flex-shrink-0 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M16.712 4.33a9.027 9.027 0 011.652 1.306c.51.51.944 1.064 1.306 1.652M16.712 4.33l-3.448 4.138m3.448-4.138a9.014 9.014 0 00-9.424 0M19.67 7.288l-4.138 3.448m4.138-3.448a9.014 9.014 0 010 9.424m-4.138-5.976a3.736 3.736 0 00-.88-1.388 3.737 3.737 0 00-1.388-.88m2.268 2.268a3.765 3.765 0 010 2.528m-2.268-4.796a3.765 3.765 0 00-2.528 0m4.796 4.796c-.181.506-.475.982-.88 1.388a3.736 3.736 0 01-1.388.88m2.268-2.268l4.138 3.448m0 0a9.027 9.027 0 01-1.306 1.652c-.51.51-1.064.944-1.652 1.306m0 0l-3.448-4.138m3.448 4.138a9.014 9.014 0 01-9.424 0m5.976-4.138a3.765 3.765 0 01-2.528 0m0 0a3.736 3.736 0 01-1.388-.88 3.737 3.737 0 01-.88-1.388m2.268 2.268L7.288 19.67m0 0a9.024 9.024 0 01-1.652-1.306 9.027 9.027 0 01-1.306-1.652m0 0l4.138-3.448M4.33 16.712a9.014 9.014 0 010-9.424m4.138 5.976a3.765 3.765 0 010-2.528m0 0c.181-.506.475-.982.88-1.388a3.736 3.736 0 011.388-.88m-2.268 2.268L4.33 7.288m6.406 1.18L7.288 4.33m0 0a9.024 9.024 0 00-1.652 1.306A9.025 9.025 0 004.33 7.288" />
|
||||||
|
</svg>
|
||||||
|
<div class="ml-4">
|
||||||
|
<p class="text-base font-medium text-gray-900">Help Center</p>
|
||||||
|
<p class="mt-1 text-sm text-gray-500">Get all of your questions answered in our forums or contact support.</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="#" class="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50">
|
||||||
|
<!-- Heroicon name: outline/bookmark-square -->
|
||||||
|
<svg class="h-6 w-6 flex-shrink-0 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0120.25 6v12A2.25 2.25 0 0118 20.25H6A2.25 2.25 0 013.75 18V6A2.25 2.25 0 016 3.75h1.5m9 0h-9" />
|
||||||
|
</svg>
|
||||||
|
<div class="ml-4">
|
||||||
|
<p class="text-base font-medium text-gray-900">Guides</p>
|
||||||
|
<p class="mt-1 text-sm text-gray-500">Learn how to maximize our platform to get the most out of it.</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="#" class="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50">
|
||||||
|
<!-- Heroicon name: outline/calendar -->
|
||||||
|
<svg class="h-6 w-6 flex-shrink-0 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
|
||||||
|
</svg>
|
||||||
|
<div class="ml-4">
|
||||||
|
<p class="text-base font-medium text-gray-900">Events</p>
|
||||||
|
<p class="mt-1 text-sm text-gray-500">See what meet-ups and other events we might be planning near you.</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="#" class="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50">
|
||||||
|
<!-- Heroicon name: outline/shield-check -->
|
||||||
|
<svg class="h-6 w-6 flex-shrink-0 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
|
||||||
|
</svg>
|
||||||
|
<div class="ml-4">
|
||||||
|
<p class="text-base font-medium text-gray-900">Security</p>
|
||||||
|
<p class="mt-1 text-sm text-gray-500">Understand how we take your privacy seriously.</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gray-50 px-5 py-5 sm:px-8 sm:py-8">
|
||||||
|
<div>
|
||||||
|
<h3 class="text-base font-medium text-gray-500">Recent Posts</h3>
|
||||||
|
<ul role="list" class="mt-4 space-y-4">
|
||||||
|
<li class="truncate text-base">
|
||||||
|
<a href="#" class="font-medium text-gray-900 hover:text-gray-700">Boost your conversion rate</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="truncate text-base">
|
||||||
|
<a href="#" class="font-medium text-gray-900 hover:text-gray-700">How to use search engine optimization to drive traffic to your site</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="truncate text-base">
|
||||||
|
<a href="#" class="font-medium text-gray-900 hover:text-gray-700">Improve your customer experience</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="mt-5 text-sm">
|
||||||
|
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">
|
||||||
|
View all posts
|
||||||
|
<span aria-hidden="true"> →</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<div class="hidden items-center justify-end md:flex md:flex-1 lg:w-0">
|
||||||
|
<a href="#" class="whitespace-nowrap text-base font-medium text-gray-500 hover:text-gray-900">Sign in</a>
|
||||||
|
<a href="#" class="ml-8 inline-flex items-center justify-center whitespace-nowrap rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700">Sign up</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Mobile menu, show/hide based on mobile menu state.
|
||||||
|
|
||||||
|
Entering: "duration-200 ease-out"
|
||||||
|
From: "opacity-0 scale-95"
|
||||||
|
To: "opacity-100 scale-100"
|
||||||
|
Leaving: "duration-100 ease-in"
|
||||||
|
From: "opacity-100 scale-100"
|
||||||
|
To: "opacity-0 scale-95"
|
||||||
|
-->
|
||||||
|
<div class="absolute inset-x-0 top-0 origin-top-right transform p-2 transition md:hidden">
|
||||||
|
<div class="divide-y-2 divide-gray-50 rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
|
||||||
|
<div class="px-5 pt-5 pb-6">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="Your Company">
|
||||||
|
</div>
|
||||||
|
<div class="-mr-2">
|
||||||
|
<button type="button" class="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
|
||||||
|
<span class="sr-only">Close menu</span>
|
||||||
|
<!-- Heroicon name: outline/x-mark -->
|
||||||
|
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-6">
|
||||||
|
<nav class="grid gap-y-8">
|
||||||
|
<a href="#" class="-m-3 flex items-center rounded-md p-3 hover:bg-gray-50">
|
||||||
|
<!-- Heroicon name: outline/chart-bar -->
|
||||||
|
<svg class="h-6 w-6 flex-shrink-0 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
|
||||||
|
</svg>
|
||||||
|
<span class="ml-3 text-base font-medium text-gray-900">Analytics</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="#" class="-m-3 flex items-center rounded-md p-3 hover:bg-gray-50">
|
||||||
|
<!-- Heroicon name: outline/cursor-arrow-rays -->
|
||||||
|
<svg class="h-6 w-6 flex-shrink-0 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zM12 2.25V4.5m5.834.166l-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243l-1.59-1.59" />
|
||||||
|
</svg>
|
||||||
|
<span class="ml-3 text-base font-medium text-gray-900">Engagement</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="#" class="-m-3 flex items-center rounded-md p-3 hover:bg-gray-50">
|
||||||
|
<!-- Heroicon name: outline/shield-check -->
|
||||||
|
<svg class="h-6 w-6 flex-shrink-0 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
|
||||||
|
</svg>
|
||||||
|
<span class="ml-3 text-base font-medium text-gray-900">Security</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="#" class="-m-3 flex items-center rounded-md p-3 hover:bg-gray-50">
|
||||||
|
<!-- Heroicon name: outline/squares-2x2 -->
|
||||||
|
<svg class="h-6 w-6 flex-shrink-0 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
|
||||||
|
</svg>
|
||||||
|
<span class="ml-3 text-base font-medium text-gray-900">Integrations</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="#" class="-m-3 flex items-center rounded-md p-3 hover:bg-gray-50">
|
||||||
|
<!-- Heroicon name: outline/arrow-path -->
|
||||||
|
<svg class="h-6 w-6 flex-shrink-0 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12c0-1.232.046-2.453.138-3.662a4.006 4.006 0 013.7-3.7 48.678 48.678 0 017.324 0 4.006 4.006 0 013.7 3.7c.017.22.032.441.046.662M4.5 12l-3-3m3 3l3-3m12 3c0 1.232-.046 2.453-.138 3.662a4.006 4.006 0 01-3.7 3.7 48.657 48.657 0 01-7.324 0 4.006 4.006 0 01-3.7-3.7c-.017-.22-.032-.441-.046-.662M19.5 12l-3 3m3-3l3 3" />
|
||||||
|
</svg>
|
||||||
|
<span class="ml-3 text-base font-medium text-gray-900">Automations</span>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-6 py-6 px-5">
|
||||||
|
<div class="grid grid-cols-2 gap-y-4 gap-x-8">
|
||||||
|
<a href="#" class="text-base font-medium text-gray-900 hover:text-gray-700">Pricing</a>
|
||||||
|
|
||||||
|
<a href="#" class="text-base font-medium text-gray-900 hover:text-gray-700">Docs</a>
|
||||||
|
|
||||||
|
<a href="#" class="text-base font-medium text-gray-900 hover:text-gray-700">Help Center</a>
|
||||||
|
|
||||||
|
<a href="#" class="text-base font-medium text-gray-900 hover:text-gray-700">Guides</a>
|
||||||
|
|
||||||
|
<a href="#" class="text-base font-medium text-gray-900 hover:text-gray-700">Events</a>
|
||||||
|
|
||||||
|
<a href="#" class="text-base font-medium text-gray-900 hover:text-gray-700">Security</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="#" class="flex w-full items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700">Sign up</a>
|
||||||
|
<p class="mt-6 text-center text-base font-medium text-gray-500">
|
||||||
|
Existing customer?
|
||||||
|
<a href="#" class="text-indigo-600 hover:text-indigo-500">Sign in</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- <section class="w-full h-screen bg-local bg-cover "
|
||||||
|
style="background-image: url(/img/menu-bg.jpg); position: absolute; z-index: -1;"> </section>
|
||||||
|
|
||||||
|
<nav class=" border-gray-200 px-2 sm:px-4 py-2.5 rounded dark:bg-gray-900">
|
||||||
|
<div class="container flex flex-wrap justify-between items-center mx-auto">
|
||||||
|
<div class="grid">
|
||||||
|
<div class="grid-cols-2">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<router-link to="/" class="flex items-center">
|
||||||
|
<img src="/img/logo.png" class="mr-3 h-6 sm:h-9" alt="Demo Logo">
|
||||||
|
<span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Amigo</span>
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex md:order-2">
|
||||||
|
<button type="button" data-collapse-toggle="navbar-search" aria-controls="navbar-search"
|
||||||
|
aria-expanded="false"
|
||||||
|
class="md:hidden text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 mr-1">
|
||||||
|
<svg class="w-5 h-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd"
|
||||||
|
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
|
||||||
|
clip-rule="evenodd"></path>
|
||||||
|
</svg>
|
||||||
|
<span class="sr-only">Search</span>
|
||||||
|
</button>
|
||||||
|
<div class="hidden relative md:block">
|
||||||
|
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
|
||||||
|
<svg class="w-5 h-5 text-gray-500" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd"
|
||||||
|
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
|
||||||
|
clip-rule="evenodd"></path>
|
||||||
|
</svg>
|
||||||
|
<span class="sr-only">Search icon</span>
|
||||||
|
</div>
|
||||||
|
<input type="text" id="search-navbar"
|
||||||
|
class="block p-2 pl-10 w-full text-gray-900 bg-gray-50 rounded-lg border border-gray-300 sm:text-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
||||||
|
placeholder="Search...">
|
||||||
|
</div>
|
||||||
|
<button data-collapse-toggle="navbar-search" type="button"
|
||||||
|
class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
|
||||||
|
aria-controls="navbar-search" aria-expanded="false">
|
||||||
|
<span class="sr-only">Open menu</span>
|
||||||
|
<svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd"
|
||||||
|
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
|
||||||
|
clip-rule="evenodd"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="hidden justify-between items-center w-full md:flex md:w-auto md:order-1" id="navbar-search">
|
||||||
|
<div class="grid-cols-2">
|
||||||
|
|
||||||
|
<div class="relative mt-3 md:hidden">
|
||||||
|
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
|
||||||
|
<svg class="w-5 h-5 text-gray-500" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd"
|
||||||
|
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
|
||||||
|
clip-rule="evenodd"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<input type="text" id="search-navbar"
|
||||||
|
class="block p-2 pl-10 w-full text-gray-900 bg-gray-50 rounded-lg border border-gray-300 sm:text-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
||||||
|
placeholder="Search...">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid-cols-8 text-center">
|
||||||
|
|
||||||
|
<h3
|
||||||
|
class="mb-0 text-center text-2xl font-extrabold tracking-tight leading-none text-gray-900 md:text-3xl lg:text-3xl dark:text-white">
|
||||||
|
Amigo Website</h3>
|
||||||
|
|
||||||
|
<ul
|
||||||
|
class="flex flex-col p-4 mt-4 rounded-lg border border-gray-100 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 dark:bg-gray-800 dark:border-gray-700">
|
||||||
|
<li>
|
||||||
|
<router-link to="/category/forhim"
|
||||||
|
class="block bg-transparent hover:bg-black text-black font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded"
|
||||||
|
aria-current="page">For Him</router-link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<router-link to="/category/forher"
|
||||||
|
class="block bg-transparent hover:bg-black text-black font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded">For
|
||||||
|
Her</router-link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<router-link to="/category/Children"
|
||||||
|
class="block bg-transparent hover:bg-black text-black font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded">For
|
||||||
|
Children</router-link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<router-link to="/category/Toddler"
|
||||||
|
class="block bg-transparent hover:bg-black text-black font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded">For
|
||||||
|
Toddler</router-link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<router-link to="/category/Amigo"
|
||||||
|
class="block bg-transparent hover:bg-black text-black font-semibold hover:text-white py-2 px-4 border border-white hover:border-transparent rounded">For
|
||||||
|
AmigoDeal</router-link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav> -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
<!-- This example requires Tailwind CSS v2.0+ -->
|
||||||
|
<template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="container-fluid">
|
||||||
|
|
||||||
|
<div class=" bg-white border-b-2 border-gray-100 ">
|
||||||
|
<div class="mx-auto max-w-7xl px-4 sm:px-6">
|
||||||
|
<div class="flex items-center justify-between py-4 md:justify-start md:space-x-5">
|
||||||
|
<div class="flex justify-start lg:flex-1">
|
||||||
|
|
||||||
|
<router-link to="/" class="flex items-center">
|
||||||
|
<img src="/img/logo.png" class="mr-3 h-6 sm:h-10">
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class=" space-x-5 md:flex uppercase">
|
||||||
|
|
||||||
|
|
||||||
|
<router-link to="/" class="text-xs font-bold text-black-500 hover:text-black-900" aria-current="page">New Arrivals </router-link>
|
||||||
|
<router-link to="/" class="text-xs font-bold text-black-500 hover:text-black-900" aria-current="page">Cases & Sleeves </router-link>
|
||||||
|
<router-link to="/" class="text-xs font-bold text-black-500 hover:text-black-900" aria-current="page">Accessories </router-link>
|
||||||
|
<router-link to="/" class="text-xs font-bold text-black-500 hover:text-black-900" aria-current="page">Sale </router-link>
|
||||||
|
<router-link to="/" class="text-xs font-bold text-black-500 hover:text-black-900" aria-current="page">Bags & wallets </router-link>
|
||||||
|
<router-link to="/" class="text-xs font-bold text-black-500 hover:text-black-900" aria-current="page">Home Office </router-link>
|
||||||
|
<router-link to="/" class="text-xs font-bold text-black-500 hover:text-black-900" aria-current="page">Collections </router-link>
|
||||||
|
<router-link to="/" class="text-xs font-bold text-black-500 hover:text-black-900" aria-current="page">Corporate Gifting </router-link>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class=" items-center justify-end md:flex md:flex-1 lg:w-0">
|
||||||
|
|
||||||
|
<a href="#" class="whitespace-nowrap text-sm font-medium text-gray-500 hover:text-gray-900">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart" viewBox="0 0 16 16"> <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/> </svg>
|
||||||
|
</a>
|
||||||
|
<a href="#"
|
||||||
|
class="ml-8 inline-flex items-center justify-center whitespace-nowrap rounded-md text-gray-500 hover:text-gray-900 px-4 py-2 text-base font-medium">
|
||||||
|
<svg width="24" height="24" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7 18V17C7 14.2386 9.23858 12 12 12V12C14.7614 12 17 14.2386 17 17V18" stroke="currentColor" stroke-linecap="round"/> <path d="M12 12C13.6569 12 15 10.6569 15 9C15 7.34315 13.6569 6 12 6C10.3431 6 9 7.34315 9 9C9 10.6569 10.3431 12 12 12Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/> <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/> </svg>
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
import { createApp } from 'vue'
|
||||||
|
import './tailwind.css'
|
||||||
|
import App from './App.vue'
|
||||||
|
import { createRouter, createWebHistory } from 'vue-router/auto'
|
||||||
|
import { createHead } from '@vueuse/head'
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
const head = createHead()
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(),
|
||||||
|
})
|
||||||
|
|
||||||
|
app.use(router)
|
||||||
|
app.use(head)
|
||||||
|
app.mount(document.body)
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<script setup>
|
||||||
|
useHead({
|
||||||
|
title: '404',
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<header class="bg-white shadow">
|
||||||
|
<div class="mx-auto max-w-7xl py-6 px-4 sm:px-6 lg:px-8">
|
||||||
|
<h1 class="text-3xl font-bold leading-tight text-gray-900">Not Found</h1>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
<route lang="json">
|
||||||
|
{
|
||||||
|
"meta": {
|
||||||
|
"title": "About"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</route>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
useHead({
|
||||||
|
title: 'About',
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="bg-gray-50">
|
||||||
|
<div
|
||||||
|
class="mx-auto max-w-screen-xl px-4 py-12 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8"
|
||||||
|
>
|
||||||
|
<h2
|
||||||
|
class="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 sm:text-4xl sm:leading-10"
|
||||||
|
>
|
||||||
|
About Page
|
||||||
|
<br />
|
||||||
|
<span class="text-indigo-600">Vite + Vue 3 + Tailwind CSS</span>
|
||||||
|
</h2>
|
||||||
|
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
|
||||||
|
<div class="inline-flex rounded-md shadow">
|
||||||
|
<router-link
|
||||||
|
to="/"
|
||||||
|
class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium leading-6 text-white transition duration-150 ease-in-out hover:bg-indigo-500 focus:outline-none"
|
||||||
|
>Back Home</router-link
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<ButtonRepo />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,113 @@
|
||||||
|
<template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="container-fluid bg-white mx-auto mt-3 object-center p-0">
|
||||||
|
<h1 class="font-medium text-center leading-tight text-4xl p-4 text-black-600">New Arrivals for {{this.$route.params.id}}</h1>
|
||||||
|
<hr class="">
|
||||||
|
|
||||||
|
<div v-if="loading" class="loading">Loading...</div>
|
||||||
|
<div v-if="error" class="error">{{ error }}</div>
|
||||||
|
|
||||||
|
<div v-if="itemByCategory.data" class="grid gap-x-8 gap-y-4 grid-cols-5 mt-4 mb-4">
|
||||||
|
<div v-for="(item, index) in itemByCategory.data" class="">
|
||||||
|
<router-link :to="'/item/' + item.slug">
|
||||||
|
<div class="flex items-center justify-center ">
|
||||||
|
<img :src="'https://api8.siliconpin.com/assets/'+item.img" alt="Image" class=" h-48 space-x-4 flex items-center justify-center" />
|
||||||
|
</div>
|
||||||
|
<h3 class="text-center text-1xl font-bold uppercase mt-3">{{ item.name }}</h3>
|
||||||
|
<p class="text-center">Qty - 2 </p>
|
||||||
|
<p class="text-center">Price - Rs. {{ item.price }} </p>
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
post: {},
|
||||||
|
itemByCategory: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted: function () {
|
||||||
|
this.getItemByCategory()
|
||||||
|
// console.log(this.$route.query.cat)
|
||||||
|
// console.log(this.fruits)
|
||||||
|
// console.log(this.$route.query.id);
|
||||||
|
// console.log(this.$route.params.id);
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getItemByCategory() {
|
||||||
|
fetch('https://api8.siliconpin.com/items/ecom55?filter[category][_eq]=' + this.$route.params.id)
|
||||||
|
// fetch('https://api8.siliconpin.com/items/ecom55?filter[category][_eq]=' + this.$route.params.id)
|
||||||
|
// fetch('https://api7.siliconpin.com/items/ecom55')
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => this.itemByCategory = data)
|
||||||
|
console.log(this.itemByCategory)
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: false,
|
||||||
|
itemByCategory: null,
|
||||||
|
error: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// watch the params of the route to fetch the data again
|
||||||
|
this.$watch(
|
||||||
|
() => this.$route.params,
|
||||||
|
() => {
|
||||||
|
this.fetchData()
|
||||||
|
},
|
||||||
|
// fetch the data when the view is created and the data is
|
||||||
|
// already being observed
|
||||||
|
{ immediate: true }
|
||||||
|
)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
fetchData() {
|
||||||
|
console.log(this.$route.params.id,)
|
||||||
|
this.error = this.post = null
|
||||||
|
this.loading = true
|
||||||
|
fetch('https://api8.siliconpin.com/items/ecom55?filter[category][_eq]=' + this.$route.params.id)
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => this.itemByCategory = data)
|
||||||
|
// console.log(this.itemByCategory)
|
||||||
|
this.loading = false
|
||||||
|
// replace `getPost` with your data fetching util / API wrapper
|
||||||
|
// getPost(this.$route.params.id, (err, post) => {
|
||||||
|
// this.loading = false
|
||||||
|
// if (err) {
|
||||||
|
// this.error = err.toString()
|
||||||
|
// } else {
|
||||||
|
// this.post = post
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
</script> -->
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h2>Category Main Page</h2>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: false,
|
||||||
|
itemByCategory: null,
|
||||||
|
error: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// watch the params of the route to fetch the data again
|
||||||
|
this.$watch(
|
||||||
|
() => this.$route.params,
|
||||||
|
() => {
|
||||||
|
this.fetchData()
|
||||||
|
},
|
||||||
|
// fetch the data when the view is created and the data is
|
||||||
|
// already being observed
|
||||||
|
{ immediate: true }
|
||||||
|
)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
fetchData() {
|
||||||
|
console.log(this.$route.params.id,)
|
||||||
|
this.error = this.post = null
|
||||||
|
this.loading = true
|
||||||
|
fetch('https://api8.siliconpin.com/items/ecom55?filter[category][_eq]=' + this.$route.params.id)
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => this.itemByCategory = data)
|
||||||
|
// console.log(this.itemByCategory)
|
||||||
|
this.loading = false
|
||||||
|
// replace `getPost` with your data fetching util / API wrapper
|
||||||
|
// getPost(this.$route.params.id, (err, post) => {
|
||||||
|
// this.loading = false
|
||||||
|
// if (err) {
|
||||||
|
// this.error = err.toString()
|
||||||
|
// } else {
|
||||||
|
// this.post = post
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,70 @@
|
||||||
|
<template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="container-fluid bg-white mx-auto mt-3 object-center p-0">
|
||||||
|
<h1 class="font-medium text-center leading-tight text-4xl p-4 text-black-600">New Arrivals - Category.vue</h1>
|
||||||
|
<hr class="">
|
||||||
|
|
||||||
|
<div class="grid gap-x-8 gap-y-4 grid-cols-5 mt-4 mb-4">
|
||||||
|
|
||||||
|
<div v-for="(item, index) in itemByCategory.data" class="">
|
||||||
|
|
||||||
|
<router-link :to="'/item/' + item.slug">
|
||||||
|
<div class="flex items-center justify-center ">
|
||||||
|
<img :src="'https://api8.siliconpin.com/assets/'+item.img" alt="{{ item.name }}"
|
||||||
|
class=" h-48 space-x-4 flex items-center justify-center" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 class="text-center text-1xl font-bold uppercase mt-3">{{ item.name }}</h3>
|
||||||
|
|
||||||
|
<p class="text-center">Qty - 2 </p>
|
||||||
|
<p class="text-center">Price - Rs. {{ item.price }} </p>
|
||||||
|
</router-link>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
// data() {
|
||||||
|
// return {
|
||||||
|
// post: {},
|
||||||
|
// itemByCategory: {}
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// mounted: function () {
|
||||||
|
// this.getItemByCategory()
|
||||||
|
// // console.log(this.$route.query.cat)
|
||||||
|
// // console.log(this.fruits)
|
||||||
|
// },
|
||||||
|
// methods: {
|
||||||
|
// getItemByCategory() {
|
||||||
|
// fetch('https://api8.siliconpin.com/items/ecom55?cat=' + this.$route.query.cat)
|
||||||
|
// // fetch('https://api7.siliconpin.com/items/ecom55')
|
||||||
|
// .then(response => response.json())
|
||||||
|
// .then(data => this.itemByCategory = data)
|
||||||
|
// console.log(this.itemByCategory)
|
||||||
|
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,311 @@
|
||||||
|
<route lang="json">
|
||||||
|
{
|
||||||
|
"meta": {
|
||||||
|
"title": "Home"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</route>
|
||||||
|
|
||||||
|
<!-- <script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
post: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
</script> -->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="bg-gray-50">
|
||||||
|
<div class="p-6" style="background-color:#E7E7E7 ;"> <img class="rounded-md" style="width: 100%;" src="/img/banner-1.png" > </div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2 gap-4 bg-local bg-conatin" style="background-image: url(/img/banner-2.jpg);background-repeat: repeat-x; height:300px;">
|
||||||
|
<div></div>
|
||||||
|
<div class="place-self-center p-4 rounded-md" style="background-color: #a9333175;">
|
||||||
|
<p class="text-4xl font-bold uppercase " style="color: #efc7c7;">Watchbands</p>
|
||||||
|
<div class="flex justify-center">
|
||||||
|
<button class="rounded mx-auto bg-red-500 hover:bg-white uppercase text-xs text-white hover:text-red-500 font-bold py-2 px-4 ">
|
||||||
|
Shop Now
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-2 gap-4 bg-local bg-conatin" style="background-image: url(/img/banner-4.jpg);background-repeat: repeat-x; height:300px;">
|
||||||
|
<div class="place-self-center p-4 rounded-md" style="background-color: #a9333175;">
|
||||||
|
<p class="text-2xl font-bold uppercase " style="color: #efc7c7;">Platform Collection</p>
|
||||||
|
<div class="flex justify-center">
|
||||||
|
<button class="rounded mx-auto bg-red-500 hover:bg-white uppercase text-xs text-white hover:text-red-500 font-bold py-2 px-4 ">
|
||||||
|
Shop Now
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-2 gap-4 bg-local bg-conatin" style="background-image: url(/img/banner-3.jpg);background-repeat: repeat-x; height:300px;">
|
||||||
|
<div class="place-self-center p-4 rounded-md" style="background-color: #a9333175;color: #efc7c7;">
|
||||||
|
<p class="text-4xl font-bold uppercase " >Hand Bags</p>
|
||||||
|
<div class="flex justify-center">
|
||||||
|
<button class="rounded mx-auto bg-red-500 hover:bg-white uppercase text-xs text-white hover:text-red-500 font-bold py-2 px-4 ">
|
||||||
|
Shop Now
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="grid grid-cols-2 place-content-stretch h-48 ...">
|
||||||
|
<div>
|
||||||
|
<img class="object-cover" src="/img/banner-1.png" >
|
||||||
|
<div class="absolute -my-10 bottom-0 text-white text-xs text-center " >
|
||||||
|
<div class="place-self-center p-4 rounded-md" style="background-color: #a9333175;">
|
||||||
|
<p class="text-4xl font-bold uppercase " style="color: #efc7c7;">Watchbands</p>
|
||||||
|
<div class="flex justify-center">
|
||||||
|
<button class="rounded mx-auto bg-red-500 hover:bg-white uppercase text-xs text-white hover:text-red-500 font-bold py-2 px-4 ">
|
||||||
|
Shop Now
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<img class="object-cover" src="/img/banner-1.png" >
|
||||||
|
<div class="absolute mt-2 bottom-0 bg-blue-400 text-white text-xs text-center ">this is a text</div>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
<div class=" p-1" style="height: 100px; overflow: hidden;overflow-x: scroll;">
|
||||||
|
<div >
|
||||||
|
<div class="grid grid-cols-1 place-content-center float-left rounded-r-full mr-10 p-5" style="height: 80px;background-color: #e32320b5;color: #f5e6e6;">
|
||||||
|
<div class="text-2xl font-bold uppercase">New Arrivals</div>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-full drop-shadow-lg float-left mr-5 " style="width: 200px; background-color: #e32320b5;color: #f5e6e6;">
|
||||||
|
<div class="grid grid-cols-2">
|
||||||
|
<img class="rounded-full border-2" style="width: 80px; height:80px;" src="/img/cat1.jpeg" >
|
||||||
|
<div class="grid grid-cols-1 place-content-center ml-2">
|
||||||
|
<div class="text-xl font-bold uppercase">Bag</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-full drop-shadow-lg float-left mr-5 " style="width: 200px; background-color: #e32320b5;color: #f5e6e6;">
|
||||||
|
<div class="grid grid-cols-2">
|
||||||
|
<img class="rounded-full border-2" style="width: 80px; height:80px;" src="/img/cat2.jpeg" >
|
||||||
|
<div class="grid grid-cols-1 place-content-center ml-2">
|
||||||
|
<div class="text-xl font-bold uppercase">Mobile</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-full drop-shadow-lg float-left mr-5 " style="width: 200px; background-color: #e32320b5;color: #f5e6e6;">
|
||||||
|
<div class="grid grid-cols-2">
|
||||||
|
<img class="rounded-full border-2" style="width: 80px; height:80px;" src="/img/cat3.jpeg" >
|
||||||
|
<div class="grid grid-cols-1 place-content-center ml-2">
|
||||||
|
<div class="text-xl font-bold uppercase">Laptop</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-full drop-shadow-lg float-left mr-5 " style="width: 200px; background-color: #e32320b5;color: #f5e6e6;">
|
||||||
|
<div class="grid grid-cols-2">
|
||||||
|
<img class="rounded-full border-2" style="width: 80px; height:80px;" src="/img/cat5.jpeg" >
|
||||||
|
<div class="grid grid-cols-1 place-content-center ml-2">
|
||||||
|
<div class="text-xl font-bold uppercase">Watch</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-full drop-shadow-lg float-left mr-5 " style="width: 200px; background-color: #e32320b5;color: #f5e6e6;">
|
||||||
|
<div class="grid grid-cols-2">
|
||||||
|
<img class="rounded-full border-2" style="width: 80px; height:80px;" src="/img/cat6.jpeg" >
|
||||||
|
<div class="grid grid-cols-1 place-content-center ml-2">
|
||||||
|
<div class="text-xl font-bold uppercase">Tab</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-full drop-shadow-lg float-left mr-5 " style="width: 200px; background-color: #e32320b5;color: #f5e6e6;">
|
||||||
|
<div class="grid grid-cols-2">
|
||||||
|
<img class="rounded-full border-2" style="width: 80px; height:80px;" src="/img/cat6.jpeg" >
|
||||||
|
<div class="grid grid-cols-1 place-content-center ml-2">
|
||||||
|
<div class="text-xl font-bold uppercase">Tab</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-full drop-shadow-lg float-left mr-5 " style="width: 200px; background-color: #e32320b5;color: #f5e6e6;">
|
||||||
|
<div class="grid grid-cols-2">
|
||||||
|
<img class="rounded-full border-2" style="width: 80px; height:80px;" src="/img/cat6.jpeg" >
|
||||||
|
<div class="grid grid-cols-1 place-content-center ml-2">
|
||||||
|
<div class="text-xl font-bold uppercase">Tab</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-full drop-shadow-lg float-left mr-5 " style="width: 200px; background-color: #e32320b5;color: #f5e6e6;">
|
||||||
|
<div class="grid grid-cols-2">
|
||||||
|
<img class="rounded-full border-2" style="width: 80px; height:80px;" src="/img/cat6.jpeg" >
|
||||||
|
<div class="grid grid-cols-1 place-content-center ml-2">
|
||||||
|
<div class="text-xl font-bold uppercase">Tab</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-full drop-shadow-lg float-left mr-5 " style="width: 200px; background-color: #e32320b5;color: #f5e6e6;">
|
||||||
|
<div class="grid grid-cols-2">
|
||||||
|
<img class="rounded-full border-2" style="width: 80px; height:80px;" src="/img/cat6.jpeg" >
|
||||||
|
<div class="grid grid-cols-1 place-content-center ml-2">
|
||||||
|
<div class="text-xl font-bold uppercase">Tab</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-full drop-shadow-lg float-left mr-5 " style="width: 200px; background-color: #e32320b5;color: #f5e6e6;">
|
||||||
|
<div class="grid grid-cols-2">
|
||||||
|
<img class="rounded-full border-2" style="width: 80px; height:80px;" src="/img/cat6.jpeg" >
|
||||||
|
<div class="grid grid-cols-1 place-content-center ml-2">
|
||||||
|
<div class="text-xl font-bold uppercase">Tab</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-full drop-shadow-lg float-left mr-5 " style="width: 200px; background-color: #e32320b5;color: #f5e6e6;">
|
||||||
|
<div class="grid grid-cols-2">
|
||||||
|
<img class="rounded-full border-2" style="width: 80px; height:80px;" src="/img/cat6.jpeg" >
|
||||||
|
<div class="grid grid-cols-1 place-content-center ml-2">
|
||||||
|
<div class="text-xl font-bold uppercase">Tab</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-full drop-shadow-lg float-left mr-5 " style="width: 200px; background-color: #e32320b5;color: #f5e6e6;">
|
||||||
|
<div class="grid grid-cols-2">
|
||||||
|
<img class="rounded-full border-2" style="width: 80px; height:80px;" src="/img/cat6.jpeg" >
|
||||||
|
<div class="grid grid-cols-1 place-content-center ml-2">
|
||||||
|
<div class="text-xl font-bold uppercase">Tab</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-full drop-shadow-lg float-left mr-5 " style="width: 200px; background-color: #e32320b5;color: #f5e6e6;">
|
||||||
|
<div class="grid grid-cols-2">
|
||||||
|
<img class="rounded-full border-2" style="width: 80px; height:80px;" src="/img/cat6.jpeg" >
|
||||||
|
<div class="grid grid-cols-1 place-content-center ml-2">
|
||||||
|
<div class="text-xl font-bold uppercase">Tab</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-full drop-shadow-lg float-left mr-5 " style="width: 200px; background-color: #e32320b5;color: #f5e6e6;">
|
||||||
|
<div class="grid grid-cols-2">
|
||||||
|
<img class="rounded-full border-2" style="width: 80px; height:80px;" src="/img/cat6.jpeg" >
|
||||||
|
<div class="grid grid-cols-1 place-content-center ml-2">
|
||||||
|
<div class="text-xl font-bold uppercase">Tab</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 gap-4 bg-local bg-conatin" style="background-image: url(/img/banner-5.jpg);background-repeat: repeat-x; height:300px;">
|
||||||
|
<div class="place-self-center p-4 rounded-md" style="background-color: #a9333175;">
|
||||||
|
<p class="text-2xl font-bold uppercase " style="color: #efc7c7;">Cloths Collection</p>
|
||||||
|
<div class="flex justify-center">
|
||||||
|
<button class="rounded mx-auto bg-red-500 hover:bg-white uppercase text-xs text-white hover:text-red-500 font-bold py-2 px-4 ">
|
||||||
|
Shop Now
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<h1 class="font-medium text-center leading-tight text-4xl p-4 text-black-600">New Arrivals for {{this.$route.params.id}}</h1>
|
||||||
|
<hr class="">
|
||||||
|
|
||||||
|
<!-- <div v-if="loading" class="loading">Loading...</div> -->
|
||||||
|
<!-- <div v-if="error" class="error">{{ error }}</div> -->
|
||||||
|
|
||||||
|
<div v-if="itemByCategory.data" class="w-full">
|
||||||
|
<div v-for="(item, index) in itemByCategory.data" class="">
|
||||||
|
<router-link :to="'/item/' + item.slug">
|
||||||
|
<div class="relative">
|
||||||
|
<img class="w-full" :src="'https://api8.siliconpin.com/assets/'+item.img" >
|
||||||
|
<div class="absolute bottom-0 w-full">
|
||||||
|
<div class="flex justify-left" >
|
||||||
|
<div class="place-self-center p-4 rounded-md" style="background-color: #a9333175;">
|
||||||
|
<p class="text-2xl font-bold uppercase " style="color: #efc7c7;">Cloths Collection</p>
|
||||||
|
<div class="flex justify-center">
|
||||||
|
<button class="rounded mx-auto bg-red-500 hover:bg-white uppercase text-xs text-white hover:text-red-500 font-bold py-2 px-4 ">
|
||||||
|
Shop Now
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <button class="absolute top-0 bg-blue-500 text-white p-2 rounded hover:bg-blue-800 m-2">Button</button> -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</router-link>
|
||||||
|
<!-- <router-link :to="'/item/' + item.slug">
|
||||||
|
<div class="flex items-center justify-center ">
|
||||||
|
<img :src="'https://api8.siliconpin.com/assets/'+item.img" alt="Image" class=" h-48 space-x-4 flex items-center justify-center" />
|
||||||
|
</div>
|
||||||
|
<h3 class="text-center text-1xl font-bold uppercase mt-3">{{ item.name }}</h3>
|
||||||
|
<p class="text-center">Qty - 2 </p>
|
||||||
|
<p class="text-center">Price - Rs. {{ item.price }} </p>
|
||||||
|
</router-link> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
post: {},
|
||||||
|
err:null,
|
||||||
|
itemByCategory: {},
|
||||||
|
totalVuePackages:null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// mounted: function () {
|
||||||
|
// this.getItemByCategory()
|
||||||
|
// // console.log(this.$route.query.cat)
|
||||||
|
// // console.log(this.fruits)
|
||||||
|
// // console.log(this.$route.query.id);
|
||||||
|
// // console.log(this.$route.params.id);
|
||||||
|
|
||||||
|
// },
|
||||||
|
created() {
|
||||||
|
// GET request using fetch with error handling
|
||||||
|
fetch("https://api8.siliconpin.com/items/ecomm55banner")
|
||||||
|
.then(async response => {
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
// check for error response
|
||||||
|
if (!response.ok) {
|
||||||
|
// get error message from body or default to response statusText
|
||||||
|
const error = (data && data.message) || response.statusText;
|
||||||
|
this.err=error
|
||||||
|
// return Promise.reject(error);
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
this.itemByCategory=data
|
||||||
|
console.log(data)
|
||||||
|
}
|
||||||
|
|
||||||
|
// this.totalVuePackages = data;
|
||||||
|
// console.log(data)
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
this.errorMessage = error;
|
||||||
|
this.err=error
|
||||||
|
// console.error("There was an error!", error);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getItemByCategory() {
|
||||||
|
fetch('https://api8.siliconpin.com/items/ecomm55banner' )
|
||||||
|
// fetch('https://api8.siliconpin.com/items/ecom55?filter[category][_eq]=' + this.$route.params.id)
|
||||||
|
// fetch('https://api7.siliconpin.com/items/ecom55')
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => this.itemByCategory = data)
|
||||||
|
console.log(response)
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
<template>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="container-fluid bg-white mx-auto mt-3 p-0">
|
||||||
|
<h1 class="font-medium text-center leading-tight text-4xl p-4 text-black-600">New Arrivals</h1>
|
||||||
|
<hr class="">
|
||||||
|
|
||||||
|
<div class="container mx-auto mt-3 p-0">
|
||||||
|
|
||||||
|
|
||||||
|
<div v-for="(item, index) in itemByCategory.data" class="">
|
||||||
|
|
||||||
|
|
||||||
|
<div class="flex flex-row gap-6 pt-4 pb-4">
|
||||||
|
<div class="w-auto border-blue-500 mt-6 mb-6">
|
||||||
|
<img :src="'https://api8.siliconpin.com/assets/'+item.img" alt="{{item.name}}"
|
||||||
|
class=" max-h-56 space-x-4 flex items-center justify-center" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-96">
|
||||||
|
<h3 class="text-1xl font-bold uppercase mt-3 mb-3">{{ item.name }}</h3>
|
||||||
|
<p class="">Description </p>
|
||||||
|
|
||||||
|
<p class="mt-2 mb-2 font-bold">{{item.description}}</p>
|
||||||
|
<p class="mt-2 mb-2">Qty - 2 /-</p>
|
||||||
|
<p class="mt-2 mb-2">Price - Rs. {{ item.price }} /-</p>
|
||||||
|
<button
|
||||||
|
class="bg-transparent mt-4 hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded">
|
||||||
|
Add To Cart
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
post: {},
|
||||||
|
itemByCategory: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted: function () {
|
||||||
|
this.getItemByCategory()
|
||||||
|
// console.log(this.$route.query.cat)
|
||||||
|
// console.log(this.fruits)
|
||||||
|
// console.log(this.$route.query.id);
|
||||||
|
// console.log(this.$route.params.id);
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getItemByCategory() {
|
||||||
|
fetch('https://api8.siliconpin.com/items/ecom55?filter[slug][_eq]=' + this.$route.params.id)
|
||||||
|
// fetch('https://api7.siliconpin.com/items/ecom55')
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => this.itemByCategory = data)
|
||||||
|
console.log(this.itemByCategory)
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
<template>
|
||||||
|
|
||||||
|
<div class="bg-white">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
post: {},
|
||||||
|
fruits: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted: function(){
|
||||||
|
this.getFruits()
|
||||||
|
// console.log(this.fruits)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getPosts() {
|
||||||
|
fetch('https://jsonplaceholder.typicode.com/posts/2')
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => this.post = data)
|
||||||
|
},
|
||||||
|
getFruits() {
|
||||||
|
fetch('https://api7.siliconpin.com/items/swarnamath?filter[cat]=["fruits"]')
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => this.fruits = data)
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<button @click="getPosts">Show Posts</button>
|
||||||
|
<hr>
|
||||||
|
<h2>{{ post.id }} - {{ post.title }}</h2>
|
||||||
|
<p>{{ post.body }}</p>
|
||||||
|
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<div>
|
||||||
|
<li v-for="(item, index) in fruits.data">
|
||||||
|
{{ item.name }} - {{ index }} - {{ item.slug }} - {{ item.img }}
|
||||||
|
<img :src="'https://api7.siliconpin.com/assets/'+item.img" alt="" />
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
/// <reference types="vite/client" />
|
||||||
|
|
||||||
|
declare module '*.vue' {
|
||||||
|
import type { DefineComponent } from 'vue'
|
||||||
|
const component: DefineComponent<{}, {}, any>
|
||||||
|
export default component
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
const defaultTheme = require('tailwindcss/defaultTheme')
|
||||||
|
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
module.exports = {
|
||||||
|
content: ['./index.html', './src/**/*.{vue,js,ts}'],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['"Inter var"', ...defaultTheme.fontFamily.sans],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
require('@tailwindcss/forms'),
|
||||||
|
require('@tailwindcss/typography'),
|
||||||
|
require('@tailwindcss/line-clamp'),
|
||||||
|
require('@tailwindcss/aspect-ratio'),
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": "./",
|
||||||
|
"allowJs": true
|
||||||
|
},
|
||||||
|
"exclude": ["node_modules", "dist"],
|
||||||
|
"include": [
|
||||||
|
"typed-router.d.ts",
|
||||||
|
"components.d.ts",
|
||||||
|
"auto-imports.d.ts",
|
||||||
|
"src/**/*.ts",
|
||||||
|
"src/**/*.d.ts",
|
||||||
|
"src/**/*.vue"
|
||||||
|
],
|
||||||
|
"extends": "@vue/tsconfig/tsconfig.json"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,132 @@
|
||||||
|
// Generated by unplugin-vue-router. ‼️ DO NOT MODIFY THIS FILE ‼️
|
||||||
|
// It's recommended to commit this file.
|
||||||
|
// Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
|
||||||
|
|
||||||
|
/// <reference types="unplugin-vue-router/client" />
|
||||||
|
|
||||||
|
import type {
|
||||||
|
// type safe route locations
|
||||||
|
RouteLocationTypedList,
|
||||||
|
RouteLocationResolvedTypedList,
|
||||||
|
RouteLocationNormalizedTypedList,
|
||||||
|
RouteLocationNormalizedLoadedTypedList,
|
||||||
|
|
||||||
|
// helper types
|
||||||
|
// route definitions
|
||||||
|
RouteRecordInfo,
|
||||||
|
ParamValue,
|
||||||
|
ParamValueOneOrMore,
|
||||||
|
ParamValueZeroOrMore,
|
||||||
|
ParamValueZeroOrOne,
|
||||||
|
|
||||||
|
// vue-router extensions
|
||||||
|
_RouterTyped,
|
||||||
|
RouterLinkTyped,
|
||||||
|
NavigationGuard,
|
||||||
|
UseLinkFnTyped,
|
||||||
|
|
||||||
|
// data fetching
|
||||||
|
_DataLoader,
|
||||||
|
_DefineLoaderOptions,
|
||||||
|
} from 'unplugin-vue-router'
|
||||||
|
|
||||||
|
declare module 'vue-router/auto/routes' {
|
||||||
|
export interface RouteNamedMap {
|
||||||
|
'/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
|
||||||
|
'/[...404]': RouteRecordInfo<'/[...404]', '/:404(.*)', { 404: ParamValue<true> }, { 404: ParamValue<false> }>,
|
||||||
|
'/about': RouteRecordInfo<'/about', '/about', Record<never, never>, Record<never, never>>,
|
||||||
|
'/category/': RouteRecordInfo<'/category/', '/category/', Record<never, never>, Record<never, never>>,
|
||||||
|
'/category/[id]': RouteRecordInfo<'/category/[id]', '/category/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
|
||||||
|
'/category2': RouteRecordInfo<'/category2', '/category2', Record<never, never>, Record<never, never>>,
|
||||||
|
'/item/': RouteRecordInfo<'/item/', '/item/', Record<never, never>, Record<never, never>>,
|
||||||
|
'/item/[id]': RouteRecordInfo<'/item/[id]', '/item/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
|
||||||
|
'/item/demo': RouteRecordInfo<'/item/demo', '/item/demo', Record<never, never>, Record<never, never>>,
|
||||||
|
'/test1': RouteRecordInfo<'/test1', '/test1', Record<never, never>, Record<never, never>>,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module 'vue-router/auto' {
|
||||||
|
import type { RouteNamedMap } from 'vue-router/auto/routes'
|
||||||
|
|
||||||
|
export type RouterTyped = _RouterTyped<RouteNamedMap>
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Type safe version of `RouteLocationNormalized` (the type of `to` and `from` in navigation guards).
|
||||||
|
* Allows passing the name of the route to be passed as a generic.
|
||||||
|
*/
|
||||||
|
export type RouteLocationNormalized<Name extends keyof RouteNamedMap = keyof RouteNamedMap> = RouteLocationNormalizedTypedList<RouteNamedMap>[Name]
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Type safe version of `RouteLocationNormalizedLoaded` (the return type of `useRoute()`).
|
||||||
|
* Allows passing the name of the route to be passed as a generic.
|
||||||
|
*/
|
||||||
|
export type RouteLocationNormalizedLoaded<Name extends keyof RouteNamedMap = keyof RouteNamedMap> = RouteLocationNormalizedLoadedTypedList<RouteNamedMap>[Name]
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Type safe version of `RouteLocationResolved` (the returned route of `router.resolve()`).
|
||||||
|
* Allows passing the name of the route to be passed as a generic.
|
||||||
|
*/
|
||||||
|
export type RouteLocationResolved<Name extends keyof RouteNamedMap = keyof RouteNamedMap> = RouteLocationResolvedTypedList<RouteNamedMap>[Name]
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Type safe version of `RouteLocation` . Allows passing the name of the route to be passed as a generic.
|
||||||
|
*/
|
||||||
|
export type RouteLocation<Name extends keyof RouteNamedMap = keyof RouteNamedMap> = RouteLocationTypedList<RouteNamedMap>[Name]
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate a type safe params for a route location. Requires the name of the route to be passed as a generic.
|
||||||
|
*/
|
||||||
|
export type RouteParams<Name extends keyof RouteNamedMap> = RouteNamedMap[Name]['params']
|
||||||
|
/**
|
||||||
|
* Generate a type safe raw params for a route location. Requires the name of the route to be passed as a generic.
|
||||||
|
*/
|
||||||
|
export type RouteParamsRaw<Name extends keyof RouteNamedMap> = RouteNamedMap[Name]['paramsRaw']
|
||||||
|
|
||||||
|
export function useRouter(): RouterTyped
|
||||||
|
export function useRoute<Name extends keyof RouteNamedMap = keyof RouteNamedMap>(name?: Name): RouteLocationNormalizedLoadedTypedList<RouteNamedMap>[Name]
|
||||||
|
|
||||||
|
export const useLink: UseLinkFnTyped<RouteNamedMap>
|
||||||
|
|
||||||
|
export function onBeforeRouteLeave(guard: NavigationGuard<RouteNamedMap>): void
|
||||||
|
export function onBeforeRouteUpdate(guard: NavigationGuard<RouteNamedMap>): void
|
||||||
|
|
||||||
|
// Experimental Data Fetching
|
||||||
|
|
||||||
|
export function defineLoader<
|
||||||
|
P extends Promise<any>,
|
||||||
|
Name extends keyof RouteNamedMap = keyof RouteNamedMap,
|
||||||
|
isLazy extends boolean = false,
|
||||||
|
>(
|
||||||
|
name: Name,
|
||||||
|
loader: (route: RouteLocationNormalizedLoaded<Name>) => P,
|
||||||
|
options?: _DefineLoaderOptions<isLazy>,
|
||||||
|
): _DataLoader<Awaited<P>, isLazy>
|
||||||
|
export function defineLoader<
|
||||||
|
P extends Promise<any>,
|
||||||
|
isLazy extends boolean = false,
|
||||||
|
>(
|
||||||
|
loader: (route: RouteLocationNormalizedLoaded) => P,
|
||||||
|
options?: _DefineLoaderOptions<isLazy>,
|
||||||
|
): _DataLoader<Awaited<P>, isLazy>
|
||||||
|
|
||||||
|
export {
|
||||||
|
_definePage as definePage,
|
||||||
|
_HasDataLoaderMeta as HasDataLoaderMeta,
|
||||||
|
_setupDataFetchingGuard as setupDataFetchingGuard,
|
||||||
|
_stopDataFetchingScope as stopDataFetchingScope,
|
||||||
|
} from 'unplugin-vue-router/runtime'
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module 'vue-router' {
|
||||||
|
import type { RouteNamedMap } from 'vue-router/auto/routes'
|
||||||
|
|
||||||
|
export interface TypesConfig {
|
||||||
|
beforeRouteUpdate: NavigationGuard<RouteNamedMap>
|
||||||
|
beforeRouteLeave: NavigationGuard<RouteNamedMap>
|
||||||
|
|
||||||
|
$route: RouteLocationNormalizedLoadedTypedList<RouteNamedMap>[keyof RouteNamedMap]
|
||||||
|
$router: _RouterTyped<RouteNamedMap>
|
||||||
|
|
||||||
|
RouterLink: RouterLinkTyped<RouteNamedMap>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import AutoImport from 'unplugin-auto-import/vite'
|
||||||
|
import VueRouter from 'unplugin-vue-router/vite'
|
||||||
|
import { VueRouterAutoImports } from 'unplugin-vue-router'
|
||||||
|
import Components from 'unplugin-vue-components/vite'
|
||||||
|
import { HeadlessUiResolver } from 'unplugin-vue-components/resolvers'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
VueRouter({}),
|
||||||
|
vue(),
|
||||||
|
Components({ resolvers: [HeadlessUiResolver()] }),
|
||||||
|
AutoImport({
|
||||||
|
imports: ['vue', '@vueuse/head', VueRouterAutoImports],
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
server: {
|
||||||
|
open: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue