├── public
    ├── azimov.webp
    ├── bgimage.webp
    └── mainlogo.webp
├── postcss.config.mjs
├── middlewares
    └── Fetcher.tsx
├── types
    └── RootTypes.tsx
├── next.config.ts
├── app
    ├── blogs
    │   ├── page.tsx
    │   └── [title]
    │   │   └── page.tsx
    ├── trainers
    │   └── page.tsx
    ├── services
    │   └── page.tsx
    ├── page.tsx
    ├── about
    │   └── page.tsx
    ├── layout.tsx
    └── globals.css
├── lib
    └── utils.ts
├── components
    ├── shared
    │   ├── Title.tsx
    │   ├── breadcrumb.tsx
    │   ├── footer.tsx
    │   ├── header.tsx
    │   └── image-gallery.tsx
    └── ui
    │   ├── button.tsx
    │   ├── card.tsx
    │   └── sheet.tsx
├── eslint.config.mjs
├── components.json
├── .gitignore
├── tsconfig.json
├── package.json
├── README.md
└── modules
    ├── About.tsx
    ├── Hero.tsx
    ├── Services.tsx
    ├── Testimonial.tsx
    ├── Blogs.tsx
    └── Trainers.tsx


/public/azimov.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sarbondev/seven-sport-center-client/HEAD/public/azimov.webp


--------------------------------------------------------------------------------
/public/bgimage.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sarbondev/seven-sport-center-client/HEAD/public/bgimage.webp


--------------------------------------------------------------------------------
/public/mainlogo.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sarbondev/seven-sport-center-client/HEAD/public/mainlogo.webp


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | const config = {
2 |   plugins: ["@tailwindcss/postcss"],
3 | };
4 | 
5 | export default config;
6 | 


--------------------------------------------------------------------------------
/middlewares/Fetcher.tsx:
--------------------------------------------------------------------------------
1 | // export const BASE_URL = "http://localhost:3000/api";
2 | export const BASE_URL = "https://server.7sportcenter.uz/api";
3 | 
4 | export const fetcher = (url: string) =>
5 |   fetch(`${BASE_URL}${url}`).then((res) => res.json());
6 | 


--------------------------------------------------------------------------------
/types/RootTypes.tsx:
--------------------------------------------------------------------------------
 1 | export interface BlogPost {
 2 |   _id?: string;
 3 |   photos: string[];
 4 |   title: string;
 5 |   description: string;
 6 |   createdAt?: string;
 7 | }
 8 | 
 9 | export interface TrainerMember {
10 |   photo: string;
11 |   fullName: string;
12 |   level: string;
13 |   experience: string;
14 |   students: string;
15 | }
16 | 


--------------------------------------------------------------------------------
/next.config.ts:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |   images: {
 4 |     remotePatterns: [
 5 |       {
 6 |         protocol: "https",
 7 |         hostname: "**",
 8 |       },
 9 |       {
10 |         protocol: "http",
11 |         hostname: "**",
12 |       },
13 |     ],
14 |   },
15 | };
16 | 
17 | module.exports = nextConfig;
18 | 


--------------------------------------------------------------------------------
/app/blogs/page.tsx:
--------------------------------------------------------------------------------
 1 | import BlogsModule from "@/modules/Blogs";
 2 | import { Metadata } from "next";
 3 | import React from "react";
 4 | 
 5 | export const metadata: Metadata = {
 6 |   title: "BLOGLAR",
 7 |   description: "Sport yangiliklar.",
 8 | };
 9 | 
10 | function page() {
11 |   return (
12 |     <main className="py-20">
13 |       <BlogsModule />
14 |     </main>
15 |   );
16 | }
17 | 
18 | export default page;
19 | 


--------------------------------------------------------------------------------
/app/trainers/page.tsx:
--------------------------------------------------------------------------------
 1 | import TrainersModule from "@/modules/Trainers";
 2 | import { Metadata } from "next";
 3 | import React from "react";
 4 | 
 5 | export const metadata: Metadata = {
 6 |   title: "MURABBIYLAR",
 7 |   description: "Seven sport center murabbiylar jamoasi.",
 8 | };
 9 | 
10 | function page() {
11 |   return (
12 |     <main className="py-20">
13 |       <TrainersModule />
14 |     </main>
15 |   );
16 | }
17 | 
18 | export default page;
19 | 


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
 1 | import { type ClassValue, clsx } from "clsx";
 2 | import { twMerge } from "tailwind-merge";
 3 | 
 4 | export function cn(...inputs: ClassValue[]) {
 5 |   return twMerge(clsx(inputs));
 6 | }
 7 | 
 8 | export function formatDate(dateString: string): string {
 9 |   const date = new Date(dateString);
10 | 
11 |   return date.toLocaleDateString("uz-UZ", {
12 |     day: "2-digit",
13 |     month: "short",
14 |     year: "numeric",
15 |   });
16 | }
17 | 


--------------------------------------------------------------------------------
/components/shared/Title.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | function Title({
 4 |   children,
 5 | }: Readonly<{
 6 |   children: React.ReactNode;
 7 | }>) {
 8 |   return (
 9 |     <div className="flex items-center">
10 |       <div className="w-12 h-0.5 bg-[#f04e3c] mr-4"></div>
11 |       <span className="text-[#f04e3c] font-medium tracking-wide">
12 |         {children}
13 |       </span>
14 |     </div>
15 |   );
16 | }
17 | 
18 | export default Title;
19 | 


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
 1 | import { dirname } from "path";
 2 | import { fileURLToPath } from "url";
 3 | import { FlatCompat } from "@eslint/eslintrc";
 4 | 
 5 | const __filename = fileURLToPath(import.meta.url);
 6 | const __dirname = dirname(__filename);
 7 | 
 8 | const compat = new FlatCompat({
 9 |   baseDirectory: __dirname,
10 | });
11 | 
12 | const eslintConfig = [
13 |   ...compat.extends("next/core-web-vitals", "next/typescript"),
14 | ];
15 | 
16 | export default eslintConfig;
17 | 


--------------------------------------------------------------------------------
/app/services/page.tsx:
--------------------------------------------------------------------------------
 1 | import Services from "@/modules/Services";
 2 | import Testimonial from "@/modules/Testimonial";
 3 | import { Metadata } from "next";
 4 | import React from "react";
 5 | 
 6 | export const metadata: Metadata = {
 7 |   title: "XIZMATLAR",
 8 |   description: "BIZ SIZGA NIMALARNI TAKLIF ETAMIZ.",
 9 | };
10 | 
11 | function page() {
12 |   return (
13 |     <main className="py-20">
14 |       <Services />
15 |       <Testimonial />
16 |     </main>
17 |   );
18 | }
19 | 
20 | export default page;
21 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "new-york",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "",
 8 |     "css": "app/globals.css",
 9 |     "baseColor": "zinc",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "modules": "@/modules",
15 |     "components": "@/components",
16 |     "utils": "@/lib/utils",
17 |     "ui": "@/components/ui",
18 |     "lib": "@/lib",
19 |     "hooks": "@/hooks"
20 |   },
21 |   "iconLibrary": "lucide"
22 | }
23 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
 1 | import About from "@/modules/About";
 2 | import BlogsModule from "@/modules/Blogs";
 3 | import Hero from "@/modules/Hero";
 4 | import Services from "@/modules/Services";
 5 | import Testimonial from "@/modules/Testimonial";
 6 | import TrainersModule from "@/modules/Trainers";
 7 | import React from "react";
 8 | 
 9 | function Home() {
10 |   return (
11 |     <>
12 |       <Hero />
13 |       <About />
14 |       <Services />
15 |       <Testimonial />
16 |       <TrainersModule />
17 |       <BlogsModule />
18 |     </>
19 |   );
20 | }
21 | 
22 | export default Home;
23 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.*
 7 | .yarn/*
 8 | !.yarn/patches
 9 | !.yarn/plugins
10 | !.yarn/releases
11 | !.yarn/versions
12 | 
13 | # testing
14 | /coverage
15 | 
16 | # next.js
17 | /.next/
18 | /out/
19 | 
20 | # production
21 | /build
22 | 
23 | # misc
24 | .DS_Store
25 | *.pem
26 | 
27 | # debug
28 | npm-debug.log*
29 | yarn-debug.log*
30 | yarn-error.log*
31 | .pnpm-debug.log*
32 | 
33 | # env files (can opt-in for committing if needed)
34 | .env*
35 | 
36 | # vercel
37 | .vercel
38 | 
39 | # typescript
40 | *.tsbuildinfo
41 | next-env.d.ts
42 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2017",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./*"]
23 |     }
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules"]
27 | }
28 | 


--------------------------------------------------------------------------------
/app/about/page.tsx:
--------------------------------------------------------------------------------
 1 | import About from "@/modules/About";
 2 | import Testimonial from "@/modules/Testimonial";
 3 | import TrainersModule from "@/modules/Trainers";
 4 | import { Metadata } from "next";
 5 | import React from "react";
 6 | 
 7 | export const metadata: Metadata = {
 8 |   title: "BIZ HAQIMIZDA",
 9 |   description:
10 |     "Namanngan shahridagi dzyudo klubi bolalar uchun sport va tarbiyaning mukammal uyg'unligini taqdim etadi. Bizning malakali murabbiylarimiz har bir yosh sportchiga maxsus yondashuv bilan shug'ullanadi.",
11 | };
12 | 
13 | function page() {
14 |   return (
15 |     <main className="py-20">
16 |       <About />
17 |       <Testimonial />
18 |       <TrainersModule />
19 |     </main>
20 |   );
21 | }
22 | 
23 | export default page;
24 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "client",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev --turbopack",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@radix-ui/react-dialog": "^1.1.6",
13 |     "@radix-ui/react-slot": "^1.1.2",
14 |     "axios": "^1.8.3",
15 |     "class-variance-authority": "^0.7.1",
16 |     "clsx": "^2.1.1",
17 |     "embla-carousel-react": "^8.5.2",
18 |     "lucide-react": "^0.482.0",
19 |     "next": "15.2.2",
20 |     "react": "^19.0.0",
21 |     "react-dom": "^19.0.0",
22 |     "swr": "^2.3.3",
23 |     "tailwind-merge": "^3.0.2",
24 |     "tailwindcss-animate": "^1.0.7"
25 |   },
26 |   "devDependencies": {
27 |     "@eslint/eslintrc": "^3",
28 |     "@tailwindcss/postcss": "^4",
29 |     "@types/node": "^20",
30 |     "@types/react": "^19",
31 |     "@types/react-dom": "^19",
32 |     "eslint": "^9",
33 |     "eslint-config-next": "15.2.2",
34 |     "tailwindcss": "^4",
35 |     "typescript": "^5"
36 |   },
37 |   "rules": {
38 |     "@typescript-eslint/no-explicit-any": "off"
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Judo Club Website
 2 | 
 3 | Этот репозиторий содержит код веб-сайта для дзюдо-клуба. Сайт разработан с использованием современных технологий и предоставляет удобный интерфейс для пользователей.
 4 | 
 5 | ## Технологии
 6 | 
 7 | - **Next.js** - Фреймворк для React, обеспечивающий серверный рендеринг и статическую генерацию страниц.
 8 | - **Express.js** - Минималистичный фреймворк для создания серверного API.
 9 | - **ShadCN UI & TailwindCSS** - Набор готовых компонентов для стилизации интерфейса.
10 | - **JSON Web Token (JWT)** - Технология для аутентификации и авторизации пользователей.
11 | 
12 | ## Установка и запуск
13 | 
14 | ### 1. Клонирование репозитория
15 | 
16 | ```sh
17 | git clone https://github.com/rakhsrb/seven-sport-center-client
18 | cd seven-sport-center-client
19 | ```
20 | 
21 | ### 2. Установка зависимостей
22 | 
23 | ```sh
24 | npm install
25 | ```
26 | 
27 | ### 3. Запуск проекта
28 | 
29 | #### Запуск фронтенда (Next.js)
30 | 
31 | ```sh
32 | npm run dev
33 | ```
34 | 
35 | #### Запуск бэкенда (Express.js)
36 | 
37 | ```sh
38 | npm run server
39 | ```
40 | 
41 | ## Контакты
42 | 
43 | Если у вас есть вопросы или предложения, свяжитесь с нами!
44 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import Header from "@/components/shared/header";
 3 | import Footer from "@/components/shared/footer";
 4 | import "./globals.css";
 5 | 
 6 | export const metadata: Metadata = {
 7 |   title: "Namangan shahridagi dzyudo klubi | Seven Sport Center",
 8 |   icons: "./mainlogo.webp",
 9 |   description:
10 |     "Seven Sport Center – Namangan shahridagi yetakchi dzyudo klubi. Bolalar uchun mashgulotlar.",
11 |   keywords: "дзюдо, спорт, Namangan, дзюдо клуб, тренировки",
12 |   openGraph: {
13 |     title: "Namangan shahridagi dzyudo klubi | Seven Sport Center",
14 |     description:
15 |       "Namangandagi eng yaxshi dzyudo klubida mashq qiling! Professional murabbiylar, zamonaviy sharoitlar, qulay jadval.",
16 |     url: "https://seven-sport-center-client.vercel.app/",
17 |     images: [
18 |       {
19 |         url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSSfAq6xh00HGmB98f1qWb0o4V0ZAZfPEpXgsvbMXSylo_k1HWl1CMzOBsywiYYGDpFUmE&usqp=CAU",
20 |         width: 1200,
21 |         height: 630,
22 |         alt: "Дзюдо клуб в Намангане",
23 |       },
24 |     ],
25 |   },
26 | };
27 | 
28 | export default function RootLayout({
29 |   children,
30 | }: Readonly<{
31 |   children: React.ReactNode;
32 | }>) {
33 |   return (
34 |     <html lang="en">
35 |       <body>
36 |         <Header />
37 |         <main>{children}</main>
38 |         <Footer />
39 |       </body>
40 |     </html>
41 |   );
42 | }
43 | 


--------------------------------------------------------------------------------
/modules/About.tsx:
--------------------------------------------------------------------------------
 1 | import Title from "@/components/shared/Title";
 2 | import Image from "next/image";
 3 | import Link from "next/link";
 4 | 
 5 | export default function About() {
 6 |   return (
 7 |     <section className="relative">
 8 |       <div className="container mx-auto px-4 py-12 md:py-24">
 9 |         <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
10 |           <div className="bg-orange-50 rounded-r-full">
11 |             <Image
12 |               src="/azimov.webp"
13 |               alt="Dzyudo klubi haqida"
14 |               width={600}
15 |               height={800}
16 |               unoptimized={true}
17 |               className="w-full object-cover"
18 |               priority
19 |             />
20 |           </div>
21 | 
22 |           <div className="space-y-6 md:space-y-8">
23 |             <Title>DZYUDO KLUBIMIZ HAQIDA</Title>
24 |             <h1 className="text-2xl md:text-3xl lg:text-4xl font-bold text-[#2D2756] leading-tight">
25 |               XAVFSIZ SPORT MUHITI. BOLALARNING JISMONIY VA MA'NAVIY
26 |               RIVOJLANISHI UCHUN ENG YAXSHI TANLOV!
27 |             </h1>
28 | 
29 |             <div className="space-y-4 text-gray-700">
30 |               <p>
31 |                 Namanngan shahridagi dzyudo klubi bolalar uchun sport va
32 |                 tarbiyaning mukammal uyg'unligini taqdim etadi. Bizning malakali
33 |                 murabbiylarimiz har bir yosh sportchiga maxsus yondashuv bilan
34 |                 shug'ullanadi.
35 |               </p>
36 | 
37 |               <p>
38 |                 Dzyudo nafaqat jismoniy tarbiya, balki intizom, hurmat va
39 |                 irodani shakllantirishga yordam beradi. Klubimizda farzandingiz
40 |                 sport bilan shug'ullanishi va sog'lom hayot tarzini
41 |                 shakllantirishi mumkin.
42 |               </p>
43 |             </div>
44 | 
45 |             <div>
46 |               <Link
47 |                 href="tel:+998886801144"
48 |                 className="bg-red-600 hover:bg-red-700 text-white py-3 px-8 rounded-md transition-colors uppercase font-medium text-sm"
49 |               >
50 |                 Bog'lanish
51 |               </Link>
52 |             </div>
53 |           </div>
54 |         </div>
55 |       </div>
56 |     </section>
57 |   );
58 | }
59 | 


--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
14 |         destructive:
15 |           "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
16 |         outline:
17 |           "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
18 |         secondary:
19 |           "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
20 |         ghost:
21 |           "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
22 |         link: "text-primary underline-offset-4 hover:underline",
23 |       },
24 |       size: {
25 |         default: "h-9 px-4 py-2 has-[>svg]:px-3",
26 |         sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
27 |         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
28 |         icon: "size-9",
29 |       },
30 |     },
31 |     defaultVariants: {
32 |       variant: "default",
33 |       size: "default",
34 |     },
35 |   }
36 | )
37 | 
38 | function Button({
39 |   className,
40 |   variant,
41 |   size,
42 |   asChild = false,
43 |   ...props
44 | }: React.ComponentProps<"button"> &
45 |   VariantProps<typeof buttonVariants> & {
46 |     asChild?: boolean
47 |   }) {
48 |   const Comp = asChild ? Slot : "button"
49 | 
50 |   return (
51 |     <Comp
52 |       data-slot="button"
53 |       className={cn(buttonVariants({ variant, size, className }))}
54 |       {...props}
55 |     />
56 |   )
57 | }
58 | 
59 | export { Button, buttonVariants }
60 | 


--------------------------------------------------------------------------------
/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | function Card({ className, ...props }: React.ComponentProps<"div">) {
 6 |   return (
 7 |     <div
 8 |       data-slot="card"
 9 |       className={cn(
10 |         "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
11 |         className
12 |       )}
13 |       {...props}
14 |     />
15 |   )
16 | }
17 | 
18 | function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
19 |   return (
20 |     <div
21 |       data-slot="card-header"
22 |       className={cn(
23 |         "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-[data-slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
24 |         className
25 |       )}
26 |       {...props}
27 |     />
28 |   )
29 | }
30 | 
31 | function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
32 |   return (
33 |     <div
34 |       data-slot="card-title"
35 |       className={cn("leading-none font-semibold", className)}
36 |       {...props}
37 |     />
38 |   )
39 | }
40 | 
41 | function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
42 |   return (
43 |     <div
44 |       data-slot="card-description"
45 |       className={cn("text-muted-foreground text-sm", className)}
46 |       {...props}
47 |     />
48 |   )
49 | }
50 | 
51 | function CardAction({ className, ...props }: React.ComponentProps<"div">) {
52 |   return (
53 |     <div
54 |       data-slot="card-action"
55 |       className={cn(
56 |         "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
57 |         className
58 |       )}
59 |       {...props}
60 |     />
61 |   )
62 | }
63 | 
64 | function CardContent({ className, ...props }: React.ComponentProps<"div">) {
65 |   return (
66 |     <div
67 |       data-slot="card-content"
68 |       className={cn("px-6", className)}
69 |       {...props}
70 |     />
71 |   )
72 | }
73 | 
74 | function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
75 |   return (
76 |     <div
77 |       data-slot="card-footer"
78 |       className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
79 |       {...props}
80 |     />
81 |   )
82 | }
83 | 
84 | export {
85 |   Card,
86 |   CardHeader,
87 |   CardFooter,
88 |   CardTitle,
89 |   CardAction,
90 |   CardDescription,
91 |   CardContent,
92 | }
93 | 


--------------------------------------------------------------------------------
/app/blogs/[title]/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { useSearchParams } from "next/navigation";
 4 | import { Breadcrumb } from "@/components/shared/breadcrumb";
 5 | import { CalendarIcon } from "lucide-react";
 6 | import { formatDate } from "@/lib/utils";
 7 | import { ImageGallery } from "@/components/shared/image-gallery";
 8 | import { BlogPost } from "@/types/RootTypes";
 9 | import { fetcher } from "@/middlewares/Fetcher";
10 | import useSWR from "swr";
11 | 
12 | export default function BlogDetail() {
13 |   const searchParams = useSearchParams();
14 |   const title = searchParams.get("title") || "";
15 |   const { data, error, isLoading } = useSWR<BlogPost[]>(
16 |     `/blog?title=${encodeURIComponent(title)}`,
17 |     fetcher
18 |   );
19 | 
20 |   if (isLoading) {
21 |     return (
22 |       <div className="h-[80vh] flex justify-center items-center">
23 |         <span className="h-16 w-16 border-[6px] border-dotted border-red-600 animate-spin rounded-full"></span>
24 |       </div>
25 |     );
26 |   }
27 | 
28 |   if (error) {
29 |     return (
30 |       <div className="max-w-5xl mx-auto text-center py-24">
31 |         <h3 className="text-2xl font-bold text-red-600">Ошибка</h3>
32 |         <p className="text-gray-400">{error}. Попробуйте позже.</p>
33 |       </div>
34 |     );
35 |   }
36 | 
37 |   return (
38 |     <article className="max-w-5xl mx-auto space-y-8 py-24">
39 |       <Breadcrumb />
40 | 
41 |       {data && (
42 |         <div className="space-y-6">
43 |           <div className="space-y-4">
44 |             <h1 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white">
45 |               {data[0].title}
46 |             </h1>
47 | 
48 |             {data[0].createdAt && (
49 |               <div className="flex items-center text-sm text-gray-500 dark:text-gray-400">
50 |                 <CalendarIcon className="mr-2 h-4 w-4" />
51 |                 <time dateTime={data[0].createdAt}>
52 |                   {formatDate(data[0].createdAt)}
53 |                 </time>
54 |               </div>
55 |             )}
56 |           </div>
57 | 
58 |           {data[0].photos?.length > 0 && (
59 |             <ImageGallery images={data[0].photos} alt={data[0].title} />
60 |           )}
61 | 
62 |           <p className="text-xl text-gray-600 dark:text-gray-300 leading-relaxed">
63 |             {data[0].description}
64 |           </p>
65 |         </div>
66 |       )}
67 |     </article>
68 |   );
69 | }
70 | 


--------------------------------------------------------------------------------
/modules/Hero.tsx:
--------------------------------------------------------------------------------
 1 | import { Medal, Star, Users } from "lucide-react";
 2 | import Link from "next/link";
 3 | import React from "react";
 4 | 
 5 | function Hero() {
 6 |   return (
 7 |     <section className="hero py-40 xl:py-56">
 8 |       <div className="container mx-auto h-full flex items-center px-4">
 9 |         <div className="w-full lg:w-3/4 xl:w-2/3 space-y-8">
10 |           <div className="flex items-center space-x-2 bg-white/10 backdrop-blur-sm w-fit px-4 py-2 rounded-full">
11 |             <Medal className="text-yellow-400 w-5 h-5" />
12 |             <span className="text-white text-sm">
13 |               O'zbekiston chempionlari tayyorlaymiz
14 |             </span>
15 |           </div>
16 | 
17 |           <h1 className="text-white text-4xl lg:text-6xl font-bold leading-tight uppercase">
18 |             Farzandingiz uchun <br />
19 |             <span className="text-blue-400">professional dzudo</span> <br />
20 |             mashg'ulotlari
21 |           </h1>
22 | 
23 |           <p className="text-gray-300 text-lg max-w-2xl">
24 |             Bizning malakali murabbiylarimiz bilan farzandingiz nafaqat sport,
25 |             balki intizom, hurmat va maqsadga erishish yo'llarini o'rganadi.
26 |           </p>
27 | 
28 |           <div className="flex flex-col sm:flex-row gap-4">
29 |             <Link
30 |               href="tel:+998886801144"
31 |               className="bg-red-600 hover:bg-red-700 text-white py-3 px-8 rounded-full transition-colors uppercase font-medium text-sm inline-flex items-center justify-center"
32 |             >
33 |               Hoziroq qo'shiling
34 |             </Link>
35 |             <Link
36 |               href="#about"
37 |               className="bg-white/10 hover:bg-white/20 text-white py-3 px-8 rounded-full transition-colors uppercase font-medium text-sm inline-flex items-center justify-center backdrop-blur-sm"
38 |             >
39 |               Batafsil ma'lumot
40 |             </Link>
41 |           </div>
42 | 
43 |           <div className="flex flex-col sm:flex-row gap-8 pt-8 border-t border-white/10">
44 |             <div className="flex items-center gap-2">
45 |               <Users className="text-blue-400 w-5 h-5" />
46 |               <span className="text-white">500+ o'quvchilar</span>
47 |             </div>
48 |             <div className="flex items-center gap-2">
49 |               <Star className="text-yellow-400 w-5 h-5" />
50 |               <span className="text-white">15+ yillik tajriba</span>
51 |             </div>
52 |           </div>
53 |         </div>
54 |       </div>
55 |     </section>
56 |   );
57 | }
58 | 
59 | export default Hero;
60 | 


--------------------------------------------------------------------------------
/components/shared/breadcrumb.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import Link from "next/link";
  4 | import { ChevronRight } from "lucide-react";
  5 | import { cn } from "@/lib/utils";
  6 | import { usePathname } from "next/navigation";
  7 | import { useMemo } from "react";
  8 | 
  9 | interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
 10 |   segments?: {
 11 |     name: string;
 12 |     href: string;
 13 |     isCurrent?: boolean;
 14 |   }[];
 15 |   homeName?: string;
 16 |   segmentNames?: Record<string, string>;
 17 | }
 18 | 
 19 | export function Breadcrumb({
 20 |   segments: customSegments,
 21 |   homeName = "Bosh sahifa",
 22 |   segmentNames = {
 23 |     blog: "Bloglar",
 24 |     blogs: "Bloglar",
 25 |     trainers: "Murabbiylar",
 26 |     about: "Biz haqimizda",
 27 |     contact: "Aloqa",
 28 |   },
 29 |   className,
 30 |   ...props
 31 | }: BreadcrumbProps) {
 32 |   const pathname = usePathname();
 33 | 
 34 |   const segments = useMemo(() => {
 35 |     if (customSegments) return customSegments;
 36 | 
 37 |     const generatedSegments = [
 38 |       { name: homeName, href: "/", isCurrent: pathname === "/" },
 39 |     ];
 40 | 
 41 |     if (pathname === "/") return generatedSegments;
 42 | 
 43 |     const pathSegments = pathname.split("/").filter(Boolean);
 44 | 
 45 |     let currentPath = "";
 46 | 
 47 |     pathSegments.forEach((segment, index) => {
 48 |       currentPath += `/${segment}`;
 49 |       const isLast = index === pathSegments.length - 1;
 50 | 
 51 |       let name = segmentNames[segment] || segment;
 52 | 
 53 |       if (segment.includes("%")) {
 54 |         try {
 55 |           name = decodeURIComponent(segment);
 56 |         } catch (e) {
 57 |           console.error("Failed to decode URL segment:", segment, e);
 58 |         }
 59 |       }
 60 | 
 61 |       generatedSegments.push({
 62 |         name,
 63 |         href: currentPath,
 64 |         isCurrent: isLast,
 65 |       });
 66 |     });
 67 | 
 68 |     return generatedSegments;
 69 |   }, [pathname, customSegments, homeName, segmentNames]);
 70 | 
 71 |   return (
 72 |     <nav
 73 |       aria-label="Breadcrumb"
 74 |       className={cn("flex items-center text-sm", className)}
 75 |       {...props}
 76 |     >
 77 |       <ol className="flex items-center flex-wrap">
 78 |         {segments.map((segment, index) => (
 79 |           <li key={segment.href} className="flex items-center">
 80 |             {index === 0 ? null : (
 81 |               <ChevronRight className="mx-2 h-4 w-4 text-gray-400 flex-shrink-0" />
 82 |             )}
 83 |             {segment.isCurrent ? (
 84 |               <span
 85 |                 aria-current="page"
 86 |                 className="font-medium text-red-600 max-w-[200px] truncate"
 87 |                 title={segment.name}
 88 |               >
 89 |                 {segment.name}
 90 |               </span>
 91 |             ) : (
 92 |               <Link
 93 |                 href={segment.href}
 94 |                 className="text-gray-500 hover:text-red-600 transition-colors max-w-[200px] truncate"
 95 |                 title={segment.name}
 96 |               >
 97 |                 {segment.name}
 98 |               </Link>
 99 |             )}
100 |           </li>
101 |         ))}
102 |       </ol>
103 |     </nav>
104 |   );
105 | }
106 | 


--------------------------------------------------------------------------------
/components/shared/footer.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import Link from "next/link";
 4 | import { Instagram, Send, ArrowUp, MapPin } from "lucide-react";
 5 | 
 6 | export default function Footer() {
 7 |   const scrollToTop = () => {
 8 |     window.scrollTo({
 9 |       top: 0,
10 |       behavior: "smooth",
11 |     });
12 |   };
13 | 
14 |   const links = [
15 |     { label: "Bosh sahifa", url: "/" },
16 |     { label: "Biz haqimizda", url: "/about" },
17 |     { label: "Xizmatlar", url: "/services" },
18 |     { label: "Bloglar", url: "/blogs" },
19 |   ];
20 | 
21 |   return (
22 |     <footer className="bg-black text-white py-8">
23 |       <div className="container mx-auto px-4">
24 |         <div className="flex flex-col md:flex-row justify-between items-center mb-8">
25 |           <nav className="mb-6 md:mb-0">
26 |             <ul className="flex flex-wrap justify-center md:justify-start gap-4 md:gap-8">
27 |               {links.map((link, index) => (
28 |                 <li key={index}>
29 |                   <Link
30 |                     href={link.url}
31 |                     className="hover:text-gray-300 uppercase text-sm font-medium"
32 |                   >
33 |                     {link.label}
34 |                   </Link>
35 |                 </li>
36 |               ))}
37 |             </ul>
38 |           </nav>
39 | 
40 |           <button
41 |             onClick={scrollToTop}
42 |             className="w-10 h-10 rounded-full border border-red-600 flex items-center justify-center hover:bg-red-800 transition-colors"
43 |             aria-label="Scroll to top"
44 |           >
45 |             <ArrowUp size={18} />
46 |           </button>
47 |         </div>
48 | 
49 |         <div className="flex flex-col sm:flex-row gap-4 items-center justify-between">
50 |           <div className="flex items-center gap-6">
51 |             <div className="flex gap-2">
52 |               <Link
53 |                 href="#"
54 |                 className="w-10 h-10 rounded-full bg-[#222222] flex items-center justify-center hover:bg-gray-700 transition-colors"
55 |               >
56 |                 <Instagram size={18} />
57 |               </Link>
58 |               <Link
59 |                 href="#"
60 |                 className="w-10 h-10 rounded-full bg-[#222222] flex items-center justify-center hover:bg-gray-700 transition-colors"
61 |               >
62 |                 <Send size={18} />
63 |               </Link>
64 |             </div>
65 |             <Link href="tel:+998886801144" className="hover:text-gray-300">
66 |               +998 88 680 11 44
67 |             </Link>
68 |           </div>
69 |           <div className="flex items-center gap-2 bg-[#222222] rounded-lg px-4 py-2">
70 |             <MapPin size={18} className="text-gray-400" />
71 |             <span className="text-sm text-gray-300">
72 |               Namangan, “Pahlavon” sport majmuasi
73 |             </span>
74 |             <Link
75 |               href="https://maps.app.goo.gl/CdDtEmMaiktgjwT29"
76 |               target="_blank"
77 |               className="ml-2 bg-[#333333] px-3 py-1 rounded text-xs hover:bg-gray-700 transition-colors"
78 |             >
79 |               xarita
80 |             </Link>
81 |           </div>
82 |         </div>
83 | 
84 |         <div className="border-t border-[#333] my-6"></div>
85 |         <div className="flex flex-col md:flex-row justify-between items-center gap-6">
86 |           <div className="text-gray-400 text-sm">
87 |             © Seven Sport Center {new Date().getFullYear()} Barcha huquqlar
88 |             himoyalangan
89 |           </div>
90 |           <div className="text-gray-400 text-sm">
91 |             Sayt Texnokarvon tomonidan ishlab chiqilgan
92 |           </div>
93 |         </div>
94 |       </div>
95 |     </footer>
96 |   );
97 | }
98 | 


--------------------------------------------------------------------------------
/components/ui/sheet.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as SheetPrimitive from "@radix-ui/react-dialog"
  5 | import { XIcon } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
 10 |   return <SheetPrimitive.Root data-slot="sheet" {...props} />
 11 | }
 12 | 
 13 | function SheetTrigger({
 14 |   ...props
 15 | }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
 16 |   return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
 17 | }
 18 | 
 19 | function SheetClose({
 20 |   ...props
 21 | }: React.ComponentProps<typeof SheetPrimitive.Close>) {
 22 |   return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
 23 | }
 24 | 
 25 | function SheetPortal({
 26 |   ...props
 27 | }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
 28 |   return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
 29 | }
 30 | 
 31 | function SheetOverlay({
 32 |   className,
 33 |   ...props
 34 | }: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
 35 |   return (
 36 |     <SheetPrimitive.Overlay
 37 |       data-slot="sheet-overlay"
 38 |       className={cn(
 39 |         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
 40 |         className
 41 |       )}
 42 |       {...props}
 43 |     />
 44 |   )
 45 | }
 46 | 
 47 | function SheetContent({
 48 |   className,
 49 |   children,
 50 |   side = "right",
 51 |   ...props
 52 | }: React.ComponentProps<typeof SheetPrimitive.Content> & {
 53 |   side?: "top" | "right" | "bottom" | "left"
 54 | }) {
 55 |   return (
 56 |     <SheetPortal>
 57 |       <SheetOverlay />
 58 |       <SheetPrimitive.Content
 59 |         data-slot="sheet-content"
 60 |         className={cn(
 61 |           "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
 62 |           side === "right" &&
 63 |             "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
 64 |           side === "left" &&
 65 |             "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
 66 |           side === "top" &&
 67 |             "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
 68 |           side === "bottom" &&
 69 |             "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
 70 |           className
 71 |         )}
 72 |         {...props}
 73 |       >
 74 |         {children}
 75 |         <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
 76 |           <XIcon className="size-4" />
 77 |           <span className="sr-only">Close</span>
 78 |         </SheetPrimitive.Close>
 79 |       </SheetPrimitive.Content>
 80 |     </SheetPortal>
 81 |   )
 82 | }
 83 | 
 84 | function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
 85 |   return (
 86 |     <div
 87 |       data-slot="sheet-header"
 88 |       className={cn("flex flex-col gap-1.5 p-4", className)}
 89 |       {...props}
 90 |     />
 91 |   )
 92 | }
 93 | 
 94 | function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
 95 |   return (
 96 |     <div
 97 |       data-slot="sheet-footer"
 98 |       className={cn("mt-auto flex flex-col gap-2 p-4", className)}
 99 |       {...props}
100 |     />
101 |   )
102 | }
103 | 
104 | function SheetTitle({
105 |   className,
106 |   ...props
107 | }: React.ComponentProps<typeof SheetPrimitive.Title>) {
108 |   return (
109 |     <SheetPrimitive.Title
110 |       data-slot="sheet-title"
111 |       className={cn("text-foreground font-semibold", className)}
112 |       {...props}
113 |     />
114 |   )
115 | }
116 | 
117 | function SheetDescription({
118 |   className,
119 |   ...props
120 | }: React.ComponentProps<typeof SheetPrimitive.Description>) {
121 |   return (
122 |     <SheetPrimitive.Description
123 |       data-slot="sheet-description"
124 |       className={cn("text-muted-foreground text-sm", className)}
125 |       {...props}
126 |     />
127 |   )
128 | }
129 | 
130 | export {
131 |   Sheet,
132 |   SheetTrigger,
133 |   SheetClose,
134 |   SheetContent,
135 |   SheetHeader,
136 |   SheetFooter,
137 |   SheetTitle,
138 |   SheetDescription,
139 | }
140 | 


--------------------------------------------------------------------------------
/modules/Services.tsx:
--------------------------------------------------------------------------------
  1 | import Title from "@/components/shared/Title";
  2 | import { ArrowRight, Clock, Dumbbell, Heart } from "lucide-react";
  3 | import Link from "next/link";
  4 | 
  5 | const SERVICES = [
  6 |   {
  7 |     icon: Dumbbell,
  8 |     title: "Professional Trening Uskunalari",
  9 |     description:
 10 |       "Bolalarimiz uchun xavfsiz va zamonaviy sport jihozlari bilan jihozlangan zal. Trening samaradorligini oshirish uchun eng yaxshi sharoitlarni taqdim etamiz.",
 11 |   },
 12 |   {
 13 |     icon: Heart,
 14 |     title: "Sog'lom Turmush Tarzi",
 15 |     description:
 16 |       "Dzyudo nafaqat jismoniy kuch, balki sog'lom turmush tarzining asosi. Bolalarning umumiy rivojlanishiga ko'maklashamiz va ularni mustahkam iroda bilan tarbiyalaymiz.",
 17 |   },
 18 |   {
 19 |     icon: Clock,
 20 |     title: "Samarali Mashg'ulot Dasturlari",
 21 |     description:
 22 |       "Har bir bola uchun individual yondashuv! Mashg'ulot dasturlarimiz dzyudo texnikalarini mukammal egallash va sport natijalarini yaxshilashga qaratilgan.",
 23 |   },
 24 | ];
 25 | 
 26 | export default function Services() {
 27 |   return (
 28 |     <section className="py-24 relative">
 29 |       <div className="container mx-auto px-6 relative z-10">
 30 |         <div className="text-center mb-12">
 31 |           <div className="flex justify-center items-center mb-4">
 32 |             <div className="w-16 h-[2px] bg-red-600"></div>
 33 |             <span className="mx-4 text-red-600 uppercase text-sm font-medium">
 34 |               BIZNING XIZMATLARIMIZ
 35 |             </span>
 36 |             <div className="w-16 h-[2px] bg-red-600"></div>
 37 |           </div>
 38 |           <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-[#2D2756] max-w-3xl mx-auto leading-tight uppercase">
 39 |             BIZ SIZGA NIMALARNI <br /> TAKLIF ETAMIZ
 40 |           </h2>
 41 |         </div>
 42 | 
 43 |         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
 44 |           {SERVICES.map((service, index) => (
 45 |             <div
 46 |               key={index}
 47 |               style={{
 48 |                 boxShadow: "rgba(111, 100, 100, 0.2) 0px 7px 29px 0px",
 49 |               }}
 50 |               className="bg-white border p-8 h-full flex flex-col rounded-lg group transition-all duration-300 relative"
 51 |             >
 52 |               <div className="absolute bottom-0 left-0 right-0 h-[4px] bg-gray-100 overflow-hidden">
 53 |                 <div className="h-full bg-red-600 w-0 group-hover:w-full transition-all duration-500 ease-out"></div>
 54 |               </div>
 55 | 
 56 |               <div className="mb-6 relative">
 57 |                 <div className="inline-flex p-3 bg-gray-50 group-hover:bg-gray-100 transition-colors duration-300">
 58 |                   <service.icon className="w-6 h-6 text-gray-800 group-hover:text-red-600" />
 59 |                 </div>
 60 |                 <div className="absolute -z-10 top-3 left-3 w-10 h-10 border border-gray-200 opacity-0 group-hover:opacity-100 group-hover:top-2 group-hover:left-2 transition-all duration-300"></div>
 61 |               </div>
 62 | 
 63 |               <h3 className="text-lg font-medium text-gray-900 mb-4">
 64 |                 {service.title}
 65 |               </h3>
 66 | 
 67 |               <p className="text-sm text-gray-600 leading-relaxed mb-8 flex-grow">
 68 |                 {service.description}
 69 |               </p>
 70 | 
 71 |               <Link
 72 |                 href="/services"
 73 |                 className="inline-flex items-center text-sm font-medium text-gray-800 group-hover:text-red-600 group-hover:translate-x-1 transition-all duration-300"
 74 |               >
 75 |                 Batafsil
 76 |                 <ArrowRight className="ml-2 w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
 77 |               </Link>
 78 |             </div>
 79 |           ))}
 80 |         </div>
 81 | 
 82 |         <div className="text-center mt-12">
 83 |           <Link
 84 |             href="/services"
 85 |             className="inline-flex items-center justify-center px-6 py-3 bg-red-600 text-white font-medium rounded hover:bg-red-700 transition-colors duration-300 group"
 86 |           >
 87 |             Barcha xizmatlarni ko&apos;rish
 88 |             <svg
 89 |               xmlns="http://www.w3.org/2000/svg"
 90 |               width="16"
 91 |               height="16"
 92 |               viewBox="0 0 24 24"
 93 |               fill="none"
 94 |               stroke="currentColor"
 95 |               strokeWidth="2"
 96 |               strokeLinecap="round"
 97 |               strokeLinejoin="round"
 98 |               className="ml-2 transform group-hover:translate-x-1 transition-transform"
 99 |             >
100 |               <polyline points="9 18 15 12 9 6"></polyline>
101 |             </svg>
102 |           </Link>
103 |         </div>
104 |       </div>
105 |     </section>
106 |   );
107 | }
108 | 


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");
  2 | @import "tailwindcss";
  3 | 
  4 | @plugin "tailwindcss-animate";
  5 | 
  6 | * {
  7 |   font-family: "Rubik", sans-serif;
  8 | }
  9 | 
 10 | @custom-variant dark (&:is(.dark *));
 11 | 
 12 | @theme inline {
 13 |   --color-background: var(--background);
 14 |   --color-foreground: var(--foreground);
 15 |   --font-sans: var(--font-geist-sans);
 16 |   --font-mono: var(--font-geist-mono);
 17 |   --color-sidebar-ring: var(--sidebar-ring);
 18 |   --color-sidebar-border: var(--sidebar-border);
 19 |   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
 20 |   --color-sidebar-accent: var(--sidebar-accent);
 21 |   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
 22 |   --color-sidebar-primary: var(--sidebar-primary);
 23 |   --color-sidebar-foreground: var(--sidebar-foreground);
 24 |   --color-sidebar: var(--sidebar);
 25 |   --color-chart-5: var(--chart-5);
 26 |   --color-chart-4: var(--chart-4);
 27 |   --color-chart-3: var(--chart-3);
 28 |   --color-chart-2: var(--chart-2);
 29 |   --color-chart-1: var(--chart-1);
 30 |   --color-ring: var(--ring);
 31 |   --color-input: var(--input);
 32 |   --color-border: var(--border);
 33 |   --color-destructive: var(--destructive);
 34 |   --color-accent-foreground: var(--accent-foreground);
 35 |   --color-accent: var(--accent);
 36 |   --color-muted-foreground: var(--muted-foreground);
 37 |   --color-muted: var(--muted);
 38 |   --color-secondary-foreground: var(--secondary-foreground);
 39 |   --color-secondary: var(--secondary);
 40 |   --color-primary-foreground: var(--primary-foreground);
 41 |   --color-primary: var(--primary);
 42 |   --color-popover-foreground: var(--popover-foreground);
 43 |   --color-popover: var(--popover);
 44 |   --color-card-foreground: var(--card-foreground);
 45 |   --color-card: var(--card);
 46 |   --radius-sm: calc(var(--radius) - 4px);
 47 |   --radius-md: calc(var(--radius) - 2px);
 48 |   --radius-lg: var(--radius);
 49 |   --radius-xl: calc(var(--radius) + 4px);
 50 | }
 51 | 
 52 | :root {
 53 |   --radius: 0.625rem;
 54 |   --background: oklch(1 0 0);
 55 |   --foreground: oklch(0.141 0.005 285.823);
 56 |   --card: oklch(1 0 0);
 57 |   --card-foreground: oklch(0.141 0.005 285.823);
 58 |   --popover: oklch(1 0 0);
 59 |   --popover-foreground: oklch(0.141 0.005 285.823);
 60 |   --primary: oklch(0.21 0.006 285.885);
 61 |   --primary-foreground: oklch(0.985 0 0);
 62 |   --secondary: oklch(0.967 0.001 286.375);
 63 |   --secondary-foreground: oklch(0.21 0.006 285.885);
 64 |   --muted: oklch(0.967 0.001 286.375);
 65 |   --muted-foreground: oklch(0.552 0.016 285.938);
 66 |   --accent: oklch(0.967 0.001 286.375);
 67 |   --accent-foreground: oklch(0.21 0.006 285.885);
 68 |   --destructive: oklch(0.577 0.245 27.325);
 69 |   --border: oklch(0.92 0.004 286.32);
 70 |   --input: oklch(0.92 0.004 286.32);
 71 |   --ring: oklch(0.705 0.015 286.067);
 72 |   --chart-1: oklch(0.646 0.222 41.116);
 73 |   --chart-2: oklch(0.6 0.118 184.704);
 74 |   --chart-3: oklch(0.398 0.07 227.392);
 75 |   --chart-4: oklch(0.828 0.189 84.429);
 76 |   --chart-5: oklch(0.769 0.188 70.08);
 77 |   --sidebar: oklch(0.985 0 0);
 78 |   --sidebar-foreground: oklch(0.141 0.005 285.823);
 79 |   --sidebar-primary: oklch(0.21 0.006 285.885);
 80 |   --sidebar-primary-foreground: oklch(0.985 0 0);
 81 |   --sidebar-accent: oklch(0.967 0.001 286.375);
 82 |   --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
 83 |   --sidebar-border: oklch(0.92 0.004 286.32);
 84 |   --sidebar-ring: oklch(0.705 0.015 286.067);
 85 | }
 86 | 
 87 | .dark {
 88 |   --background: oklch(0.141 0.005 285.823);
 89 |   --foreground: oklch(0.985 0 0);
 90 |   --card: oklch(0.21 0.006 285.885);
 91 |   --card-foreground: oklch(0.985 0 0);
 92 |   --popover: oklch(0.21 0.006 285.885);
 93 |   --popover-foreground: oklch(0.985 0 0);
 94 |   --primary: oklch(0.92 0.004 286.32);
 95 |   --primary-foreground: oklch(0.21 0.006 285.885);
 96 |   --secondary: oklch(0.274 0.006 286.033);
 97 |   --secondary-foreground: oklch(0.985 0 0);
 98 |   --muted: oklch(0.274 0.006 286.033);
 99 |   --muted-foreground: oklch(0.705 0.015 286.067);
100 |   --accent: oklch(0.274 0.006 286.033);
101 |   --accent-foreground: oklch(0.985 0 0);
102 |   --destructive: oklch(0.704 0.191 22.216);
103 |   --border: oklch(1 0 0 / 10%);
104 |   --input: oklch(1 0 0 / 15%);
105 |   --ring: oklch(0.552 0.016 285.938);
106 |   --chart-1: oklch(0.488 0.243 264.376);
107 |   --chart-2: oklch(0.696 0.17 162.48);
108 |   --chart-3: oklch(0.769 0.188 70.08);
109 |   --chart-4: oklch(0.627 0.265 303.9);
110 |   --chart-5: oklch(0.645 0.246 16.439);
111 |   --sidebar: oklch(0.21 0.006 285.885);
112 |   --sidebar-foreground: oklch(0.985 0 0);
113 |   --sidebar-primary: oklch(0.488 0.243 264.376);
114 |   --sidebar-primary-foreground: oklch(0.985 0 0);
115 |   --sidebar-accent: oklch(0.274 0.006 286.033);
116 |   --sidebar-accent-foreground: oklch(0.985 0 0);
117 |   --sidebar-border: oklch(1 0 0 / 10%);
118 |   --sidebar-ring: oklch(0.552 0.016 285.938);
119 | }
120 | 
121 | @layer base {
122 |   * {
123 |     @apply border-border outline-ring/50;
124 |   }
125 |   body {
126 |     @apply bg-background text-foreground;
127 |   }
128 | }
129 | 
130 | .hero {
131 |   background: linear-gradient(30deg, rgba(0, 0, 0, 0.557), rgba(0, 0, 0, 0.677)),
132 |     url("../public/bgimage.webp");
133 |   background-size: cover;
134 |   background-repeat: no-repeat;
135 |   background-position: center;
136 | }


--------------------------------------------------------------------------------
/components/shared/header.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import {
  4 |   Sheet,
  5 |   SheetContent,
  6 |   SheetTrigger,
  7 |   SheetTitle,
  8 | } from "@/components/ui/sheet";
  9 | import { Menu } from "lucide-react";
 10 | import Image from "next/image";
 11 | import Link from "next/link";
 12 | import { usePathname } from "next/navigation";
 13 | import { useEffect, useState } from "react";
 14 | 
 15 | const links = [
 16 |   { label: "BOSH SAHIFA", url: "/" },
 17 |   { label: "BIZ HAQIMIZDA", url: "/about" },
 18 |   { label: "XIZMATLAR", url: "/services" },
 19 |   { label: "BLOGLAR", url: "/blogs" },
 20 | ];
 21 | 
 22 | function Header() {
 23 |   const pathname = usePathname();
 24 |   const [isOpen, setIsOpen] = useState(false);
 25 |   const [prevScrollPos, setPrevScrollPos] = useState(0);
 26 |   const [visible, setVisible] = useState(true);
 27 |   const [scrollY, setScrollY] = useState(0);
 28 | 
 29 |   useEffect(() => {
 30 |     setScrollY(window.pageYOffset);
 31 | 
 32 |     const handleScroll = () => {
 33 |       const currentScrollPos = window.pageYOffset;
 34 |       setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10);
 35 |       setPrevScrollPos(currentScrollPos);
 36 |       setScrollY(currentScrollPos);
 37 |     };
 38 | 
 39 |     window.addEventListener("scroll", handleScroll);
 40 |     return () => window.removeEventListener("scroll", handleScroll);
 41 |   }, [prevScrollPos]);
 42 | 
 43 |   const headerStyle = {
 44 |     top: visible ? "0" : "-100px",
 45 |   };
 46 | 
 47 |   return (
 48 |     <header
 49 |       className={`fixed left-0 top-0 z-50 w-full transition-all ${
 50 |         pathname !== "/" || scrollY >= 200 ? "bg-black" : "bg-transparent"
 51 |       }`}
 52 |       style={headerStyle}
 53 |     >
 54 |       <div className="container mx-auto h-20 px-6 flex items-center justify-between">
 55 |         <Link
 56 |           href="/"
 57 |           className="flex items-center gap-2 transition-transform hover:scale-105"
 58 |         >
 59 |           <Image
 60 |             src={"/mainlogo.webp"}
 61 |             alt={"seven sport center logo"}
 62 |             width={"50"}
 63 |             height={"50"}
 64 |           />
 65 |         </Link>
 66 | 
 67 |         <div className="flex items-center gap-8">
 68 |           <nav className="hidden md:block">
 69 |             <ul className="flex items-center gap-8">
 70 |               {links.map((item, index) => (
 71 |                 <li key={index}>
 72 |                   <Link
 73 |                     href={item.url}
 74 |                     className="relative text-white text-sm font-medium transition-colors hover:text-[#E94D35] after:absolute after:left-0 after:-bottom-1 after:h-0.5 after:w-0 after:bg-[#E94D35] after:transition-all hover:after:w-full"
 75 |                   >
 76 |                     {item.label}
 77 |                   </Link>
 78 |                 </li>
 79 |               ))}
 80 |             </ul>
 81 |           </nav>
 82 |           <Link
 83 |             href="tel:+998907521333"
 84 |             className="bg-red-600 hover:bg-red-700 text-white py-3 px-6 rounded-md transition-colors uppercase font-medium text-sm"
 85 |           >
 86 |             +998 88 680 11 44
 87 |           </Link>
 88 | 
 89 |           <Sheet open={isOpen} onOpenChange={setIsOpen}>
 90 |             <SheetTrigger asChild>
 91 |               <Menu className="text-2xl text-white md:hidden" />
 92 |             </SheetTrigger>
 93 |             <SheetContent
 94 |               side="right"
 95 |               className="bg-black border-l border-[#323232] p-0 h-full w-[80%] md:w-[450px] text-white"
 96 |             >
 97 |               <div className="flex flex-col">
 98 |                 <div className="p-6 border-b border-[#323232]">
 99 |                   <div className="flex items-center justify-between">
100 |                     <Link
101 |                       href="/"
102 |                       className="flex items-center gap-2 transition-transform hover:scale-105"
103 |                     >
104 |                       <Image
105 |                         src={"/mainlogo.webp"}
106 |                         alt={"seven sport center logo"}
107 |                         width={"50"}
108 |                         height={"50"}
109 |                       />
110 |                     </Link>
111 |                   </div>
112 |                 </div>
113 |                 <nav className="flex-1 p-6">
114 |                   <SheetTitle className="sr-only">Mobile Menu</SheetTitle>
115 |                   <ul className="flex flex-col gap-6">
116 |                     {links.map((item, index) => (
117 |                       <li key={index}>
118 |                         <Link
119 |                           href={item.url}
120 |                           className="text-white text-lg font-medium hover:text-[#E94D35] transition-colors"
121 |                           onClick={() => setIsOpen(false)}
122 |                         >
123 |                           {item.label}
124 |                         </Link>
125 |                       </li>
126 |                     ))}
127 |                   </ul>
128 |                 </nav>
129 |                 <div className="p-6 border-t border-[#323232] w-full">
130 |                   <Link
131 |                     href="tel:+998886801144"
132 |                     className="bg-red-600 hover:bg-red-700 text-white py-3 px-8 w-full block text-center rounded-md transition-colors uppercase font-medium text-sm"
133 |                   >
134 |                     +998 88 680 11 44
135 |                   </Link>
136 |                 </div>
137 |               </div>
138 |             </SheetContent>
139 |           </Sheet>
140 |         </div>
141 |       </div>
142 |     </header>
143 |   );
144 | }
145 | 
146 | export default Header;
147 | 


--------------------------------------------------------------------------------
/components/shared/image-gallery.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useState } from "react";
  4 | import Image from "next/image";
  5 | import { X, ChevronLeft, ChevronRight, ZoomIn } from "lucide-react";
  6 | import { cn } from "@/lib/utils";
  7 | 
  8 | interface ImageGalleryProps {
  9 |   images: string[];
 10 |   alt: string;
 11 | }
 12 | 
 13 | export function ImageGallery({ images, alt }: ImageGalleryProps) {
 14 |   const [isOpen, setIsOpen] = useState(false);
 15 |   const [currentIndex, setCurrentIndex] = useState(0);
 16 | 
 17 |   const openLightbox = (index: number) => {
 18 |     setCurrentIndex(index);
 19 |     setIsOpen(true);
 20 |     document.body.style.overflow = "hidden"; // Prevent scrolling when lightbox is open
 21 |   };
 22 | 
 23 |   const closeLightbox = () => {
 24 |     setIsOpen(false);
 25 |     document.body.style.overflow = ""; // Restore scrolling
 26 |   };
 27 | 
 28 |   const goToPrevious = (e: React.MouseEvent) => {
 29 |     e.stopPropagation();
 30 |     setCurrentIndex((prev) => (prev === 0 ? images.length - 1 : prev - 1));
 31 |   };
 32 | 
 33 |   const goToNext = (e: React.MouseEvent) => {
 34 |     e.stopPropagation();
 35 |     setCurrentIndex((prev) => (prev === images.length - 1 ? 0 : prev + 1));
 36 |   };
 37 | 
 38 |   // Handle keyboard navigation
 39 |   const handleKeyDown = (e: React.KeyboardEvent) => {
 40 |     if (e.key === "Escape") closeLightbox();
 41 |     if (e.key === "ArrowLeft")
 42 |       setCurrentIndex((prev) => (prev === 0 ? images.length - 1 : prev - 1));
 43 |     if (e.key === "ArrowRight")
 44 |       setCurrentIndex((prev) => (prev === images.length - 1 ? 0 : prev + 1));
 45 |   };
 46 | 
 47 |   if (!images || images.length === 0) {
 48 |     return null;
 49 |   }
 50 | 
 51 |   return (
 52 |     <>
 53 |       <div className="space-y-4">
 54 |         <div
 55 |           className="relative aspect-video overflow-hidden rounded-xl cursor-pointer group"
 56 |           onClick={() => openLightbox(0)}
 57 |         >
 58 |           <Image
 59 |             src={images[0] || "/placeholder.svg"}
 60 |             alt={`${alt} - main image`}
 61 |             fill
 62 |             className="object-cover transition-transform duration-500 group-hover:scale-105"
 63 |             sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px"
 64 |             priority
 65 |           />
 66 |           <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300 flex items-center justify-center opacity-0 group-hover:opacity-100">
 67 |             <div className="bg-black/50 p-3 rounded-full">
 68 |               <ZoomIn className="h-6 w-6 text-white" />
 69 |             </div>
 70 |           </div>
 71 |         </div>
 72 | 
 73 |         {images.length > 1 && (
 74 |           <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-2">
 75 |             {images.map((image, index) => (
 76 |               <div
 77 |                 key={index}
 78 |                 className={cn(
 79 |                   "relative aspect-square overflow-hidden rounded-md cursor-pointer",
 80 |                   index === 0 && "ring-2 ring-red-600"
 81 |                 )}
 82 |                 onClick={() => openLightbox(index)}
 83 |               >
 84 |                 <Image
 85 |                   src={image || "/placeholder.svg"}
 86 |                   alt={`${alt} - image ${index + 1}`}
 87 |                   fill
 88 |                   className="object-cover hover:scale-110 transition-transform duration-300"
 89 |                   sizes="(max-width: 768px) 33vw, 150px"
 90 |                 />
 91 |               </div>
 92 |             ))}
 93 |           </div>
 94 |         )}
 95 |       </div>
 96 | 
 97 |       {isOpen && (
 98 |         <div
 99 |           className="fixed inset-0 z-50 bg-black/90 h-screen flex items-center justify-center"
100 |           onClick={closeLightbox}
101 |           onKeyDown={handleKeyDown}
102 |           tabIndex={0}
103 |         >
104 |           <button
105 |             className="absolute top-4 right-4 text-white p-2 rounded-full bg-black/50 hover:bg-black/70 transition-colors z-10"
106 |             onClick={closeLightbox}
107 |             aria-label="Close lightbox"
108 |           >
109 |             <X className="h-6 w-6" />
110 |           </button>
111 | 
112 |           {images.length > 1 && (
113 |             <>
114 |               <button
115 |                 className="absolute left-4 top-1/2 -translate-y-1/2 text-white p-2 rounded-full bg-black/50 hover:bg-black/70 transition-colors z-10"
116 |                 onClick={goToPrevious}
117 |                 aria-label="Previous image"
118 |               >
119 |                 <ChevronLeft className="h-6 w-6" />
120 |               </button>
121 |               <button
122 |                 className="absolute right-4 top-1/2 -translate-y-1/2 text-white p-2 rounded-full bg-black/50 hover:bg-black/70 transition-colors z-10"
123 |                 onClick={goToNext}
124 |                 aria-label="Next image"
125 |               >
126 |                 <ChevronRight className="h-6 w-6" />
127 |               </button>
128 |             </>
129 |           )}
130 | 
131 |           <div className="absolute bottom-4 left-1/2 -translate-x-1/2 text-white bg-black/50 px-3 py-1 rounded-full text-sm">
132 |             {currentIndex + 1} / {images.length}
133 |           </div>
134 | 
135 |           <div className="w-full h-full flex items-center justify-center p-4 md:p-8">
136 |             <Image
137 |               src={images[currentIndex] || "/placeholder.svg"}
138 |               alt={`${alt} - fullscreen image ${currentIndex + 1}`}
139 |               fill
140 |               className="object-contain"
141 |               sizes="90vw"
142 |               priority
143 |             />
144 |           </div>
145 |         </div>
146 |       )}
147 |     </>
148 |   );
149 | }
150 | 


--------------------------------------------------------------------------------
/modules/Testimonial.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useCallback, useEffect, useState } from "react";
  4 | import { Quote, ChevronLeft, ChevronRight } from "lucide-react";
  5 | import Image from "next/image";
  6 | import useEmblaCarousel from "embla-carousel-react";
  7 | import { cn } from "@/lib/utils";
  8 | 
  9 | const testimonials = [
 10 |   {
 11 |     id: 1,
 12 |     name: "Abdulaziz Karimov",
 13 |     role: "Ota",
 14 |     quote:
 15 |       "O'g'lim 2 yildan beri bu klubda shug'ullanadi. Jismoniy rivojlanish bilan birga, intizom va hurmat kabi muhim fazilatlarni ham o'rgandi.",
 16 |     avatar:
 17 |       "https://upload.wikimedia.org/wikipedia/commons/8/8b/Valeriy_Konovalyuk_3x4.jpg",
 18 |   },
 19 |   {
 20 |     id: 2,
 21 |     name: "Dilnoza Ahmedova",
 22 |     role: "Ona",
 23 |     quote:
 24 |       "Murabbiylar juda malakali va bolalarga g'amxo'rlik bilan yondashadi. Qizim bu yerda nafaqat sport, balki hayotiy ko'nikmalarni ham o'rganmoqda.",
 25 |     avatar:
 26 |       "https://passport-photo.online/_optimized/prepare2.0498e1e2-opt-1920.WEBP",
 27 |   },
 28 |   {
 29 |     id: 3,
 30 |     name: "Jahongir Toshmatov",
 31 |     role: "Sobiq o'quvchi",
 32 |     quote:
 33 |       "Bu klubda olgan bilim va tajribam tufayli bugun milliy terma jamoada faoliyat yuritmoqdaman. Eng yaxshi boshlang'ich ta'lim uchun minnatdorman.",
 34 |     avatar:
 35 |       "https://s3.eu-west-2.amazonaws.com/static-candidates.democracyclub.org.uk/media/cache/29/9e/299e3c6f9f3b4e0278f7d2dc2b9134ef.jpg",
 36 |   },
 37 | ];
 38 | 
 39 | function Testimonial() {
 40 |   const [selectedIndex, setSelectedIndex] = useState(0);
 41 |   const [emblaRef, emblaApi] = useEmblaCarousel({
 42 |     loop: true,
 43 |     align: "center",
 44 |     skipSnaps: false,
 45 |   });
 46 | 
 47 |   const scrollPrev = useCallback(() => {
 48 |     if (emblaApi) emblaApi.scrollPrev();
 49 |   }, [emblaApi]);
 50 | 
 51 |   const scrollNext = useCallback(() => {
 52 |     if (emblaApi) emblaApi.scrollNext();
 53 |   }, [emblaApi]);
 54 | 
 55 |   const scrollTo = useCallback(
 56 |     (index: number) => {
 57 |       if (emblaApi) emblaApi.scrollTo(index);
 58 |     },
 59 |     [emblaApi]
 60 |   );
 61 | 
 62 |   const onSelect = useCallback(() => {
 63 |     if (!emblaApi) return;
 64 |     setSelectedIndex(emblaApi.selectedScrollSnap());
 65 |   }, [emblaApi]);
 66 | 
 67 |   useEffect(() => {
 68 |     if (!emblaApi) return;
 69 | 
 70 |     onSelect();
 71 |     emblaApi.on("select", onSelect);
 72 | 
 73 |     const autoplay = setInterval(() => {
 74 |       if (emblaApi.canScrollNext()) {
 75 |         emblaApi.scrollNext();
 76 |       } else {
 77 |         emblaApi.scrollTo(0);
 78 |       }
 79 |     }, 5000);
 80 | 
 81 |     return () => {
 82 |       emblaApi.off("select", onSelect);
 83 |       clearInterval(autoplay);
 84 |     };
 85 |   }, [emblaApi, onSelect]);
 86 | 
 87 |   return (
 88 |     <section className="py-40 bg-gray-50">
 89 |       <div className="container mx-auto px-4">
 90 |         <div className="text-center mb-12">
 91 |           <div className="flex justify-center items-center mb-4">
 92 |             <div className="w-16 h-[2px] bg-red-600"></div>
 93 |             <span className="mx-4 text-red-600 uppercase text-sm font-medium">
 94 |               BIZNING MUXLISLAR FIKRI
 95 |             </span>
 96 |             <div className="w-16 h-[2px] bg-red-600"></div>
 97 |           </div>
 98 | 
 99 |           <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-[#2D2756] max-w-3xl mx-auto leading-tight uppercase">
100 |             Ota-onalar va o&apos;quvchilar bizning klubimiz haqida nima
101 |             deyishadi
102 |           </h2>
103 |         </div>
104 | 
105 |         <div className="relative">
106 |           <div className="overflow-x-hidden" ref={emblaRef}>
107 |             <div className="flex">
108 |               {testimonials.map((testimonial) => (
109 |                 <div
110 |                   key={testimonial.id}
111 |                   className="flex-[0_0_100%] min-w-0 pl-4 md:flex-[0_0_33.33%]"
112 |                 >
113 |                   <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow h-full mx-4">
114 |                     <div className="flex items-start mb-4">
115 |                       <div className="w-16 h-16 mr-4">
116 |                         <Image
117 |                           src={testimonial.avatar || "/placeholder.svg"}
118 |                           alt={testimonial.name || "User"}
119 |                           width={64}
120 |                           height={64}
121 |                           className="w-16 h-16 object-cover rounded-full border-2 border-red-500"
122 |                         />
123 |                       </div>
124 |                       <div>
125 |                         <h3 className="font-bold text-lg text-[#2D2756]">
126 |                           {testimonial.name}
127 |                         </h3>
128 |                         <p className="text-gray-600">{testimonial.role}</p>
129 |                       </div>
130 |                     </div>
131 | 
132 |                     <div className="relative">
133 |                       <Quote className="absolute -top-2 -left-2 w-8 h-8 text-red-100 opacity-50" />
134 |                       <p className="text-gray-700 relative z-10 pl-4">
135 |                         {testimonial.quote}
136 |                       </p>
137 |                     </div>
138 |                   </div>
139 |                 </div>
140 |               ))}
141 |             </div>
142 |           </div>
143 | 
144 |           <button
145 |             onClick={scrollPrev}
146 |             className="absolute top-1/2 left-[20px] -translate-y-1/2 -translate-x-1/2 rounded-full p-3 shadow-md bg-red-500 transition-colors z-20"
147 |             aria-label="Previous testimonial"
148 |           >
149 |             <ChevronLeft className="h-6 w-6 text-white" />
150 |           </button>
151 | 
152 |           <button
153 |             onClick={scrollNext}
154 |             className="absolute top-1/2 right-[20px] -translate-y-1/2 translate-x-1/2 rounded-full p-3 shadow-md bg-red-500 transition-colors z-20"
155 |             aria-label="Next testimonial"
156 |           >
157 |             <ChevronRight className="h-6 w-6 text-white" />
158 |           </button>
159 |         </div>
160 | 
161 |         <div className="flex justify-center mt-8 space-x-2">
162 |           {testimonials.map((_, index) => (
163 |             <button
164 |               key={`indicator-${index}`}
165 |               onClick={() => scrollTo(index)}
166 |               className={cn(
167 |                 "w-3 h-3 rounded-full transition-all duration-300",
168 |                 index === selectedIndex ? "bg-red-600 w-6" : "bg-gray-300"
169 |               )}
170 |               aria-label={`Go to testimonial ${index + 1}`}
171 |             />
172 |           ))}
173 |         </div>
174 |       </div>
175 |     </section>
176 |   );
177 | }
178 | 
179 | export default Testimonial;
180 | 


--------------------------------------------------------------------------------
/modules/Blogs.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { fetcher } from "@/middlewares/Fetcher";
  4 | import { BlogPost } from "@/types/RootTypes";
  5 | import Image from "next/image";
  6 | import Link from "next/link";
  7 | import useSWR from "swr";
  8 | 
  9 | export default function BlogsModule() {
 10 |   const { data, error, isLoading } = useSWR<BlogPost[]>("/blog", fetcher);
 11 | 
 12 |   if (isLoading) return <BlogsModuleSkeleton />;
 13 | 
 14 |   const renderHeader = () => (
 15 |     <div className="text-center mb-12">
 16 |       <div className="flex justify-center items-center mb-4">
 17 |         <div className="w-16 h-[2px] bg-red-600" />
 18 |         <span className="mx-4 text-red-600 uppercase text-sm font-medium">
 19 |           YANGILIKLAR
 20 |         </span>
 21 |         <div className="w-16 h-[2px] bg-red-600" />
 22 |       </div>
 23 |       <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-[#2D2756] max-w-3xl mx-auto leading-tight">
 24 |         DZYUDO BO&apos;YICHA ENG SO&apos;NGGI YANGILIKLAR VA FOYDALI MASLAHATLAR
 25 |       </h2>
 26 |     </div>
 27 |   );
 28 | 
 29 |   if (error || !data || data.length === 0) {
 30 |     return (
 31 |       <section className="py-16 bg-gray-50">
 32 |         <div className="container mx-auto px-4">
 33 |           {renderHeader()}
 34 |           {error ? (
 35 |             <div className="bg-red-50 border border-red-200 text-red-700 p-4 rounded-md">
 36 |               <p className="font-medium">
 37 |                 Ma'lumotlarni yuklashda xatolik yuz berdi
 38 |               </p>
 39 |               <p className="text-sm mt-1">
 40 |                 Iltimos, keyinroq qayta urinib ko'ring yoki administrator bilan
 41 |                 bog'laning.
 42 |               </p>
 43 |             </div>
 44 |           ) : (
 45 |             <div className="flex justify-center items-center h-40">
 46 |               <p className="text-gray-500">Hech qanday maqola topilmadi</p>
 47 |             </div>
 48 |           )}
 49 |         </div>
 50 |       </section>
 51 |     );
 52 |   }
 53 | 
 54 |   return (
 55 |     <div className="container mx-auto py-16 px-4">
 56 |       {renderHeader()}
 57 |       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
 58 |         {data.map((blog, index) => (
 59 |           <div
 60 |             key={index}
 61 |             className="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300"
 62 |           >
 63 |             <Link href={`/blogs/${blog.title || "#"}`}>
 64 |               <div className="overflow-hidden">
 65 |                 <Image
 66 |                   src={blog.photos?.[0] || "/placeholder.svg"}
 67 |                   alt={blog.title}
 68 |                   unoptimized
 69 |                   width={100}
 70 |                   height={100}
 71 |                   className="w-full aspect-[4/3] object-cover transition-transform hover:scale-105 duration-500"
 72 |                 />
 73 |               </div>
 74 |             </Link>
 75 |             <div className="p-5 bg-gray-50">
 76 |               {blog.createdAt && (
 77 |                 <span className="text-gray-600 text-sm block mb-2">
 78 |                   {new Date(blog.createdAt).toLocaleDateString()}
 79 |                 </span>
 80 |               )}
 81 |               <h3 className="text-xl font-bold text-gray-900 mb-2">
 82 |                 <Link
 83 |                   href={`/blogs/${blog.title || "#"}`}
 84 |                   className="hover:text-red-600 transition-colors duration-300"
 85 |                 >
 86 |                   {blog.title}
 87 |                 </Link>
 88 |               </h3>
 89 |               <p className="text-gray-600 line-clamp-2 mb-3">
 90 |                 {blog.description}
 91 |               </p>
 92 |               <Link
 93 |                 href={`/blogs/${blog.title || "#"}`}
 94 |                 className="text-red-600 font-medium inline-flex items-center hover:text-red-700"
 95 |               >
 96 |                 Batafsil
 97 |                 <svg
 98 |                   className="ml-1"
 99 |                   xmlns="http://www.w3.org/2000/svg"
100 |                   width="16"
101 |                   height="16"
102 |                   viewBox="0 0 24 24"
103 |                   fill="none"
104 |                   stroke="currentColor"
105 |                   strokeWidth="2"
106 |                   strokeLinecap="round"
107 |                   strokeLinejoin="round"
108 |                 >
109 |                   <polyline points="9 18 15 12 9 6" />
110 |                 </svg>
111 |               </Link>
112 |             </div>
113 |           </div>
114 |         ))}
115 |       </div>
116 | 
117 |       <div className="text-center mt-12">
118 |         <Link
119 |           href="/blogs"
120 |           className="inline-flex items-center justify-center px-6 py-3 bg-red-600 text-white font-medium rounded hover:bg-red-700 transition-colors duration-300 group"
121 |         >
122 |           Barcha maqolalarni ko&apos;rish
123 |           <svg
124 |             className="ml-2 transform group-hover:translate-x-1 transition-transform"
125 |             xmlns="http://www.w3.org/2000/svg"
126 |             width="16"
127 |             height="16"
128 |             viewBox="0 0 24 24"
129 |             fill="none"
130 |             stroke="currentColor"
131 |             strokeWidth="2"
132 |             strokeLinecap="round"
133 |             strokeLinejoin="round"
134 |           >
135 |             <polyline points="9 18 15 12 9 6" />
136 |           </svg>
137 |         </Link>
138 |       </div>
139 |     </div>
140 |   );
141 | }
142 | 
143 | function BlogsModuleSkeleton() {
144 |   return (
145 |     <div className="container mx-auto py-16 px-4">
146 |       <div className="text-center mb-12">
147 |         <div className="flex justify-center items-center mb-4">
148 |           <div className="w-16 h-[2px] bg-red-600" />
149 |           <span className="mx-4 text-red-600 uppercase text-sm font-medium">
150 |             YANGILIKLAR
151 |           </span>
152 |           <div className="w-16 h-[2px] bg-red-600" />
153 |         </div>
154 |         <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-[#2D2756] max-w-3xl mx-auto leading-tight">
155 |           DZYUDO BO&apos;YICHA ENG SO&apos;NGGI YANGILIKLAR VA FOYDALI
156 |           MASLAHATLAR
157 |         </h2>
158 |       </div>
159 | 
160 |       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
161 |         {Array.from({ length: 4 }).map((_, index) => (
162 |           <div
163 |             key={index}
164 |             className="bg-white rounded-lg overflow-hidden shadow-sm animate-pulse"
165 |           >
166 |             <div className="w-full aspect-[4/3] bg-gray-200" />
167 |             <div className="p-5 bg-gray-50">
168 |               <div className="h-4 w-24 bg-gray-200 rounded mb-2" />
169 |               <div className="h-6 bg-gray-200 rounded mb-2" />
170 |               <div className="h-4 bg-gray-200 rounded mb-3" />
171 |               <div className="h-4 w-20 bg-gray-200 rounded" />
172 |             </div>
173 |           </div>
174 |         ))}
175 |       </div>
176 | 
177 |       <div className="text-center mt-12">
178 |         <div className="inline-block h-10 w-48 bg-gray-200 rounded animate-pulse" />
179 |       </div>
180 |     </div>
181 |   );
182 | }
183 | 


--------------------------------------------------------------------------------
/modules/Trainers.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import Title from "@/components/shared/Title";
  4 | import { fetcher } from "@/middlewares/Fetcher";
  5 | import type { TrainerMember } from "@/types/RootTypes";
  6 | import useEmblaCarousel from "embla-carousel-react";
  7 | import { Award, ChevronLeft, ChevronRight, Clock, Users } from "lucide-react";
  8 | import Image from "next/image";
  9 | import Link from "next/link";
 10 | import { useCallback, useEffect, useState } from "react";
 11 | import useSWR from "swr";
 12 | 
 13 | export default function TrainersModule() {
 14 |   const { data, error, isLoading } = useSWR<TrainerMember[]>(
 15 |     `/trainer`,
 16 |     fetcher
 17 |   );
 18 | 
 19 |   const [emblaRef, emblaApi] = useEmblaCarousel({
 20 |     loop: true,
 21 |     align: "start",
 22 |     slidesToScroll: 1,
 23 |   });
 24 | 
 25 |   const [canScrollPrev, setCanScrollPrev] = useState(false);
 26 |   const [canScrollNext, setCanScrollNext] = useState(true);
 27 | 
 28 |   const onSelect = useCallback(() => {
 29 |     if (!emblaApi) return;
 30 |     setCanScrollPrev(emblaApi.canScrollPrev());
 31 |     setCanScrollNext(emblaApi.canScrollNext());
 32 |   }, [emblaApi]);
 33 | 
 34 |   useEffect(() => {
 35 |     if (!emblaApi) return;
 36 | 
 37 |     emblaApi.on("select", onSelect);
 38 |     onSelect();
 39 | 
 40 |     return () => {
 41 |       emblaApi.off("select", onSelect);
 42 |     };
 43 |   }, [emblaApi, onSelect]);
 44 | 
 45 |   const scrollPrev = () => emblaApi && emblaApi.scrollPrev();
 46 |   const scrollNext = () => emblaApi && emblaApi.scrollNext();
 47 | 
 48 |   return (
 49 |     <section className="py-16 bg-gray-50">
 50 |       <div className="container mx-auto px-4">
 51 |         <div className="flex flex-col md:flex-row md:items-center md:justify-between mb-12">
 52 |           <div className="space-y-6">
 53 |             <Title>BIZNING JAMOA</Title>
 54 |             <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-[#2D2756] max-w-2xl">
 55 |               ENG TAJRIBALI MURABBIYLARIMIZ
 56 |             </h2>
 57 |           </div>
 58 | 
 59 |           {isLoading ? (
 60 |             <div className="mt-6 md:mt-0">
 61 |               <div className="animate-pulse h-10 w-32 bg-gray-200 rounded"></div>
 62 |             </div>
 63 |           ) : error ? (
 64 |             <div className="mt-6 md:mt-0">
 65 |               <p className="text-red-500">
 66 |                 Xatolik yuz berdi. Qayta urinib ko'ring.
 67 |               </p>
 68 |             </div>
 69 |           ) : (
 70 |             <div className="flex items-center gap-4 mt-6 md:mt-0">
 71 |               <button
 72 |                 onClick={scrollPrev}
 73 |                 className={`p-2 rounded-full border border-gray-300 ${
 74 |                   !canScrollPrev
 75 |                     ? "opacity-50 cursor-not-allowed"
 76 |                     : "hover:bg-gray-100"
 77 |                 }`}
 78 |                 disabled={!canScrollPrev}
 79 |                 aria-label="Previous slide"
 80 |               >
 81 |                 <ChevronLeft className="h-6 w-6 text-gray-700" />
 82 |               </button>
 83 |               <button
 84 |                 onClick={scrollNext}
 85 |                 className={`p-2 rounded-full border border-gray-300 ${
 86 |                   !canScrollNext
 87 |                     ? "opacity-50 cursor-not-allowed"
 88 |                     : "hover:bg-gray-100"
 89 |                 }`}
 90 |                 disabled={!canScrollNext}
 91 |                 aria-label="Next slide"
 92 |               >
 93 |                 <ChevronRight className="h-6 w-6 text-gray-700" />
 94 |               </button>
 95 |               <Link
 96 |                 href="/trainers"
 97 |                 className="bg-red-600 hover:bg-red-700 text-white py-3 px-8 rounded-md transition-colors uppercase font-medium text-sm flex items-center group ml-2"
 98 |               >
 99 |                 Batafsil ma&apos;lumotlar
100 |                 <svg
101 |                   xmlns="http://www.w3.org/2000/svg"
102 |                   width="16"
103 |                   height="16"
104 |                   viewBox="0 0 24 24"
105 |                   fill="none"
106 |                   stroke="currentColor"
107 |                   strokeWidth="2"
108 |                   strokeLinecap="round"
109 |                   strokeLinejoin="round"
110 |                   className="ml-2 transform group-hover:translate-x-1 transition-transform"
111 |                 >
112 |                   <polyline points="9 18 15 12 9 6"></polyline>
113 |                 </svg>
114 |               </Link>
115 |             </div>
116 |           )}
117 |         </div>
118 | 
119 |         {isLoading ? (
120 |           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
121 |             {[1, 2, 3].map((i) => (
122 |               <div
123 |                 key={i}
124 |                 className="bg-white rounded-lg shadow-md p-4 animate-pulse"
125 |               >
126 |                 <div className="h-64 bg-gray-200 rounded-md mb-4"></div>
127 |                 <div className="h-6 bg-gray-200 rounded w-3/4 mb-2"></div>
128 |                 <div className="h-4 bg-gray-200 rounded w-1/2"></div>
129 |               </div>
130 |             ))}
131 |           </div>
132 |         ) : error ? (
133 |           <div className="bg-red-50 border border-red-200 text-red-700 p-4 rounded-md">
134 |             <p className="font-medium">
135 |               Ma'lumotlarni yuklashda xatolik yuz berdi
136 |             </p>
137 |             <p className="text-sm mt-1">
138 |               Iltimos, keyinroq qayta urinib ko'ring yoki administrator bilan
139 |               bog'laning.
140 |             </p>
141 |           </div>
142 |         ) : data && data.length > 0 ? (
143 |           <div className="overflow-hidden" ref={emblaRef}>
144 |             <div className="flex">
145 |               {data.map((member, index) => (
146 |                 <div
147 |                   key={index}
148 |                   className="flex-[0_0_100%] sm:flex-[0_0_50%] lg:flex-[0_0_33.333%] p-2"
149 |                 >
150 |                   <div className="bg-white border border-gray-200 rounded-lg h-full flex flex-col group">
151 |                     <div className="aspect-square overflow-hidden">
152 |                       <Image
153 |                         src={member.photo || "/placeholder.svg"}
154 |                         alt={member.fullName}
155 |                         unoptimized={true}
156 |                         width={400}
157 |                         height={400}
158 |                         className="w-full h-full object-cover group-hover:scale-105 transition-all duration-300"
159 |                       />
160 |                     </div>
161 | 
162 |                     <div className="p-4 flex flex-col flex-grow border-t">
163 |                       <h3 className="text-lg font-medium text-gray-900 mb-4">
164 |                         {member.fullName}
165 |                       </h3>
166 | 
167 |                       <div className="mt-auto pt-4 border-t border-gray-100">
168 |                         <div className="grid grid-cols-3 gap-2">
169 |                           <div className="flex flex-col text-center">
170 |                             <div className="flex items-center justify-center gap-1.5 mb-1">
171 |                               <Clock size={14} className="text-gray-500" />
172 |                               <span className="text-xs text-gray-500">
173 |                                 Tajriba
174 |                               </span>
175 |                             </div>
176 |                             <span className="text-sm font-medium text-red-600">
177 |                               {member.experience} Yil
178 |                             </span>
179 |                           </div>
180 | 
181 |                           <div className="flex flex-col text-center">
182 |                             <div className="flex items-center justify-center gap-1.5 mb-1">
183 |                               <Award size={14} className="text-gray-500" />
184 |                               <span className="text-xs text-gray-500">
185 |                                 Darajasi
186 |                               </span>
187 |                             </div>
188 |                             <span className="text-sm font-medium text-red-600">
189 |                               {member.level} belbog
190 |                             </span>
191 |                           </div>
192 | 
193 |                           <div className="flex flex-col text-center">
194 |                             <div className="flex items-center justify-center gap-1.5 mb-1">
195 |                               <Users size={14} className="text-gray-500" />
196 |                               <span className="text-xs text-gray-500">
197 |                                 Shogirtlar
198 |                               </span>
199 |                             </div>
200 |                             <span className="text-sm font-medium text-red-600">
201 |                               {member.students}
202 |                             </span>
203 |                           </div>
204 |                         </div>
205 |                       </div>
206 |                     </div>
207 |                   </div>
208 |                 </div>
209 |               ))}
210 |             </div>
211 |           </div>
212 |         ) : (
213 |           <div className="text-center py-12">
214 |             <p className="text-gray-500">Hozircha murabbiylar mavjud emas.</p>
215 |           </div>
216 |         )}
217 |       </div>
218 |     </section>
219 |   );
220 | }
221 | 


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