From 10a012ec8ebbbf0577441566f51a97436db4c685 Mon Sep 17 00:00:00 2001 From: HAM!DREZA Date: Fri, 3 May 2024 14:19:28 +0330 Subject: [PATCH] create sliders with vue3-carousel package --- .gitignore | 1 + README.md | 150 +- app.vue | 14 +- assets/css/main.css | 432 +- components/home-page/AboutUs.vue | 269 +- components/home-page/Catalogs.vue | 310 +- components/home-page/Header.vue | 108 +- components/home-page/Instagram.vue | 182 +- components/home-page/MediaSlider.vue | 435 +- components/home-page/ProductSampleForm.vue | 150 +- components/home-page/RoadMap.vue | 222 +- components/home-page/Slider.vue | 50 +- .../home-page/road-map-components/Banner.vue | 26 +- .../road-map-components/ProductionStage.vue | 652 +- .../road-map-components/ShopNavigator.vue | 62 +- components/honor-page/Slider.vue | 37 +- layouts/footer.vue | 834 +- nuxt.config.ts | 51 +- package-lock.json | 23721 ++++++++-------- package.json | 53 +- pages/index.vue | 22 +- pages/test.vue | 30 + server/tsconfig.json | 6 +- tsconfig.json | 8 +- 24 files changed, 14016 insertions(+), 13809 deletions(-) create mode 100644 pages/test.vue diff --git a/.gitignore b/.gitignore index b45598a..f7bdde1 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ node_modules/ .nuxt/ +pages/text.vue \ No newline at end of file diff --git a/README.md b/README.md index 7f1450a..f5db2a2 100644 --- a/README.md +++ b/README.md @@ -1,75 +1,75 @@ -# Nuxt 3 Minimal Starter - -Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. - -## Setup - -Make sure to install the dependencies: - -```bash -# npm -npm install - -# pnpm -pnpm install - -# yarn -yarn install - -# bun -bun install -``` - -## Development Server - -Start the development server on `http://localhost:3000`: - -```bash -# npm -npm run dev - -# pnpm -pnpm run dev - -# yarn -yarn dev - -# bun -bun run dev -``` - -## Production - -Build the application for production: - -```bash -# npm -npm run build - -# pnpm -pnpm run build - -# yarn -yarn build - -# bun -bun run build -``` - -Locally preview production build: - -```bash -# npm -npm run preview - -# pnpm -pnpm run preview - -# yarn -yarn preview - -# bun -bun run preview -``` - -Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. +# Nuxt 3 Minimal Starter + +Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. + +## Setup + +Make sure to install the dependencies: + +```bash +# npm +npm install + +# pnpm +pnpm install + +# yarn +yarn install + +# bun +bun install +``` + +## Development Server + +Start the development server on `http://localhost:3000`: + +```bash +# npm +npm run dev + +# pnpm +pnpm run dev + +# yarn +yarn dev + +# bun +bun run dev +``` + +## Production + +Build the application for production: + +```bash +# npm +npm run build + +# pnpm +pnpm run build + +# yarn +yarn build + +# bun +bun run build +``` + +Locally preview production build: + +```bash +# npm +npm run preview + +# pnpm +pnpm run preview + +# yarn +yarn preview + +# bun +bun run preview +``` + +Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. diff --git a/app.vue b/app.vue index d870b9c..71e5062 100644 --- a/app.vue +++ b/app.vue @@ -1,7 +1,7 @@ - + diff --git a/assets/css/main.css b/assets/css/main.css index 140aef7..43468d4 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,196 +1,236 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; -@font-face { - font-family: "Iransans"; - src: url("/public/fonts/IRANSansWebFaNum.woff2"); -} -html { - overflow-x: hidden; -} -body { - direction: rtl; - font-family: "Iransans"; - background-color: #faf6f9; - max-width: 100vw; - overflow-x: hidden !important; -} -.animate { - -webkit-animation: spin 0.5s linear infinite; - -moz-animation: spin 0.5s linear infinite; - animation: spin 0.3s linear infinite; -} -.line2 { - stroke: black; -} -.header { - background-image: url("/public/images/headerImg.jpg"); - - width: 100%; - background-repeat: no-repeat; - - background-size: cover; -} -@media (min-width: 1024px) { - .header { - background-position: center; - } -} -.test { - background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #faf6f9 70%); - width: 100%; - height: 150px; - margin-top: -130px; -} -.fade { - background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff 70%); - width: 100%; - height: 150px; - margin-top: -130px; -} - -.imgWrap { - position: relative; - margin: 0% auto; - padding-bottom: 39%; -} -.ourStory { - background-image: url("/public/images/aboutBg.jpg"); - background-repeat: no-repeat; - background-size: 100% 155%; - background-position-y: -10vw; -} -@media (max-width: 768px) { - .ourStory { - background-image: url("/public/images/aboutBg.jpg"); - background-repeat: no-repeat; - background-size: 180% 155%; - background-position-x: -35vw; - } - .imgWrap { - padding-bottom: 5vw !important; - } - .imgWrap > div { - position: absolute; - top: 0; - width: 44% !important; - height: 58vw !important; - float: left; - background-image: url("/public/images/aboutBg.jpg"); - background-size: auto 190%; - object-fit: cover; - background-position: center; - justify-content: center; - justify-items: center; - margin-top: 5vw !important; - - /* background-repeat: no-repeat; */ - } - .imgWrap .two { - left: -22% !important; - background-position: 18% 50%; - } - .imgWrap .three { - left: 26% !important; - background-position: 50% 50%; - } - .imgWrap .four { - left: 74% !important; - background-position: 85% 50%; - } -} -.imgWrap > div { - position: absolute; - top: 0; - width: 23%; - height: 92%; - float: left; - background-image: url("/public/images/aboutBg.jpg"); - background-size: auto 190%; - object-fit: cover; - background-position: center; - justify-content: center; - justify-items: center; - margin-top: 5vw; - /* background-repeat: no-repeat; */ -} - -.imgWrap > div > div { - height: 99.7%; - width: 99.3%; - border-color: white; -} -.imgWrap .one { - left: -11.5%; - background-position: -13% 50%; -} -.imgWrap .two { - left: 13.5%; - background-position: 18% 50%; -} -.imgWrap .three { - left: 38.5%; - background-position: 50% 50%; -} -.imgWrap .four { - left: 63.5%; - background-position: 85% 50%; -} -.imgWrap .five { - left: 89.5%; - background-position: 111% 50%; -} -.imgWrap .left { - left: 0; - background-position: 3% 0; -} -.imgWrap .center { - left: 34.83%; - background-position: -97% 0; -} -.imgWrap .right { - left: 69.66%; - background-position: -197% 0; -} -.imgWrap > div:before { - content: ""; - position: absolute; - top: 0; - right: 100%; - width: 10%; - height: 100%; - background: inherit; - transform-origin: 100% 50%; - transform: rotateY(-90deg); -} - -.imgWrap .left:before { - background-position: 0% 0; -} -.imgWrap .center:before { - background-position: -1001.3% 0; -} -.imgWrap .right:before { - background-position: -2001.4% 0; -} -section{} - -.contact { - background-image: url("/public/images/aboutBg.jpg"); - background-image: url("/public/images/aboutBg.jpg"); - background-repeat: no-repeat; - background-size: 100% 185%; - background-position-y: -16vw; -} - -.slide1 { - background-image: url('/public/images/slider.jpg'); - background-repeat: no-repeat; - background-size: cover; - -} -.mediagallery{ - background-image: url('/public/images/gallery2.jpg'); -background-size: cover; - -} +@tailwind base; +@tailwind components; +@tailwind utilities; +@font-face { + font-family: "Iransans"; + src: url("/public/fonts/IRANSansWebFaNum.woff2"); +} +html { + overflow-x: hidden; +} +body { + direction: rtl; + font-family: "Iransans"; + background-color: #faf6f9; + max-width: 100vw; + overflow-x: hidden !important; +} +.animate { + -webkit-animation: spin 0.5s linear infinite; + -moz-animation: spin 0.5s linear infinite; + animation: spin 0.3s linear infinite; +} +.line2 { + stroke: black; +} +.header { + background-image: url("/public/images/headerImg.jpg"); + + width: 100%; + background-repeat: no-repeat; + + background-size: cover; +} +@media (min-width: 1024px) { + .header { + background-position: center; + } +} +.test { + background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #faf6f9 70%); + width: 100%; + height: 150px; + margin-top: -130px; +} +.fade { + background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff 70%); + width: 100%; + height: 150px; + margin-top: -130px; +} + +.imgWrap { + position: relative; + margin: 0% auto; + padding-bottom: 39%; +} +.ourStory { + background-image: url("/public/images/aboutBg.jpg"); + background-repeat: no-repeat; + background-size: 100% 155%; + background-position-y: -10vw; +} +@media (max-width: 768px) { + .carousel__pagination-item button::after { + width: 14vw !important; + height: 1vw !important; + padding: 0px !important; + margin: 0px 0.1vw !important; + border-radius: 10vw; + } + .carousel__pagination { + margin-top: 26.5vw !important; + margin-bottom: 21vw !important; + } + .ourStory { + background-image: url("/public/images/aboutBg.jpg"); + background-repeat: no-repeat; + background-size: 180% 155%; + background-position-x: -35vw; + } + .imgWrap { + padding-bottom: 5vw !important; + } + .imgWrap > div { + position: absolute; + top: 0; + width: 44% !important; + height: 58vw !important; + float: left; + background-image: url("/public/images/aboutBg.jpg"); + background-size: auto 190%; + object-fit: cover; + background-position: center; + justify-content: center; + justify-items: center; + margin-top: 5vw !important; + + /* background-repeat: no-repeat; */ + } + .imgWrap .two { + left: -22% !important; + background-position: 18% 50%; + } + .imgWrap .three { + left: 26% !important; + background-position: 50% 50%; + } + .imgWrap .four { + left: 74% !important; + background-position: 85% 50%; + } +} +.imgWrap > div { + position: absolute; + top: 0; + width: 23%; + height: 92%; + float: left; + background-image: url("/public/images/aboutBg.jpg"); + background-size: auto 190%; + object-fit: cover; + background-position: center; + justify-content: center; + justify-items: center; + margin-top: 5vw; + /* background-repeat: no-repeat; */ +} + +.imgWrap > div > div { + height: 99.7%; + width: 99.3%; + border-color: white; +} +.imgWrap .one { + left: -11.5%; + background-position: -13% 50%; +} +.imgWrap .two { + left: 13.5%; + background-position: 18% 50%; +} +.imgWrap .three { + left: 38.5%; + background-position: 50% 50%; +} +.imgWrap .four { + left: 63.5%; + background-position: 85% 50%; +} +.imgWrap .five { + left: 89.5%; + background-position: 111% 50%; +} +.imgWrap .left { + left: 0; + background-position: 3% 0; +} +.imgWrap .center { + left: 34.83%; + background-position: -97% 0; +} +.imgWrap .right { + left: 69.66%; + background-position: -197% 0; +} +.imgWrap > div:before { + content: ""; + position: absolute; + top: 0; + right: 100%; + width: 10%; + height: 100%; + background: inherit; + transform-origin: 100% 50%; + transform: rotateY(-90deg); +} + +.imgWrap .left:before { + background-position: 0% 0; +} +.imgWrap .center:before { + background-position: -1001.3% 0; +} +.imgWrap .right:before { + background-position: -2001.4% 0; +} + +.contact { + background-image: url("/public/images/aboutBg.jpg"); + background-image: url("/public/images/aboutBg.jpg"); + background-repeat: no-repeat; + background-size: 100% 185%; + background-position-y: -16vw; +} + +.slide1 { + background-image: url("/public/images/slider.jpg"); + background-repeat: no-repeat; + background-size: cover; +} + +.mediagallery { + background-image: url("/public/images/gallery2.jpg"); + background-size: cover; +} +.carousel__pagination-item button::after { + width: 5.365vw; + height: 0.25vw; + padding: 0px !important; + margin: 0px 0.1vw !important; + border-radius: 10vw; +} + +:root { + --vc-clr-primary: #a62186 !important; + --vc-clr-secondary: #e5e5e5 !important; + --vc-clr-white: #ffffff; +} +.carousel__slide{ + padding-right: 4vw !important; + display: flex; + justify-content: end !important; +} +.carousel__viewport { + height: 100% !important; + width: 100% !important; + text-align: end; + position: relative !important; + display: flex; + flex-direction: column; + justify-content: center; +} +.carousel__pagination { + margin-top: 10.5vw !important; +} + diff --git a/components/home-page/AboutUs.vue b/components/home-page/AboutUs.vue index 9cfcd89..232979d 100644 --- a/components/home-page/AboutUs.vue +++ b/components/home-page/AboutUs.vue @@ -1,133 +1,138 @@ - - \ No newline at end of file diff --git a/components/home-page/Catalogs.vue b/components/home-page/Catalogs.vue index b878205..c959a71 100644 --- a/components/home-page/Catalogs.vue +++ b/components/home-page/Catalogs.vue @@ -1,156 +1,156 @@ -