├── src
    ├── style.css
    ├── postcss.config.js
    ├── assets
    │   ├── vue.svg
    │   └── main.css
    ├── stores
    │   └── theme.js
    ├── store
    │   └── index.js
    ├── App.vue
    ├── components
    │   ├── HelloWorld.vue
    │   ├── HeaderComponent.vue
    │   └── FooterComponent.vue
    ├── views
    │   ├── AboutView.vue
    │   ├── ProjectsView.vue
    │   ├── ContactView.vue
    │   ├── Homeview.vue
    │   ├── StudentsView.vue
    │   ├── BlogView.vue
    │   ├── AchievementsVIew.vue
    │   ├── CoursesView.vue
    │   ├── ScheduleView.vue
    │   └── QAView.vue
    ├── router
    │   └── index.js
    └── main.js
├── .vscode
    └── extensions.json
├── postcss.config.js
├── .gitignore
├── README.md
├── package.json
├── vite.config.js
├── public
    └── vite.svg
├── index.html
└── tailwind.config.js


/src/style.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["Vue.volar"]
3 | }
4 | 


--------------------------------------------------------------------------------
/src/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     plugins: {
3 |       tailwindcss: {},
4 |       autoprefixer: {},
5 |     },
6 |   }


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     plugins: {
3 |       tailwindcss: {},
4 |       autoprefixer: {},
5 |     },
6 |   }
7 |   


--------------------------------------------------------------------------------
/.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 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Vue 3 + Vite
2 | 
3 | This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
4 | 
5 | Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
6 | 


--------------------------------------------------------------------------------
/src/assets/vue.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>


--------------------------------------------------------------------------------
/src/stores/theme.js:
--------------------------------------------------------------------------------
 1 | import { defineStore } from 'pinia'
 2 | 
 3 | export const useThemeStore = defineStore('theme', {
 4 |   state: () => ({
 5 |     isDarkMode: localStorage.getItem('theme') === 'dark' || 
 6 |       (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)
 7 |   }),
 8 |   actions: {
 9 |     toggleDarkMode() {
10 |       this.isDarkMode = !this.isDarkMode
11 |       localStorage.setItem('theme', this.isDarkMode ? 'dark' : 'light')
12 |     }
13 |   }
14 | })


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import { createStore } from 'vuex'
 2 | 
 3 | export default createStore({
 4 |   state: {
 5 |     isDarkMode: localStorage.getItem('theme') === 'dark' || 
 6 |       (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)
 7 |   },
 8 |   getters: {
 9 |   },
10 |   mutations: {
11 |     toggleDarkMode(state) {
12 |       state.isDarkMode = !state.isDarkMode
13 |       localStorage.setItem('theme', state.isDarkMode ? 'dark' : 'light')
14 |     }
15 |   },
16 |   actions: {
17 |   },
18 |   modules: {
19 |   }
20 | })


--------------------------------------------------------------------------------
/src/assets/main.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap");
 2 | 
 3 | @tailwind base;
 4 | @tailwind components;
 5 | @tailwind utilities;
 6 | 
 7 | @layer base {
 8 |   :root {
 9 |     --primary-color: #3b82f6;
10 |     --secondary-color: #10b981;
11 |     --accent-color: #8b5cf6;
12 |   }
13 | 
14 |   .dark {
15 |     --primary-color: #60a5fa;
16 |     --secondary-color: #34d399;
17 |     --accent-color: #a78bfa;
18 |   }
19 | }
20 | 
21 | * {
22 |   margin: 0;
23 |   padding: 0;
24 |   box-sizing: border-box;
25 |   font-family: "Montserrat", sans-serif;
26 | }
27 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "teacher-portfolio",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "vite",
 7 |     "build": "vite build",
 8 |     "preview": "vite preview"
 9 |   },
10 |   "dependencies": {
11 |     "@vueuse/core": "^10.1.2",
12 |     "@vueuse/motion": "^2.0.0",
13 |     "lucide-vue-next": "^0.252.0",
14 |     "marked": "^5.0.2",
15 |     "pinia": "^2.1.3",
16 |     "swiper": "^11.2.8",
17 |     "vue": "^3.3.4",
18 |     "vue-i18n": "^9.2.2",
19 |     "vue-router": "^4.2.2"
20 |   },
21 |   "devDependencies": {
22 |     "@tailwindcss/forms": "^0.5.10",
23 |     "@tailwindcss/typography": "^0.5.16",
24 |     "@vitejs/plugin-vue": "^4.2.3",
25 |     "autoprefixer": "^10.4.21",
26 |     "postcss": "^8.5.5",
27 |     "tailwindcss": "^4.1.10",
28 |     "vite": "^4.3.9"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div :class="{ 'dark': themeStore.isDarkMode }">
 3 |     <div class="min-h-screen bg-white dark:bg-gray-900 transition-colors duration-300">
 4 |       <header-component />
 5 |       
 6 |       <main>
 7 |         <router-view v-slot="{ Component }">
 8 |           <transition name="fade" mode="out-in">
 9 |             <component :is="Component" />
10 |           </transition>
11 |         </router-view>
12 |       </main>
13 |       
14 |       <footer-component />
15 |     </div>
16 |   </div>
17 | </template>
18 | 
19 | <script setup>
20 | import { useThemeStore } from '@/stores/theme'
21 | import HeaderComponent from '@/components/HeaderComponent.vue'
22 | import FooterComponent from '@/components/FooterComponent.vue'
23 | 
24 | const themeStore = useThemeStore()
25 | </script>
26 | 
27 | <style>
28 | .fade-enter-active,
29 | .fade-leave-active {
30 |   transition: opacity 0.3s ease;
31 | }
32 | 
33 | .fade-enter-from,
34 | .fade-leave-to {
35 |   opacity: 0;
36 | }
37 | </style>
38 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { ref } from 'vue'
 3 | 
 4 | defineProps({
 5 |   msg: String,
 6 | })
 7 | 
 8 | const count = ref(0)
 9 | </script>
10 | 
11 | <template>
12 |   <h1>{{ msg }}</h1>
13 | 
14 |   <div class="card">
15 |     <button type="button" @click="count++">count is {{ count }}</button>
16 |     <p>
17 |       Edit
18 |       <code>components/HelloWorld.vue</code> to test HMR
19 |     </p>
20 |   </div>
21 | 
22 |   <p>
23 |     Check out
24 |     <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
25 |       >create-vue</a
26 |     >, the official Vue + Vite starter
27 |   </p>
28 |   <p>
29 |     Learn more about IDE Support for Vue in the
30 |     <a
31 |       href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
32 |       target="_blank"
33 |       >Vue Docs Scaling up Guide</a
34 |     >.
35 |   </p>
36 |   <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
37 | </template>
38 | 
39 | <style scoped>
40 | .read-the-docs {
41 |   color: #888;
42 | }
43 | </style>
44 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | // import { defineConfig } from 'vite'
 2 | // import vue from '@vitejs/plugin-vue'
 3 | 
 4 | // // https://vite.dev/config/
 5 | // export default defineConfig({
 6 | //   plugins: [vue()],
 7 | // })
 8 | 
 9 | 
10 | 
11 | 
12 | import { defineConfig } from 'vite'
13 | import vue from '@vitejs/plugin-vue'
14 | import path from 'path'
15 | 
16 | export default defineConfig({
17 |   plugins: [vue()],
18 |   resolve: {
19 |     alias: {
20 |       '@': path.resolve(__dirname, './src'),
21 |     },
22 |   },
23 |   server: {
24 |     port: 3000,
25 |     open: true,
26 |     cors: true
27 |   },
28 |   build: {
29 |     outDir: 'dist',
30 |     assetsDir: 'assets',
31 |     minify: 'terser',
32 |     terserOptions: {
33 |       compress: {
34 |         drop_console: true,
35 |         drop_debugger: true,
36 |       },
37 |     },
38 |     rollupOptions: {
39 |       output: {
40 |         manualChunks: {
41 |           'vendor': ['vue', 'vue-router', 'pinia'],
42 |           'ui': ['@vueuse/core', '@vueuse/motion'],
43 |         }
44 |       }
45 |     }
46 |   }
47 | })


--------------------------------------------------------------------------------
/src/views/AboutView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="py-12 bg-white dark:bg-gray-900">
 3 |       <div class="container mx-auto px-4">
 4 |         <div class="max-w-4xl mx-auto">
 5 |           <div class="text-center mb-12">
 6 |             <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">Men haqimda</h1>
 7 |             <p class="text-gray-600 dark:text-gray-300">Professional o'qituvchi va dasturchi</p>
 8 |           </div>
 9 |           
10 |           <!-- Bio section -->
11 |           <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-8">
12 |             <!-- Content -->
13 |           </div>
14 |           
15 |           <!-- Skills section -->
16 |           <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-8">
17 |             <!-- Content -->
18 |           </div>
19 |           
20 |           <!-- Experience section -->
21 |           <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
22 |             <!-- Content -->
23 |           </div>
24 |         </div>
25 |       </div>
26 |     </div>
27 |   </template>


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory } from "vue-router"
 2 | 
 3 | 
 4 | const routes = [
 5 |   {
 6 |     path: "/",
 7 |     name: "home",
 8 |     component: () => import("../views/Homeview.vue"),
 9 |   },
10 |   {
11 |     path: "/achievements",
12 |     name: "achievements",
13 |     component: () => import("../views/AchievementsView.vue"),
14 |   },
15 |   {
16 |     path: "/students",
17 |     name: "students",
18 |     component: () => import("../views/StudentsView.vue"),
19 |   },
20 |   {
21 |     path: "/courses",
22 |     name: "courses",
23 |     component: () => import("../views/CoursesView.vue"),
24 |   },
25 |   {
26 |     path: "/blog",
27 |     name: "blog",
28 |     component: () => import("../views/BlogView.vue"),
29 |   },
30 |   {
31 |     path: "/schedule",
32 |     name: "schedule",
33 |     component: () => import("../views/ScheduleView.vue"),
34 |   },
35 |   {
36 |     path: "/qa",
37 |     name: "qa",
38 |     component: () => import("../views/QAView.vue"),
39 |   },
40 |   {
41 |     path: "/contact",
42 |     name: "contact",
43 |     component: () => import("../views/ContactView.vue"),
44 |   },
45 | ]
46 | 
47 | const router = createRouter({
48 |   history: createWebHistory(import.meta.env.BASE_URL),
49 |   routes,
50 |   scrollBehavior() {
51 |     return { top: 0 }
52 |   },
53 | })
54 | 
55 | export default router
56 | 


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!-- <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite + Vue</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="/src/main.js"></script>
12 |   </body>
13 | </html> -->
14 | 
15 | 
16 | 
17 | 
18 | <!DOCTYPE html>
19 | <html lang="uz">
20 |   <head>
21 |     <meta charset="UTF-8" />
22 |     <link rel="icon" type="image/png" href="/favicon.png" />
23 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
24 |     <meta name="description" content="AzamjonBro - Professional o'qituvchi va dasturchi portfoliosi" />
25 |     <meta name="keywords" content="o'qituvchi, dasturlash, portfolio, vue.js, web dasturlash" />
26 |     <meta name="author" content="AzamjonBro" />
27 |     <title>AzamjonBro Portfolio</title>
28 |     <!-- Open Graph / Facebook -->
29 |     <meta property="og:type" content="website" />
30 |     <meta property="og:url" content="https://azamjonbro.uz/" />
31 |     <meta property="og:title" content="AzamjonBro Portfolio" />
32 |     <meta property="og:description" content="Professional o'qituvchi va dasturchi portfoliosi" />
33 |     <meta property="og:image" content="/og-image.jpg" />
34 |     <!-- Twitter -->
35 |     <meta property="twitter:card" content="summary_large_image" />
36 |     <meta property="twitter:url" content="https://azamjonbro.uz/" />
37 |     <meta property="twitter:title" content="AzamjonBro Portfolio" />
38 |     <meta property="twitter:description" content="Professional o'qituvchi va dasturchi portfoliosi" />
39 |     <meta property="twitter:image" content="/og-image.jpg" />
40 |   </head>
41 |   <body>
42 |     <div id="app"></div>
43 |     <script type="module" src="/src/main.js"></script>
44 |   </body>
45 | </html>


--------------------------------------------------------------------------------
/src/views/ProjectsView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="py-12 bg-white dark:bg-gray-900">
 3 |       <div class="container mx-auto px-4">
 4 |         <div class="text-center mb-12">
 5 |           <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">Loyihalar</h1>
 6 |           <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">Mening eng yaxshi ishlarim</p>
 7 |         </div>
 8 |         
 9 |         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
10 |           <div v-for="(project, index) in projects" :key="index" class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
11 |             <img :src="project.image" :alt="project.title" class="w-full h-48 object-cover">
12 |             <div class="p-6">
13 |               <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-2">{{ project.title }}</h3>
14 |               <p class="text-gray-600 dark:text-gray-300 mb-4">{{ project.description }}</p>
15 |               <div class="flex flex-wrap gap-2 mb-4">
16 |                 <span v-for="(tech, techIndex) in project.technologies" :key="techIndex" class="px-2 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs rounded-full">
17 |                   {{ tech }}
18 |                 </span>
19 |               </div>
20 |               <div class="flex justify-between">
21 |                 <a :href="project.demoUrl" target="_blank" class="text-primary-600 dark:text-primary-400 hover:underline">Demo</a>
22 |                 <a :href="project.codeUrl" target="_blank" class="text-primary-600 dark:text-primary-400 hover:underline">Code</a>
23 |               </div>
24 |             </div>
25 |           </div>
26 |         </div>
27 |       </div>
28 |     </div>
29 |   </template>
30 |   
31 |   <script setup>
32 |   const projects = [
33 |     {
34 |       title: 'E-commerce Website',
35 |       description: 'Online do\'kon uchun to\'liq funksional veb-sayt',
36 |       image: '/projects/ecommerce.jpg',
37 |       technologies: ['Vue.js', 'Tailwind CSS', 'Node.js', 'MongoDB'],
38 |       demoUrl: 'https://example.com',
39 |       codeUrl: 'https://github.com/username/project'
40 |     },
41 |     // Boshqa loyihalar...
42 |   ]
43 |   </script>


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | const defaultConfig = require("shadcn/ui/tailwind.config")
 3 | 
 4 | module.exports = {
 5 |   ...defaultConfig,
 6 |   content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}", "*.{js,ts,jsx,tsx,mdx}"],
 7 |   theme: {
 8 |     ...defaultConfig.theme,
 9 |     extend: {
10 |       ...defaultConfig.theme.extend,
11 |       colors: {
12 |         ...defaultConfig.theme.extend.colors,
13 |         primary: {
14 |           ...defaultConfig.theme.extend.colors.primary,
15 |           50: "#eff6ff",
16 |           100: "#dbeafe",
17 |           200: "#bfdbfe",
18 |           300: "#93c5fd",
19 |           400: "#60a5fa",
20 |           500: "#3b82f6",
21 |           600: "#2563eb",
22 |           700: "#1d4ed8",
23 |           800: "#1e40af",
24 |           900: "#1e3a8a",
25 |         },
26 |         secondary: {
27 |           ...defaultConfig.theme.extend.colors.secondary,
28 |           50: "#f0fdfa",
29 |           100: "#ccfbf1",
30 |           200: "#99f6e4",
31 |           300: "#5eead4",
32 |           400: "#2dd4bf",
33 |           500: "#14b8a6",
34 |           600: "#0d9488",
35 |           700: "#0f766e",
36 |           800: "#115e59",
37 |           900: "#134e4a",
38 |         },
39 |         accent: {
40 |           ...defaultConfig.theme.extend.colors.accent,
41 |           50: "#f5f3ff",
42 |           100: "#ede9fe",
43 |           200: "#ddd6fe",
44 |           300: "#c4b5fd",
45 |           400: "#a78bfa",
46 |           500: "#8b5cf6",
47 |           600: "#7c3aed",
48 |           700: "#6d28d9",
49 |           800: "#5b21b6",
50 |           900: "#4c1d95",
51 |           950: "#3b0764",
52 |         },
53 |         destructive: {
54 |           DEFAULT: "hsl(var(--destructive))",
55 |           foreground: "hsl(var(--destructive-foreground))",
56 |         },
57 |         muted: {
58 |           DEFAULT: "hsl(var(--muted))",
59 |           foreground: "hsl(var(--muted-foreground))",
60 |         },
61 |         popover: {
62 |           DEFAULT: "hsl(var(--popover))",
63 |           foreground: "hsl(var(--popover-foreground))",
64 |         },
65 |         card: {
66 |           DEFAULT: "hsl(var(--card))",
67 |           foreground: "hsl(var(--card-foreground))",
68 |         },
69 |       },
70 |       fontFamily: {
71 |         sans: ["Montserrat", "sans-serif"],
72 |       },
73 |       boxShadow: {
74 |         custom: "0 4px 20px -2px rgba(0, 0, 0, 0.1)",
75 |       },
76 |       animation: {
77 |         "pulse-slow": "pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite",
78 |       },
79 |     },
80 |   },
81 |   plugins: [
82 |     ...defaultConfig.plugins,
83 |     require("@tailwindcss/typography"),
84 |     require("@tailwindcss/forms"),
85 |     require("tailwindcss-animate"),
86 |   ],
87 | }
88 | 


--------------------------------------------------------------------------------
/src/views/ContactView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="py-12 bg-white dark:bg-gray-900">
 3 |       <div class="container mx-auto px-4">
 4 |         <div class="max-w-3xl mx-auto">
 5 |           <div class="text-center mb-12">
 6 |             <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">Bog'lanish</h1>
 7 |             <p class="text-gray-600 dark:text-gray-300">Savollaringiz bo'lsa, menga xabar yuboring</p>
 8 |           </div>
 9 |           
10 |           <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
11 |             <form @submit.prevent="submitForm">
12 |               <!-- Form fields -->
13 |               <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
14 |                 <div>
15 |                   <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Ismingiz</label>
16 |                   <input v-model="form.name" type="text" id="name" required class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-900 text-gray-800 dark:text-white">
17 |                 </div>
18 |                 <div>
19 |                   <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email</label>
20 |                   <input v-model="form.email" type="email" id="email" required class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-900 text-gray-800 dark:text-white">
21 |                 </div>
22 |               </div>
23 |               <div class="mb-6">
24 |                 <label for="subject" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Mavzu</label>
25 |                 <input v-model="form.subject" type="text" id="subject" required class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-900 text-gray-800 dark:text-white">
26 |               </div>
27 |               <div class="mb-6">
28 |                 <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Xabar</label>
29 |                 <textarea v-model="form.message" id="message" rows="5" required class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-900 text-gray-800 dark:text-white"></textarea>
30 |               </div>
31 |               <div class="text-center">
32 |                 <button type="submit" class="px-6 py-3 bg-primary-600 text-white font-medium rounded-md hover:bg-primary-700 transition-colors">
33 |                   Yuborish
34 |                 </button>
35 |               </div>
36 |             </form>
37 |           </div>
38 |         </div>
39 |       </div>
40 |     </div>
41 |   </template>
42 |   
43 |   <script setup>
44 |   import { ref } from 'vue'
45 |   
46 |   const form = ref({
47 |     name: '',
48 |     email: '',
49 |     subject: '',
50 |     message: ''
51 |   })
52 |   
53 |   const submitForm = async () => {
54 |     // EmailJS yoki Netlify Forms orqali yuborish
55 |     console.log('Form submitted:', form.value)
56 |     
57 |     // Form yuborilgandan so'ng
58 |     form.value = {
59 |       name: '',
60 |       email: '',
61 |       subject: '',
62 |       message: ''
63 |     }
64 |     
65 |     alert('Xabaringiz yuborildi!')
66 |   }
67 |   </script>


--------------------------------------------------------------------------------
/src/components/HeaderComponent.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <nav class="bg-white dark:bg-gray-800 shadow-md sticky top-0 z-50 transition-colors duration-300">
  3 |     <div class="container mx-auto px-4 py-3">
  4 |       <div class="flex justify-between items-center">
  5 |         <router-link to="/" class="text-2xl font-bold text-primary-600 dark:text-primary-400">
  6 |           <span class="text-accent-600 dark:text-accent-400">Teacher</span>Portfolio
  7 |         </router-link>
  8 |         
  9 |         <div class="hidden md:flex space-x-8">
 10 |           <router-link v-for="item in menuItems" :key="item.path" :to="item.path" 
 11 |             class="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 transition-colors">
 12 |             {{ $t(item.label) }}
 13 |           </router-link>
 14 |         </div>
 15 |         
 16 |         <div class="flex items-center space-x-4">
 17 |           <div class="relative">
 18 |             <button @click="toggleLanguageDropdown" class="flex items-center text-gray-700 dark:text-gray-300">
 19 |               <span class="mr-1">{{ languageLabels[language] }}</span>
 20 |               <ChevronDownIcon class="w-4 h-4" />
 21 |             </button>
 22 |             <div v-if="isLanguageDropdownOpen" class="absolute right-0 mt-2 w-24 bg-white dark:bg-gray-800 rounded-md shadow-lg z-50">
 23 |               <button v-for="(label, lang) in languageLabels" :key="lang" 
 24 |                 @click="selectLanguage(lang)"
 25 |                 class="block w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
 26 |                 {{ label }}
 27 |               </button>
 28 |             </div>
 29 |           </div>
 30 |           
 31 |           <button @click="themeStore.toggleDarkMode" class="text-gray-700 dark:text-gray-300">
 32 |             <SunIcon v-if="themeStore.isDarkMode" class="w-5 h-5" />
 33 |             <MoonIcon v-else class="w-5 h-5" />
 34 |           </button>
 35 |           
 36 |           <button @click="toggleMobileMenu" class="md:hidden text-gray-700 dark:text-gray-300">
 37 |             <MenuIcon v-if="!isMobileMenuOpen" class="w-6 h-6" />
 38 |             <XIcon v-else class="w-6 h-6" />
 39 |           </button>
 40 |         </div>
 41 |       </div>
 42 |       
 43 |       <div v-if="isMobileMenuOpen" class="md:hidden mt-4 pb-4">
 44 |         <router-link v-for="item in menuItems" :key="item.path" :to="item.path" 
 45 |           @click="isMobileMenuOpen = false"
 46 |           class="block py-2 text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">
 47 |           {{ $t(item.label) }}
 48 |         </router-link>
 49 |       </div>
 50 |     </div>
 51 |   </nav>
 52 | </template>
 53 | 
 54 | <script setup>
 55 | import { ref } from 'vue';
 56 | import { useI18n } from 'vue-i18n';
 57 | import { useThemeStore } from '@/stores/theme';
 58 | import { SunIcon, MoonIcon, MenuIcon, XIcon, ChevronDownIcon } from 'lucide-vue-next';
 59 | 
 60 | const i18n = useI18n();
 61 | const themeStore = useThemeStore();
 62 | 
 63 | const language = ref(i18n.locale.value);
 64 | const isMobileMenuOpen = ref(false);
 65 | const isLanguageDropdownOpen = ref(false);
 66 | 
 67 | const menuItems = [
 68 |   { path: '/', label: 'nav.home' },
 69 |   { path: '/achievements', label: 'nav.achievements' },
 70 |   { path: '/students', label: 'nav.students' },
 71 |   { path: '/courses', label: 'nav.courses' },
 72 |   { path: '/blog', label: 'nav.blog' },
 73 |   { path: '/schedule', label: 'nav.schedule' },
 74 |   { path: '/qa', label: 'nav.qa' },
 75 |   { path: '/contact', label: 'nav.contact' }
 76 | ];
 77 | 
 78 | const languageLabels = {
 79 |   uz: 'UZ',
 80 |   en: 'EN',
 81 |   ru: 'RU'
 82 | };
 83 | 
 84 | const toggleMobileMenu = () => {
 85 |   isMobileMenuOpen.value = !isMobileMenuOpen.value;
 86 | };
 87 | 
 88 | const toggleLanguageDropdown = () => {
 89 |   isLanguageDropdownOpen.value = !isLanguageDropdownOpen.value;
 90 | };
 91 | 
 92 | const selectLanguage = (lang) => {
 93 |   language.value = lang;
 94 |   i18n.locale.value = lang;
 95 |   localStorage.setItem('language', lang);
 96 |   isLanguageDropdownOpen.value = false;
 97 | };
 98 | </script>
 99 | 
100 | <style scoped>
101 | .router-link-active {
102 |   color: var(--primary-color);
103 |   font-weight: 500;
104 | }
105 | </style>
106 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
  1 | import { createApp } from "vue"
  2 | import { createPinia } from "pinia"
  3 | import App from "./App.vue"
  4 | import router from "./router"
  5 | import { createI18n } from "vue-i18n"
  6 | // import "./assets/main.css"
  7 | 
  8 | // Tarjimalar
  9 | const messages = {
 10 |   uz: {
 11 |     nav: {
 12 |       home: "Bosh sahifa",
 13 |       achievements: "Yutuqlar",
 14 |       students: "O'quvchilar",
 15 |       courses: "Kurslar",
 16 |       blog: "Blog",
 17 |       schedule: "Jadval",
 18 |       qa: "Savol-javob",
 19 |       contact: "Bog'lanish",
 20 |     },
 21 |     home: {
 22 |       hero: {
 23 |         title: "Zamonaviy ta'lim, zamonaviy yondashuv",
 24 |         subtitle: "Dasturlash va web-dizayn bo'yicha professional ta'lim",
 25 |         coursesButton: "Kurslarni ko'rish",
 26 |         contactButton: "Bog'lanish",
 27 |       },
 28 |       about: {
 29 |         title: "Men haqimda",
 30 |         description:
 31 |           "Professional o'qituvchi va dasturchi sifatida 10 yildan ortiq tajribaga egaman. Mening maqsadim - o'quvchilarni zamonaviy texnologiyalar bilan tanishtirish va ularga amaliy ko'nikmalarni o'rgatish.",
 32 |         readMoreButton: "Ko'proq o'qish",
 33 |         stats: {
 34 |           yearsExperience: "yillik tajriba",
 35 |           studentsCount: "o'quvchilar",
 36 |           coursesCount: "kurslar",
 37 |           awardsCount: "mukofotlar",
 38 |         },
 39 |       },
 40 |       courses: {
 41 |         title: "Mashhur kurslar",
 42 |         subtitle: "Eng ko'p talab qilinadigan va yuqori baholanadigan kurslarimiz",
 43 |         detailsButton: "Batafsil",
 44 |         allCoursesButton: "Barcha kurslar",
 45 |       },
 46 |       testimonials: {
 47 |         title: "O'quvchilar fikrlari",
 48 |         subtitle: "Bizning o'quvchilarimiz nima deyishadi",
 49 |       },
 50 |       cta: {
 51 |         title: "Karyerangizni bugun boshlang",
 52 |         description: "Zamonaviy dasturlash ko'nikmalarini o'rganing va IT sohasida muvaffaqiyatga erishing",
 53 |         button: "Ro'yxatdan o'tish",
 54 |       },
 55 |     },
 56 |     schedule: {
 57 |       title: "Dars jadvali",
 58 |       subtitle: "Joriy va kelgusi darslar jadvali",
 59 |       currentTime: "Hozirgi vaqt",
 60 |       currentClass: "Joriy dars",
 61 |       noCurrentClass: "Hozirda dars yo'q",
 62 |       weeklySchedule: "Haftalik jadval",
 63 |       time: "Vaqt",
 64 |       upcomingClasses: "Kelgusi darslar",
 65 |       class: "Dars",
 66 |       consultation: "Konsultatsiya",
 67 |       addToCalendar: "Taqvimga qo'shish",
 68 |     },
 69 |     students: {
 70 |       title: "O'quvchilar",
 71 |       subtitle: "Mening eng yaxshi o'quvchilarim va ularning yutuqlari",
 72 |       successMap: {
 73 |         title: "Muvaffaqiyat xaritasi",
 74 |       },
 75 |       testimonials: {
 76 |         title: "O'quvchilar fikrlari",
 77 |       },
 78 |     },
 79 |     courses: {
 80 |       title: "Kurslar",
 81 |       subtitle: "Barcha mavjud kurslar va o'quv dasturlari",
 82 |       categories: {
 83 |         all: "Barchasi",
 84 |         programming: "Dasturlash",
 85 |         design: "Dizayn",
 86 |         frontend: "Frontend",
 87 |         backend: "Backend",
 88 |       },
 89 |       paid: "Pullik",
 90 |       free: "Bepul",
 91 |       viewButton: "Ko'rish",
 92 |       youtube: {
 93 |         title: "YouTube darslari",
 94 |         viewAllButton: "Barcha videolarni ko'rish",
 95 |       },
 96 |       downloads: {
 97 |         title: "Yuklab olish uchun materiallar",
 98 |         downloadButton: "Yuklab olish",
 99 |       },
100 |     },
101 |     blog: {
102 |       title: "Blog",
103 |       subtitle: "Eng so'nggi maqolalar va yangiliklar",
104 |       featured: "Tavsiya etilgan",
105 |       readMore: "Ko'proq o'qish",
106 |       searchPlaceholder: "Maqolalarni qidirish...",
107 |     },
108 |     achievements: {
109 |       title: "Yutuqlar",
110 |       subtitle: "Mening professional yutuqlarim va sertifikatlarim",
111 |       tabs: {
112 |         certificates: "Sertifikatlar",
113 |         courses: "O'tilgan kurslar",
114 |         awards: "Mukofotlar",
115 |       },
116 |       verifyButton: "Tekshirish",
117 |     },
118 |   },
119 |   en: {
120 |     nav: {
121 |       home: "Home",
122 |       achievements: "Achievements",
123 |       students: "Students",
124 |       courses: "Courses",
125 |       blog: "Blog",
126 |       schedule: "Schedule",
127 |       qa: "Q&A",
128 |       contact: "Contact",
129 |     },
130 |     // You can expand English content as needed
131 |   },
132 |   ru: {
133 |     nav: {
134 |       home: "Главная",
135 |       achievements: "Достижения",
136 |       students: "Студенты",
137 |       courses: "Курсы",
138 |       blog: "Блог",
139 |       schedule: "Расписание",
140 |       qa: "Вопросы",
141 |       contact: "Контакты",
142 |     },
143 |     // You can expand Russian content as needed
144 |   },
145 | }
146 | 
147 | // Tilni tekshirish
148 | const supportedLanguages = ["uz", "en", "ru"]
149 | const savedLang = localStorage.getItem("language")
150 | const locale = supportedLanguages.includes(savedLang) ? savedLang : "uz"
151 | 
152 | // i18n sozlamasi
153 | const i18n = createI18n({
154 |   legacy: false,
155 |   locale,
156 |   fallbackLocale: "uz",
157 |   messages,
158 | })
159 | 
160 | // Vue ilovasini yaratish
161 | const app = createApp(App)
162 | const pinia = createPinia()
163 | 
164 | app.use(router)
165 | app.use(pinia)
166 | app.use(i18n)
167 | 
168 | app.mount("#app")
169 | 


--------------------------------------------------------------------------------
/src/components/FooterComponent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <footer class="bg-white dark:bg-gray-800 shadow-md py-8 mt-12">
 3 |       <div class="container mx-auto px-4">
 4 |         <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
 5 |           <!-- Logo and About -->
 6 |           <div>
 7 |             <div class="text-2xl font-bold text-primary-600 dark:text-primary-400 mb-4">
 8 |               <span class="text-accent-600 dark:text-accent-400">Teacher</span>Portfolio
 9 |             </div>
10 |             <p class="text-gray-600 dark:text-gray-300 mb-4">
11 |               Professional o'qituvchi va dasturchi portfoliosi. Zamonaviy ta'lim va zamonaviy yondashuv.
12 |             </p>
13 |             <div class="flex space-x-4">
14 |               <a href="#" class="text-gray-500 hover:text-primary-600 dark:hover:text-primary-400">
15 |                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
16 |               </a>
17 |               <a href="#" class="text-gray-500 hover:text-primary-600 dark:hover:text-primary-400">
18 |                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path></svg>
19 |               </a>
20 |               <a href="#" class="text-gray-500 hover:text-primary-600 dark:hover:text-primary-400">
21 |                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
22 |               </a>
23 |               <a href="#" class="text-gray-500 hover:text-primary-600 dark:hover:text-primary-400">
24 |                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
25 |               </a>
26 |             </div>
27 |           </div>
28 |           
29 |           <!-- Quick Links -->
30 |           <div>
31 |             <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Tezkor havolalar</h3>
32 |             <ul class="space-y-2">
33 |               <li><router-link to="/" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">Bosh sahifa</router-link></li>
34 |               <li><router-link to="/achievements" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">Yutuqlar</router-link></li>
35 |               <li><router-link to="/students" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">O'quvchilar</router-link></li>
36 |               <li><router-link to="/courses" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">Kurslar</router-link></li>
37 |               <li><router-link to="/blog" class="text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400">Blog</router-link></li>
38 |             </ul>
39 |           </div>
40 |           
41 |           <!-- Contact Info -->
42 |           <div>
43 |             <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Bog'lanish</h3>
44 |             <ul class="space-y-2">
45 |               <li class="flex items-start">
46 |                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 text-gray-500 dark:text-gray-400 mr-2 mt-1"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
47 |                 <span class="text-gray-600 dark:text-gray-300">IT Park, Tashkent, Uzbekistan</span>
48 |               </li>
49 |               <li class="flex items-start">
50 |                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 text-gray-500 dark:text-gray-400 mr-2 mt-1"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
51 |                 <span class="text-gray-600 dark:text-gray-300">+998 90 123 45 67</span>
52 |               </li>
53 |               <li class="flex items-start">
54 |                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 text-gray-500 dark:text-gray-400 mr-2 mt-1"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
55 |                 <span class="text-gray-600 dark:text-gray-300">info@teacherportfolio.uz</span>
56 |               </li>
57 |             </ul>
58 |           </div>
59 |           
60 |           <!-- Newsletter -->
61 |           <div>
62 |             <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Yangiliklar</h3>
63 |             <p class="text-gray-600 dark:text-gray-300 mb-4">Yangiliklar va foydali ma'lumotlar uchun obuna bo'ling</p>
64 |             <form @submit.prevent="subscribeNewsletter" class="flex">
65 |               <input 
66 |                 type="email" 
67 |                 placeholder="Email manzilingiz" 
68 |                 class="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-l-md bg-white dark:bg-gray-900 text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500"
69 |               />
70 |               <button 
71 |                 type="submit" 
72 |                 class="px-4 py-2 bg-primary-600 text-white rounded-r-md hover:bg-primary-700 transition-colors"
73 |               >
74 |                 Obuna
75 |               </button>
76 |             </form>
77 |           </div>
78 |         </div>
79 |         
80 |         <div class="border-t border-gray-200 dark:border-gray-700 mt-8 pt-8 text-center">
81 |           <p class="text-gray-600 dark:text-gray-300">
82 |             &copy; {{ new Date().getFullYear() }} Teacher Portfolio. Barcha huquqlar himoyalangan.
83 |           </p>
84 |         </div>
85 |       </div>
86 |     </footer>
87 |   </template>
88 |   
89 |   <script setup>
90 |   const subscribeNewsletter = () => {
91 |     // Newsletter subscription logic
92 |     console.log('Newsletter subscription submitted')
93 |   }
94 |   </script>
95 |   


--------------------------------------------------------------------------------
/src/views/Homeview.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <!-- Hero Section -->
  4 |     <section class="relative h-screen flex items-center justify-center overflow-hidden">
  5 |       <div class="absolute inset-0 z-0">
  6 |         <div class="absolute inset-0 bg-gradient-to-r from-primary-600/80 to-accent-600/80 dark:from-primary-900/90 dark:to-accent-900/90 z-10"></div>
  7 |         <img src="" alt="Background" class="w-full h-full object-cover" />
  8 |       </div>
  9 |       
 10 |       <div class="container mx-auto px-4 z-20 text-center">
 11 |         <div v-motion
 12 |           :initial="{ opacity: 0, y: 100 }"
 13 |           :enter="{ opacity: 1, y: 0, transition: { delay: 200, duration: 800 } }">
 14 |           <h1 class="text-4xl md:text-6xl font-bold text-white mb-6">{{ $t('home.hero.title') }}</h1>
 15 |           <p class="text-xl md:text-2xl text-white/90 mb-8 max-w-2xl mx-auto">{{ $t('home.hero.subtitle') }}</p>
 16 |           <div class="flex flex-wrap justify-center gap-4">
 17 |             <router-link to="/courses" class="px-8 py-3 bg-white text-primary-600 font-medium rounded-full hover:bg-gray-100 transition-colors">
 18 |               {{ $t('home.hero.coursesButton') }}
 19 |             </router-link>
 20 |             <router-link to="/contact" class="px-8 py-3 bg-transparent border-2 border-white text-white font-medium rounded-full hover:bg-white/10 transition-colors">
 21 |               {{ $t('home.hero.contactButton') }}
 22 |             </router-link>
 23 |           </div>
 24 |         </div>
 25 |       </div>
 26 |       
 27 |       <div class="absolute bottom-10 left-0 right-0 flex justify-center">
 28 |         <button @click="scrollToAbout" class="animate-bounce">
 29 |           <ChevronDownIcon class="w-10 h-10 text-white" />
 30 |         </button>
 31 |       </div>
 32 |     </section>
 33 |     
 34 |     <!-- About Section -->
 35 |     <section ref="aboutSection" class="py-20 bg-white dark:bg-gray-900">
 36 |       <div class="container mx-auto px-4">
 37 |         <div class="flex flex-col md:flex-row items-center gap-12">
 38 |           <div class="md:w-1/2" v-motion
 39 |             :initial="{ opacity: 0, x: -100 }"
 40 |             :visible="{ opacity: 1, x: 0, transition: { duration: 800 } }">
 41 |             <img src="" alt="Teacher" class="rounded-lg shadow-xl w-full max-w-md mx-auto" />
 42 |           </div>
 43 |           
 44 |           <div class="md:w-1/2" v-motion
 45 |             :initial="{ opacity: 0, x: 100 }"
 46 |             :visible="{ opacity: 1, x: 0, transition: { duration: 800 } }">
 47 |             <h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">{{ $t('home.about.title') }}</h2>
 48 |             <p class="text-gray-600 dark:text-gray-300 mb-6">{{ $t('home.about.description') }}</p>
 49 |             <div class="grid grid-cols-2 gap-4 mb-8">
 50 |               <div v-for="(stat, index) in stats" :key="index" class="p-4 bg-gray-100 dark:bg-gray-800 rounded-lg text-center">
 51 |                 <div class="text-3xl font-bold text-primary-600 dark:text-primary-400">{{ stat.value }}</div>
 52 |                 <div class="text-gray-600 dark:text-gray-400">{{ $t(stat.label) }}</div>
 53 |               </div>
 54 |             </div>
 55 |             <router-link to="/about" class="inline-flex items-center text-primary-600 dark:text-primary-400 font-medium">
 56 |               {{ $t('home.about.readMoreButton') }}
 57 |               <ArrowRightIcon class="w-4 h-4 ml-2" />
 58 |             </router-link>
 59 |           </div>
 60 |         </div>
 61 |       </div>
 62 |     </section>
 63 |     
 64 |     <!-- Featured Courses -->
 65 |     <section class="py-20 bg-gray-100 dark:bg-gray-800">
 66 |       <div class="container mx-auto px-4">
 67 |         <div class="text-center mb-12" v-motion
 68 |           :initial="{ opacity: 0, y: 50 }"
 69 |           :visible="{ opacity: 1, y: 0, transition: { duration: 800 } }">
 70 |           <h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">{{ $t('home.courses.title') }}</h2>
 71 |           <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">{{ $t('home.courses.subtitle') }}</p>
 72 |         </div>
 73 |         
 74 |         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
 75 |           <div v-for="(course, index) in featuredCourses" :key="index" class="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden" v-motion
 76 |             :initial="{ opacity: 0, y: 50 }"
 77 |             :visible="{ opacity: 1, y: 0, transition: { delay: index * 100, duration: 800 } }">
 78 |             <!-- <img :src="`/placeholder.svg?height=300&width=500&text=${course.title}`" :alt="course.title" class="w-full h-48 object-cover" /> -->
 79 |              <img src="" :alt="course.title "  class="w-full h-48 object-cover" >
 80 |             <div class="p-6">
 81 |               <div class="flex justify-between items-start mb-4">
 82 |                 <h3 class="text-xl font-bold text-gray-800 dark:text-white">{{ course.title }}</h3>
 83 |                 <span class="px-3 py-1 bg-primary-100 text-primary-600 dark:bg-primary-900 dark:text-primary-300 text-sm font-medium rounded-full">
 84 |                   {{ course.category }}
 85 |                 </span>
 86 |               </div>
 87 |               <p class="text-gray-600 dark:text-gray-300 mb-4">{{ course.description }}</p>
 88 |               <div class="flex justify-between items-center">
 89 |                 <span class="text-gray-500 dark:text-gray-400 flex items-center">
 90 |                   <ClockIcon class="w-4 h-4 mr-1" />
 91 |                   {{ course.duration }}
 92 |                 </span>
 93 |                 <router-link :to="`/courses/${course.id}`" class="text-primary-600 dark:text-primary-400 font-medium hover:underline">
 94 |                   {{ $t('home.courses.detailsButton') }}
 95 |                 </router-link>
 96 |               </div>
 97 |             </div>
 98 |           </div>
 99 |         </div>
100 |         
101 |         <div class="text-center mt-12">
102 |           <router-link to="/courses" class="px-8 py-3 bg-primary-600 text-white font-medium rounded-full hover:bg-primary-700 transition-colors">
103 |             {{ $t('home.courses.allCoursesButton') }}
104 |           </router-link>
105 |         </div>
106 |       </div>
107 |     </section>
108 |     
109 |     <!-- Testimonials -->
110 |     <section class="py-20 bg-white dark:bg-gray-900">
111 |       <div class="container mx-auto px-4">
112 |         <div class="text-center mb-12" v-motion
113 |           :initial="{ opacity: 0, y: 50 }"
114 |           :visible="{ opacity: 1, y: 0, transition: { duration: 800 } }">
115 |           <h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">{{ $t('home.testimonials.title') }}</h2>
116 |           <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">{{ $t('home.testimonials.subtitle') }}</p>
117 |         </div>
118 |         
119 |         <div class="max-w-4xl mx-auto">
120 |           <div class="bg-gray-100 dark:bg-gray-800 p-8 rounded-lg text-center">
121 |             <div class="w-20 h-20 mx-auto mb-4 rounded-full overflow-hidden">
122 |               <img src="" alt="Student" class="w-full h-full object-cover" />
123 |             </div>
124 |             <p class="text-gray-600 dark:text-gray-300 text-lg italic mb-6">
125 |               "Bu o'qituvchi mening karyeramni butunlay o'zgartirdi. Men olgan bilim va yo'naltirish juda qimmatli edi."
126 |             </p>
127 |             <h4 class="text-gray-800 dark:text-white font-bold">Aziz Karimov</h4>
128 |             <p class="text-gray-500 dark:text-gray-400">IT Park dasturchi</p>
129 |           </div>
130 |         </div>
131 |       </div>
132 |     </section>
133 |     
134 |     <!-- CTA Section -->
135 |     <section class="py-20 bg-primary-600 dark:bg-primary-900">
136 |       <div class="container mx-auto px-4 text-center" v-motion
137 |         :initial="{ opacity: 0, scale: 0.9 }"
138 |         :visible="{ opacity: 1, scale: 1, transition: { duration: 800 } }">
139 |         <h2 class="text-3xl font-bold text-white mb-6">{{ $t('home.cta.title') }}</h2>
140 |         <p class="text-white/90 max-w-2xl mx-auto mb-8">{{ $t('home.cta.description') }}</p>
141 |         <router-link to="/contact" class="px-8 py-3 bg-white text-primary-600 font-medium rounded-full hover:bg-gray-100 transition-colors">
142 |           {{ $t('home.cta.button') }}
143 |         </router-link>
144 |       </div>
145 |     </section>
146 |   </div>
147 | </template>
148 | 
149 | <script setup>
150 | import { ref, onMounted } from 'vue';
151 | import { useMotion } from '@vueuse/motion';
152 | import { ChevronDownIcon, ArrowRightIcon, ClockIcon } from 'lucide-vue-next';
153 | 
154 | const aboutSection = ref(null);
155 | 
156 | const scrollToAbout = () => {
157 |   aboutSection.value.scrollIntoView({ behavior: 'smooth' });
158 | };
159 | 
160 | const stats = [
161 |   { value: '10+', label: 'home.about.stats.yearsExperience' },
162 |   { value: '500+', label: 'home.about.stats.studentsCount' },
163 |   { value: '15+', label: 'home.about.stats.coursesCount' },
164 |   { value: '25+', label: 'home.about.stats.awardsCount' }
165 | ];
166 | 
167 | const featuredCourses = [
168 |   {
169 |     id: 1,
170 |     title: 'Web Development Fundamentals',
171 |     category: 'Programming',
172 |     description: 'Learn the basics of HTML, CSS, and JavaScript to build modern websites.',
173 |     duration: '8 weeks',
174 |     image: '/course-web.jpg'
175 |   },
176 |   {
177 |     id: 2,
178 |     title: 'Advanced Vue.js',
179 |     category: 'Frontend',
180 |     description: 'Master Vue.js and build complex single-page applications.',
181 |     duration: '10 weeks',
182 |     image: '/course-vue.jpg'
183 |   },
184 |   {
185 |     id: 3,
186 |     title: 'Full Stack Development',
187 |     category: 'Programming',
188 |     description: 'Become a full stack developer with Node.js, Express, and MongoDB.',
189 |     duration: '12 weeks',
190 |     image: '/course-fullstack.jpg'
191 |   }
192 | ];
193 | </script>
194 | 


--------------------------------------------------------------------------------
/src/views/StudentsView.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="py-12 bg-white dark:bg-gray-900">
  3 |       <div class="container mx-auto px-4">
  4 |         <div class="text-center mb-12">
  5 |           <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">{{ $t('students.title') }}</h1>
  6 |           <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">{{ $t('students.subtitle') }}</p>
  7 |         </div>
  8 |         
  9 |         <!-- Featured Students -->
 10 |         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
 11 |           <div 
 12 |             v-for="(student, index) in featuredStudents" 
 13 |             :key="index"
 14 |             class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"
 15 |             v-motion
 16 |             :initial="{ opacity: 0, y: 50 }"
 17 |             :visible="{ opacity: 1, y: 0, transition: { delay: index * 100, duration: 500 } }">
 18 |             <div class="relative h-64">
 19 |               <img :src="student.image" :alt="student.name" class="w-full h-full object-cover" />
 20 |               <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
 21 |                 <div class="p-4 text-white">
 22 |                   <h3 class="text-xl font-bold">{{ student.name }}</h3>
 23 |                   <p>{{ student.position }}</p>
 24 |                 </div>
 25 |               </div>
 26 |             </div>
 27 |             <div class="p-6">
 28 |               <div class="flex items-center mb-4">
 29 |                 <BriefcaseIcon class="w-5 h-5 text-gray-500 dark:text-gray-400 mr-2" />
 30 |                 <span class="text-gray-700 dark:text-gray-300">{{ student.company }}</span>
 31 |               </div>
 32 |               <div class="flex items-center mb-4">
 33 |                 <GraduationCapIcon class="w-5 h-5 text-gray-500 dark:text-gray-400 mr-2" />
 34 |                 <span class="text-gray-700 dark:text-gray-300">{{ student.education }}</span>
 35 |               </div>
 36 |               <p class="text-gray-600 dark:text-gray-300 mb-4">{{ student.teacherNote }}</p>
 37 |               <div class="flex space-x-3">
 38 |                 <a v-if="student.linkedin" :href="student.linkedin" target="_blank" class="text-gray-500 hover:text-primary-600 dark:hover:text-primary-400">
 39 |                   <LinkedinIcon class="w-5 h-5" />
 40 |                 </a>
 41 |                 <a v-if="student.github" :href="student.github" target="_blank" class="text-gray-500 hover:text-primary-600 dark:hover:text-primary-400">
 42 |                   <GithubIcon class="w-5 h-5" />
 43 |                 </a>
 44 |                 <a v-if="student.website" :href="student.website" target="_blank" class="text-gray-500 hover:text-primary-600 dark:hover:text-primary-400">
 45 |                   <GlobeIcon class="w-5 h-5" />
 46 |                 </a>
 47 |               </div>
 48 |             </div>
 49 |           </div>
 50 |         </div>
 51 |         
 52 |         <!-- Success Stories Map -->
 53 |         <div class="mb-16">
 54 |           <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">{{ $t('students.successMap.title') }}</h2>
 55 |           <div class="relative h-[400px] bg-gray-200 dark:bg-gray-800 rounded-lg overflow-hidden">
 56 |             <img src="/world-map.svg" alt="World Map" class="w-full h-full object-cover opacity-20" />
 57 |             
 58 |             <div 
 59 |               v-for="(marker, index) in successMarkers" 
 60 |               :key="index"
 61 |               :style="{ left: `${marker.x}%`, top: `${marker.y}%` }"
 62 |               class="absolute w-4 h-4 bg-primary-600 rounded-full transform -translate-x-1/2 -translate-y-1/2 cursor-pointer"
 63 |               @mouseenter="activeMarker = marker"
 64 |               @mouseleave="activeMarker = null">
 65 |               <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary-400 opacity-75"></span>
 66 |             </div>
 67 |             
 68 |             <transition name="fade">
 69 |               <div 
 70 |                 v-if="activeMarker"
 71 |                 :style="{ left: `${activeMarker.x}%`, top: `${activeMarker.y}%` }"
 72 |                 class="absolute z-10 w-64 bg-white dark:bg-gray-900 rounded-lg shadow-lg p-4 transform -translate-x-1/2 mt-2">
 73 |                 <h4 class="font-bold text-gray-800 dark:text-white">{{ activeMarker.name }}</h4>
 74 |                 <p class="text-gray-600 dark:text-gray-300 text-sm">{{ activeMarker.position }} at {{ activeMarker.company }}</p>
 75 |                 <p class="text-gray-500 dark:text-gray-400 text-sm">{{ activeMarker.location }}</p>
 76 |               </div>
 77 |             </transition>
 78 |           </div>
 79 |         </div>
 80 |         
 81 |         <!-- Testimonials -->
 82 |         <div>
 83 |           <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">{{ $t('students.testimonials.title') }}</h2>
 84 |           
 85 |           <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
 86 |             <div 
 87 |               v-for="(testimonial, index) in testimonials" 
 88 |               :key="index"
 89 |               class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6"
 90 |               v-motion
 91 |               :initial="{ opacity: 0, x: index % 2 === 0 ? -50 : 50 }"
 92 |               :visible="{ opacity: 1, x: 0, transition: { delay: index * 100, duration: 500 } }">
 93 |               <div class="flex items-start mb-4">
 94 |                 <div class="mr-4">
 95 |                   <img :src="testimonial.avatar" :alt="testimonial.name" class="w-12 h-12 rounded-full" />
 96 |                 </div>
 97 |                 <div>
 98 |                   <h4 class="font-bold text-gray-800 dark:text-white">{{ testimonial.name }}</h4>
 99 |                   <p class="text-gray-500 dark:text-gray-400 text-sm">{{ testimonial.position }}</p>
100 |                 </div>
101 |                 <div class="ml-auto">
102 |                   <QuoteIcon class="w-8 h-8 text-primary-200 dark:text-primary-900" />
103 |                 </div>
104 |               </div>
105 |               <p class="text-gray-600 dark:text-gray-300 italic">{{ testimonial.text }}</p>
106 |               <div class="mt-4 flex">
107 |                 <StarIcon v-for="i in 5" :key="i" class="w-5 h-5" :class="i <= testimonial.rating ? 'text-yellow-500' : 'text-gray-300 dark:text-gray-600'" />
108 |               </div>
109 |             </div>
110 |           </div>
111 |         </div>
112 |       </div>
113 |     </div>
114 |   </template>
115 |   
116 |   <script setup>
117 |   import { ref } from 'vue';
118 |   import { useMotion } from '@vueuse/motion';
119 |   import { BriefcaseIcon, GraduationCapIcon, LinkedinIcon, GithubIcon, GlobeIcon, QuoteIcon, StarIcon } from 'lucide-vue-next';
120 |   
121 |   const activeMarker = ref(null);
122 |   
123 |   const featuredStudents = [
124 |     {
125 |       name: 'Aziz Karimov',
126 |       position: 'Senior Frontend Developer',
127 |       company: 'IT Park Tashkent',
128 |       education: 'TUIT University, Computer Science',
129 |       image: '/student-1.jpg',
130 |       teacherNote: 'Aziz was one of my most dedicated students. I taught him for 3 years, and his progress was remarkable.',
131 |       linkedin: 'https://linkedin.com',
132 |       github: 'https://github.com',
133 |       website: 'https://example.com'
134 |     },
135 |     {
136 |       name: 'Malika Rakhimova',
137 |       position: 'UI/UX Designer',
138 |       company: 'Creative Solutions',
139 |       education: 'National University of Uzbekistan',
140 |       image: '/student-2.jpg',
141 |       teacherNote: 'Malika showed exceptional creativity and attention to detail. She now leads design teams at her company.',
142 |       linkedin: 'https://linkedin.com',
143 |       github: null,
144 |       website: 'https://example.com'
145 |     },
146 |     {
147 |       name: 'Timur Aliyev',
148 |       position: 'Full Stack Developer',
149 |       company: 'Tech Innovators',
150 |       education: 'Samarkand State University',
151 |       image: '/student-3.jpg',
152 |       teacherNote: 'Timur started with no coding experience and is now one of the most skilled developers I know.',
153 |       linkedin: 'https://linkedin.com',
154 |       github: 'https://github.com',
155 |       website: null
156 |     },
157 |     {
158 |       name: 'Nilufar Khamidova',
159 |       position: 'Mobile App Developer',
160 |       company: 'AppWorks',
161 |       education: 'Tashkent University of Information Technologies',
162 |       image: '/student-4.jpg',
163 |       teacherNote: 'Nilufar specialized in mobile development and has published several successful apps.',
164 |       linkedin: 'https://linkedin.com',
165 |       github: 'https://github.com',
166 |       website: 'https://example.com'
167 |     },
168 |     {
169 |       name: 'Rustam Umarov',
170 |       position: 'DevOps Engineer',
171 |       company: 'Cloud Solutions',
172 |       education: 'Turin Polytechnic University in Tashkent',
173 |       image: '/student-5.jpg',
174 |       teacherNote: 'Rustam excelled in backend and infrastructure. He now manages cloud systems for major clients.',
175 |       linkedin: 'https://linkedin.com',
176 |       github: 'https://github.com',
177 |       website: null
178 |     },
179 |     {
180 |       name: 'Zarina Karimova',
181 |       position: 'Data Scientist',
182 |       company: 'Analytics Pro',
183 |       education: 'Webster University Tashkent',
184 |       image: '/student-6.jpg',
185 |       teacherNote: 'Zarina combined her strong math background with programming skills to become an excellent data scientist.',
186 |       linkedin: 'https://linkedin.com',
187 |       github: 'https://github.com',
188 |       website: 'https://example.com'
189 |     }
190 |   ];
191 |   
192 |   const successMarkers = [
193 |     { x: 48, y: 30, name: 'Aziz Karimov', position: 'Senior Frontend Developer', company: 'IT Park', location: 'Tashkent, Uzbekistan' },
194 |     { x: 52, y: 28, name: 'Malika Rakhimova', position: 'UI/UX Designer', company: 'Creative Solutions', location: 'Samarkand, Uzbekistan' },
195 |     { x: 45, y: 20, name: 'Bobur Alimov', position: 'Software Engineer', company: 'Google', location: 'Munich, Germany' },
196 |     { x: 20, y: 30, name: 'Kamila Yusupova', position: 'Product Manager', company: 'Amazon', location: 'Seattle, USA' },
197 |     { x: 80, y: 35, name: 'Timur Kholmatov', position: 'Backend Developer', company: 'ByteDance', location: 'Singapore' },
198 |     { x: 30, y: 25, name: 'Lola Karimova', position: 'Frontend Developer', company: 'Spotify', location: 'Stockholm, Sweden' }
199 |   ];
200 |   
201 |   const testimonials = [
202 |     {
203 |       name: 'Aziz Karimov',
204 |       position: 'Senior Frontend Developer',
205 |       avatar: '/testimonial-1.jpg',
206 |       text: 'The knowledge and mentorship I received completely changed my career path. The practical approach to teaching made complex concepts easy to understand.',
207 |       rating: 5
208 |     },
209 |     {
210 |       name: 'Malika Rakhimova',
211 |       position: 'UI/UX Designer',
212 |       avatar: '/testimonial-2.jpg',
213 |       text: 'The courses are well-structured and the teaching style is exceptional. I learned not just technical skills but also how to approach problems creatively.',
214 |       rating: 5
215 |     },
216 |     {
217 |       name: 'Timur Aliyev',
218 |       position: 'Full Stack Developer',
219 |       avatar: '/testimonial-3.jpg',
220 |       text: 'I started with zero knowledge and now I can build my own web applications. The teacher was always patient and provided excellent guidance.',
221 |       rating: 4
222 |     },
223 |     {
224 |       name: 'Nilufar Khamidova',
225 |       position: 'Mobile App Developer',
226 |       avatar: '/testimonial-4.jpg',
227 |       text: 'The hands-on projects were invaluable for gaining real-world experience. The teacher\'s industry insights helped me understand what employers are looking for.',
228 |       rating: 5
229 |     }
230 |   ];
231 |   </script>
232 |   
233 |   <style scoped>
234 |   .fade-enter-active,
235 |   .fade-leave-active {
236 |     transition: opacity 0.3s ease;
237 |   }
238 |   
239 |   .fade-enter-from,
240 |   .fade-leave-to {
241 |     opacity: 0;
242 |   }
243 |   </style>


--------------------------------------------------------------------------------
/src/views/BlogView.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="py-12 bg-white dark:bg-gray-900">
  3 |       <div class="container mx-auto px-4">
  4 |         <div class="text-center mb-12">
  5 |           <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">{{ $t('blog.title') }}</h1>
  6 |           <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">{{ $t('blog.subtitle') }}</p>
  7 |         </div>
  8 |         
  9 |         <!-- Search and Categories -->
 10 |         <div class="flex flex-col md:flex-row justify-between items-center mb-8">
 11 |           <div class="relative w-full md:w-64 mb-4 md:mb-0">
 12 |             <input 
 13 |               v-model="searchQuery"
 14 |               type="text" 
 15 |               :placeholder="$t('blog.searchPlaceholder')" 
 16 |               class="w-full px-4 py-2 pl-10 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500"
 17 |             />
 18 |             <SearchIcon class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-500 dark:text-gray-400" />
 19 |           </div>
 20 |           
 21 |           <div class="flex flex-wrap gap-2">
 22 |             <button 
 23 |               v-for="tag in popularTags" 
 24 |               :key="tag"
 25 |               @click="toggleTag(tag)"
 26 |               :class="[
 27 |                 'px-3 py-1 text-sm rounded-full transition-colors',
 28 |                 selectedTags.includes(tag)
 29 |                   ? 'bg-primary-600 text-white'
 30 |                   : 'bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-700'
 31 |               ]">
 32 |               #{{ tag }}
 33 |             </button>
 34 |           </div>
 35 |         </div>
 36 |         
 37 |         <!-- Featured Post -->
 38 |         <div v-if="featuredPost" class="mb-12">
 39 |           <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
 40 |             <div class="md:flex">
 41 |               <div class="md:w-1/2">
 42 |                 <img :src="featuredPost.image" :alt="featuredPost.title" class="w-full h-64 md:h-full object-cover" />
 43 |               </div>
 44 |               <div class="p-6 md:w-1/2 flex flex-col">
 45 |                 <div class="flex items-center mb-4">
 46 |                   <span class="px-3 py-1 bg-primary-100 text-primary-600 dark:bg-primary-900 dark:text-primary-300 text-sm font-medium rounded-full">
 47 |                     {{ $t('blog.featured') }}
 48 |                   </span>
 49 |                 </div>
 50 |                 <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">{{ featuredPost.title }}</h2>
 51 |                 <p class="text-gray-600 dark:text-gray-300 mb-6 flex-grow">{{ featuredPost.excerpt }}</p>
 52 |                 <div class="flex items-center justify-between">
 53 |                   <div class="flex items-center">
 54 |                     <img :src="featuredPost.author.avatar" :alt="featuredPost.author.name" class="w-10 h-10 rounded-full mr-3" />
 55 |                     <div>
 56 |                       <div class="text-gray-800 dark:text-white font-medium">{{ featuredPost.author.name }}</div>
 57 |                       <div class="text-gray-500 dark:text-gray-400 text-sm">{{ featuredPost.date }}</div>
 58 |                     </div>
 59 |                   </div>
 60 |                   <router-link :to="`/blog/${featuredPost.id}`" class="text-primary-600 dark:text-primary-400 font-medium hover:underline">
 61 |                     {{ $t('blog.readMore') }}
 62 |                   </router-link>
 63 |                 </div>
 64 |               </div>
 65 |             </div>
 66 |           </div>
 67 |         </div>
 68 |         
 69 |         <!-- Blog Posts Grid -->
 70 |         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
 71 |           <div 
 72 |             v-for="(post, index) in filteredPosts" 
 73 |             :key="post.id"
 74 |             class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"
 75 |             v-motion
 76 |             :initial="{ opacity: 0, y: 50 }"
 77 |             :visible="{ opacity: 1, y: 0, transition: { delay: index * 100, duration: 500 } }">
 78 |             <img :src="post.image" :alt="post.title" class="w-full h-48 object-cover" />
 79 |             <div class="p-6">
 80 |               <div class="flex flex-wrap gap-2 mb-3">
 81 |                 <span 
 82 |                   v-for="tag in post.tags" 
 83 |                   :key="tag"
 84 |                   class="px-2 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs rounded-full">
 85 |                   #{{ tag }}
 86 |                 </span>
 87 |               </div>
 88 |               <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-3">{{ post.title }}</h3>
 89 |               <p class="text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">{{ post.excerpt }}</p>
 90 |               <div class="flex items-center justify-between">
 91 |                 <div class="flex items-center">
 92 |                   <img :src="post.author.avatar" :alt="post.author.name" class="w-8 h-8 rounded-full mr-2" />
 93 |                   <div class="text-gray-500 dark:text-gray-400 text-sm">{{ post.date }}</div>
 94 |                 </div>
 95 |                 <router-link :to="`/blog/${post.id}`" class="text-primary-600 dark:text-primary-400 font-medium hover:underline text-sm">
 96 |                   {{ $t('blog.readMore') }}
 97 |                 </router-link>
 98 |               </div>
 99 |             </div>
100 |           </div>
101 |         </div>
102 |         
103 |         <!-- Pagination -->
104 |         <div class="flex justify-center mt-12">
105 |           <nav class="flex items-center space-x-2">
106 |             <button 
107 |               @click="currentPage > 1 && (currentPage--)"
108 |               :disabled="currentPage === 1"
109 |               class="px-3 py-1 rounded-md bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 disabled:opacity-50">
110 |               <ChevronLeftIcon class="w-5 h-5" />
111 |             </button>
112 |             
113 |             <button 
114 |               v-for="page in totalPages" 
115 |               :key="page"
116 |               @click="currentPage = page"
117 |               :class="[
118 |                 'px-3 py-1 rounded-md',
119 |                 currentPage === page
120 |                   ? 'bg-primary-600 text-white'
121 |                   : 'bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300'
122 |               ]">
123 |               {{ page }}
124 |             </button>
125 |             
126 |             <button 
127 |               @click="currentPage < totalPages && (currentPage++)"
128 |               :disabled="currentPage === totalPages"
129 |               class="px-3 py-1 rounded-md bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 disabled:opacity-50">
130 |               <ChevronRightIcon class="w-5 h-5" />
131 |             </button>
132 |           </nav>
133 |         </div>
134 |       </div>
135 |     </div>
136 |   </template>
137 |   
138 |   <script setup>
139 |   import { ref, computed } from 'vue';
140 |   import { useMotion } from '@vueuse/motion';
141 |   import { SearchIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-vue-next';
142 |   
143 |   const searchQuery = ref('');
144 |   const selectedTags = ref([]);
145 |   const currentPage = ref(1);
146 |   const postsPerPage = 6;
147 |   
148 |   const popularTags = ['vuejs', 'javascript', 'webdev', 'frontend', 'programming', 'tutorial'];
149 |   
150 |   const toggleTag = (tag) => {
151 |     if (selectedTags.value.includes(tag)) {
152 |       selectedTags.value = selectedTags.value.filter(t => t !== tag);
153 |     } else {
154 |       selectedTags.value.push(tag);
155 |     }
156 |     currentPage.value = 1; // Reset to first page when filtering
157 |   };
158 |   
159 |   const featuredPost = {
160 |     id: 1,
161 |     title: 'The Future of Web Development: Trends to Watch in 2023',
162 |     excerpt: 'Explore the emerging technologies and methodologies that are shaping the future of web development. From WebAssembly to Edge Computing, discover what\'s next in the world of web development.',
163 |     image: '/blog-featured.jpg',
164 |     date: 'June 15, 2023',
165 |     author: {
166 |       name: 'John Doe',
167 |       avatar: '/author-avatar.jpg'
168 |     },
169 |     tags: ['webdev', 'future', 'trends']
170 |   };
171 |   
172 |   const blogPosts = [
173 |     {
174 |       id: 2,
175 |       title: 'Getting Started with Vue.js 3 Composition API',
176 |       excerpt: 'Learn how to use the Vue.js 3 Composition API to build more maintainable and scalable components.',
177 |       image: '/blog-vue.jpg',
178 |       date: 'May 28, 2023',
179 |       author: {
180 |         name: 'John Doe',
181 |         avatar: '/author-avatar.jpg'
182 |       },
183 |       tags: ['vuejs', 'javascript', 'tutorial']
184 |     },
185 |     {
186 |       id: 3,
187 |       title: 'Mastering CSS Grid Layout',
188 |       excerpt: 'A comprehensive guide to using CSS Grid Layout for creating complex web layouts with ease.',
189 |       image: '/blog-css.jpg',
190 |       date: 'May 15, 2023',
191 |       author: {
192 |         name: 'John Doe',
193 |         avatar: '/author-avatar.jpg'
194 |       },
195 |       tags: ['css', 'webdev', 'frontend']
196 |     },
197 |     {
198 |       id: 4,
199 |       title: 'JavaScript Array Methods You Should Know',
200 |       excerpt: 'Explore the most useful JavaScript array methods that will make your code cleaner and more efficient.',
201 |       image: '/blog-js.jpg',
202 |       date: 'April 30, 2023',
203 |       author: {
204 |         name: 'John Doe',
205 |         avatar: '/author-avatar.jpg'
206 |       },
207 |       tags: ['javascript', 'programming', 'tutorial']
208 |     },
209 |     {
210 |       id: 5,
211 |       title: 'Building Responsive Websites with Tailwind CSS',
212 |       excerpt: 'Learn how to use Tailwind CSS to create beautiful, responsive websites without writing custom CSS.',
213 |       image: '/blog-tailwind.jpg',
214 |       date: 'April 22, 2023',
215 |       author: {
216 |         name: 'John Doe',
217 |         avatar: '/author-avatar.jpg'
218 |       },
219 |       tags: ['tailwindcss', 'css', 'frontend']
220 |     },
221 |     {
222 |       id: 6,
223 |       title: 'Introduction to Server-Side Rendering with Nuxt.js',
224 |       excerpt: 'Discover the benefits of server-side rendering and how to implement it using Nuxt.js.',
225 |       image: '/blog-nuxt.jpg',
226 |       date: 'April 10, 2023',
227 |       author: {
228 |         name: 'John Doe',
229 |         avatar: '/author-avatar.jpg'
230 |       },
231 |       tags: ['vuejs', 'nuxtjs', 'ssr']
232 |     },
233 |     {
234 |       id: 7,
235 |       title: 'State Management Patterns in Vue.js',
236 |       excerpt: 'An overview of different state management patterns in Vue.js applications, from simple to complex.',
237 |       image: '/blog-state.jpg',
238 |       date: 'March 28, 2023',
239 |       author: {
240 |         name: 'John Doe',
241 |         avatar: '/author-avatar.jpg'
242 |       },
243 |       tags: ['vuejs', 'javascript', 'statemanagement']
244 |     },
245 |     {
246 |       id: 8,
247 |       title: 'Optimizing Web Performance: A Developer\'s Guide',
248 |       excerpt: 'Learn practical techniques to improve the performance of your web applications.',
249 |       image: '/blog-performance.jpg',
250 |       date: 'March 15, 2023',
251 |       author: {
252 |         name: 'John Doe',
253 |         avatar: '/author-avatar.jpg'
254 |       },
255 |       tags: ['performance', 'webdev', 'optimization']
256 |     },
257 |     {
258 |       id: 9,
259 |       title: 'Building RESTful APIs with Node.js and Express',
260 |       excerpt: 'A step-by-step guide to creating robust RESTful APIs using Node.js and Express.',
261 |       image: '/blog-api.jpg',
262 |       date: 'March 5, 2023',
263 |       author: {
264 |         name: 'John Doe',
265 |         avatar: '/author-avatar.jpg'
266 |       },
267 |       tags: ['nodejs', 'api', 'backend']
268 |     },
269 |     {
270 |       id: 10,
271 |       title: 'Introduction to TypeScript for JavaScript Developers',
272 |       excerpt: 'Learn how TypeScript can improve your JavaScript development experience with static typing.',
273 |       image: '/blog-typescript.jpg',
274 |       date: 'February 20, 2023',
275 |       author: {
276 |         name: 'John Doe',
277 |         avatar: '/author-avatar.jpg'
278 |       },
279 |       tags: ['typescript', 'javascript', 'programming']
280 |     }
281 |   ];
282 |   
283 |   const filteredPosts = computed(() => {
284 |     let result = [...blogPosts];
285 |     
286 |     // Filter by search query
287 |     if (searchQuery.value) {
288 |       const query = searchQuery.value.toLowerCase();
289 |       result = result.filter(post => 
290 |         post.title.toLowerCase().includes(query) || 
291 |         post.excerpt.toLowerCase().includes(query) ||
292 |         post.tags.some(tag => tag.toLowerCase().includes(query))
293 |       );
294 |     }
295 |     
296 |     // Filter by selected tags
297 |     if (selectedTags.value.length > 0) {
298 |       result = result.filter(post => 
299 |         selectedTags.value.every(tag => post.tags.includes(tag))
300 |       );
301 |     }
302 |     
303 |     return result;
304 |   });
305 |   
306 |   const paginatedPosts = computed(() => {
307 |     const startIndex = (currentPage.value - 1) * postsPerPage;
308 |     return filteredPosts.value.slice(startIndex, startIndex + postsPerPage);
309 |   });
310 |   
311 |   const totalPages = computed(() => {
312 |     return Math.ceil(filteredPosts.value.length / postsPerPage);
313 |   });
314 |   </script>


--------------------------------------------------------------------------------
/src/views/AchievementsVIew.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="py-12 bg-white dark:bg-gray-900">
  3 |       <div class="container mx-auto px-4">
  4 |         <div class="text-center mb-12">
  5 |           <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">{{ $t('achievements.title') }}</h1>
  6 |           <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">{{ $t('achievements.subtitle') }}</p>
  7 |         </div>
  8 |         
  9 |         <!-- Tabs -->
 10 |         <div class="flex flex-wrap justify-center mb-8">
 11 |           <button 
 12 |             v-for="tab in tabs" 
 13 |             :key="tab.id"
 14 |             @click="activeTab = tab.id"
 15 |             :class="[
 16 |               'px-6 py-2 mx-2 mb-2 rounded-full font-medium transition-colors',
 17 |               activeTab === tab.id 
 18 |                 ? 'bg-primary-600 text-white' 
 19 |                 : 'bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-700'
 20 |             ]">
 21 |             {{ $t(tab.label) }}
 22 |           </button>
 23 |         </div>
 24 |         
 25 |         <!-- Certificates -->
 26 |         <div v-if="activeTab === 'certificates'" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 27 |           <div 
 28 |             v-for="(certificate, index) in certificates" 
 29 |             :key="index"
 30 |             @click="openModal(certificate)"
 31 |             class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden cursor-pointer transform hover:scale-105 transition-transform"
 32 |             v-motion
 33 |             :initial="{ opacity: 0, y: 50 }"
 34 |             :visible="{ opacity: 1, y: 0, transition: { delay: index * 100, duration: 500 } }">
 35 |             <img :src="certificate.image" :alt="certificate.title" class="w-full h-48 object-cover" />
 36 |             <div class="p-4">
 37 |               <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">{{ certificate.title }}</h3>
 38 |               <p class="text-gray-600 dark:text-gray-300 text-sm mb-2">{{ certificate.issuer }}</p>
 39 |               <div class="flex justify-between items-center">
 40 |                 <span class="text-gray-500 dark:text-gray-400 text-sm">{{ certificate.date }}</span>
 41 |                 <span class="text-primary-600 dark:text-primary-400">
 42 |                   <SearchIcon class="w-5 h-5" />
 43 |                 </span>
 44 |               </div>
 45 |             </div>
 46 |           </div>
 47 |         </div>
 48 |         
 49 |         <!-- Courses -->
 50 |         <div v-if="activeTab === 'courses'" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 51 |           <div 
 52 |             v-for="(course, index) in taughtCourses" 
 53 |             :key="index"
 54 |             @click="openModal(course)"
 55 |             class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden cursor-pointer transform hover:scale-105 transition-transform"
 56 |             v-motion
 57 |             :initial="{ opacity: 0, y: 50 }"
 58 |             :visible="{ opacity: 1, y: 0, transition: { delay: index * 100, duration: 500 } }">
 59 |             <img :src="course.image" :alt="course.title" class="w-full h-48 object-cover" />
 60 |             <div class="p-4">
 61 |               <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">{{ course.title }}</h3>
 62 |               <p class="text-gray-600 dark:text-gray-300 text-sm mb-2">{{ course.location }}</p>
 63 |               <div class="flex justify-between items-center">
 64 |                 <span class="text-gray-500 dark:text-gray-400 text-sm">{{ course.date }}</span>
 65 |                 <span class="text-primary-600 dark:text-primary-400">
 66 |                   <UsersIcon class="w-5 h-5" />
 67 |                   <span class="ml-1">{{ course.students }}</span>
 68 |                 </span>
 69 |               </div>
 70 |             </div>
 71 |           </div>
 72 |         </div>
 73 |         
 74 |         <!-- Awards -->
 75 |         <div v-if="activeTab === 'awards'" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 76 |           <div 
 77 |             v-for="(award, index) in awards" 
 78 |             :key="index"
 79 |             @click="openModal(award)"
 80 |             class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden cursor-pointer transform hover:scale-105 transition-transform"
 81 |             v-motion
 82 |             :initial="{ opacity: 0, y: 50 }"
 83 |             :visible="{ opacity: 1, y: 0, transition: { delay: index * 100, duration: 500 } }">
 84 |             <div class="bg-primary-600 dark:bg-primary-800 p-4 flex items-center justify-center">
 85 |               <AwardIcon class="w-16 h-16 text-white" />
 86 |             </div>
 87 |             <div class="p-4">
 88 |               <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">{{ award.title }}</h3>
 89 |               <p class="text-gray-600 dark:text-gray-300 text-sm mb-2">{{ award.presenter }}</p>
 90 |               <div class="flex justify-between items-center">
 91 |                 <span class="text-gray-500 dark:text-gray-400 text-sm">{{ award.date }}</span>
 92 |                 <span class="text-primary-600 dark:text-primary-400">
 93 |                   <TrophyIcon class="w-5 h-5" />
 94 |                 </span>
 95 |               </div>
 96 |             </div>
 97 |           </div>
 98 |         </div>
 99 |         
100 |         <!-- Modal -->
101 |         <transition name="fade">
102 |           <div v-if="selectedItem" class="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4" @click="closeModal">
103 |             <div class="bg-white dark:bg-gray-800 rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto" @click.stop>
104 |               <div class="relative">
105 |                 <button @click="closeModal" class="absolute top-4 right-4 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200">
106 |                   <XIcon class="w-6 h-6" />
107 |                 </button>
108 |                 
109 |                 <div v-if="selectedItem.image" class="w-full h-64 md:h-80">
110 |                   <img :src="selectedItem.image" :alt="selectedItem.title" class="w-full h-full object-cover" />
111 |                 </div>
112 |                 
113 |                 <div class="p-6">
114 |                   <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">{{ selectedItem.title }}</h3>
115 |                   
116 |                   <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
117 |                     <div v-if="selectedItem.issuer || selectedItem.presenter || selectedItem.location" class="flex items-center">
118 |                       <BuildingIcon class="w-5 h-5 text-gray-500 dark:text-gray-400 mr-2" />
119 |                       <span class="text-gray-700 dark:text-gray-300">
120 |                         {{ selectedItem.issuer || selectedItem.presenter || selectedItem.location }}
121 |                       </span>
122 |                     </div>
123 |                     
124 |                     <div class="flex items-center">
125 |                       <CalendarIcon class="w-5 h-5 text-gray-500 dark:text-gray-400 mr-2" />
126 |                       <span class="text-gray-700 dark:text-gray-300">{{ selectedItem.date }}</span>
127 |                     </div>
128 |                     
129 |                     <div v-if="selectedItem.students" class="flex items-center">
130 |                       <UsersIcon class="w-5 h-5 text-gray-500 dark:text-gray-400 mr-2" />
131 |                       <span class="text-gray-700 dark:text-gray-300">{{ selectedItem.students }} students</span>
132 |                     </div>
133 |                   </div>
134 |                   
135 |                   <p class="text-gray-600 dark:text-gray-300 mb-6">{{ selectedItem.description }}</p>
136 |                   
137 |                   <div v-if="selectedItem.skills" class="mb-6">
138 |                     <h4 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Skills Covered:</h4>
139 |                     <div class="flex flex-wrap gap-2">
140 |                       <span 
141 |                         v-for="(skill, index) in selectedItem.skills" 
142 |                         :key="index"
143 |                         class="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full text-sm">
144 |                         {{ skill }}
145 |                       </span>
146 |                     </div>
147 |                   </div>
148 |                   
149 |                   <a 
150 |                     v-if="selectedItem.verifyLink" 
151 |                     :href="selectedItem.verifyLink" 
152 |                     target="_blank" 
153 |                     class="inline-flex items-center text-primary-600 dark:text-primary-400 font-medium">
154 |                     {{ $t('achievements.verifyButton') }}
155 |                     <ExternalLinkIcon class="w-4 h-4 ml-1" />
156 |                   </a>
157 |                 </div>
158 |               </div>
159 |             </div>
160 |           </div>
161 |         </transition>
162 |       </div>
163 |     </div>
164 |   </template>
165 |   
166 |   <script setup>
167 |   import { ref } from 'vue';
168 |   import { useMotion } from '@vueuse/motion';
169 |   import { SearchIcon, UsersIcon, AwardIcon, TrophyIcon, XIcon, BuildingIcon, CalendarIcon, ExternalLinkIcon } from 'lucide-vue-next';
170 |   
171 |   const activeTab = ref('certificates');
172 |   const selectedItem = ref(null);
173 |   
174 |   const tabs = [
175 |     { id: 'certificates', label: 'achievements.tabs.certificates' },
176 |     { id: 'courses', label: 'achievements.tabs.courses' },
177 |     { id: 'awards', label: 'achievements.tabs.awards' }
178 |   ];
179 |   
180 |   const certificates = [
181 |     {
182 |       title: 'Advanced Vue.js Development',
183 |       issuer: 'Vue Mastery',
184 |       date: 'June 2023',
185 |       image: '/certificate-1.jpg',
186 |       description: 'This certification validates expertise in building complex applications with Vue.js, including state management with Vuex, routing, and advanced component patterns.',
187 |       verifyLink: 'https://example.com/verify',
188 |       skills: ['Vue.js', 'Vuex', 'Vue Router', 'Composition API']
189 |     },
190 |     {
191 |       title: 'Full Stack Web Development',
192 |       issuer: 'Udacity',
193 |       date: 'March 2022',
194 |       image: '/certificate-2.jpg',
195 |       description: 'Comprehensive certification covering both frontend and backend development, including React, Node.js, Express, and MongoDB.',
196 |       verifyLink: 'https://example.com/verify',
197 |       skills: ['JavaScript', 'React', 'Node.js', 'MongoDB']
198 |     },
199 |     {
200 |       title: 'UI/UX Design Principles',
201 |       issuer: 'Interaction Design Foundation',
202 |       date: 'November 2021',
203 |       image: '/certificate-3.jpg',
204 |       description: 'Certification in user interface and user experience design principles, focusing on creating intuitive and accessible web applications.',
205 |       verifyLink: 'https://example.com/verify',
206 |       skills: ['UI Design', 'UX Research', 'Wireframing', 'Prototyping']
207 |     },
208 |     {
209 |       title: 'JavaScript Algorithms and Data Structures',
210 |       issuer: 'freeCodeCamp',
211 |       date: 'August 2021',
212 |       image: '/certificate-4.jpg',
213 |       description: 'Certification in advanced JavaScript concepts, algorithms, and data structures implementation.',
214 |       verifyLink: 'https://example.com/verify',
215 |       skills: ['JavaScript', 'Algorithms', 'Data Structures', 'Problem Solving']
216 |     },
217 |     {
218 |       title: 'Responsive Web Design',
219 |       issuer: 'freeCodeCamp',
220 |       date: 'May 2021',
221 |       image: '/certificate-5.jpg',
222 |       description: 'Certification in creating responsive web designs using HTML, CSS, and modern layout techniques like Flexbox and Grid.',
223 |       verifyLink: 'https://example.com/verify',
224 |       skills: ['HTML', 'CSS', 'Flexbox', 'CSS Grid']
225 |     }
226 |   ];
227 |   
228 |   const taughtCourses = [
229 |     {
230 |       title: 'Modern Frontend Development',
231 |       location: 'IT Park Tashkent',
232 |       date: 'Jan - Mar 2023',
233 |       students: 45,
234 |       image: '/course-taught-1.jpg',
235 |       description: 'A comprehensive course on modern frontend development with Vue.js, covering components, state management, routing, and best practices.',
236 |       skills: ['Vue.js', 'JavaScript', 'HTML/CSS', 'Responsive Design']
237 |     },
238 |     {
239 |       title: 'Web Development Bootcamp',
240 |       location: 'Digital City Samarkand',
241 |       date: 'Apr - Jun 2022',
242 |       students: 30,
243 |       image: '/course-taught-2.jpg',
244 |       description: 'An intensive bootcamp covering full stack web development from HTML/CSS basics to building complete applications with Node.js and MongoDB.',
245 |       skills: ['HTML/CSS', 'JavaScript', 'Node.js', 'MongoDB']
246 |     },
247 |     {
248 |       title: 'JavaScript Fundamentals',
249 |       location: 'TUIT University',
250 |       date: 'Sep - Dec 2022',
251 |       students: 60,
252 |       image: '/course-taught-3.jpg',
253 |       description: 'A foundational course on JavaScript programming, covering syntax, functions, objects, arrays, and modern ES6+ features.',
254 |       skills: ['JavaScript', 'ES6+', 'DOM Manipulation', 'Async Programming']
255 |     },
256 |     {
257 |       title: 'Mobile App Development with Vue',
258 |       location: 'Online Course',
259 |       date: 'Jul - Sep 2022',
260 |       students: 120,
261 |       image: '/course-taught-4.jpg',
262 |       description: 'A specialized course on building mobile applications using Vue.js and Ionic framework.',
263 |       skills: ['Vue.js', 'Ionic', 'Mobile UI/UX', 'Progressive Web Apps']
264 |     }
265 |   ];
266 |   
267 |   const awards = [
268 |     {
269 |       title: 'Best Teacher of the Year',
270 |       presenter: 'IT Education Association',
271 |       date: 'December 2022',
272 |       description: 'Awarded for excellence in teaching and significant contribution to IT education in Uzbekistan.',
273 |     },
274 |     {
275 |       title: 'Innovation in Teaching',
276 |       presenter: 'EdTech Summit',
277 |       date: 'October 2022',
278 |       description: 'Recognized for implementing innovative teaching methods and technologies in the classroom.',
279 |     },
280 |     {
281 |       title: 'Community Contribution Award',
282 |       presenter: 'Developer Community Uzbekistan',
283 |       date: 'June 2022',
284 |       description: 'Awarded for outstanding contribution to the local developer community through workshops, meetups, and mentorship.',
285 |     }
286 |   ];
287 |   
288 |   const openModal = (item) => {
289 |     selectedItem.value = item;
290 |     document.body.style.overflow = 'hidden';
291 |   };
292 |   
293 |   const closeModal = () => {
294 |     selectedItem.value = null;
295 |     document.body.style.overflow = '';
296 |   };
297 |   </script>
298 |   
299 |   <style scoped>
300 |   .fade-enter-active,
301 |   .fade-leave-active {
302 |     transition: opacity 0.3s ease;
303 |   }
304 |   
305 |   .fade-enter-from,
306 |   .fade-leave-to {
307 |     opacity: 0;
308 |   }
309 |   </style>


--------------------------------------------------------------------------------
/src/views/CoursesView.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="py-12 bg-white dark:bg-gray-900">
  3 |       <div class="container mx-auto px-4">
  4 |         <div class="text-center mb-12">
  5 |           <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">{{ $t('courses.title') }}</h1>
  6 |           <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">{{ $t('courses.subtitle') }}</p>
  7 |         </div>
  8 |         
  9 |         <!-- Course Categories -->
 10 |         <div class="flex flex-wrap justify-center mb-8">
 11 |           <button 
 12 |             v-for="category in categories" 
 13 |             :key="category.id"
 14 |             @click="activeCategory = category.id"
 15 |             :class="[
 16 |               'px-6 py-2 mx-2 mb-2 rounded-full font-medium transition-colors',
 17 |               activeCategory === category.id 
 18 |                 ? 'bg-primary-600 text-white' 
 19 |                 : 'bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-700'
 20 |             ]">
 21 |             {{ $t(category.label) }}
 22 |           </button>
 23 |         </div>
 24 |         
 25 |         <!-- Courses Grid -->
 26 |         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
 27 |           <div 
 28 |             v-for="(course, index) in filteredCourses" 
 29 |             :key="index"
 30 |             class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"
 31 |             v-motion
 32 |             :initial="{ opacity: 0, y: 50 }"
 33 |             :visible="{ opacity: 1, y: 0, transition: { delay: index * 100, duration: 500 } }">
 34 |             <div class="relative">
 35 |               <img :src="course.image" :alt="course.title" class="w-full h-48 object-cover" />
 36 |               <div class="absolute top-0 right-0 m-2">
 37 |                 <span 
 38 |                   :class="[
 39 |                     'px-3 py-1 text-xs font-medium rounded-full',
 40 |                     course.isPaid 
 41 |                       ? 'bg-primary-100 text-primary-600 dark:bg-primary-900 dark:text-primary-300' 
 42 |                       : 'bg-green-100 text-green-600 dark:bg-green-900 dark:text-green-300'
 43 |                   ]">
 44 |                   {{ course.isPaid ? $t('courses.paid') : $t('courses.free') }}
 45 |                 </span>
 46 |               </div>
 47 |             </div>
 48 |             
 49 |             <div class="p-6">
 50 |               <div class="flex justify-between items-start mb-4">
 51 |                 <h3 class="text-xl font-bold text-gray-800 dark:text-white">{{ course.title }}</h3>
 52 |                 <span class="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-medium rounded-full">
 53 |                   {{ course.category }}
 54 |                 </span>
 55 |               </div>
 56 |               
 57 |               <p class="text-gray-600 dark:text-gray-300 mb-4">{{ course.description }}</p>
 58 |               
 59 |               <div class="grid grid-cols-2 gap-4 mb-4">
 60 |                 <div class="flex items-center">
 61 |                   <ClockIcon class="w-4 h-4 text-gray-500 dark:text-gray-400 mr-2" />
 62 |                   <span class="text-gray-600 dark:text-gray-300 text-sm">{{ course.duration }}</span>
 63 |                 </div>
 64 |                 <div class="flex items-center">
 65 |                   <BookOpenIcon class="w-4 h-4 text-gray-500 dark:text-gray-400 mr-2" />
 66 |                   <span class="text-gray-600 dark:text-gray-300 text-sm">{{ course.lessons }} lessons</span>
 67 |                 </div>
 68 |                 <div class="flex items-center">
 69 |                   <UsersIcon class="w-4 h-4 text-gray-500 dark:text-gray-400 mr-2" />
 70 |                   <span class="text-gray-600 dark:text-gray-300 text-sm">{{ course.students }} students</span>
 71 |                 </div>
 72 |                 <div class="flex items-center">
 73 |                   <StarIcon class="w-4 h-4 text-yellow-500 mr-1" />
 74 |                   <span class="text-gray-600 dark:text-gray-300 text-sm">{{ course.rating }} ({{ course.reviews }})</span>
 75 |                 </div>
 76 |               </div>
 77 |               
 78 |               <div class="flex justify-between items-center">
 79 |                 <span v-if="course.isPaid" class="font-bold text-gray-800 dark:text-white">{{ course.price }}</span>
 80 |                 <span v-else class="font-bold text-green-600 dark:text-green-400">{{ $t('courses.free') }}</span>
 81 |                 
 82 |                 <router-link :to="`/courses/${course.id}`" class="px-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700 transition-colors">
 83 |                   {{ $t('courses.viewButton') }}
 84 |                 </router-link>
 85 |               </div>
 86 |             </div>
 87 |           </div>
 88 |         </div>
 89 |         
 90 |         <!-- YouTube Lessons -->
 91 |         <div class="mt-16">
 92 |           <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">{{ $t('courses.youtube.title') }}</h2>
 93 |           
 94 |           <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 95 |             <div 
 96 |               v-for="(video, index) in youtubeVideos" 
 97 |               :key="index"
 98 |               class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"
 99 |               v-motion
100 |               :initial="{ opacity: 0, y: 50 }"
101 |               :visible="{ opacity: 1, y: 0, transition: { delay: index * 100, duration: 500 } }">
102 |               <div class="relative">
103 |                 <img :src="video.thumbnail" :alt="video.title" class="w-full h-48 object-cover" />
104 |                 <div class="absolute inset-0 flex items-center justify-center">
105 |                   <a :href="video.url" target="_blank" class="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-colors">
106 |                     <PlayIcon class="w-8 h-8 text-white" />
107 |                   </a>
108 |                 </div>
109 |               </div>
110 |               
111 |               <div class="p-4">
112 |                 <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2 line-clamp-2">{{ video.title }}</h3>
113 |                 <div class="flex justify-between items-center text-sm text-gray-500 dark:text-gray-400">
114 |                   <span>{{ video.views }} views</span>
115 |                   <span>{{ video.date }}</span>
116 |                 </div>
117 |               </div>
118 |             </div>
119 |           </div>
120 |           
121 |           <div class="text-center mt-8">
122 |             <a href="https://youtube.com" target="_blank" class="inline-flex items-center text-primary-600 dark:text-primary-400 font-medium">
123 |               {{ $t('courses.youtube.viewAllButton') }}
124 |               <ExternalLinkIcon class="w-4 h-4 ml-1" />
125 |             </a>
126 |           </div>
127 |         </div>
128 |         
129 |         <!-- Downloads Section -->
130 |         <div class="mt-16">
131 |           <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">{{ $t('courses.downloads.title') }}</h2>
132 |           
133 |           <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
134 |             <div 
135 |               v-for="(download, index) in downloads" 
136 |               :key="index"
137 |               class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6"
138 |               v-motion
139 |               :initial="{ opacity: 0, y: 50 }"
140 |               :visible="{ opacity: 1, y: 0, transition: { delay: index * 100, duration: 500 } }">
141 |               <div class="flex items-center mb-4">
142 |                 <div class="w-12 h-12 rounded-lg bg-primary-100 dark:bg-primary-900 flex items-center justify-center mr-4">
143 |                   <component :is="getFileIcon(download.type)" class="w-6 h-6 text-primary-600 dark:text-primary-400" />
144 |                 </div>
145 |                 <div>
146 |                   <h3 class="text-lg font-semibold text-gray-800 dark:text-white">{{ download.title }}</h3>
147 |                   <p class="text-gray-500 dark:text-gray-400 text-sm">{{ download.size }}</p>
148 |                 </div>
149 |               </div>
150 |               
151 |               <p class="text-gray-600 dark:text-gray-300 mb-4">{{ download.description }}</p>
152 |               
153 |               <div class="flex justify-between items-center">
154 |                 <span class="text-gray-500 dark:text-gray-400 text-sm">{{ download.downloads }} downloads</span>
155 |                 <a :href="download.url" download class="inline-flex items-center text-primary-600 dark:text-primary-400 font-medium">
156 |                   {{ $t('courses.downloads.downloadButton') }}
157 |                   <DownloadIcon class="w-4 h-4 ml-1" />
158 |                 </a>
159 |               </div>
160 |             </div>
161 |           </div>
162 |         </div>
163 |       </div>
164 |     </div>
165 |   </template>
166 |   
167 |   <script setup>
168 |   import { ref, computed } from 'vue';
169 |   import { useMotion } from '@vueuse/motion';
170 |   import { 
171 |     ClockIcon, BookOpenIcon, UsersIcon, StarIcon, PlayIcon, 
172 |     ExternalLinkIcon, DownloadIcon, FileTextIcon, FileIcon, 
173 |     ImageIcon, FileArchiveIcon 
174 |   } from 'lucide-vue-next';
175 |   
176 |   const activeCategory = ref('all');
177 |   
178 |   const categories = [
179 |     { id: 'all', label: 'courses.categories.all' },
180 |     { id: 'programming', label: 'courses.categories.programming' },
181 |     { id: 'design', label: 'courses.categories.design' },
182 |     { id: 'frontend', label: 'courses.categories.frontend' },
183 |     { id: 'backend', label: 'courses.categories.backend' }
184 |   ];
185 |   
186 |   const courses = [
187 |     {
188 |       id: 1,
189 |       title: 'Web Development Fundamentals',
190 |       category: 'Programming',
191 |       description: 'Learn the basics of HTML, CSS, and JavaScript to build modern websites.',
192 |       duration: '8 weeks',
193 |       lessons: 24,
194 |       students: 1250,
195 |       rating: 4.8,
196 |       reviews: 320,
197 |       isPaid: true,
198 |       price: '$49.99',
199 |       image: '/course-web.jpg'
200 |     },
201 |     {
202 |       id: 2,
203 |       title: 'Advanced Vue.js',
204 |       category: 'Frontend',
205 |       description: 'Master Vue.js and build complex single-page applications.',
206 |       duration: '10 weeks',
207 |       lessons: 32,
208 |       students: 850,
209 |       rating: 4.9,
210 |       reviews: 210,
211 |       isPaid: true,
212 |       price: '$69.99',
213 |       image: '/course-vue.jpg'
214 |     },
215 |     {
216 |       id: 3,
217 |       title: 'UI/UX Design Principles',
218 |       category: 'Design',
219 |       description: 'Learn the fundamentals of user interface and user experience design.',
220 |       duration: '6 weeks',
221 |       lessons: 18,
222 |       students: 720,
223 |       rating: 4.7,
224 |       reviews: 180,
225 |       isPaid: true,
226 |       price: '$59.99',
227 |       image: '/course-design.jpg'
228 |     },
229 |     {
230 |       id: 4,
231 |       title: 'Node.js Backend Development',
232 |       category: 'Backend',
233 |       description: 'Build scalable backend services with Node.js, Express, and MongoDB.',
234 |       duration: '12 weeks',
235 |       lessons: 36,
236 |       students: 680,
237 |       rating: 4.8,
238 |       reviews: 150,
239 |       isPaid: true,
240 |       price: '$79.99',
241 |       image: '/course-node.jpg'
242 |     },
243 |     {
244 |       id: 5,
245 |       title: 'JavaScript Basics',
246 |       category: 'Programming',
247 |       description: 'A beginner-friendly introduction to JavaScript programming.',
248 |       duration: '4 weeks',
249 |       lessons: 12,
250 |       students: 2100,
251 |       rating: 4.6,
252 |       reviews: 420,
253 |       isPaid: false,
254 |       price: 'Free',
255 |       image: '/course-js.jpg'
256 |     },
257 |     {
258 |       id: 6,
259 |       title: 'Responsive Web Design',
260 |       category: 'Frontend',
261 |       description: 'Learn to create websites that work on any device and screen size.',
262 |       duration: '5 weeks',
263 |       lessons: 15,
264 |       students: 1800,
265 |       rating: 4.7,
266 |       reviews: 360,
267 |       isPaid: false,
268 |       price: 'Free',
269 |       image: '/course-responsive.jpg'
270 |     }
271 |   ];
272 |   
273 |   const filteredCourses = computed(() => {
274 |     if (activeCategory.value === 'all') {
275 |       return courses;
276 |     }
277 |     return courses.filter(course => course.category.toLowerCase() === activeCategory.value);
278 |   });
279 |   
280 |   const youtubeVideos = [
281 |     {
282 |       title: 'Vue.js 3 Composition API Tutorial',
283 |       thumbnail: '/youtube-1.jpg',
284 |       url: 'https://youtube.com',
285 |       views: '45K',
286 |       date: '2 months ago'
287 |     },
288 |     {
289 |       title: 'Building a Responsive Website with Tailwind CSS',
290 |       thumbnail: '/youtube-2.jpg',
291 |       url: 'https://youtube.com',
292 |       views: '32K',
293 |       date: '3 months ago'
294 |     },
295 |     {
296 |       title: 'JavaScript Array Methods Every Developer Should Know',
297 |       thumbnail: '/youtube-3.jpg',
298 |       url: 'https://youtube.com',
299 |       views: '78K',
300 |       date: '1 month ago'
301 |     },
302 |     {
303 |       title: 'CSS Grid Layout Tutorial for Beginners',
304 |       thumbnail: '/youtube-4.jpg',
305 |       url: 'https://youtube.com',
306 |       views: '25K',
307 |       date: '4 months ago'
308 |     },
309 |     {
310 |       title: 'Node.js REST API Tutorial',
311 |       thumbnail: '/youtube-5.jpg',
312 |       url: 'https://youtube.com',
313 |       views: '36K',
314 |       date: '2 months ago'
315 |     },
316 |     {
317 |       title: 'Vue.js State Management with Pinia',
318 |       thumbnail: '/youtube-6.jpg',
319 |       url: 'https://youtube.com',
320 |       views: '18K',
321 |       date: '2 weeks ago'
322 |     }
323 |   ];
324 |   
325 |   const downloads = [
326 |     {
327 |       title: 'Web Development Cheat Sheet',
328 |       type: 'pdf',
329 |       size: '2.4 MB',
330 |       description: 'A comprehensive cheat sheet covering HTML, CSS, and JavaScript basics.',
331 |       downloads: 3250,
332 |       url: '/downloads/web-dev-cheatsheet.pdf'
333 |     },
334 |     {
335 |       title: 'Vue.js Project Starter',
336 |       type: 'zip',
337 |       size: '1.8 MB',
338 |       description: 'A starter template for Vue.js projects with best practices and folder structure.',
339 |       downloads: 1850,
340 |       url: '/downloads/vue-starter.zip'
341 |     },
342 |     {
343 |       title: 'UI Design Resources Pack',
344 |       type: 'image',
345 |       size: '15.6 MB',
346 |       description: 'A collection of UI design resources including icons, illustrations, and templates.',
347 |       downloads: 2100,
348 |       url: '/downloads/ui-resources.zip'
349 |     },
350 |     {
351 |       title: 'JavaScript Algorithms Collection',
352 |       type: 'text',
353 |       size: '850 KB',
354 |       description: 'A collection of common algorithms implemented in JavaScript with explanations.',
355 |       downloads: 1650,
356 |       url: '/downloads/js-algorithms.js'
357 |     },
358 |     {
359 |       title: 'Responsive Design Guide',
360 |       type: 'pdf',
361 |       size: '3.2 MB',
362 |       description: 'A comprehensive guide to responsive web design principles and techniques.',
363 |       downloads: 2800,
364 |       url: '/downloads/responsive-guide.pdf'
365 |     },
366 |     {
367 |       title: 'Node.js Backend Boilerplate',
368 |       type: 'zip',
369 |       size: '2.1 MB',
370 |       description: 'A boilerplate for Node.js backend projects with Express, MongoDB, and authentication.',
371 |       downloads: 1450,
372 |       url: '/downloads/node-boilerplate.zip'
373 |     }
374 |   ];
375 |   
376 |   const getFileIcon = (type) => {
377 |     switch (type) {
378 |       case 'pdf':
379 |         return FileTextIcon;
380 |       case 'image':
381 |         return ImageIcon;
382 |       case 'zip':
383 |         return FileArchiveIcon;
384 |       default:
385 |         return FileIcon;
386 |     }
387 |   };
388 |   </script>


--------------------------------------------------------------------------------
/src/views/ScheduleView.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="py-12 bg-white dark:bg-gray-900">
  3 |       <div class="container mx-auto px-4">
  4 |         <div class="text-center mb-12">
  5 |           <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">{{ $t('schedule.title') }}</h1>
  6 |           <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">{{ $t('schedule.subtitle') }}</p>
  7 |         </div>
  8 |         
  9 |         <!-- Current Time -->
 10 |         <div class="flex flex-col md:flex-row items-center justify-center mb-12 gap-6">
 11 |           <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 text-center w-full md:w-auto">
 12 |             <h2 class="text-lg font-semibold text-gray-600 dark:text-gray-300 mb-2">{{ $t('schedule.currentTime') }}</h2>
 13 |             <div class="text-4xl font-bold text-gray-800 dark:text-white">{{ currentTime }}</div>
 14 |           </div>
 15 |           
 16 |           <div v-if="currentClass" class="bg-primary-600 dark:bg-primary-800 rounded-lg shadow-md p-6 text-center w-full md:w-auto">
 17 |             <h2 class="text-lg font-semibold text-white/80 mb-2">{{ $t('schedule.currentClass') }}</h2>
 18 |             <div class="text-2xl font-bold text-white mb-1">{{ currentClass.title }}</div>
 19 |             <div class="text-white/80">{{ currentClass.time }}</div>
 20 |           </div>
 21 |           
 22 |           <div v-else class="bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md p-6 text-center w-full md:w-auto">
 23 |             <h2 class="text-lg font-semibold text-gray-600 dark:text-gray-300 mb-2">{{ $t('schedule.currentClass') }}</h2>
 24 |             <div class="text-xl font-medium text-gray-800 dark:text-white">{{ $t('schedule.noCurrentClass') }}</div>
 25 |           </div>
 26 |         </div>
 27 |         
 28 |         <!-- Weekly Schedule -->
 29 |         <div class="mb-12">
 30 |           <div class="flex justify-between items-center mb-6">
 31 |             <h2 class="text-2xl font-bold text-gray-800 dark:text-white">{{ $t('schedule.weeklySchedule') }}</h2>
 32 |             
 33 |             <div class="flex items-center space-x-2">
 34 |               <button 
 35 |                 @click="previousWeek"
 36 |                 class="p-2 rounded-full bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
 37 |                 <ChevronLeftIcon class="w-5 h-5" />
 38 |               </button>
 39 |               <span class="text-gray-700 dark:text-gray-300 font-medium">{{ weekRange }}</span>
 40 |               <button 
 41 |                 @click="nextWeek"
 42 |                 class="p-2 rounded-full bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
 43 |                 <ChevronRightIcon class="w-5 h-5" />
 44 |               </button>
 45 |             </div>
 46 |           </div>
 47 |           
 48 |           <div class="overflow-x-auto">
 49 |             <div class="min-w-[800px]">
 50 |               <div class="grid grid-cols-8 gap-2">
 51 |                 <!-- Time Column -->
 52 |                 <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-2">
 53 |                   <div class="h-12 flex items-center justify-center font-bold text-gray-700 dark:text-gray-300">
 54 |                     {{ $t('schedule.time') }}
 55 |                   </div>
 56 |                   <div 
 57 |                     v-for="time in timeSlots" 
 58 |                     :key="time"
 59 |                     class="h-20 flex items-center justify-center text-sm text-gray-600 dark:text-gray-400 border-t border-gray-200 dark:border-gray-700">
 60 |                     {{ time }}
 61 |                   </div>
 62 |                 </div>
 63 |                 
 64 |                 <!-- Days Columns -->
 65 |                 <div 
 66 |                   v-for="(day, index) in weekDays" 
 67 |                   :key="index"
 68 |                   class="bg-white dark:bg-gray-800 rounded-lg">
 69 |                   <div 
 70 |                     class="h-12 flex flex-col items-center justify-center font-bold text-gray-800 dark:text-white"
 71 |                     :class="{ 'bg-primary-100 dark:bg-primary-900 rounded-t-lg': isToday(day.date) }">
 72 |                     <div>{{ day.name }}</div>
 73 |                     <div class="text-sm font-normal text-gray-500 dark:text-gray-400">{{ formatDate(day.date) }}</div>
 74 |                   </div>
 75 |                   
 76 |                   <div class="relative">
 77 |                     <div 
 78 |                       v-for="time in timeSlots" 
 79 |                       :key="time"
 80 |                       class="h-20 border-t border-gray-200 dark:border-gray-700">
 81 |                     </div>
 82 |                     
 83 |                     <div 
 84 |                       v-for="(event, eventIndex) in getEventsForDay(day.date)" 
 85 |                       :key="eventIndex"
 86 |                       :style="{
 87 |                         top: `${getEventPosition(event.startTime)}px`,
 88 |                         height: `${getEventHeight(event.startTime, event.endTime)}px`
 89 |                       }"
 90 |                       :class="[
 91 |                         'absolute left-1 right-1 rounded-md p-2 overflow-hidden',
 92 |                         event.type === 'class' ? 'bg-primary-500 text-white' : 'bg-yellow-500 text-white'
 93 |                       ]">
 94 |                       <div class="text-sm font-semibold truncate">{{ event.title }}</div>
 95 |                       <div class="text-xs opacity-80 truncate">{{ event.startTime }} - {{ event.endTime }}</div>
 96 |                     </div>
 97 |                   </div>
 98 |                 </div>
 99 |               </div>
100 |             </div>
101 |           </div>
102 |         </div>
103 |         
104 |         <!-- Upcoming Classes -->
105 |         <div>
106 |           <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">{{ $t('schedule.upcomingClasses') }}</h2>
107 |           
108 |           <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
109 |             <div 
110 |               v-for="(event, index) in upcomingEvents" 
111 |               :key="index"
112 |               class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"
113 |               v-motion
114 |               :initial="{ opacity: 0, y: 50 }"
115 |               :visible="{ opacity: 1, y: 0, transition: { delay: index * 100, duration: 500 } }">
116 |               <div class="p-6">
117 |                 <div class="flex justify-between items-start mb-4">
118 |                   <h3 class="text-xl font-bold text-gray-800 dark:text-white">{{ event.title }}</h3>
119 |                   <span 
120 |                     :class="[
121 |                       'px-3 py-1 text-xs font-medium rounded-full',
122 |                       event.type === 'class' 
123 |                         ? 'bg-primary-100 text-primary-600 dark:bg-primary-900 dark:text-primary-300' 
124 |                         : 'bg-yellow-100 text-yellow-600 dark:bg-yellow-900 dark:text-yellow-300'
125 |                     ]">
126 |                     {{ event.type === 'class' ? $t('schedule.class') : $t('schedule.consultation') }}
127 |                   </span>
128 |                 </div>
129 |                 
130 |                 <div class="flex items-center mb-3">
131 |                   <CalendarIcon class="w-5 h-5 text-gray-500 dark:text-gray-400 mr-2" />
132 |                   <span class="text-gray-600 dark:text-gray-300">{{ formatFullDate(event.date) }}</span>
133 |                 </div>
134 |                 
135 |                 <div class="flex items-center mb-3">
136 |                   <ClockIcon class="w-5 h-5 text-gray-500 dark:text-gray-400 mr-2" />
137 |                   <span class="text-gray-600 dark:text-gray-300">{{ event.startTime }} - {{ event.endTime }}</span>
138 |                 </div>
139 |                 
140 |                 <div class="flex items-center mb-4">
141 |                   <MapPinIcon class="w-5 h-5 text-gray-500 dark:text-gray-400 mr-2" />
142 |                   <span class="text-gray-600 dark:text-gray-300">{{ event.location }}</span>
143 |                 </div>
144 |                 
145 |                 <p class="text-gray-600 dark:text-gray-300 mb-4">{{ event.description }}</p>
146 |                 
147 |                 <button class="w-full px-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700 transition-colors">
148 |                   {{ $t('schedule.addToCalendar') }}
149 |                 </button>
150 |               </div>
151 |             </div>
152 |           </div>
153 |         </div>
154 |       </div>
155 |     </div>
156 |   </template>
157 |   
158 |   <script setup>
159 |   import { ref, computed, onMounted, onUnmounted } from 'vue';
160 |   import { useMotion } from '@vueuse/motion';
161 |   import { ChevronLeftIcon, ChevronRightIcon, CalendarIcon, ClockIcon, MapPinIcon } from 'lucide-vue-next';
162 |   
163 |   // Current time
164 |   const currentTime = ref('');
165 |   let timeInterval;
166 |   
167 |   onMounted(() => {
168 |     updateCurrentTime();
169 |     timeInterval = setInterval(updateCurrentTime, 1000);
170 |   });
171 |   
172 |   onUnmounted(() => {
173 |     clearInterval(timeInterval);
174 |   });
175 |   
176 |   const updateCurrentTime = () => {
177 |     const now = new Date();
178 |     const hours = now.getHours().toString().padStart(2, '0');
179 |     const minutes = now.getMinutes().toString().padStart(2, '0');
180 |     const seconds = now.getSeconds().toString().padStart(2, '0');
181 |     currentTime.value = `${hours}:${minutes}:${seconds}`;
182 |     
183 |     // Update current class
184 |     checkCurrentClass();
185 |   };
186 |   
187 |   // Week navigation
188 |   const currentWeekStart = ref(getStartOfWeek(new Date()));
189 |   
190 |   const previousWeek = () => {
191 |     const date = new Date(currentWeekStart.value);
192 |     date.setDate(date.getDate() - 7);
193 |     currentWeekStart.value = date;
194 |   };
195 |   
196 |   const nextWeek = () => {
197 |     const date = new Date(currentWeekStart.value);
198 |     date.setDate(date.getDate() + 7);
199 |     currentWeekStart.value = date;
200 |   };
201 |   
202 |   function getStartOfWeek(date) {
203 |     const d = new Date(date);
204 |     const day = d.getDay();
205 |     const diff = d.getDate() - day + (day === 0 ? -6 : 1); // Adjust for Sunday
206 |     return new Date(d.setDate(diff));
207 |   }
208 |   
209 |   const weekRange = computed(() => {
210 |     const start = new Date(currentWeekStart.value);
211 |     const end = new Date(start);
212 |     end.setDate(end.getDate() + 6);
213 |     
214 |     return `${formatDate(start)} - ${formatDate(end)}`;
215 |   });
216 |   
217 |   const weekDays = computed(() => {
218 |     const days = [];
219 |     const dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
220 |     
221 |     for (let i = 0; i < 7; i++) {
222 |       const date = new Date(currentWeekStart.value);
223 |       date.setDate(date.getDate() + i);
224 |       days.push({
225 |         name: dayNames[i],
226 |         date: new Date(date)
227 |       });
228 |     }
229 |     
230 |     return days;
231 |   });
232 |   
233 |   const isToday = (date) => {
234 |     const today = new Date();
235 |     return date.getDate() === today.getDate() && 
236 |            date.getMonth() === today.getMonth() && 
237 |            date.getFullYear() === today.getFullYear();
238 |   };
239 |   
240 |   const formatDate = (date) => {
241 |     return `${date.getDate()}/${date.getMonth() + 1}`;
242 |   };
243 |   
244 |   const formatFullDate = (date) => {
245 |     const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
246 |     return date.toLocaleDateString('en-US', options);
247 |   };
248 |   
249 |   // Time slots
250 |   const timeSlots = [
251 |     '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00'
252 |   ];
253 |   
254 |   // Schedule events
255 |   const scheduleEvents = [
256 |     {
257 |       title: 'Web Development Fundamentals',
258 |       type: 'class',
259 |       date: new Date(new Date().setDate(new Date().getDate() + 1)), // Tomorrow
260 |       startTime: '9:00',
261 |       endTime: '11:00',
262 |       location: 'Room 101, IT Building',
263 |       description: 'Introduction to HTML, CSS, and JavaScript basics.'
264 |     },
265 |     {
266 |       title: 'Advanced Vue.js',
267 |       type: 'class',
268 |       date: new Date(new Date().setDate(new Date().getDate() + 1)), // Tomorrow
269 |       startTime: '13:00',
270 |       endTime: '15:00',
271 |       location: 'Room 205, IT Building',
272 |       description: 'Deep dive into Vue.js Composition API and advanced patterns.'
273 |     },
274 |     {
275 |       title: 'Student Consultations',
276 |       type: 'consultation',
277 |       date: new Date(new Date().setDate(new Date().getDate() + 2)), // Day after tomorrow
278 |       startTime: '10:00',
279 |       endTime: '12:00',
280 |       location: 'Office 304, IT Building',
281 |       description: 'Open office hours for student questions and project guidance.'
282 |     },
283 |     {
284 |       title: 'JavaScript Fundamentals',
285 |       type: 'class',
286 |       date: new Date(new Date().setDate(new Date().getDate() + 3)),
287 |       startTime: '14:00',
288 |       endTime: '16:00',
289 |       location: 'Room 101, IT Building',
290 |       description: 'Core JavaScript concepts and programming fundamentals.'
291 |     },
292 |     {
293 |       title: 'UI/UX Design Workshop',
294 |       type: 'class',
295 |       date: new Date(new Date().setDate(new Date().getDate() + 4)),
296 |       startTime: '9:00',
297 |       endTime: '12:00',
298 |       location: 'Design Lab, Art Building',
299 |       description: 'Hands-on workshop on user interface and experience design principles.'
300 |     },
301 |     {
302 |       title: 'Project Consultations',
303 |       type: 'consultation',
304 |       date: new Date(new Date().setDate(new Date().getDate() + 4)),
305 |       startTime: '15:00',
306 |       endTime: '18:00',
307 |       location: 'Office 304, IT Building',
308 |       description: 'Individual project reviews and technical guidance.'
309 |     }
310 |   ];
311 |   
312 |   // Current class
313 |   const currentClass = ref(null);
314 |   
315 |   const checkCurrentClass = () => {
316 |     const now = new Date();
317 |     const currentHour = now.getHours();
318 |     const currentMinute = now.getMinutes();
319 |     
320 |     currentClass.value = null;
321 |     
322 |     for (const event of scheduleEvents) {
323 |       if (isSameDay(event.date, now)) {
324 |         const [startHour, startMinute] = event.startTime.split(':').map(Number);
325 |         const [endHour, endMinute] = event.endTime.split(':').map(Number);
326 |         
327 |         if ((currentHour > startHour || (currentHour === startHour && currentMinute >= startMinute)) && 
328 |             (currentHour < endHour || (currentHour === endHour && currentMinute < endMinute))) {
329 |           currentClass.value = event;
330 |           break;
331 |         }
332 |       }
333 |     }
334 |   };
335 |   
336 |   const isSameDay = (date1, date2) => {
337 |     return date1.getDate() === date2.getDate() && 
338 |            date1.getMonth() === date2.getMonth() && 
339 |            date1.getFullYear() === date2.getFullYear();
340 |   };
341 |   
342 |   // Get events for a specific day
343 |   const getEventsForDay = (date) => {
344 |     return scheduleEvents.filter(event => isSameDay(event.date, date));
345 |   };
346 |   
347 |   // Calculate event position and height in the schedule grid
348 |   const getEventPosition = (time) => {
349 |     const [hours, minutes] = time.split(':').map(Number);
350 |     const hourIndex = hours - 9; // 9:00 is the first slot
351 |     return hourIndex * 80 + (minutes / 60) * 80 + 12; // 80px per hour, 12px for the header
352 |   };
353 |   
354 |   const getEventHeight = (startTime, endTime) => {
355 |     const [startHours, startMinutes] = startTime.split(':').map(Number);
356 |     const [endHours, endMinutes] = endTime.split(':').map(Number);
357 |     
358 |     const startTotalMinutes = startHours * 60 + startMinutes;
359 |     const endTotalMinutes = endHours * 60 + endMinutes;
360 |     const durationMinutes = endTotalMinutes - startTotalMinutes;
361 |     
362 |     return (durationMinutes / 60) * 80 - 4; // 80px per hour, minus 4px for padding
363 |   };
364 |   
365 |   // Upcoming events
366 |   const upcomingEvents = computed(() => {
367 |     const now = new Date();
368 |     return scheduleEvents
369 |       .filter(event => event.date >= now)
370 |       .sort((a, b) => a.date - b.date)
371 |       .slice(0, 3);
372 |   });
373 |   </script> 


--------------------------------------------------------------------------------
/src/views/QAView.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="qa-container">
  3 |       <div class="qa-header">
  4 |         <h1 class="qa-title">Savol-Javob AI</h1>
  5 |         <p class="qa-subtitle">Savollaringizni yuboring va tezkor javob oling</p>
  6 |       </div>
  7 |       
  8 |       <div class="qa-main">
  9 |         <!-- Search and Ask -->
 10 |         <div class="qa-search-box">
 11 |           <div class="qa-input-wrapper">
 12 |             <label for="question" class="qa-label">
 13 |               Savolingizni yozing
 14 |             </label>
 15 |             <div class="qa-input-container">
 16 |               <input 
 17 |                 v-model="question"
 18 |                 type="text" 
 19 |                 id="question"
 20 |                 placeholder="Masalan: HTML nima?" 
 21 |                 class="qa-input"
 22 |                 @keyup.enter="askQuestion"
 23 |               />
 24 |               <SearchIcon class="qa-search-icon" />
 25 |               <button 
 26 |                 @click="askQuestion"
 27 |                 class="qa-ask-button">
 28 |                 So'rash
 29 |               </button>
 30 |             </div>
 31 |           </div>
 32 |           
 33 |           <div v-if="isLoading" class="qa-loading">
 34 |             <div class="qa-spinner"></div>
 35 |           </div>
 36 |           
 37 |           <div v-else-if="answer" class="qa-answer-box">
 38 |             <div class="qa-answer-header">
 39 |               <div class="qa-answer-icon">
 40 |                 <BrainIcon />
 41 |               </div>
 42 |               <div>
 43 |                 <h3 class="qa-answer-title">Javob</h3>
 44 |                 <div class="qa-answer-content" v-html="formattedAnswer"></div>
 45 |               </div>
 46 |             </div>
 47 |             
 48 |             <div class="qa-feedback">
 49 |               <div class="qa-feedback-question">Bu javob foydali bo'ldimi?</div>
 50 |               <div class="qa-feedback-buttons">
 51 |                 <button class="qa-feedback-button">
 52 |                   <ThumbsUpIcon />
 53 |                 </button>
 54 |                 <button class="qa-feedback-button">
 55 |                   <ThumbsDownIcon />
 56 |                 </button>
 57 |               </div>
 58 |             </div>
 59 |           </div>
 60 |         </div>
 61 |         
 62 |         <!-- Popular Questions -->
 63 |         <div class="qa-popular">
 64 |           <h2 class="qa-section-title">Ko'p so'raladigan savollar</h2>
 65 |           
 66 |           <div class="qa-popular-list">
 67 |             <div 
 68 |               v-for="(q, index) in popularQuestions" 
 69 |               :key="index"
 70 |               @click="setQuestion(q.question)"
 71 |               class="qa-popular-item">
 72 |               <div class="qa-popular-item-content">
 73 |                 <HelpCircleIcon class="qa-popular-icon" />
 74 |                 <span class="qa-popular-text">{{ q.question }}</span>
 75 |               </div>
 76 |             </div>
 77 |           </div>
 78 |         </div>
 79 |         
 80 |         <!-- FAQ Categories -->
 81 |         <div class="qa-categories">
 82 |           <h2 class="qa-section-title">Savollar kategoriyalari</h2>
 83 |           
 84 |           <div class="qa-categories-grid">
 85 |             <div 
 86 |               v-for="(category, index) in faqCategories" 
 87 |               :key="index"
 88 |               class="qa-category-card">
 89 |               <div class="qa-category-content">
 90 |                 <div class="qa-category-header">
 91 |                   <component :is="category.icon" class="qa-category-icon" />
 92 |                   <h3 class="qa-category-title">{{ category.title }}</h3>
 93 |                 </div>
 94 |                 
 95 |                 <p class="qa-category-description">{{ category.description }}</p>
 96 |                 
 97 |                 <ul class="qa-category-list">
 98 |                   <li v-for="(item, itemIndex) in category.items" :key="itemIndex" class="qa-category-list-item">
 99 |                     <CheckIcon class="qa-check-icon" />
100 |                     <span class="qa-item-text">{{ item }}</span>
101 |                   </li>
102 |                 </ul>
103 |                 
104 |                 <button 
105 |                   @click="setQuestion(category.sampleQuestion)"
106 |                   class="qa-example-button">
107 |                   Misol uchun so'rang
108 |                 </button>
109 |               </div>
110 |             </div>
111 |           </div>
112 |         </div>
113 |       </div>
114 |     </div>
115 |   </template>
116 |   
117 |   <script setup>
118 |   import { ref, computed } from 'vue';
119 |   import { SearchIcon, BrainIcon, ThumbsUpIcon, ThumbsDownIcon, HelpCircleIcon, 
120 |     CheckIcon, CodeIcon, BookIcon, GraduationCapIcon } from 'lucide-vue-next';
121 |   import { marked } from 'marked';
122 |   
123 |   const question = ref('');
124 |   const answer = ref('');
125 |   const isLoading = ref(false);
126 |   
127 |   const formattedAnswer = computed(() => {
128 |     return answer.value ? marked(answer.value) : '';
129 |   });
130 |   
131 |   const askQuestion = async () => {
132 |     if (!question.value.trim()) return;
133 |     
134 |     isLoading.value = true;
135 |     
136 |     // Simulate API call delay
137 |     await new Promise(resolve => setTimeout(resolve, 1500));
138 |     
139 |     // Simple AI response logic
140 |     const q = question.value.toLowerCase();
141 |     
142 |     if (q.includes('html')) {
143 |       answer.value = "HTML (HyperText Markup Language) veb-brauzerda ko'rsatish uchun mo'ljallangan hujjatlar uchun standart belgilash tilidir. U veb-sahifalarning tuzilishi va tarkibini belgilaydi.\n\n```html\n<!DOCTYPE html>\n<html>\n<head>\n  <title>Mening birinchi sahifam</title>\n</head>\n<body>\n  <h1>Salom Dunyo!</h1>\n  <p>Bu paragraf.</p>\n</body>\n</html>\n```\n\nHTML sarlavhalar, paragraflar, ro'yxatlar, havolalar va rasmlar kabi elementlardan foydalanadi.";
144 |     } else if (q.includes('css')) {
145 |       answer.value = "CSS (Cascading Style Sheets) HTML-da yozilgan hujjatning ko'rinishini tasvirlash uchun ishlatiladigan uslublar tilidir. CSS taqdimot va tarkibni ajratish uchun mo'ljallangan.\n\n```css\n/* Asosiy uslublar */\nbody {\n  font-family: Arial, sans-serif;\n  line-height: 1.6;\n  color: #333;\n}\n\nh1 {\n  color: #0066cc;\n}\n```\n\nCSS veb-sahifalarning ko'rinishi, tartib, ranglar va shriftlarni boshqaradi.";
146 |     } else if (q.includes('javascript') || q.includes('js')) {
147 |       answer.value = "JavaScript interaktiv veb-sahifalarni yaratish imkonini beruvchi dasturlash tilidir. U veb-ilovalarning muhim qismi hisoblanadi va ko'pchilik veb-saytlar mijoz tomonidagi xatti-harakatlar uchun undan foydalanadi.\n\n```javascript\n// Oddiy funksiya\nfunction salomlash(ism) {\n  return `Salom, ${ism}!`;\n}\n\n// Funksiyadan foydalanish\nconsole.log(salomlash('Talaba'));\n```\n\nJavaScript dinamik tarkib yaratish, multimedia boshqarish, rasmlarni animatsiya qilish va boshqa ko'p narsalarni amalga oshirish imkonini beradi.";
148 |     } else if (q.includes('vue') || q.includes('vue.js')) {
149 |       answer.value = "Vue.js foydalanuvchi interfeyslarini yaratish uchun progressiv JavaScript frameworkidir. Boshqa monolitik frameworklardan farqli o'laroq, Vue bosqichma-bosqich qabul qilish uchun mo'ljallangan.\n\n```javascript\n// Asosiy Vue 3 komponenti\nimport { ref } from 'vue'\n\nexport default {\n  setup() {\n    const count = ref(0)\n    \n    function increment() {\n      count.value++\n    }\n    \n    return {\n      count,\n      increment\n    }\n  }\n}\n```\n\nVue.js reaktiv va kompozitsion komponent tizimiga ega, bu uni ham oddiy, ham murakkab veb-ilovalar uchun ideal qiladi.";
150 |     } else if (q.includes('kurs') || q.includes('dars')) {
151 |       answer.value = "Bizning kurslarimiz veb-dasturlash, dasturlash va dizayn bo'yicha keng mavzularni qamrab oladi. Mana bizning mashhur kurslarimizdan ba'zilari:\n\n1. **Veb-dasturlash asoslari** - HTML, CSS va JavaScript asoslarini o'rganing\n2. **Ilg'or Vue.js** - Vue.js-ni o'zlashtiring va murakkab ilovalar yarating\n3. **UI/UX dizayn tamoyillari** - Chiroyli va funksional interfeyslar yaratishni o'rganing\n4. **Full Stack dasturlash** - Node.js va MongoDB bilan to'liq stack dasturchi bo'ling\n\nKurslar jadvalini Kurslar sahifasida topishingiz mumkin. Har bir kurs amaliy loyihalar va shaxsiy fikr-mulohazalarni o'z ichiga oladi.";
152 |     } else if (q.includes('jadval') || q.includes('vaqt')) {
153 |       answer.value = "Bizning joriy o'qitish jadvalimiz Jadval sahifasida mavjud. Darslar odatda ish kunlari soat 9:00 dan 18:00 gacha o'tkaziladi. \n\nShaxsiy konsultatsiyalar uchun siz odatda seshanba va payshanba kunlari soat 10:00 dan 12:00 gacha bo'lgan konsultatsiya soatlarida vaqt band qilishingiz mumkin.\n\nBarcha darslar IT binosida o'tkaziladi va aniq xona ma'lumotlari jadvalda ko'rsatilgan.";
154 |     } else {
155 |       answer.value = "Savolingiz uchun rahmat! Tez orada javob beramiz. Iltimos, savolingizni aniqroq qilib qayta yuboring yoki boshqa mavzu bo'yicha so'rang.";
156 |     }
157 |     
158 |     isLoading.value = false;
159 |   };
160 |   
161 |   const setQuestion = (q) => {
162 |     question.value = q;
163 |     askQuestion();
164 |   };
165 |   
166 |   const popularQuestions = [
167 |     { question: "HTML nima va qanday ishlaydi?" },
168 |     { question: "Vue.js-ni o'rganish uchun qanday resurslar tavsiya qilasiz?" },
169 |     { question: "Dasturlashni o'rganish uchun qancha vaqt kerak?" },
170 |     { question: "Frontend va Backend dasturlash o'rtasidagi farq nima?" },
171 |     { question: "Responsive dizayn nima?" }
172 |   ];
173 |   
174 |   const faqCategories = [
175 |     {
176 |       title: "Dasturlash asoslari",
177 |       description: "Dasturlash tillari va asosiy tushunchalar haqida savollar",
178 |       icon: CodeIcon,
179 |       items: [
180 |         "HTML, CSS va JavaScript asoslari",
181 |         "Dasturlash algoritmlari",
182 |         "Ma'lumotlar tuzilmalari",
183 |         "Dasturlash paradigmalari"
184 |       ],
185 |       sampleQuestion: "Dasturlashni o'rganish uchun qaysi tildan boshlash kerak?"
186 |     },
187 |     {
188 |       title: "Kurslar haqida",
189 |       description: "Kurslar, o'quv dasturlari va materiallar haqida ma'lumot",
190 |       icon: BookIcon,
191 |       items: [
192 |         "Kurslar tarkibi va davomiyligi",
193 |         "O'quv materiallari va resurslar",
194 |         "Amaliy loyihalar",
195 |         "Sertifikatlar va imtihonlar"
196 |       ],
197 |       sampleQuestion: "Vue.js kursi qancha davom etadi?"
198 |     },
199 |     {
200 |       title: "Karera va rivojlanish",
201 |       description: "Karera yo'llari va professional rivojlanish bo'yicha maslahatlar",
202 |       icon: GraduationCapIcon,
203 |       items: [
204 |         "Portfolio yaratish",
205 |         "Ish topish strategiyalari",
206 |         "Intervyuga tayyorgarlik",
207 |         "Kasbiy rivojlanish yo'llari"
208 |       ],
209 |       sampleQuestion: "Frontend dasturchi bo'lish uchun qanday ko'nikmalar kerak?"
210 |     }
211 |   ];
212 |   </script>
213 |   
214 |   <style>
215 | /* QA Container Styles */
216 | .qa-container {
217 |   padding: 3rem 1rem;
218 |   background-color: var(--bg-color);
219 |   min-height: 100vh;
220 | }
221 | 
222 | .qa-header {
223 |   text-align: center;
224 |   margin-bottom: 3rem;
225 | }
226 | 
227 | .qa-title {
228 |   font-size: 2rem;
229 |   font-weight: 700;
230 |   color: var(--text-color);
231 |   margin-bottom: 1rem;
232 | }
233 | 
234 | .qa-subtitle {
235 |   font-size: 1.125rem;
236 |   color: var(--text-secondary);
237 |   max-width: 36rem;
238 |   margin: 0 auto;
239 | }
240 | 
241 | .qa-main {
242 |   max-width: 64rem;
243 |   margin: 0 auto;
244 | }
245 | 
246 | /* Search Box Styles */
247 | .qa-search-box {
248 |   background-color: var(--card-bg);
249 |   border-radius: 0.5rem;
250 |   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
251 |   padding: 1.5rem;
252 |   margin-bottom: 2rem;
253 | }
254 | 
255 | .qa-input-wrapper {
256 |   margin-bottom: 1.5rem;
257 | }
258 | 
259 | .qa-label {
260 |   display: block;
261 |   font-size: 0.875rem;
262 |   font-weight: 500;
263 |   color: var(--text-secondary);
264 |   margin-bottom: 0.5rem;
265 | }
266 | 
267 | .qa-input-container {
268 |   position: relative;
269 | }
270 | 
271 | .qa-input {
272 |   width: 100%;
273 |   padding: 0.75rem 1rem 0.75rem 2.5rem;
274 |   background-color: var(--input-bg);
275 |   border: 1px solid var(--border-color);
276 |   border-radius: 0.375rem;
277 |   color: var(--text-color);
278 |   font-size: 1rem;
279 |   outline: none;
280 |   transition: border-color 0.2s, box-shadow 0.2s;
281 | }
282 | 
283 | .qa-input:focus {
284 |   border-color: var(--primary-color);
285 |   box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
286 | }
287 | 
288 | .qa-search-icon {
289 |   position: absolute;
290 |   left: 0.75rem;
291 |   top: 50%;
292 |   transform: translateY(-50%);
293 |   width: 1.25rem;
294 |   height: 1.25rem;
295 |   color: var(--text-muted);
296 | }
297 | 
298 | .qa-ask-button {
299 |   position: absolute;
300 |   right: 0.5rem;
301 |   top: 50%;
302 |   transform: translateY(-50%);
303 |   padding: 0.25rem 1rem;
304 |   background-color: var(--primary-color);
305 |   color: white;
306 |   border: none;
307 |   border-radius: 0.375rem;
308 |   font-weight: 500;
309 |   cursor: pointer;
310 |   transition: background-color 0.2s;
311 | }
312 | 
313 | .qa-ask-button:hover {
314 |   background-color: var(--primary-dark);
315 | }
316 | 
317 | /* Loading Styles */
318 | .qa-loading {
319 |   display: flex;
320 |   justify-content: center;
321 |   align-items: center;
322 |   padding: 2rem 0;
323 | }
324 | 
325 | .qa-spinner {
326 |   width: 2rem;
327 |   height: 2rem;
328 |   border: 2px solid transparent;
329 |   border-top-color: var(--primary-color);
330 |   border-radius: 50%;
331 |   animation: spin 1s linear infinite;
332 | }
333 | 
334 | @keyframes spin {
335 |   to { transform: rotate(360deg); }
336 | }
337 | 
338 | /* Answer Box Styles */
339 | .qa-answer-box {
340 |   background-color: var(--bg-light);
341 |   border-radius: 0.5rem;
342 |   padding: 1.5rem;
343 | }
344 | 
345 | .qa-answer-header {
346 |   display: flex;
347 |   align-items: flex-start;
348 |   margin-bottom: 1rem;
349 | }
350 | 
351 | .qa-answer-icon {
352 |   background-color: var(--primary-color);
353 |   color: white;
354 |   padding: 0.5rem;
355 |   border-radius: 50%;
356 |   margin-right: 0.75rem;
357 |   display: flex;
358 |   align-items: center;
359 |   justify-content: center;
360 | }
361 | 
362 | .qa-answer-icon svg {
363 |   width: 1.5rem;
364 |   height: 1.5rem;
365 | }
366 | 
367 | .qa-answer-title {
368 |   font-size: 1.125rem;
369 |   font-weight: 600;
370 |   color: var(--text-color);
371 |   margin-bottom: 0.5rem;
372 | }
373 | 
374 | .qa-answer-content {
375 |   color: var(--text-secondary);
376 |   line-height: 1.6;
377 | }
378 | 
379 | .qa-answer-content pre {
380 |   background-color: var(--code-bg);
381 |   border-radius: 0.375rem;
382 |   padding: 1rem;
383 |   overflow-x: auto;
384 |   margin: 1rem 0;
385 | }
386 | 
387 | .qa-answer-content code {
388 |   font-family: monospace;
389 |   color: var(--code-color);
390 | }
391 | 
392 | /* Feedback Styles */
393 | .qa-feedback {
394 |   display: flex;
395 |   justify-content: space-between;
396 |   align-items: center;
397 |   margin-top: 1rem;
398 |   padding-top: 1rem;
399 |   border-top: 1px solid var(--border-color);
400 | }
401 | 
402 | .qa-feedback-question {
403 |   font-size: 0.875rem;
404 |   color: var(--text-muted);
405 | }
406 | 
407 | .qa-feedback-buttons {
408 |   display: flex;
409 |   gap: 0.5rem;
410 | }
411 | 
412 | .qa-feedback-button {
413 |   padding: 0.25rem;
414 |   background: none;
415 |   border: none;
416 |   color: var(--text-muted);
417 |   cursor: pointer;
418 |   transition: color 0.2s;
419 | }
420 | 
421 | .qa-feedback-button:hover:first-child {
422 |   color: var(--success-color);
423 | }
424 | 
425 | .qa-feedback-button:hover:last-child {
426 |   color: var(--danger-color);
427 | }
428 | 
429 | .qa-feedback-button svg {
430 |   width: 1.25rem;
431 |   height: 1.25rem;
432 | }
433 | 
434 | /* Popular Questions Styles */
435 | .qa-popular {
436 |   margin-bottom: 3rem;
437 | }
438 | 
439 | .qa-section-title {
440 |   font-size: 1.5rem;
441 |   font-weight: 700;
442 |   color: var(--text-color);
443 |   margin-bottom: 1.5rem;
444 |   text-align: center;
445 | }
446 | 
447 | .qa-popular-list {
448 |   display: grid;
449 |   gap: 1rem;
450 | }
451 | 
452 | .qa-popular-item {
453 |   background-color: var(--card-bg);
454 |   border-radius: 0.5rem;
455 |   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
456 |   padding: 1rem;
457 |   cursor: pointer;
458 |   transition: background-color 0.2s, transform 0.2s;
459 | }
460 | 
461 | .qa-popular-item:hover {
462 |   background-color: var(--card-hover);
463 |   transform: translateY(-2px);
464 | }
465 | 
466 | .qa-popular-item-content {
467 |   display: flex;
468 |   align-items: center;
469 | }
470 | 
471 | .qa-popular-icon {
472 |   width: 1.25rem;
473 |   height: 1.25rem;
474 |   color: var(--primary-color);
475 |   margin-right: 0.75rem;
476 | }
477 | 
478 | .qa-popular-text {
479 |   color: var(--text-color);
480 | }
481 | 
482 | /* FAQ Categories Styles */
483 | .qa-categories-grid {
484 |   display: grid;
485 |   grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
486 |   gap: 1.5rem;
487 | }
488 | 
489 | .qa-category-card {
490 |   background-color: var(--card-bg);
491 |   border-radius: 0.5rem;
492 |   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
493 |   overflow: hidden;
494 | }
495 | 
496 | .qa-category-content {
497 |   padding: 1.5rem;
498 | }
499 | 
500 | .qa-category-header {
501 |   display: flex;
502 |   align-items: center;
503 |   margin-bottom: 1rem;
504 | }
505 | 
506 | .qa-category-icon {
507 |   width: 1.5rem;
508 |   height: 1.5rem;
509 |   color: var(--primary-color);
510 |   margin-right: 0.75rem;
511 | }
512 | 
513 | .qa-category-title {
514 |   font-size: 1.25rem;
515 |   font-weight: 700;
516 |   color: var(--text-color);
517 | }
518 | 
519 | .qa-category-description {
520 |   color: var(--text-secondary);
521 |   margin-bottom: 1rem;
522 | }
523 | 
524 | .qa-category-list {
525 |   margin-bottom: 1.5rem;
526 |   list-style: none;
527 |   padding: 0;
528 | }
529 | 
530 | .qa-category-list-item {
531 |   display: flex;
532 |   align-items: flex-start;
533 |   margin-bottom: 0.5rem;
534 | }
535 | 
536 | .qa-check-icon {
537 |   width: 1.25rem;
538 |   height: 1.25rem;
539 |   color: var(--success-color);
540 |   margin-right: 0.5rem;
541 |   margin-top: 0.125rem;
542 | }
543 | 
544 | .qa-item-text {
545 |   color: var(--text-secondary);
546 | }
547 | 
548 | .qa-example-button {
549 |   color: var(--primary-color);
550 |   font-weight: 500;
551 |   background: none;
552 |   border: none;
553 |   padding: 0;
554 |   cursor: pointer;
555 |   transition: color 0.2s;
556 | }
557 | 
558 | .qa-example-button:hover {
559 |   color: var(--primary-dark);
560 |   text-decoration: underline;
561 | }
562 | 
563 | /* Dark Mode Variables */
564 | :root {
565 |   --bg-color: #ffffff;
566 |   --card-bg: #ffffff;
567 |   --card-hover: #f9fafb;
568 |   --bg-light: #f3f4f6;
569 |   --input-bg: #ffffff;
570 |   --text-color: #1f2937;
571 |   --text-secondary: #4b5563;
572 |   --text-muted: #6b7280;
573 |   --border-color: #e5e7eb;
574 |   --primary-color: #3b82f6;
575 |   --primary-dark: #2563eb;
576 |   --success-color: #10b981;
577 |   --danger-color: #ef4444;
578 |   --code-bg: #f1f5f9;
579 |   --code-color: #0f172a;
580 | }
581 | 
582 | /* Dark Mode */
583 | .dark {
584 |   --bg-color: #111827;
585 |   --card-bg: #1f2937;
586 |   --card-hover: #374151;
587 |   --bg-light: #1f2937;
588 |   --input-bg: #111827;
589 |   --text-color: #f9fafb;
590 |   --text-secondary: #e5e7eb;
591 |   --text-muted: #9ca3af;
592 |   --border-color: #374151;
593 |   --primary-color: #60a5fa;
594 |   --primary-dark: #3b82f6;
595 |   --success-color: #34d399;
596 |   --danger-color: #f87171;
597 |   --code-bg: #1e293b;
598 |   --code-color: #e2e8f0;
599 | }
600 | 
601 | /* Responsive Styles */
602 | @media (max-width: 768px) {
603 |   .qa-categories-grid {
604 |     grid-template-columns: 1fr;
605 |   }
606 |   
607 |   .qa-title {
608 |     font-size: 1.75rem;
609 |   }
610 |   
611 |   .qa-subtitle {
612 |     font-size: 1rem;
613 |   }
614 |   
615 |   .qa-ask-button {
616 |     padding: 0.25rem 0.75rem;
617 |     font-size: 0.875rem;
618 |   }
619 | }
620 | </style>


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