151 lines
6.9 KiB
TypeScript
151 lines
6.9 KiB
TypeScript
"use client";
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
|
import SplitAbout from '@/components/sections/about/SplitAbout';
|
|
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
import { Award, Users, Sparkles } from 'lucide-react';
|
|
|
|
export default function HomePage() {
|
|
const navItems = [
|
|
{ name: "Home", id: "/" },
|
|
{ name: "Portfolio", id: "/portfolio" },
|
|
{ name: "Services", id: "/services" },
|
|
{ name: "About", id: "/about" },
|
|
{ name: "Contact", id: "/contact" }
|
|
];
|
|
|
|
const footerColumns = [
|
|
{
|
|
title: "Navigatsiya", items: [
|
|
{ label: "Bosh sahifa", href: "/" },
|
|
{ label: "Portfolio", href: "/portfolio" }
|
|
]
|
|
},
|
|
{
|
|
title: "Ijtimoiy tarmoqlar", items: [
|
|
{ label: "Telegram", href: "https://t.me/monstyle" },
|
|
{ label: "Instagram", href: "https://instagram.com/monstyle" },
|
|
{ label: "Email", href: "mailto:info@monstyle.uz" }
|
|
]
|
|
}
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="mediumSmall"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="floatingGradient"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="MONSTYLE"
|
|
navItems={navItems}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogo
|
|
logoText="MONSTYLE"
|
|
description="Brendingizni keyingi bosqichga olib chiqing\nLogo dizayn, brending va veb-sayt yechimlari"
|
|
buttons={[
|
|
{ text: "Portfolio ko'rish", href: "/portfolio" },
|
|
{ text: "Bog'lanish", href: "/contact" }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/messy-office-desk-still-life_23-2150155615.jpg"
|
|
imageAlt="modern minimalist design studio interior white blue"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
title="Biz Haqimizda"
|
|
description="MONSTYLE — brending va dizayn sohasida kreativ yechimlar taklif etuvchi studiya. Bizning maqsadimiz — mijozlarimizga unutilmas brend identifikatsiyasini yaratish, ularni raqamli dunyoda ajralib turishga yordam berish va bizneslarini rivojlantirish."
|
|
bulletPoints={[
|
|
{ title: "Kreativlik", description: "Har bir loyihaga noyob va yangi yondashuvni ta'minlaymiz." },
|
|
{ title: "Sifat", description: "Ishimizda eng yuqori standartlarga rioya qilamiz." },
|
|
{ title: "Mijozga yo'naltirilganlik", description: "Mijozlarimizning ehtiyojlarini birinchi o'ringa qo'yamiz." }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/multiethnic-designers-looking-tablet-screen-woman-hands_74855-10283.jpg"
|
|
imageAlt="design team collaborating modern office"
|
|
mediaAnimation="opacity"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="why-choose-us" data-section="why-choose-us">
|
|
<FeatureCardSeven
|
|
title="Nima uchun bizni tanlaysiz?"
|
|
description="Bizning tajribamiz va kreativ yondashuvimiz brendingizni bozorda ajratib turishga yordam beradi."
|
|
features={[
|
|
{ title: "Kreativ yechimlar", description: "Biz har bir mijozning noyob talablariga mos keladigan innovatsion g'oyalarni taklif etamiz.", imageSrc: "http://img.b2bpic.net/free-photo/geometric-abstract-art-marbling-colorful_181624-61733.jpg", imageAlt: "abstract creative design concept blue white" },
|
|
{ title: "Professional jamoa", description: "Tajribali dizaynerlar va brend mutaxassisardan iborat jamoamiz xizmatingizda.", imageSrc: "http://img.b2bpic.net/free-photo/colleagues-smiling-speaking-discussing-drawings-new-ideas_176420-1672.jpg", imageAlt: "professional business meeting collaboration" },
|
|
{ title: "Mijozga e'tibor", description: "Biz mijozlarimiz bilan yaqin hamkorlikda ishlaymiz va ularning maqsadlariga erishishga yordam beramiz.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-female-applicant-receiving-access-security-card-from-hr-manager-onboarding_482257-136431.jpg", imageAlt: "client meeting design discussion laptop" }
|
|
]}
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="Bizga ishonganlar"
|
|
description="Biz ishonchli hamkorlik orqali mijozlarimizning muvaffaqiyatiga hissa qo'shamiz."
|
|
names={[
|
|
"GlobalTech", "Innovate Solutions", "FutureCorp", "CreativeHub", "MarketMakers", "Synergy Group", "Visionary Brands"
|
|
]}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="our-achievements" data-section="our-achievements">
|
|
<MetricCardThree
|
|
title="Bizning Muvaffaqiyatlarimiz"
|
|
description="Bizning tajribamiz va natijalarimiz o'z-o'zidan so'zlaydi. Biz mijozlarimizga doimiy ravishda yuqori sifatli xizmat ko'rsatib kelmoqdamiz."
|
|
metrics={[
|
|
{ id: "metric-1", icon: Award, title: "Muvaffaqiyatli loyihalar", value: "150+" },
|
|
{ id: "metric-2", icon: Users, title: "Mamnun mijozlar", value: "98%" },
|
|
{ id: "metric-3", icon: Sparkles, title: "Yaratilgan logotiplar", value: "200+" }
|
|
]}
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact-cta" data-section="contact-cta">
|
|
<ContactText
|
|
text="Keling, loyihangizni birgalikda muhokama qilaylik. Bizning jamoamiz sizning brendingizni yangi cho'qqilarga olib chiqishga tayyor."
|
|
buttons={[
|
|
{ text: "Bog'lanish", href: "/contact" },
|
|
{ text: "Telegram", href: "https://t.me/monstyle" }
|
|
]}
|
|
background={{ variant: "radial-gradient" }}
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={footerColumns}
|
|
bottomLeftText="© MONSTYLE. Barcha huquqlar himoyalangan."
|
|
bottomRightText="Dizayn va brending studiyasi."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |