Канадын Боловсролын Консалтинг (CEC)

ХОЛБОО БАРИХ
3–5 minutes

read

import { useState } from “react”;

export default function CECHome() {
const [page, setPage] = useState(“home”);

// Өнгөний тогтмол утгууд (Логоны өнгөнд суурилсан)
const colors = {
darkBlue: “bg-[#003366]”,
textBlue: “text-[#003366]”,
red: “bg-[#D32F2F]”,
textRed: “text-[#D32F2F]”,
lightGray: “bg-gray-50”
};

const countries = [
{ name: “Канад”, flag: “🇨🇦” },
{ name: “АНУ”, flag: “🇺🇸” },
{ name: “Австрали”, flag: “🇦🇺” },
{ name: “Шинэ Зеланд”, flag: “🇳🇿” },
{ name: “Хятад”, flag: “🇨🇳” },
{ name: “Тайвань”, flag: “🇹🇼” },
{ name: “Филиппин”, flag: “🇵🇭” },
{ name: “Сингапур”, flag: “🇸🇬” },
{ name: “Герман”, flag: “🇩🇪” }
];

const renderPage = () => {
switch (page) {
case “about”:
return (

text-4xl font-bold mb-6 ${colors.textBlue} border-b-4 border-red-600 inline-block}>Бидний тухай

Канадын Боловсролын Консалтинг (CEC) нь гадаад хэлний сургалт болон олон улсын боловсролын зуучлалын чиглэлээр олон жилийн туршлагатай хамт олон юм.

Бид суралцагч бүрийн хүсэл мөрөөдөл, зорилгод нийцсэн хамгийн оновчтой боловсролын гарцыг нээж өгөхөөр ажилладаг. Дэлхийн шилдэг их дээд сургуулиудад зуучлахаас гадна хэлний бэлтгэлийн цогц хөтөлбөрийг санал болгож байна.
);

  case "services":
    return (
      <div className="p-10 bg-gray-50 min-h-screen">
        <h1 className={`text-3xl font-bold mb-12 text-center ${colors.textBlue}`}>Үйлчилгээний чиглэлүүд</h1>
        <div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
          <div className="p-8 bg-white shadow-lg rounded-3xl border-t-8 border-blue-900">
            <h2 className={`text-2xl font-bold mb-4 flex items-center gap-2 ${colors.textBlue}`}>🇬🇧 Англи хэл</h2>
            <ul className="space-y-3 text-gray-600">
              <li className="flex items-center gap-2">✓ Гадаад багштай ярианы клуб</li>
              <li className="flex items-center gap-2">✓ IELTS-ийн эрчимжүүлсэн бэлтгэл</li>
              <li className="flex items-center gap-2">✓ Академик англи хэлний түвшин тогтоох</li>
            </ul>
          </div>
          <div className="p-8 bg-white shadow-lg rounded-3xl border-t-8 border-red-600">
            <h2 className={`text-2xl font-bold mb-4 flex items-center gap-2 ${colors.textRed}`}>🇨🇳 Хятад хэл</h2>
            <ul className="space-y-3 text-gray-600">
              <li className="flex items-center gap-2">✓ 23 жилийн заах арга зүйн туршлага</li>
              <li className="flex items-center gap-2">✓ HSK 1-6 түвшний бэлтгэл</li>
              <li className="flex items-center gap-2">✓ Хүүхэд, насанд хүрэгчдийн анги</li>
            </ul>
          </div>
        </div>
      </div>
    );

  case "study":
    return (
      <div className="p-10 min-h-screen">
        <h1 className={`text-3xl font-bold mb-12 text-center ${colors.textBlue}`}>Зуучлах улс орнууд</h1>
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
          {countries.map((c) => (
            <div key={c.name} className="p-6 bg-white border border-gray-100 shadow-sm rounded-2xl hover:shadow-xl hover:-translate-y-2 transition duration-300 text-center">
              <span className="text-4xl mb-3 block">{c.flag}</span>
              <h2 className={`text-xl font-bold ${colors.textBlue}`}>{c.name}</h2>
              <p className="mt-2 text-xs text-gray-500 uppercase tracking-widest">Сургууль, Виз, Зөвлөгөө</p>
            </div>
          ))}
        </div>
      </div>
    );

  case "contact":
    return (
      <div className="p-10 max-w-4xl mx-auto min-h-screen">
        <div className="grid md:grid-cols-2 gap-12 bg-white p-8 rounded-3xl shadow-2xl border border-gray-100">
          <div>
            <h1 className={`text-3xl font-bold mb-6 ${colors.textBlue}`}>Холбоо барих</h1>
            <div className="space-y-6">
              <div className="flex items-start gap-4">
                <span className="text-2xl">📍</span>
                <p className="text-gray-600">Сүхбаатар дүүрэг, 8-р хороо, Ривэр Кэсл Бизнес Апартмент, 4-402 тоот</p>
              </div>
              <div className="flex items-center gap-4 text-lg font-semibold text-blue-900">
                <span className="text-2xl">📞</span>
                <a href="tel:89015391">89015391</a>, <a href="tel:80440629">80440629</a>
              </div>
              <div className="flex items-center gap-4">
                <span className="text-2xl">📧</span>
                <p className="text-gray-600">info@cec.mn</p>
              </div>
            </div>
          </div>
          <form className="space-y-4">
            <input type="text" placeholder="Таны нэр" className="w-full p-4 bg-gray-50 border-none rounded-xl focus:ring-2 focus:ring-blue-900" />
            <input type="tel" placeholder="Утасны дугаар" className="w-full p-4 bg-gray-50 border-none rounded-xl focus:ring-2 focus:ring-blue-900" />
            <textarea placeholder="Таны сонирхож буй улс эсвэл сургалт" rows="4" className="w-full p-4 bg-gray-50 border-none rounded-xl focus:ring-2 focus:ring-blue-900"></textarea>
            <button className={`w-full py-4 rounded-xl text-white font-bold ${colors.darkBlue} hover:opacity-90 transition`}>Хүсэлт илгээх</button>
          </form>
        </div>
      </div>
    );

  default:
    return (
      <>
        {/* HERO SECTION */}
        <section className={`relative py-24 text-white overflow-hidden ${colors.darkBlue}`}>
          <div className="absolute top-0 right-0 w-1/2 h-full bg-red-600 skew-x-12 translate-x-32 opacity-20 hidden md:block"></div>
          <div className="container mx-auto px-6 relative z-10 flex flex-col items-center text-center">
            {/* Логоны хэсэг */}
            <img src="/logo-cec.jpg" alt="CEC Logo" className="w-48 h-48 rounded-full shadow-2xl mb-8 border-4 border-white bg-white object-contain" />
            <h1 className="text-4xl md:text-6xl font-black mb-6 leading-tight">
              КАНАДЫН БОЛОВСРОЛЫН <br/><span className="text-red-500">КОНСАЛТИНГ</span>
            </h1>
            <p className="text-xl md:text-2xl mb-10 max-w-2xl font-light opacity-90">
              Дэлхийн боловсролыг танд ойртуулна. Бид таны ирээдүйн баталгаа.
            </p>
            <div className="flex flex-wrap justify-center gap-4">
              <button onClick={() => setPage("contact")} className="px-10 py-4 bg-red-600 rounded-full font-bold text-lg hover:bg-white hover:text-red-600 transition duration-300 shadow-lg">
                Зөвлөгөө авах
              </button>
              <button onClick={() => setPage("study")} className="px-10 py-4 bg-transparent border-2 border-white rounded-full font-bold text-lg hover:bg-white hover:text-blue-900 transition duration-300">
                Улс орнууд үзэх
              </button>
            </div>
          </div>
        </section>

        {/* QUICK STATS */}
        <div className="container mx-auto px-6 -mt-10 relative z-20">
          <div className="grid md:grid-cols-3 gap-0 shadow-2xl rounded-3xl overflow-hidden">
            <div className="bg-white p-8 text-center border-r">
              <h3 className={`text-4xl font-bold ${colors.textBlue}`}>23+</h3>
              <p className="text-gray-500 uppercase text-xs mt-2 font-bold tracking-widest">Жилийн туршлага</p>
            </div>
            <div className="bg-white p-8 text-center border-r">
              <h3 className={`text-4xl font-bold ${colors.textBlue}`}>9+</h3>
              <p className="text-gray-500 uppercase text-xs mt-2 font-bold tracking-widest">Зуучлах улс</p>
            </div>
            <div className="bg-white p-8 text-center">
              <h3 className={`text-4xl font-bold ${colors.textBlue}`}>100%</h3>
              <p className="text-gray-500 uppercase text-xs mt-2 font-bold tracking-widest">Сэтгэл ханамж</p>
            </div>
          </div>
        </div>
      </>
    );
}

};

return (

{/* NAVIGATION */}

setPage(“home”)}>

C

font-black text-xl tracking-tighter ${colors.textBlue}}>CEC CONSULTING

    <div className="hidden md:flex space-x-8 font-bold text-sm uppercase">
      {["home", "about", "services", "study", "contact"].map((p) => (
        <button
          key={p}
          onClick={() => setPage(p)}
          className={`transition hover:text-red-600 ${page === p ? "text-red-600 border-b-2 border-red-600" : colors.textBlue}`}
        >
          {p === "home" ? "Нүүр" : p === "about" ? "Бидний тухай" : p === "services" ? "Үйлчилгээ" : p === "study" ? "Сургууль" : "Холбоо барих"}
        </button>
      ))}
    </div>
  </nav>

  {/* CONTENT */}
  <main>{renderPage()}</main>

  {/* FOOTER */}
  <footer className={`${colors.darkBlue} text-white py-12`}>
    <div className="container mx-auto px-6 grid md:grid-cols-3 gap-12">
      <div>
        <h3 className="text-xl font-bold mb-4">CEC Consulting</h3>
        <p className="opacity-70 text-sm">Олон улсын боловсролын стандартыг Монголд. Бид таныг дэлхийн боловсролтой холбоно.</p>
      </div>
      <div>
        <h4 className="font-bold mb-4 uppercase text-sm tracking-widest">Улс орнууд</h4>
        <div className="grid grid-cols-2 gap-2 text-sm opacity-70">
          {countries.map(c => <span key={c.name}>{c.name}</span>)}
        </div>
      </div>
      <div>
        <h4 className="font-bold mb-4 uppercase text-sm tracking-widest">Холбогдох</h4>
        <p className="text-sm opacity-70">Утас: 89015391, 80440629</p>
        <p className="text-sm opacity-70 mt-2">Хаяг: Ривэр Кэсл, 4-402 тоот</p>
      </div>
    </div>
    <div className="text-center mt-12 pt-8 border-t border-white/10 text-xs opacity-50">
      &copy; 2026 Canada Education Consulting. Бүх эрх хуулиар хамгаалагдсан.
    </div>
  </footer>
</div>

);
}

, , , ,

Leave a comment