Бөлімдер компоненттеріне шолу (Section Components Overview)

Бөлім компоненттері әрбір тақырып бетінің құрылыс блоктары болып табылады. Әрбір тақырып беті әр тақырып үшін арнайы нұсқасы бар 12-ден астам бөлімнен тұрады.

Қолжетімді бөлімдер

Басты (Hero)

Тақырыпқа тән анимациялары бар толық экранды бастапқы бөлімдер.

Біз туралы (About)

Компанияны немесе өнімді таныстыру бөлімдері.

Ерекшеліктер (Features)

Торлар, тізімдер және карталар бар өнім мүмкіндіктерін көрсету.

Портфолио (Portfolio)

Жоба галереялары мен көрмелері.

Баға (Pricing)

Жоспарлары мен салыстырулары бар баға кестелері.

Пікірлер (Testimonials)

Әлеуметтік дәлелдер және тұтынушылардың пікірлері.

Жиі қойылатын сұрақтар (FAQ)

Аккордеон UI арқылы жиі қойылатын сұрақтар.

Әрекетке шақыру (CTA)

Конверсияларды арттыруға арналған әрекетке шақыру бөлімдері.

Байланыс (Contact)

Valibot тексеруі бар байланыс пішіндері.

Навигация (Navbar)

Тақырыпқа тән тақырып пен навигация тақталары.

Төменгі деректеме (Footer)

Сілтемелер, әлеуметтік желілер және брендинг бар төменгі сайт бөлімдері.

Ол қалай жұмыс істейді

Әрбір бөлімде 6 тақырып нұсқасы бар — әр тақырып үшін біреу (Liquid, Glass, Neo, Luxury, Minimal, Aurora). src/pages/[theme].astro мекенжайындағы динамикалық бет сәйкес нұсқаны көрсету үшін компонент картасын пайдаланады:

---
// [theme].astro файлынан жеңілдетілген
const componentMap = {
  liquid: { Hero: HeroLiquid, About: AboutLiquid, ... },
  glass:  { Hero: HeroGlass,  About: AboutGlass,  ... },
  // neo, luxury, minimal, aurora...
};

const components = componentMap[themeId];
---

<components.Hero />
<components.About />
<components.Features />

ℹ️

Сыртқы Props жоқ

Бөлім компоненттері props қабылдамайды. Барлық мәтіндік мазмұн src/locales/{lang}/{section}.json файлынан useTranslations() арқылы жүктеледі. Кез келген бөлімнің мазмұнын өзгерту үшін сәйкес тілдің JSON файлын өңдеңіз.

Файл құрылымы

Әрбір бөлім тұрақты каталог үлгісін ұстанады:

src/components/sections/{section}/
├── {Section}Liquid.astro
├── {Section}Glass.astro
├── {Section}Neo.astro
├── {Section}Luxury.astro
├── {Section}Minimal.astro
└── {Section}Aurora.astro

Әр бөлімге арналған CSS src/styles/components/{section}/ мекенжайында орналасқан.