Getir Clone

├── public └── favicon.ico ├── .vscode └── extensions.json ├── .eslintrc.cjs ├── index.html ├── src ├── main.js ├── components │ ├── ui │ │ ├── Card.vue │ │ ├── Category.vue │ │ ├── Product.vue │ │ └── Menu.vue │ ├── Cards.vue │ ├── Favorites.vue │ ├── Categories.vue │ ├── Campaigns.vue │ ├── MobileApp.vue │ ├── HeroSection.vue │ ├── Footer.vue │ └── Header.vue ├── assets │ ├── input.css │ └── output.css ├── api │ ├── banners.json │ ├── cards.json │ ├── footer-menu.json │ ├── categories.json │ └── products.json └── App.vue ├── vite.config.js ├── .gitignore ├── package.json ├── tailwind.config.js ├── README.md └── En_README.md /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fatihes1/getir-clone-vue3/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["johnsoncodehk.volar", "johnsoncodehk.vscode-typescript-vue-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | /* eslint-env node */ 2 | module.exports = { 3 | "root": true, 4 | "extends": [ 5 | "plugin:vue/vue3-essential", 6 | "eslint:recommended" 7 | ], 8 | "env": { 9 | "vue/setup-compiler-macros": true 10 | }, 11 | } 12 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Getir Clone 8 | 9 | 10 |

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | import './assets/output.css' 4 | import 'vue3-carousel/dist/carousel.css'; 5 | import CountryFlag from 'vue-country-flag-next' 6 | import vSelect from 'vue-select' 7 | 8 | 9 | 10 | const app = createApp(App) 11 | app.component('country-flag', CountryFlag) 12 | app.component('v-select', vSelect); 13 | 14 | 15 | app.mount('#app') 16 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { fileURLToPath, URL } from 'url' 2 | 3 | import { defineConfig } from 'vite' 4 | import vue from '@vitejs/plugin-vue' 5 | 6 | // https://vitejs.dev/config/ 7 | export default defineConfig({ 8 | plugins: [vue()], 9 | resolve: { 10 | alias: { 11 | '@': fileURLToPath(new URL('./src', import.meta.url)) 12 | } 13 | }, 14 | build: { 15 | chunkSizeWarningLimit: 1600, 16 | }, 17 | }) 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | .DS_Store 12 | dist 13 | dist-ssr 14 | coverage 15 | *.local 16 | 17 | /cypress/videos/ 18 | /cypress/screenshots/ 19 | 20 | # Editor directories and files 21 | .vscode/* 22 | !.vscode/extensions.json 23 | .idea 24 | *.suo 25 | *.ntvs* 26 | *.njsproj 27 | *.sln 28 | *.sw? 29 | -------------------------------------------------------------------------------- /src/components/ui/Card.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 13 | 14 | -------------------------------------------------------------------------------- /src/assets/input.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap'); 2 | 3 | @tailwind base; 4 | @tailwind components; 5 | @tailwind utilities; 6 | 7 | @layer components { 8 | .nav-link { 9 | @apply flex items-center justify-center hover:bg-primary-brand-color h-11 mt-2 rounded-t-lg; 10 | } 11 | } 12 | 13 | @layer base { 14 | html, body { 15 | font-family:'Open Sans', sans-serif; 16 | @apply antialiased bg-gray-50 17 | } 18 | } -------------------------------------------------------------------------------- /src/components/ui/Category.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | 14 | -------------------------------------------------------------------------------- /src/api/banners.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 1, 4 | "image": "https://cdn.getir.com/misc/611e55d33ea65bef40f9ba05_banner_tr_1629378026496.jpeg" 5 | }, 6 | { 7 | "id": 2, 8 | "image": "https://cdn.getir.com/misc/611e4a50c270af509cd486b5_banner_tr_1629375115516.jpeg" 9 | }, 10 | { 11 | "id": 3, 12 | "image": "https://cdn.getir.com/misc/5fb524d4c725f1530045cefc_banner_tr_1609343376255.jpeg" 13 | }, 14 | { 15 | "id": 4, 16 | "image": "https://cdn.getir.com/misc/6069cee3f7be2b6472dc8b5f_banner_tr_1629921878792.jpeg" 17 | } 18 | ] -------------------------------------------------------------------------------- /src/components/Cards.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 24 | 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "getir-clone", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite", 6 | "build": "vite build", 7 | "preview": "npm run build && vite preview --port 5050", 8 | "watch": "npx tailwindcss -i ./src/assets/input.css -o ./src/assets/output.css --watch" 9 | }, 10 | "dependencies": { 11 | "@dafcoe/vue-collapsible-panel": "^0.2.0", 12 | "@vue/cli-plugin-eslint": "^5.0.4", 13 | "vue": "^3.2.33", 14 | "vue-country-flag-next": "^2.3.2", 15 | "vue-select": "^4.0.0-beta.3", 16 | "vue3-carousel": "^0.1.40" 17 | }, 18 | "devDependencies": { 19 | "@vitejs/plugin-vue": "^2.3.1", 20 | "tailwindcss": "^3.0.24", 21 | "vite": "^2.9.5", 22 | "vue-cli-plugin-vuetify": "~2.4.8" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | mode : 'jit', 3 | content: [ 4 | "./index.html", 5 | "./src/**/*.{vue,js,ts,jsx,tsx}", 6 | ], 7 | theme: { 8 | extend: { 9 | spacing : { 10 | '0.1' : '0.063rem' 11 | }, 12 | backgroundImage : theme => ({ 13 | 'mobile-app' : 'url(https://getir.com/_next/static/images/doodle-d659f9f1fd505c811c2331fe3ffddd5f.png)' 14 | }), 15 | colors : { 16 | 'brand-color' : '#4c3398', 17 | 'primary-brand-color' : '#5d3ebc', 18 | 'secondary-brand-color' : '#7849f7', 19 | 'brand-yellow' : '#ffd300' 20 | }, 21 | }, 22 | }, 23 | variants : { 24 | extend : { 25 | color: ['before', 'active'], 26 | }, 27 | }, 28 | plugins: [], 29 | } 30 | -------------------------------------------------------------------------------- /src/components/Favorites.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 26 | 27 | -------------------------------------------------------------------------------- /src/components/Categories.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 29 | 30 | -------------------------------------------------------------------------------- /src/api/cards.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id" : 1, 4 | "title" : "Her siparişinize bir kampanya", 5 | "description" : "Getir’de vereceğiniz her siparişe uygun bir kampanya bulabilirsiniz.", 6 | "image" : "https://getir.com/_next/static/images/intro-in-minutes-a7a9238a73013642a6597c4db06653c1.svg" 7 | }, 8 | { 9 | "id" : 2, 10 | "title" : "Dakikalar içinde kapınızda", 11 | "description" : "Getir’le siparişiniz dakikalar içinde kapınıza gelir.", 12 | "image" : "https://getir.com/_next/static/images/intro-market-courier-34cd8b0ca1d547580d506566edfacf8d.svg" 13 | }, 14 | { 15 | "id" : 3, 16 | "title" : "Binlerce çeşit mutluluk", 17 | "description" : "Getir’de binlerce çeşit arasından seçiminizi yapabilirsiniz.", 18 | "image" : "https://getir.com/_next/static/images/intro-discount-6248544cb695830a2e25debd3c0f3d29.svg" 19 | } 20 | ] -------------------------------------------------------------------------------- /src/components/ui/Product.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 18 | 19 | -------------------------------------------------------------------------------- /src/components/Campaigns.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 56 | 57 | -------------------------------------------------------------------------------- /src/components/MobileApp.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 30 | 31 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 67 | 68 | -------------------------------------------------------------------------------- /src/api/footer-menu.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id" : 1, 4 | "title" : "Getir'i Keşfedin", 5 | "items" : [ 6 | { 7 | "subTitle" : "Hakkımızda", 8 | "url" : "https://getir.com/hakkimizda/" 9 | }, 10 | { 11 | "subTitle" : "Kariyer", 12 | "url" : "https://apply.workable.com/getir/" 13 | }, 14 | { 15 | "subTitle" : "Teknoloji Kariyerleri", 16 | "url" : "https://technology.getir.com/" 17 | }, 18 | { 19 | "subTitle" : "İletişim", 20 | "url" : "https://getir.com/hakkimizda/iletisim/" 21 | }, 22 | { 23 | "subTitle" : "COVID-19 Duyuru", 24 | "url" : "https://getir.com/duyuru/" 25 | }, 26 | { 27 | "subTitle" : "Sosyal Sorumluluk Projeleri", 28 | "url" : "https://getir.com/sosyal-sorumluluk-projeleri/" 29 | } 30 | ] 31 | }, 32 | { 33 | "id" : 2, 34 | "title" : "Yardıma mı ihtiyacınız var?", 35 | "items" : [ 36 | { 37 | "subTitle" : "Sıkça Sorulan Sorular", 38 | "url" : "https://getir.com/yardim/sss/" 39 | }, 40 | { 41 | "subTitle" : "Kişisel Verilerin Korunması", 42 | "url" : "https://getir.com/yardim/kvkk/" 43 | }, 44 | { 45 | "subTitle" : "Gizlilik Politikası", 46 | "url" : "https://getir.com/yardim/gizlilik-politikasi/" 47 | }, 48 | { 49 | "subTitle" : "Kullanım Koşulları", 50 | "url" : "https://getir.com/yardim/kullanim-kosullari/" 51 | }, 52 | { 53 | "subTitle" : "Çerez Politikası", 54 | "url" : "https://getir.com/yardim/cerez-politikasi/" 55 | } 56 | ] 57 | }, 58 | { 59 | "id" : 3, 60 | "title" : "İş Ortağımız Olun", 61 | "items" : [ 62 | { 63 | "subTitle" : "Bayimiz Olun", 64 | "url" : "https://bayi-basvuru.getir.com/" 65 | }, 66 | { 67 | "subTitle" : "Deponuzu Kiralayın", 68 | "url" : "https://depodukkan.getir.com/" 69 | }, 70 | { 71 | "subTitle" : "GetirYemek Restoranı Olun", 72 | "url" : "https://basvuru.getir.com/restoran/" 73 | }, 74 | { 75 | "subTitle" : "GetirÇarşı İşletmesi Olun", 76 | "url" : "https://panel.getircarsi.com/form/pre-application" 77 | } 78 | ] 79 | } 80 | ] -------------------------------------------------------------------------------- /src/components/ui/Menu.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 65 | 66 | -------------------------------------------------------------------------------- /src/api/categories.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 1, 4 | "title": "Yeni Ürünler", 5 | "image": "https://market-product-images-cdn.getirapi.com/category/e8b802e6-7987-486f-bf53-a9720c698a98.jpg" 6 | }, 7 | { 8 | "id": 2, 9 | "title": "Su & İçecek", 10 | "image": "http://cdn.getir.com/cat/551430043427d5010a3a5c5e_1619242669958_1619242670038.jpeg" 11 | }, 12 | { 13 | "id": 3, 14 | "title": "Meyve & Sebze", 15 | "image": "http://cdn.getir.com/cat/5928113e616cab00041ec6de_1619242870968_1619242871055.jpeg" 16 | }, 17 | { 18 | "id": 4, 19 | "title": "Fırından", 20 | "image": "http://cdn.getir.com/cat/566eeb85f9facb0f00b1cb16_1619242817768_1619242817849.jpeg" 21 | }, 22 | { 23 | "id": 5, 24 | "title": "Temel Gıda", 25 | "image": "http://cdn.getir.com/cat/56dfcfba86004203000a870d_1619242834654_1619242834734.jpeg" 26 | }, 27 | { 28 | "id": 6, 29 | "title": "Atıştırmalık", 30 | "image": "http://cdn.getir.com/cat/56dfe03cf82055030022cdc0_1619242841966_1619242842053.jpeg" 31 | }, 32 | { 33 | "id": 7, 34 | "title": "Dondurma", 35 | "image": "http://cdn.getir.com/cat/55bca8484dcda90c00e3aa80_1619242741382_1619242741482.jpeg" 36 | }, 37 | { 38 | "id": 8, 39 | "title": "Süt Ürünleri", 40 | "image": "https://market-product-images-cdn.getirapi.com/category/afee33f9-93fe-4b87-8094-6e5c7f13c064.jpeg" 41 | }, 42 | { 43 | "id": 9, 44 | "title": "Kahvaltılık", 45 | "image": "http://cdn.getir.com/cat/56dfed05ab747f03008d9379_1619242850313_1619242850394.jpeg" 46 | }, 47 | { 48 | "id": 10, 49 | "title": "Yiyecek", 50 | "image": "http://cdn.getir.com/cat/551430043427d5010a3a5c5d_1619242660025_1619242660107.jpeg" 51 | }, 52 | { 53 | "id": 11, 54 | "title": "Fit & Form", 55 | "image": "http://cdn.getir.com/cat/57e2996551f3ee030027e28b_1619242858559_1619242858642.jpeg" 56 | }, 57 | { 58 | "id": 12, 59 | "title": "Kişisel Bakım", 60 | "image": "http://cdn.getir.com/cat/551430043427d5010a3a5c5c_1619242651249_1619242651335.jpeg" 61 | }, 62 | { 63 | "id": 13, 64 | "title": "Ev Bakım", 65 | "image": "http://cdn.getir.com/cat/55449fdf02632e11003c2da8_1619242719523_1619242719602.jpeg" 66 | }, 67 | { 68 | "id": 14, 69 | "title": "Ev & Yaşam", 70 | "image": "http://cdn.getir.com/cat/5b06b056b883b700044e3e4c_1619242916956_1619242917048.jpeg" 71 | }, 72 | { 73 | "id": 15, 74 | "title": "Teknoloji", 75 | "image": "http://cdn.getir.com/cat/551430043427d5010a3a5c62_1619242697597_1619242697702.jpeg" 76 | }, 77 | { 78 | "id": 16, 79 | "title": "Evcil Hayvan", 80 | "image": "http://cdn.getir.com/cat/551430043427d5010a3a5c63_1619242711604_1619242711687.jpeg" 81 | }, 82 | { 83 | "id": 17, 84 | "title": "Bebek", 85 | "image": "http://cdn.getir.com/cat/551430043427d5010a3a5c5b_1619242620186_1619242620271.jpeg" 86 | }, 87 | { 88 | "id": 18, 89 | "title": "Cinsel Sağlık", 90 | "image": "http://cdn.getir.com/cat/559c07b093be370c0063dd29_1619242727735_1619242727816.jpeg" 91 | } 92 | ] -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Getir Clone with Vue.js 3 2 | 3 |

4 | 5 | ![](https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vuedotjs&logoColor=4FC08D) 6 | ![](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white) 7 | ![](https://img.shields.io/badge/Vite-B73BFE?style=for-the-badge&logo=vite&logoColor=FFD62E`) 8 | ![](https://img.shields.io/badge/npm-CB3837?style=for-the-badge&logo=npm&logoColor=white) 9 | 10 |

11 | 12 | 13 | [CANLI DEMO İÇİN TIKLAYINIZ! ](https://getir-clone-fatihes.netlify.app/) 14 | 15 | 16 | [Click here](En_README.md) for English README. 17 | 18 | ![getir](https://user-images.githubusercontent.com/54971670/167903506-7db42e46-7c9f-4a73-a376-16c3bb14f53b.PNG) 19 | 20 | 21 | ## :question: Getir Nedir? 22 | Getir, 2015 yılında kurulan bir şirkettir. Mobil uygulaması aracılığıyla, restoran yemek teslimatları ve market ürünleri için teslimat hizmeti sunmakta. Şirket, Türkiye başta olmak üzere çeşitli Avrupa ülkelerinde hizmet vermektedir. 23 | 24 | ## :question: Vue.js Nedir? 25 | Vue, kullanıcı arayüzleri oluşturmak için bir JavaScript çerçevesidir (framework). Standart HTML, CSS ve JavaScript'in üzerine kuruludur ve ister basit ister karmaşık olsun, kullanıcı ara yüzlerini verimli bir şekilde geliştirmenize yardımcı olan bildirime dayalı ve bileşen tabanlı bir programlama modeli sağlar. 26 | 27 | ## :question: Vite Nedir? 28 | Vite modern web projeleri için daha hızlı ve daha yalın bir geliştirme deneyimi sağlamayı amaçlayan bir oluşturma aracıdır. İki ana bölümden oluşur: 29 | 30 | - Yerel ES modülleri üzerinde zengin özellik geliştirmeleri sağlayan 31 | bir geliştirme sunucusudur. 32 | - Kodunuzu, üretim için yüksek düzeyde optimize edilmiş statik 33 | varlıkların çıktısını almak üzere önceden yapılandırılmış, toplama 34 | ile bir araya getiren bir derleme komutudur. 35 | 36 | Vite fikir sahibidir ve kutudan çıktığı gibi mantıklı varsayılanlarla birlikte gelir, ancak aynı zamanda tam yazma desteğine sahip Eklenti API'si ve JavaScript API'si aracılığıyla oldukça genişletilebilir. 37 | 38 | ## :question: Tailwindcss Nedir? 39 | Tailwind CSS, tüm HTML dosyalarınızı, JavaScript bileşenlerinizi ve diğer tüm şablonları sınıf adları için tarayarak, ilgili stilleri oluşturarak ve ardından bunları statik bir CSS dosyasına yazarak çalışır. 40 | 41 | Sıfır çalışma zamanı ile hızlı, esnek ve güvenilirdir. 42 | 43 | ## :books: Kullanılan NPM Paketleri: 44 | - [:link:](https://www.npmjs.com/package/@dafcoe/vue-collapsible-panel) Vue Collapsible Panel 45 | - [:link:](https://www.npmjs.com/package/vue-country-flag-next) Vue Country Flag Next 46 | - [:link:](https://vue-select.org/) Vue Select 47 | - [:link:](https://ismail9k.github.io/vue3-carousel/) Vue3 Carousel 48 | 49 | ## :floppy_disk: Proje İçin 50 | 51 | Projeyi klonlamak için : `git clone https://github.com/fatihes1/getir-clone-vue3.git` 52 | 53 | Klonlamadan sonra proje dizinine geçin : `cd getir-clone-vue3` 54 | 55 | Gereklilikleri indirmek için : `npm install` 56 | 57 | Vite çalıştırmak için : `npm run dev` 58 | 59 | Tailwindcss çalıştırmak için `npm run watch` , komutlarını kullanınız. 60 | 61 | ## :bust_in_silhouette: İletişime Geçmek İçin 62 |

63 | 64 | [![](https://img.shields.io/badge/linkedin-%230077B5.svg?&style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/fatihes/) 65 | [![](https://img.shields.io/badge/Instagram-E4405F?style=for-the-badge&logo=instagram&logoColor=white)](https://www.instagram.com/fatihtech/) 66 | [![](https://img.shields.io/badge/YouTube-FF0000?style=for-the-badge&logo=youtube&logoColor=white)](https://www.youtube.com/channel/UCpMnisdqsNAGzJfQBkBaOKg) 67 | [![](https://img.shields.io/badge/Medium-12100E?style=for-the-badge&logo=medium&logoColor=white)](https://fatihes.medium.com/) 68 | [![Mail Badge](https://img.shields.io/badge/develop.fatihes@gmail.com-c14438?style=for-the-badge&logo=Gmail&logoColor=white&link=mailto:develop.fatihes@gmail.com)](mailto:develop.fatihes@gmail.com) 69 | 70 |

71 | -------------------------------------------------------------------------------- /src/components/HeroSection.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 85 | 86 | -------------------------------------------------------------------------------- /src/api/products.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id" : 1, 4 | "title" : "Kuzeyden", 5 | "image" : "https://cdn.getir.com/product/5a7b20fd8e19da0004bb27f8_tr_1615375864268.jpeg", 6 | "alt" : "1.5 L", 7 | "price" : "₺3.95" 8 | }, 9 | { 10 | "id": 2, 11 | "title": "Kızılay Erzincan", 12 | "image": "https://cdn.getir.com/product/60018c5bca2126d84459c47f_tr_1610788125046.jpeg", 13 | "alt": "6 x 200 ml", 14 | "price": "₺7.75" 15 | }, 16 | { 17 | "id": 3, 18 | "title": "Ülker Napoliten", 19 | "image": "https://cdn.getir.com/product/574b2219dee8a90300f18d24_tr_1638269157710.jpeg", 20 | "alt": "33 g", 21 | "price": "₺4.40" 22 | }, 23 | { 24 | "id": 4, 25 | "title": "Lay's Mevsim Yeşillikli", 26 | "image": "https://cdn.getir.com/product/5bc97aabb137fb001d751ac7_tr_1609123518121.jpeg", 27 | "alt": "96 g", 28 | "price": "₺8.95" 29 | }, 30 | { 31 | "id": 5, 32 | "title": "Kavrulmuş Siyah Ay Çekirdeği", 33 | "image": "https://cdn.getir.com/product/5ccaf4ff1a1763000175a869_tr_1580904995656.jpeg", 34 | "alt": "180 g", 35 | "price": "₺9.85" 36 | }, 37 | { 38 | "id": 6, 39 | "title": "Magnum Badem", 40 | "image": "https://cdn.getir.com/product/559fec01f462100c00461d5c_tr_1618323765236.jpeg", 41 | "alt": "100 ml", 42 | "price": "₺11.50" 43 | }, 44 | { 45 | "id": 7, 46 | "title": "Uno Tost Ekmeği", 47 | "image": "https://cdn.getir.com/product/5c879b921f5acb000125e903_tr_1612851603430.jpeg", 48 | "alt": "350 g", 49 | "price": "₺10.95" 50 | }, 51 | { 52 | "id": 8, 53 | "title": "İçim %3 Yağlı Süt", 54 | "image": "https://cdn.getir.com/product/5ced482d4a8a2a000137da6d_tr_1623652387464.jpeg", 55 | "alt": "1 L", 56 | "price": "₺12.95" 57 | }, 58 | { 59 | "id": 9, 60 | "title": "Bahçıvan Süzme Peynir", 61 | "image": "https://cdn.getir.com/product/5ce65823a72a950001cc88c0_tr_1609902381949.jpeg", 62 | "alt": "500 g", 63 | "price": "₺30.95" 64 | }, 65 | { 66 | "id": 10, 67 | "title": "Hertane Kuru Sele Zeytin", 68 | "image": "https://cdn.getir.com/product/6012ba4c08793829b89aa6ed_tr_1638948798067.jpeg", 69 | "alt": "285 g", 70 | "price": "₺39.00" 71 | }, 72 | { 73 | "id": 11, 74 | "title": "Nuh'un Ankara Spaghetti", 75 | "image": "https://cdn.getir.com/product/559fb12df462100c00461494.jpeg", 76 | "alt": "500 g", 77 | "price": "₺7.50" 78 | }, 79 | { 80 | "id": 12, 81 | "title": "Colgate Optik White", 82 | "image": "https://cdn.getir.com/product/5c3f4bdcf9ba5f0001e7b0d9_tr_1609902603858.jpeg", 83 | "alt": "75 ml", 84 | "price": "₺39.90" 85 | }, 86 | { 87 | "id": 13, 88 | "title": "Elidor Güçlü ve Parlak Şampuan", 89 | "image": "https://cdn.getir.com/product/5e37d21d8aae421521876048_c5e05715-28c2-47cb-8b16-ffb935ede682.jpeg", 90 | "alt": "650 ml", 91 | "price": "₺37.50" 92 | }, 93 | { 94 | "id": 14, 95 | "title": "Solo Tuvalet Kağıdı", 96 | "image": "https://cdn.getir.com/product/60a4b1baa415b3197743e314_tr_1621694073698.jpeg", 97 | "alt": "16'lı", 98 | "price": "₺55.90" 99 | }, 100 | { 101 | "id": 15, 102 | "title": "Yumoş Extra Orkide Yasemin", 103 | "image": "https://cdn.getir.com/product/58a1b3f4f24e4d00048d7f62_771879ea-59b7-4305-8c66-0b850ba6c0a7.jpeg", 104 | "alt": "1440 ml", 105 | "price": "₺39.99" 106 | }, 107 | { 108 | "id": 16, 109 | "title": "Hertane Kuru Sele Zeytin", 110 | "image": "https://cdn.getir.com/product/5d7f8dd10ed2c200010d5152_b6135284-0ab2-4b07-a7ef-fa4f754902e1.jpeg", 111 | "alt": "285 g", 112 | "price": "₺39.00" 113 | } 114 | ] -------------------------------------------------------------------------------- /En_README.md: -------------------------------------------------------------------------------- 1 | # Getir Clone with Vue.js 3 2 | 3 |

11 | 12 | [CLICK HERE FOR LIVE DEMO ](https://getir-clone-fatihes.netlify.app/) 13 | 14 | 15 | ![getir](https://user-images.githubusercontent.com/54971670/167903506-7db42e46-7c9f-4a73-a376-16c3bb14f53b.PNG) 16 | 17 | 18 | ## :question: What is the Getir? 19 | Getir is a company founded in 2015. Through its mobile app, it provides delivery service for restaurant food deliveries and grocery items. The company provides services in various European countries, especially in Turkey. 20 | 21 | ## :question: What is the Vue.js? 22 | Vue (pronounced /vjuː/, like **view**) is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS and JavaScript, and provides a declarative and component-based programming model that helps you efficiently develop user interfaces, be it simple or complex. 23 | 24 | ## :question: What is the Vite? 25 | 26 | Vite (French word for "quick", pronounced /vit/, like "veet") is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts: 27 | 28 | - A dev server that provides [rich feature enhancements](https://vitejs.dev/guide/features.html) over [native ES modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules), for example extremely fast [Hot Module Replacement (HMR)](https://vitejs.dev/guide/features.html#hot-module-replacement). 29 | 30 | - A build command that bundles your code with [Rollup](https://rollupjs.org/), pre-configured to output highly optimized static assets for production. 31 | 32 | 33 | Vite is opinionated and comes with sensible defaults out of the box, but is also highly extensible via its [Plugin API](https://vitejs.dev/guide/api-plugin.html) and [JavaScript API](https://vitejs.dev/guide/api-javascript.html) with full typing support. 34 | 35 | ## :question: What is the Tailwindcss? 36 | Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file. 37 | 38 | It's fast, flexible, and reliable — with zero-runtime. 39 | 40 | ## :books: NPM Packages Used: 41 | - [:link:](https://www.npmjs.com/package/@dafcoe/vue-collapsible-panel) Vue Collapsible Panel 42 | - [:link:](https://www.npmjs.com/package/vue-country-flag-next) Vue Country Flag Next 43 | - [:link:](https://vue-select.org/) Vue Select 44 | - [:link:](https://ismail9k.github.io/vue3-carousel/) Vue3 Carousel 45 | 46 | ## :floppy_disk: For Project 47 | 48 | Clone with this URL : `git clone https://github.com/fatihes1/getir-clone-vue3.git` 49 | 50 | Switch to project directory after cloning : `cd getir-clone-vue3` 51 | 52 | To download the requirements : `npm install` 53 | 54 | To run Vite: `npm run dev` 55 | 56 | To run Tailwindcss : `npm run watch` , komutlarını kullanınız. 57 | 58 | ## :bust_in_silhouette: Contact With Me 59 |

60 | 61 | [![](https://img.shields.io/badge/linkedin-%230077B5.svg?&style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/fatihes/) 62 | [![](https://img.shields.io/badge/Instagram-E4405F?style=for-the-badge&logo=instagram&logoColor=white)](https://www.instagram.com/fatihtech/) 63 | [![](https://img.shields.io/badge/YouTube-FF0000?style=for-the-badge&logo=youtube&logoColor=white)](https://www.youtube.com/channel/UCpMnisdqsNAGzJfQBkBaOKg) 64 | [![](https://img.shields.io/badge/Medium-12100E?style=for-the-badge&logo=medium&logoColor=white)](https://fatihes.medium.com/) 65 | [![Mail Badge](https://img.shields.io/badge/develop.fatihes@gmail.com-c14438?style=for-the-badge&logo=Gmail&logoColor=white&link=mailto:develop.fatihes@gmail.com)](mailto:develop.fatihes@gmail.com) 66 | 67 |

68 | -------------------------------------------------------------------------------- /src/components/Footer.vue: -------------------------------------------------------------------------------- 1 | 60 | 61 | 75 | 76 | -------------------------------------------------------------------------------- /src/assets/output.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap'); 2 | 3 | /* 4 | ! tailwindcss v3.0.24 | MIT License | https://tailwindcss.com 5 | */ 6 | 7 | /* 8 | 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 9 | 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) 10 | */ 11 | 12 | *, 13 | ::before, 14 | ::after { 15 | box-sizing: border-box; 16 | /* 1 */ 17 | border-width: 0; 18 | /* 2 */ 19 | border-style: solid; 20 | /* 2 */ 21 | border-color: #e5e7eb; 22 | /* 2 */ 23 | } 24 | 25 | ::before, 26 | ::after { 27 | --tw-content: ''; 28 | } 29 | 30 | /* 31 | 1. Use a consistent sensible line-height in all browsers. 32 | 2. Prevent adjustments of font size after orientation changes in iOS. 33 | 3. Use a more readable tab size. 34 | 4. Use the user's configured `sans` font-family by default. 35 | */ 36 | 37 | html { 38 | line-height: 1.5; 39 | /* 1 */ 40 | -webkit-text-size-adjust: 100%; 41 | /* 2 */ 42 | -moz-tab-size: 4; 43 | /* 3 */ 44 | -o-tab-size: 4; 45 | tab-size: 4; 46 | /* 3 */ 47 | font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 48 | /* 4 */ 49 | } 50 | 51 | /* 52 | 1. Remove the margin in all browsers. 53 | 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. 54 | */ 55 | 56 | body { 57 | margin: 0; 58 | /* 1 */ 59 | line-height: inherit; 60 | /* 2 */ 61 | } 62 | 63 | /* 64 | 1. Add the correct height in Firefox. 65 | 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 66 | 3. Ensure horizontal rules are visible by default. 67 | */ 68 | 69 | hr { 70 | height: 0; 71 | /* 1 */ 72 | color: inherit; 73 | /* 2 */ 74 | border-top-width: 1px; 75 | /* 3 */ 76 | } 77 | 78 | /* 79 | Add the correct text decoration in Chrome, Edge, and Safari. 80 | */ 81 | 82 | abbr:where([title]) { 83 | -webkit-text-decoration: underline dotted; 84 | text-decoration: underline dotted; 85 | } 86 | 87 | /* 88 | Remove the default font size and weight for headings. 89 | */ 90 | 91 | h1, 92 | h2, 93 | h3, 94 | h4, 95 | h5, 96 | h6 { 97 | font-size: inherit; 98 | font-weight: inherit; 99 | } 100 | 101 | /* 102 | Reset links to optimize for opt-in styling instead of opt-out. 103 | */ 104 | 105 | a { 106 | color: inherit; 107 | text-decoration: inherit; 108 | } 109 | 110 | /* 111 | Add the correct font weight in Edge and Safari. 112 | */ 113 | 114 | b, 115 | strong { 116 | font-weight: bolder; 117 | } 118 | 119 | /* 120 | 1. Use the user's configured `mono` font family by default. 121 | 2. Correct the odd `em` font sizing in all browsers. 122 | */ 123 | 124 | code, 125 | kbd, 126 | samp, 127 | pre { 128 | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 129 | /* 1 */ 130 | font-size: 1em; 131 | /* 2 */ 132 | } 133 | 134 | /* 135 | Add the correct font size in all browsers. 136 | */ 137 | 138 | small { 139 | font-size: 80%; 140 | } 141 | 142 | /* 143 | Prevent `sub` and `sup` elements from affecting the line height in all browsers. 144 | */ 145 | 146 | sub, 147 | sup { 148 | font-size: 75%; 149 | line-height: 0; 150 | position: relative; 151 | vertical-align: baseline; 152 | } 153 | 154 | sub { 155 | bottom: -0.25em; 156 | } 157 | 158 | sup { 159 | top: -0.5em; 160 | } 161 | 162 | /* 163 | 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 164 | 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 165 | 3. Remove gaps between table borders by default. 166 | */ 167 | 168 | table { 169 | text-indent: 0; 170 | /* 1 */ 171 | border-color: inherit; 172 | /* 2 */ 173 | border-collapse: collapse; 174 | /* 3 */ 175 | } 176 | 177 | /* 178 | 1. Change the font styles in all browsers. 179 | 2. Remove the margin in Firefox and Safari. 180 | 3. Remove default padding in all browsers. 181 | */ 182 | 183 | button, 184 | input, 185 | optgroup, 186 | select, 187 | textarea { 188 | font-family: inherit; 189 | /* 1 */ 190 | font-size: 100%; 191 | /* 1 */ 192 | line-height: inherit; 193 | /* 1 */ 194 | color: inherit; 195 | /* 1 */ 196 | margin: 0; 197 | /* 2 */ 198 | padding: 0; 199 | /* 3 */ 200 | } 201 | 202 | /* 203 | Remove the inheritance of text transform in Edge and Firefox. 204 | */ 205 | 206 | button, 207 | select { 208 | text-transform: none; 209 | } 210 | 211 | /* 212 | 1. Correct the inability to style clickable types in iOS and Safari. 213 | 2. Remove default button styles. 214 | */ 215 | 216 | button, 217 | [type='button'], 218 | [type='reset'], 219 | [type='submit'] { 220 | -webkit-appearance: button; 221 | /* 1 */ 222 | background-color: transparent; 223 | /* 2 */ 224 | background-image: none; 225 | /* 2 */ 226 | } 227 | 228 | /* 229 | Use the modern Firefox focus style for all focusable elements. 230 | */ 231 | 232 | :-moz-focusring { 233 | outline: auto; 234 | } 235 | 236 | /* 237 | Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) 238 | */ 239 | 240 | :-moz-ui-invalid { 241 | box-shadow: none; 242 | } 243 | 244 | /* 245 | Add the correct vertical alignment in Chrome and Firefox. 246 | */ 247 | 248 | progress { 249 | vertical-align: baseline; 250 | } 251 | 252 | /* 253 | Correct the cursor style of increment and decrement buttons in Safari. 254 | */ 255 | 256 | ::-webkit-inner-spin-button, 257 | ::-webkit-outer-spin-button { 258 | height: auto; 259 | } 260 | 261 | /* 262 | 1. Correct the odd appearance in Chrome and Safari. 263 | 2. Correct the outline style in Safari. 264 | */ 265 | 266 | [type='search'] { 267 | -webkit-appearance: textfield; 268 | /* 1 */ 269 | outline-offset: -2px; 270 | /* 2 */ 271 | } 272 | 273 | /* 274 | Remove the inner padding in Chrome and Safari on macOS. 275 | */ 276 | 277 | ::-webkit-search-decoration { 278 | -webkit-appearance: none; 279 | } 280 | 281 | /* 282 | 1. Correct the inability to style clickable types in iOS and Safari. 283 | 2. Change font properties to `inherit` in Safari. 284 | */ 285 | 286 | ::-webkit-file-upload-button { 287 | -webkit-appearance: button; 288 | /* 1 */ 289 | font: inherit; 290 | /* 2 */ 291 | } 292 | 293 | /* 294 | Add the correct display in Chrome and Safari. 295 | */ 296 | 297 | summary { 298 | display: list-item; 299 | } 300 | 301 | /* 302 | Removes the default spacing and border for appropriate elements. 303 | */ 304 | 305 | blockquote, 306 | dl, 307 | dd, 308 | h1, 309 | h2, 310 | h3, 311 | h4, 312 | h5, 313 | h6, 314 | hr, 315 | figure, 316 | p, 317 | pre { 318 | margin: 0; 319 | } 320 | 321 | fieldset { 322 | margin: 0; 323 | padding: 0; 324 | } 325 | 326 | legend { 327 | padding: 0; 328 | } 329 | 330 | ol, 331 | ul, 332 | menu { 333 | list-style: none; 334 | margin: 0; 335 | padding: 0; 336 | } 337 | 338 | /* 339 | Prevent resizing textareas horizontally by default. 340 | */ 341 | 342 | textarea { 343 | resize: vertical; 344 | } 345 | 346 | /* 347 | 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 348 | 2. Set the default placeholder color to the user's configured gray 400 color. 349 | */ 350 | 351 | input::-moz-placeholder, textarea::-moz-placeholder { 352 | opacity: 1; 353 | /* 1 */ 354 | color: #9ca3af; 355 | /* 2 */ 356 | } 357 | 358 | input:-ms-input-placeholder, textarea:-ms-input-placeholder { 359 | opacity: 1; 360 | /* 1 */ 361 | color: #9ca3af; 362 | /* 2 */ 363 | } 364 | 365 | input::placeholder, 366 | textarea::placeholder { 367 | opacity: 1; 368 | /* 1 */ 369 | color: #9ca3af; 370 | /* 2 */ 371 | } 372 | 373 | /* 374 | Set the default cursor for buttons. 375 | */ 376 | 377 | button, 378 | [role="button"] { 379 | cursor: pointer; 380 | } 381 | 382 | /* 383 | Make sure disabled buttons don't get the pointer cursor. 384 | */ 385 | 386 | :disabled { 387 | cursor: default; 388 | } 389 | 390 | /* 391 | 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 392 | 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) 393 | This can trigger a poorly considered lint error in some tools but is included by design. 394 | */ 395 | 396 | img, 397 | svg, 398 | video, 399 | canvas, 400 | audio, 401 | iframe, 402 | embed, 403 | object { 404 | display: block; 405 | /* 1 */ 406 | vertical-align: middle; 407 | /* 2 */ 408 | } 409 | 410 | /* 411 | Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) 412 | */ 413 | 414 | img, 415 | video { 416 | max-width: 100%; 417 | height: auto; 418 | } 419 | 420 | /* 421 | Ensure the default browser behavior of the `hidden` attribute. 422 | */ 423 | 424 | [hidden] { 425 | display: none; 426 | } 427 | 428 | html, body { 429 | font-family:'Open Sans', sans-serif; 430 | --tw-bg-opacity: 1; 431 | background-color: rgb(249 250 251 / var(--tw-bg-opacity)); 432 | -webkit-font-smoothing: antialiased; 433 | -moz-osx-font-smoothing: grayscale 434 | } 435 | 436 | *, ::before, ::after{ 437 | --tw-translate-x: 0; 438 | --tw-translate-y: 0; 439 | --tw-rotate: 0; 440 | --tw-skew-x: 0; 441 | --tw-skew-y: 0; 442 | --tw-scale-x: 1; 443 | --tw-scale-y: 1; 444 | --tw-pan-x: ; 445 | --tw-pan-y: ; 446 | --tw-pinch-zoom: ; 447 | --tw-scroll-snap-strictness: proximity; 448 | --tw-ordinal: ; 449 | --tw-slashed-zero: ; 450 | --tw-numeric-figure: ; 451 | --tw-numeric-spacing: ; 452 | --tw-numeric-fraction: ; 453 | --tw-ring-inset: ; 454 | --tw-ring-offset-width: 0px; 455 | --tw-ring-offset-color: #fff; 456 | --tw-ring-color: rgb(59 130 246 / 0.5); 457 | --tw-ring-offset-shadow: 0 0 #0000; 458 | --tw-ring-shadow: 0 0 #0000; 459 | --tw-shadow: 0 0 #0000; 460 | --tw-shadow-colored: 0 0 #0000; 461 | --tw-blur: ; 462 | --tw-brightness: ; 463 | --tw-contrast: ; 464 | --tw-grayscale: ; 465 | --tw-hue-rotate: ; 466 | --tw-invert: ; 467 | --tw-saturate: ; 468 | --tw-sepia: ; 469 | --tw-drop-shadow: ; 470 | --tw-backdrop-blur: ; 471 | --tw-backdrop-brightness: ; 472 | --tw-backdrop-contrast: ; 473 | --tw-backdrop-grayscale: ; 474 | --tw-backdrop-hue-rotate: ; 475 | --tw-backdrop-invert: ; 476 | --tw-backdrop-opacity: ; 477 | --tw-backdrop-saturate: ; 478 | --tw-backdrop-sepia: ; 479 | } 480 | 481 | .container{ 482 | width: 100%; 483 | } 484 | 485 | @media (min-width: 640px){ 486 | .container{ 487 | max-width: 640px; 488 | } 489 | } 490 | 491 | @media (min-width: 768px){ 492 | .container{ 493 | max-width: 768px; 494 | } 495 | } 496 | 497 | @media (min-width: 1024px){ 498 | .container{ 499 | max-width: 1024px; 500 | } 501 | } 502 | 503 | @media (min-width: 1280px){ 504 | .container{ 505 | max-width: 1280px; 506 | } 507 | } 508 | 509 | @media (min-width: 1536px){ 510 | .container{ 511 | max-width: 1536px; 512 | } 513 | } 514 | 515 | .nav-link{ 516 | margin-top: 0.5rem; 517 | display: flex; 518 | height: 2.75rem; 519 | align-items: center; 520 | justify-content: center; 521 | border-top-left-radius: 0.5rem; 522 | border-top-right-radius: 0.5rem; 523 | } 524 | 525 | .nav-link:hover{ 526 | --tw-bg-opacity: 1; 527 | background-color: rgb(93 62 188 / var(--tw-bg-opacity)); 528 | } 529 | 530 | .absolute{ 531 | position: absolute; 532 | } 533 | 534 | .relative{ 535 | position: relative; 536 | } 537 | 538 | .top-0{ 539 | top: 0px; 540 | } 541 | 542 | .left-0{ 543 | left: 0px; 544 | } 545 | 546 | .top-3{ 547 | top: 0.75rem; 548 | } 549 | 550 | .right-3{ 551 | right: 0.75rem; 552 | } 553 | 554 | .z-20{ 555 | z-index: 20; 556 | } 557 | 558 | .mx-auto{ 559 | margin-left: auto; 560 | margin-right: auto; 561 | } 562 | 563 | .mb-3{ 564 | margin-bottom: 0.75rem; 565 | } 566 | 567 | .mt-4{ 568 | margin-top: 1rem; 569 | } 570 | 571 | .mt-6{ 572 | margin-top: 1.5rem; 573 | } 574 | 575 | .mt-10{ 576 | margin-top: 2.5rem; 577 | } 578 | 579 | .ml-4{ 580 | margin-left: 1rem; 581 | } 582 | 583 | .mt-2{ 584 | margin-top: 0.5rem; 585 | } 586 | 587 | .mt-8{ 588 | margin-top: 2rem; 589 | } 590 | 591 | .mt-7{ 592 | margin-top: 1.75rem; 593 | } 594 | 595 | .mt-5{ 596 | margin-top: 1.25rem; 597 | } 598 | 599 | .mb-6{ 600 | margin-bottom: 1.5rem; 601 | } 602 | 603 | .block{ 604 | display: block; 605 | } 606 | 607 | .flex{ 608 | display: flex; 609 | } 610 | 611 | .grid{ 612 | display: grid; 613 | } 614 | 615 | .hidden{ 616 | display: none; 617 | } 618 | 619 | .h-9{ 620 | height: 2.25rem; 621 | } 622 | 623 | .h-3{ 624 | height: 0.75rem; 625 | } 626 | 627 | .h-2{ 628 | height: 0.5rem; 629 | } 630 | 631 | .h-16{ 632 | height: 4rem; 633 | } 634 | 635 | .h-6{ 636 | height: 1.5rem; 637 | } 638 | 639 | .h-8{ 640 | height: 2rem; 641 | } 642 | 643 | .h-auto{ 644 | height: auto; 645 | } 646 | 647 | .h-\[500px\]{ 648 | height: 500px; 649 | } 650 | 651 | .h-full{ 652 | height: 100%; 653 | } 654 | 655 | .h-14{ 656 | height: 3.5rem; 657 | } 658 | 659 | .h-12{ 660 | height: 3rem; 661 | } 662 | 663 | .h-\[150px\]{ 664 | height: 150px; 665 | } 666 | 667 | .h-32{ 668 | height: 8rem; 669 | } 670 | 671 | .w-full{ 672 | width: 100%; 673 | } 674 | 675 | .w-9{ 676 | width: 2.25rem; 677 | } 678 | 679 | .w-16{ 680 | width: 4rem; 681 | } 682 | 683 | .w-6{ 684 | width: 1.5rem; 685 | } 686 | 687 | .w-28{ 688 | width: 7rem; 689 | } 690 | 691 | .w-10{ 692 | width: 2.5rem; 693 | } 694 | 695 | .w-24{ 696 | width: 6rem; 697 | } 698 | 699 | .w-7{ 700 | width: 1.75rem; 701 | } 702 | 703 | .w-8{ 704 | width: 2rem; 705 | } 706 | 707 | .w-12{ 708 | width: 3rem; 709 | } 710 | 711 | .w-\[150px\]{ 712 | width: 150px; 713 | } 714 | 715 | .w-32{ 716 | width: 8rem; 717 | } 718 | 719 | .flex-1{ 720 | flex: 1 1 0%; 721 | } 722 | 723 | .-translate-x-0{ 724 | --tw-translate-x: -0px; 725 | transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); 726 | } 727 | 728 | .transform{ 729 | transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); 730 | } 731 | 732 | .cursor-text{ 733 | cursor: text; 734 | } 735 | 736 | .resize{ 737 | resize: both; 738 | } 739 | 740 | .grid-cols-4{ 741 | grid-template-columns: repeat(4, minmax(0, 1fr)); 742 | } 743 | 744 | .grid-cols-3{ 745 | grid-template-columns: repeat(3, minmax(0, 1fr)); 746 | } 747 | 748 | .grid-rows-2{ 749 | grid-template-rows: repeat(2, minmax(0, 1fr)); 750 | } 751 | 752 | .flex-col{ 753 | flex-direction: column; 754 | } 755 | 756 | .flex-wrap{ 757 | flex-wrap: wrap; 758 | } 759 | 760 | .items-center{ 761 | align-items: center; 762 | } 763 | 764 | .justify-center{ 765 | justify-content: center; 766 | } 767 | 768 | .justify-between{ 769 | justify-content: space-between; 770 | } 771 | 772 | .gap-4{ 773 | gap: 1rem; 774 | } 775 | 776 | .gap-0\.1{ 777 | gap: 0.063rem; 778 | } 779 | 780 | .gap-0{ 781 | gap: 0px; 782 | } 783 | 784 | .gap-2{ 785 | gap: 0.5rem; 786 | } 787 | 788 | .gap-y-6{ 789 | row-gap: 1.5rem; 790 | } 791 | 792 | .gap-y-4{ 793 | row-gap: 1rem; 794 | } 795 | 796 | .gap-x-3{ 797 | -moz-column-gap: 0.75rem; 798 | column-gap: 0.75rem; 799 | } 800 | 801 | .gap-y-2{ 802 | row-gap: 0.5rem; 803 | } 804 | 805 | .gap-x-2{ 806 | -moz-column-gap: 0.5rem; 807 | column-gap: 0.5rem; 808 | } 809 | 810 | .gap-x-1{ 811 | -moz-column-gap: 0.25rem; 812 | column-gap: 0.25rem; 813 | } 814 | 815 | .gap-y-3{ 816 | row-gap: 0.75rem; 817 | } 818 | 819 | .gap-y-1{ 820 | row-gap: 0.25rem; 821 | } 822 | 823 | .overflow-hidden{ 824 | overflow: hidden; 825 | } 826 | 827 | .overflow-x-hidden{ 828 | overflow-x: hidden; 829 | } 830 | 831 | .whitespace-nowrap{ 832 | white-space: nowrap; 833 | } 834 | 835 | .rounded{ 836 | border-radius: 0.25rem; 837 | } 838 | 839 | .rounded-lg{ 840 | border-radius: 0.5rem; 841 | } 842 | 843 | .rounded-md{ 844 | border-radius: 0.375rem; 845 | } 846 | 847 | .border{ 848 | border-width: 1px; 849 | } 850 | 851 | .border-2{ 852 | border-width: 2px; 853 | } 854 | 855 | .border-t{ 856 | border-top-width: 1px; 857 | } 858 | 859 | .border-gray-200{ 860 | --tw-border-opacity: 1; 861 | border-color: rgb(229 231 235 / var(--tw-border-opacity)); 862 | } 863 | 864 | .border-gray-300{ 865 | --tw-border-opacity: 1; 866 | border-color: rgb(209 213 219 / var(--tw-border-opacity)); 867 | } 868 | 869 | .bg-white{ 870 | --tw-bg-opacity: 1; 871 | background-color: rgb(255 255 255 / var(--tw-bg-opacity)); 872 | } 873 | 874 | .bg-brand-color{ 875 | --tw-bg-opacity: 1; 876 | background-color: rgb(76 51 152 / var(--tw-bg-opacity)); 877 | } 878 | 879 | .bg-primary-brand-color{ 880 | --tw-bg-opacity: 1; 881 | background-color: rgb(93 62 188 / var(--tw-bg-opacity)); 882 | } 883 | 884 | .bg-gray-50{ 885 | --tw-bg-opacity: 1; 886 | background-color: rgb(249 250 251 / var(--tw-bg-opacity)); 887 | } 888 | 889 | .bg-brand-yellow{ 890 | --tw-bg-opacity: 1; 891 | background-color: rgb(255 211 0 / var(--tw-bg-opacity)); 892 | } 893 | 894 | .bg-mobile-app{ 895 | background-image: url(https://getir.com/_next/static/images/doodle-d659f9f1fd505c811c2331fe3ffddd5f.png); 896 | } 897 | 898 | .fill-current{ 899 | fill: currentColor; 900 | } 901 | 902 | .object-cover{ 903 | -o-object-fit: cover; 904 | object-fit: cover; 905 | } 906 | 907 | .p-4{ 908 | padding: 1rem; 909 | } 910 | 911 | .p-14{ 912 | padding: 3.5rem; 913 | } 914 | 915 | .p-6{ 916 | padding: 1.5rem; 917 | } 918 | 919 | .p-10{ 920 | padding: 2.5rem; 921 | } 922 | 923 | .p-3{ 924 | padding: 0.75rem; 925 | } 926 | 927 | .py-4{ 928 | padding-top: 1rem; 929 | padding-bottom: 1rem; 930 | } 931 | 932 | .px-3{ 933 | padding-left: 0.75rem; 934 | padding-right: 0.75rem; 935 | } 936 | 937 | .px-2{ 938 | padding-left: 0.5rem; 939 | padding-right: 0.5rem; 940 | } 941 | 942 | .px-4{ 943 | padding-left: 1rem; 944 | padding-right: 1rem; 945 | } 946 | 947 | .py-6{ 948 | padding-top: 1.5rem; 949 | padding-bottom: 1.5rem; 950 | } 951 | 952 | .py-1{ 953 | padding-top: 0.25rem; 954 | padding-bottom: 0.25rem; 955 | } 956 | 957 | .py-2{ 958 | padding-top: 0.5rem; 959 | padding-bottom: 0.5rem; 960 | } 961 | 962 | .pl-6{ 963 | padding-left: 1.5rem; 964 | } 965 | 966 | .pt-4{ 967 | padding-top: 1rem; 968 | } 969 | 970 | .pt-2{ 971 | padding-top: 0.5rem; 972 | } 973 | 974 | .pt-6{ 975 | padding-top: 1.5rem; 976 | } 977 | 978 | .text-center{ 979 | text-align: center; 980 | } 981 | 982 | .text-sm{ 983 | font-size: 0.875rem; 984 | line-height: 1.25rem; 985 | } 986 | 987 | .text-lg{ 988 | font-size: 1.125rem; 989 | line-height: 1.75rem; 990 | } 991 | 992 | .text-xs{ 993 | font-size: 0.75rem; 994 | line-height: 1rem; 995 | } 996 | 997 | .text-4xl{ 998 | font-size: 2.25rem; 999 | line-height: 2.5rem; 1000 | } 1001 | 1002 | .text-2xl{ 1003 | font-size: 1.5rem; 1004 | line-height: 2rem; 1005 | } 1006 | 1007 | .font-semibold{ 1008 | font-weight: 600; 1009 | } 1010 | 1011 | .font-bold{ 1012 | font-weight: 700; 1013 | } 1014 | 1015 | .tracking-tight{ 1016 | letter-spacing: -0.025em; 1017 | } 1018 | 1019 | .tracking-wide{ 1020 | letter-spacing: 0.025em; 1021 | } 1022 | 1023 | .text-gray-700{ 1024 | --tw-text-opacity: 1; 1025 | color: rgb(55 65 81 / var(--tw-text-opacity)); 1026 | } 1027 | 1028 | .text-primary-brand-color{ 1029 | --tw-text-opacity: 1; 1030 | color: rgb(93 62 188 / var(--tw-text-opacity)); 1031 | } 1032 | 1033 | .text-gray-500{ 1034 | --tw-text-opacity: 1; 1035 | color: rgb(107 114 128 / var(--tw-text-opacity)); 1036 | } 1037 | 1038 | .text-white{ 1039 | --tw-text-opacity: 1; 1040 | color: rgb(255 255 255 / var(--tw-text-opacity)); 1041 | } 1042 | 1043 | .text-brand-color{ 1044 | --tw-text-opacity: 1; 1045 | color: rgb(76 51 152 / var(--tw-text-opacity)); 1046 | } 1047 | 1048 | .text-gray-600{ 1049 | --tw-text-opacity: 1; 1050 | color: rgb(75 85 99 / var(--tw-text-opacity)); 1051 | } 1052 | 1053 | .text-brand-color\/75{ 1054 | color: rgb(76 51 152 / 0.75); 1055 | } 1056 | 1057 | .text-gray-900{ 1058 | --tw-text-opacity: 1; 1059 | color: rgb(17 24 39 / var(--tw-text-opacity)); 1060 | } 1061 | 1062 | .text-opacity-80{ 1063 | --tw-text-opacity: 0.8; 1064 | } 1065 | 1066 | .shadow-md{ 1067 | --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); 1068 | --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); 1069 | box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); 1070 | } 1071 | 1072 | .outline-none{ 1073 | outline: 2px solid transparent; 1074 | outline-offset: 2px; 1075 | } 1076 | 1077 | .transition-colors{ 1078 | transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color; 1079 | transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; 1080 | transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color; 1081 | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 1082 | transition-duration: 150ms; 1083 | } 1084 | 1085 | .transition-all{ 1086 | transition-property: all; 1087 | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 1088 | transition-duration: 150ms; 1089 | } 1090 | 1091 | .transition{ 1092 | transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter; 1093 | transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; 1094 | transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter; 1095 | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 1096 | transition-duration: 150ms; 1097 | } 1098 | 1099 | .before\:absolute::before{ 1100 | content: var(--tw-content); 1101 | position: absolute; 1102 | } 1103 | 1104 | .before\:inset-0::before{ 1105 | content: var(--tw-content); 1106 | top: 0px; 1107 | right: 0px; 1108 | bottom: 0px; 1109 | left: 0px; 1110 | } 1111 | 1112 | .before\:z-10::before{ 1113 | content: var(--tw-content); 1114 | z-index: 10; 1115 | } 1116 | 1117 | .before\:h-full::before{ 1118 | content: var(--tw-content); 1119 | height: 100%; 1120 | } 1121 | 1122 | .before\:w-full::before{ 1123 | content: var(--tw-content); 1124 | width: 100%; 1125 | } 1126 | 1127 | .before\:bg-gradient-to-r::before{ 1128 | content: var(--tw-content); 1129 | background-image: linear-gradient(to right, var(--tw-gradient-stops)); 1130 | } 1131 | 1132 | .before\:from-primary-brand-color::before{ 1133 | content: var(--tw-content); 1134 | --tw-gradient-from: #5d3ebc; 1135 | --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(93 62 188 / 0)); 1136 | } 1137 | 1138 | .before\:to-transparent::before{ 1139 | content: var(--tw-content); 1140 | --tw-gradient-to: transparent; 1141 | } 1142 | 1143 | .hover\:scale-105:hover{ 1144 | --tw-scale-x: 1.05; 1145 | --tw-scale-y: 1.05; 1146 | transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); 1147 | } 1148 | 1149 | .hover\:border-transparent:hover{ 1150 | border-color: transparent; 1151 | } 1152 | 1153 | .hover\:border-primary-brand-color:hover{ 1154 | --tw-border-opacity: 1; 1155 | border-color: rgb(93 62 188 / var(--tw-border-opacity)); 1156 | } 1157 | 1158 | .hover\:border-brand-color:hover{ 1159 | --tw-border-opacity: 1; 1160 | border-color: rgb(76 51 152 / var(--tw-border-opacity)); 1161 | } 1162 | 1163 | .hover\:bg-primary-brand-color\/20:hover{ 1164 | background-color: rgb(93 62 188 / 0.2); 1165 | } 1166 | 1167 | .hover\:bg-primary-brand-color\/10:hover{ 1168 | background-color: rgb(93 62 188 / 0.1); 1169 | } 1170 | 1171 | .hover\:bg-primary-brand-color:hover{ 1172 | --tw-bg-opacity: 1; 1173 | background-color: rgb(93 62 188 / var(--tw-bg-opacity)); 1174 | } 1175 | 1176 | .hover\:bg-purple-50:hover{ 1177 | --tw-bg-opacity: 1; 1178 | background-color: rgb(250 245 255 / var(--tw-bg-opacity)); 1179 | } 1180 | 1181 | .hover\:text-primary-brand-color:hover{ 1182 | --tw-text-opacity: 1; 1183 | color: rgb(93 62 188 / var(--tw-text-opacity)); 1184 | } 1185 | 1186 | .hover\:text-brand-yellow:hover{ 1187 | --tw-text-opacity: 1; 1188 | color: rgb(255 211 0 / var(--tw-text-opacity)); 1189 | } 1190 | 1191 | .hover\:text-primary-brand-color\/90:hover{ 1192 | color: rgb(93 62 188 / 0.9); 1193 | } 1194 | 1195 | .hover\:text-opacity-100:hover{ 1196 | --tw-text-opacity: 1; 1197 | } 1198 | 1199 | .hover\:underline:hover{ 1200 | -webkit-text-decoration-line: underline; 1201 | text-decoration-line: underline; 1202 | } 1203 | 1204 | .focus\:border-primary-brand-color:focus{ 1205 | --tw-border-opacity: 1; 1206 | border-color: rgb(93 62 188 / var(--tw-border-opacity)); 1207 | } 1208 | 1209 | .group:hover .group-hover\:border-primary-brand-color{ 1210 | --tw-border-opacity: 1; 1211 | border-color: rgb(93 62 188 / var(--tw-border-opacity)); 1212 | } 1213 | 1214 | .group:hover .group-hover\:text-primary-brand-color{ 1215 | --tw-text-opacity: 1; 1216 | color: rgb(93 62 188 / var(--tw-text-opacity)); 1217 | } 1218 | 1219 | .group:hover .group-hover\:text-brand-color{ 1220 | --tw-text-opacity: 1; 1221 | color: rgb(76 51 152 / var(--tw-text-opacity)); 1222 | } 1223 | 1224 | .group:hover .group-hover\:text-brand-color\/100{ 1225 | color: rgb(76 51 152 / 1); 1226 | } 1227 | 1228 | .peer:valid ~ .peer-valid\:h-7{ 1229 | height: 1.75rem; 1230 | } 1231 | 1232 | .peer:valid ~ .peer-valid\:text-xs{ 1233 | font-size: 0.75rem; 1234 | line-height: 1rem; 1235 | } 1236 | 1237 | .peer:valid ~ .peer-valid\:text-primary-brand-color{ 1238 | --tw-text-opacity: 1; 1239 | color: rgb(93 62 188 / var(--tw-text-opacity)); 1240 | } 1241 | 1242 | .peer:focus ~ .peer-focus\:h-7{ 1243 | height: 1.75rem; 1244 | } 1245 | 1246 | .peer:focus ~ .peer-focus\:text-xs{ 1247 | font-size: 0.75rem; 1248 | line-height: 1rem; 1249 | } 1250 | 1251 | .peer:focus ~ .peer-focus\:text-primary-brand-color{ 1252 | --tw-text-opacity: 1; 1253 | color: rgb(93 62 188 / var(--tw-text-opacity)); 1254 | } 1255 | 1256 | @media (min-width: 640px){ 1257 | .sm\:h-4{ 1258 | height: 1rem; 1259 | } 1260 | 1261 | .sm\:w-8{ 1262 | width: 2rem; 1263 | } 1264 | 1265 | .sm\:w-20{ 1266 | width: 5rem; 1267 | } 1268 | 1269 | .sm\:w-14{ 1270 | width: 3.5rem; 1271 | } 1272 | 1273 | .sm\:w-\[72\]{ 1274 | width: 72; 1275 | } 1276 | 1277 | .sm\:w-16{ 1278 | width: 4rem; 1279 | } 1280 | 1281 | .sm\:grid-cols-4{ 1282 | grid-template-columns: repeat(4, minmax(0, 1fr)); 1283 | } 1284 | } 1285 | 1286 | @media (min-width: 768px){ 1287 | .md\:container{ 1288 | width: 100%; 1289 | } 1290 | 1291 | @media (min-width: 640px){ 1292 | .md\:container{ 1293 | max-width: 640px; 1294 | } 1295 | } 1296 | 1297 | @media (min-width: 768px){ 1298 | .md\:container{ 1299 | max-width: 768px; 1300 | } 1301 | } 1302 | 1303 | @media (min-width: 1024px){ 1304 | .md\:container{ 1305 | max-width: 1024px; 1306 | } 1307 | } 1308 | 1309 | @media (min-width: 1280px){ 1310 | .md\:container{ 1311 | max-width: 1280px; 1312 | } 1313 | } 1314 | 1315 | @media (min-width: 1536px){ 1316 | .md\:container{ 1317 | max-width: 1536px; 1318 | } 1319 | } 1320 | 1321 | .md\:absolute{ 1322 | position: absolute; 1323 | } 1324 | 1325 | .md\:left-1\/2{ 1326 | left: 50%; 1327 | } 1328 | 1329 | .md\:-mx-2{ 1330 | margin-left: -0.5rem; 1331 | margin-right: -0.5rem; 1332 | } 1333 | 1334 | .md\:mt-14{ 1335 | margin-top: 3.5rem; 1336 | } 1337 | 1338 | .md\:ml-0{ 1339 | margin-left: 0px; 1340 | } 1341 | 1342 | .md\:ml-2{ 1343 | margin-left: 0.5rem; 1344 | } 1345 | 1346 | .md\:mt-0{ 1347 | margin-top: 0px; 1348 | } 1349 | 1350 | .md\:ml-3{ 1351 | margin-left: 0.75rem; 1352 | } 1353 | 1354 | .md\:block{ 1355 | display: block; 1356 | } 1357 | 1358 | .md\:inline{ 1359 | display: inline; 1360 | } 1361 | 1362 | .md\:flex{ 1363 | display: flex; 1364 | } 1365 | 1366 | .md\:hidden{ 1367 | display: none; 1368 | } 1369 | 1370 | .md\:h-11{ 1371 | height: 2.75rem; 1372 | } 1373 | 1374 | .md\:h-4{ 1375 | height: 1rem; 1376 | } 1377 | 1378 | .md\:h-\[500px\]{ 1379 | height: 500px; 1380 | } 1381 | 1382 | .md\:w-9{ 1383 | width: 2.25rem; 1384 | } 1385 | 1386 | .md\:w-\[400px\]{ 1387 | width: 400px; 1388 | } 1389 | 1390 | .md\:-translate-x-1\/2{ 1391 | --tw-translate-x: -50%; 1392 | transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); 1393 | } 1394 | 1395 | .md\:transform{ 1396 | transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); 1397 | } 1398 | 1399 | .md\:grid-cols-3{ 1400 | grid-template-columns: repeat(3, minmax(0, 1fr)); 1401 | } 1402 | 1403 | .md\:grid-cols-5{ 1404 | grid-template-columns: repeat(5, minmax(0, 1fr)); 1405 | } 1406 | 1407 | .md\:grid-cols-2{ 1408 | grid-template-columns: repeat(2, minmax(0, 1fr)); 1409 | } 1410 | 1411 | .md\:flex-row{ 1412 | flex-direction: row; 1413 | } 1414 | 1415 | .md\:flex-nowrap{ 1416 | flex-wrap: nowrap; 1417 | } 1418 | 1419 | .md\:gap-y-0{ 1420 | row-gap: 0px; 1421 | } 1422 | 1423 | .md\:gap-x-2{ 1424 | -moz-column-gap: 0.5rem; 1425 | column-gap: 0.5rem; 1426 | } 1427 | 1428 | .md\:gap-x-5{ 1429 | -moz-column-gap: 1.25rem; 1430 | column-gap: 1.25rem; 1431 | } 1432 | 1433 | .md\:gap-y-2{ 1434 | row-gap: 0.5rem; 1435 | } 1436 | 1437 | .md\:self-end{ 1438 | align-self: flex-end; 1439 | } 1440 | 1441 | .md\:rounded{ 1442 | border-radius: 0.25rem; 1443 | } 1444 | 1445 | .md\:rounded-lg{ 1446 | border-radius: 0.5rem; 1447 | } 1448 | 1449 | .md\:p-0{ 1450 | padding: 0px; 1451 | } 1452 | 1453 | .md\:py-8{ 1454 | padding-top: 2rem; 1455 | padding-bottom: 2rem; 1456 | } 1457 | 1458 | .md\:px-2{ 1459 | padding-left: 0.5rem; 1460 | padding-right: 0.5rem; 1461 | } 1462 | 1463 | .md\:px-0{ 1464 | padding-left: 0px; 1465 | padding-right: 0px; 1466 | } 1467 | 1468 | .md\:pl-0{ 1469 | padding-left: 0px; 1470 | } 1471 | 1472 | .md\:pt-10{ 1473 | padding-top: 2.5rem; 1474 | } 1475 | 1476 | .md\:text-left{ 1477 | text-align: left; 1478 | } 1479 | 1480 | .md\:transition-all{ 1481 | transition-property: all; 1482 | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 1483 | transition-duration: 150ms; 1484 | } 1485 | 1486 | .md\:hover\:scale-105:hover{ 1487 | --tw-scale-x: 1.05; 1488 | --tw-scale-y: 1.05; 1489 | transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); 1490 | } 1491 | } 1492 | 1493 | @media (min-width: 1024px){ 1494 | .lg\:container{ 1495 | width: 100%; 1496 | } 1497 | 1498 | @media (min-width: 640px){ 1499 | .lg\:container{ 1500 | max-width: 640px; 1501 | } 1502 | } 1503 | 1504 | @media (min-width: 768px){ 1505 | .lg\:container{ 1506 | max-width: 768px; 1507 | } 1508 | } 1509 | 1510 | @media (min-width: 1024px){ 1511 | .lg\:container{ 1512 | max-width: 1024px; 1513 | } 1514 | } 1515 | 1516 | @media (min-width: 1280px){ 1517 | .lg\:container{ 1518 | max-width: 1280px; 1519 | } 1520 | } 1521 | 1522 | @media (min-width: 1536px){ 1523 | .lg\:container{ 1524 | max-width: 1536px; 1525 | } 1526 | } 1527 | 1528 | .lg\:block{ 1529 | display: block; 1530 | } 1531 | 1532 | .lg\:inline{ 1533 | display: inline; 1534 | } 1535 | 1536 | .lg\:grid-cols-6{ 1537 | grid-template-columns: repeat(6, minmax(0, 1fr)); 1538 | } 1539 | 1540 | .lg\:grid-cols-4{ 1541 | grid-template-columns: repeat(4, minmax(0, 1fr)); 1542 | } 1543 | 1544 | .lg\:gap-x-8{ 1545 | -moz-column-gap: 2rem; 1546 | column-gap: 2rem; 1547 | } 1548 | 1549 | .lg\:rounded-lg{ 1550 | border-radius: 0.5rem; 1551 | } 1552 | } 1553 | 1554 | @media (min-width: 1280px){ 1555 | .xl\:grid-cols-8{ 1556 | grid-template-columns: repeat(8, minmax(0, 1fr)); 1557 | } 1558 | } 1559 | 1560 | @media (min-width: 1536px){ 1561 | .\32xl\:grid-cols-10{ 1562 | grid-template-columns: repeat(10, minmax(0, 1fr)); 1563 | } 1564 | 1565 | .\32xl\:grid-cols-8{ 1566 | grid-template-columns: repeat(8, minmax(0, 1fr)); 1567 | } 1568 | } -------------------------------------------------------------------------------- /src/components/Header.vue: -------------------------------------------------------------------------------- 1 | 53 | 54 | 61 | 62 | --------------------------------------------------------------------------------

{{ cardData.title }}

Favoriler

Kategoriler

Kampanyalar

Getir'i indirin!

14 | Dakikalar içinde
kapınızda
15 |

Giriş yap veya kayıt ol