Build dimitarseo.com — Burst-Style Bulgarian Redesign

You are redesigning dimitarseo.com — the personal agency website of Димитър Георгиев (operating via Микаго Груп ЕООД), an SEO specialist for Bulgarian online stores.

Current site (v1, live): https://dimitarseocom.vercel.app/ — content and business model are already correct. Do not change the copy spine or services.

Visual target: https://burstdgtl.com/ — replicate the aesthetic language of Burst Digital: bold uppercase mega-headlines, gradient icon treatments, playful emoji-punctuated section titles, light-and-airy with dark accent sections, multi-block storytelling flow, vibrant pink-to-purple gradient identity.

What this redesign IS: A visual transformation. Keep all current copy, services, pricing, business identity. Translate Burst's energy into Bulgarian.

What this redesign IS NOT: A clone. Don't copy Burst's content, logos, or specific phrases. Don't switch to WordPress/Elementor — stay on Next.js. Don't change the ecommerce-SEO focus.

---

1. Project context — memorize this

Кой е Димитър:

• SEO специалист за онлайн магазини в България
• 5+ години опит
• Работи лично с всеки клиент (не агенция с акаунт мениджъри)
• Базиран в България, обслужва БГ + международни клиенти
• LinkedIn: https://bg.linkedin.com/in/dimitar-georgiev-seo-expert
• Компания: Микаго Груп ЕООД, ЕИК 208081497

Бизнес фокус (запази от текущия сайт):

• 6 услуги: SEO оптимизация · Ecommerce SEO · SEO одит · Изработка на сайт · Локално SEO · Изработка на онлайн магазин
• Пазари: Shopify, WooCommerce, Magento, BigCommerce, custom онлайн магазини
• Целеви ниши: Мода, Електроника, Добавки и здраве, Дом и градина, Козметика, Спорт, Бебешки стоки, Аксесоари
• Ценообразуване: От €499/месец SEO абонамент (виж страница „Цени")
• Цикъл: Разговор → Одит и план → Изпълнение → Отчет в приходи
• Контакти: 0877 023 314 · WhatsApp · mikagogroup@gmail.com

Тон (запази от текущия сайт, добави Burst-енергия):

• Лично, директно, първо лице („Аз", не „Ние")
• Антикорпоративно: „Без вечни договори", „Месец-за-месец", „Без vanity отчети"
• Приходи > позиции
• Но добави: енергия, увереност, малко закачливост — там където е възможно (виж копи-патерните за emoji)

---

2. The Burst aesthetic — what to replicate

Studied burstdgtl.com closely. The visual DNA is:

A. Mega-headlines in all-caps display type

• Hero H1 like WORLD-CLASS BRANDING & MARKETING AGENCY — uppercase, huge, bold, tight letter-spacing
• Section titles: OUR DIGITAL SERVICES, THE FOUNDATIONS OF OUR SUCCESS, WHAT OUR CLIENTS SAY 🥳
• Translate to BG with caution: uppercase Cyrillic is harder to read than Latin. Rule: use ALL-CAPS for short section titles (1-4 words). For long phrases, use Sentence case with a smaller overline above in caps.

B. Playful emoji punctuation at end of section titles

• What Our Clients Say 🥳
• We're More Than Just A Branding Agency 👍🏻
• Our Most Popular Services 💡
• Use one emoji per section title, placed at the end. Pick emoji that match the section's energy.
• In BG: Какво казват клиентите 🥳 · С какво помагам 💡 · Защо аз, а не агенция 👍🏻

C. Gradient icon treatments

• Service icons are drawn with a pink-to-purple gradient stroke (~`#FF4D8D→#8B5CF6`)
• Each icon is a simple line illustration (magnifying glass, megaphone, laptop, heart, stacked diamonds) — outlined, not filled.
• Use lucide-react icons with gradient stroke via SVG <linearGradient> definition.

D. Section-number labels + sub-heading hierarchy

Burst uses a triple-stacked header pattern:

01 SERVICES                          ← section number + label (small, caps, gray)
OUR DIGITAL SERVICES                  ← H2 mega-headline (bold, large, dark)
Our Most Popular Services 💡          ← H3 friendly subhead (medium, with emoji)

This is THE signature Burst layout. Replicate it on every section.

E. Section background rhythm (light/dark alternation — match Burst exactly)

The homepage alternates between dark and light sections to create visual rhythm. Match Burst's exact pattern:

Block	Background	Card background (if cards)
1. Hero	Dark --color-ink	n/a
2. Trusted-by strip	Light --color-paper	n/a
3. 3-block "What we do"	Light --color-paper	Light --color-paper-2
4. Services grid (6 cards)	Dark --color-ink	Dark --color-ink-2 (lifted)
5. Foundations of success	Light --color-paper	Light --color-paper-2
6. Locations / Reach	Light --color-paper	n/a
7. Portfolio carousel	Dark --color-ink	Dark --color-ink-2
8. Testimonials	Light --color-paper	Light --color-paper-2
9. Contact form	Light --color-paper	n/a
10. Differentiators	Light --color-paper	Light --color-paper-2
11. Final CTA	Dark --color-ink	n/a
12. Footer	Dark --color-ink	n/a

• Generous vertical spacing (py-32 desktop, py-20 mobile)
• Wide max-width containers (max-w-7xl)

F. Strong portfolio carousel

• Numbered carousel: 01 / 06 indicator
• Image card + title (e.g. Cogency Global) + service categories (BRANDING & WEB DESIGN) + descriptive paragraph + "Read The Case Study" link
• Manual arrows for next/previous (not auto-scroll)
• See current site's case study cards for content to reuse — restyle to this format.

G. Multi-block homepage flow

Burst's homepage follows this exact sequence — replicate for Dimitar:

1. Hero (mega-headline + CTA + supporting paragraph)
2. Trusted-by logo strip (clients/brands worked with)
3. "What we do" 3-block summary (more than X · we create Y · we burst Z)
4. Services grid with gradient icons (6 cards)
5. Foundations of success (4 principles cards)
6. Locations (where based) — for Dimitar: "Работя с клиенти от" (Sofia, Plovdiv, Varna, Burgas, и навсякъде в България + международно)
7. Portfolio carousel (case studies)
8. Testimonials with 5-star ratings (clean review cards)
9. Contact form (multi-field with service/budget selectors)
10. "What makes us unique" differentiators (6 cards)
11. Final CTA with image
12. Footer

H. 5-star testimonial cards

• Big quote with stars above (★★★★★ Rated 5 out of 5)
• Reviewer role/title below quote
• "Verified Review" badge styled with brand colors
• Optional: "Powered by Clutch" footer badge

I. Sticky floating action buttons

• Bottom-right corner: WhatsApp circle button + email circle button
• Visible on every page after scrolling past hero

J. Multi-line contact form

• Name (first + last)
• Email · Phone
• Services (dropdown — for Dimitar: SEO оптимизация · Ecommerce SEO · SEO одит · Изработка на сайт · Локално SEO · Изработка на онлайн магазин · Друго)
• Currency selector (€ / лв / $)
• Budget range (5 brackets)
• Message
• CAPTCHA / spam protection

---

3. New visual identity

Color tokens (replace old tokens)

:root {
  /* Surfaces */
  --color-ink: #0E0E1A;            /* Dark accent sections, headers — slightly cooler than pure black */
  --color-ink-2: #1A1A2E;          /* Card on dark, elevated dark */
  --color-paper: #FAFAF7;          /* Default background, warm off-white */
  --color-paper-2: #F2F0EB;        /* Cards on light */
  --color-paper-3: #E8E5DC;        /* Dividers on light */

  /* Brand gradient — the Burst signature */
  --color-burst-pink: #FF4D8D;     /* Gradient start */
  --color-burst-purple: #8B5CF6;   /* Gradient end */
  --gradient-burst: linear-gradient(135deg, #FF4D8D 0%, #8B5CF6 100%);

  /* Accent — keep for SEO/results signal */
  --color-accent: #00C46A;         /* Growth green — used for results metrics, success states */
  --color-accent-hover: #00A85B;

  /* Text */
  --color-text: #0E0E1A;
  --color-text-muted: #5B5B6E;
  --color-text-inverse: #FAFAF7;
  --color-text-inverse-muted: #A8A8B8;

  /* Borders */
  --color-border: #E5E2D8;
  --color-border-strong: #C8C5BB;
  --color-border-dark: #2A2A40;
}

Use the gradient (--gradient-burst) for:

• Service icon strokes
• Section-number labels (e.g. "01 SERVICES" can have gradient text)
• Hover states on key CTAs
• Decorative accents on sub-headlines
• Big stat numbers in the foundations section

Use the green (--color-accent) for:

• "+180% органични приходи" type result metrics in case study cards
• Success states in the contact form
• "Месец-за-месец" trust badges
• KEEP it as the secondary identity — it's Dimitar's SEO/results signal

Typography

Role	Font	Weight	Notes
Mega-headline (Hero H1, section H2 mega)	Bricolage Grotesque	700-800	Modern variable grotesque. Has Cyrillic. Distinctive, slightly playful. Capable of all-caps display.
Section H3 (sub-headline with emoji)	Bricolage Grotesque	600	Sentence case with emoji at end
Body, lead, captions	Inter	400, 500	Universal, perfect Cyrillic
Section-number labels (01 SERVICES)	Inter	500	Uppercase, tracking-wider, often with gradient text
Mono (code in blog)	Geist Mono	400

Load via next/font/google:

import { Bricolage_Grotesque, Inter, Geist_Mono } from "next/font/google";
const bricolage = Bricolage_Grotesque({ subsets: ["latin", "cyrillic"], variable: "--font-bricolage", display: "swap" });
const inter = Inter({ subsets: ["latin", "cyrillic"], variable: "--font-inter", display: "swap" });
const geistMono = Geist_Mono({ subsets: ["latin"], variable: "--font-geist-mono", display: "swap" });

Fallback if Bricolage Cyrillic ever underperforms: swap to Manrope (geometric, has Cyrillic) — same role, similar feel.

Type rules

• Mega-headlines uppercase BG: OK for short phrases (1-4 words). Examples that work: УСЛУГИ, КАЗУСИ, КАК ПОМАГАМ, ЗАЩО АЗ, КОНТАКТИ.
• Mega-headlines longer phrases: Use Sentence case. Example: Превръщам SEO в най-печелившия ви канал. — don't all-caps this, it's too long.
• Section pattern:

  01 УСЛУГИ                           ← gradient label, uppercase, small
  С какво помагам онлайн магазини     ← H2 mega, sentence case, large
  Шест услуги. Един фокус: приходи 💡  ← H3 emoji subhead, medium

Layout

• Max content: max-w-7xl (1280px)
• Section padding: py-20 md:py-32
• Container padding: px-6 md:px-8
• Generous whitespace between blocks
• Card border radius: rounded-2xl (16-20px) — Burst uses fairly rounded corners

---

4. Page structure — homepage (12 blocks in order)

Map current site content into this Burst-style flow. Each block has its replacement source from the current site.

Block 1: Hero (dark section)

• Section-label: СПЕЦИАЛИСТ ЗА ОНЛАЙН МАГАЗИНИ (uppercase, gradient text)
• Mega-headline H1: Превръщам SEO в най-печелившия ви канал. (Sentence case, Bricolage 800, huge — text-6xl md:text-8xl)
• Sub-paragraph: Existing site's subhead — "Специалист по SEO за онлайн магазини. Работя лично по всеки проект и отчитам органични поръчки и приходи — без вечни договори, без vanity отчети."
• CTAs: Primary "Запази 30-мин разговор →" (gradient bg) + Secondary "Виж казуси" (ghost outline on dark)
• Trust strip: 5+ години · Shopify · WooCommerce · Magento · Месец-за-месец · Лично изпълнение
• Right side: Photo of Dimitar + 1-2 floating result badges (keep from current site)
• Reuse the WhatsApp audit quick form below CTA — restyle to match new visual language

Block 2: Trusted-by strip

• Headline: ОНЛАЙН МАГАЗИНИ, КОИТО СЕ ДОВЕРЯВАТ (uppercase, small, gray)
• Logo carousel of past/current clients (anonymized OK initially — show 6-8 placeholder/silhouette logos with brand category labels: "Мода · Shopify", "Електроника · WooCommerce", etc.)
• Single horizontal scroll, grayscale → color on hover

Block 3: 3-block "What we do" summary

• Pre-header: WE'RE A FULL-SERVICE ECOMMERCE SEO PARTNER equivalent: ПЪЛНА УСЛУГА ЗА ОНЛАЙН МАГАЗИНИ
• H2 mega: Не съм просто SEO агенция 👍🏻
• Three sub-blocks with H3 + paragraph each:
  • Превръщам трафик в приходи. — paragraph about technical SEO + product pages + content
  • Работя лично — без екип по скрипт. — paragraph about personal attention, no junior AMs
  • Резултати в Shopify/GA, не в Excel. — paragraph about reporting in orders + revenue
• CTA below: "Виж услугите" + "Разговор"

Block 4: Services grid (the gradient-icons section) — DARK SECTION

Background: --color-ink (the dark wrapper)
Card background: --color-ink-2 (slightly lifted dark) — creates the dark-on-dark card-elevation effect visible in Burst's screenshot
Card border: none (or 1px solid rgba(255,255,255,0.04) for subtle separation)
Card radius: rounded-3xl (~20px)
Card padding: p-8 (32px all sides)
Grid: 3 columns desktop, 1 column mobile, gap-6 (24px between cards)

Section header (above the grid, centered or left-aligned):

• Section-label: 01 УСЛУГИ — gradient text, uppercase, text-xs tracking-[0.22em]
• H2 mega: Нашите услуги or С какво помагам онлайн магазини — Bricolage 700, text-5xl md:text-6xl, white (--color-text-inverse)
• H3 emoji subhead: Шест услуги, които работят заедно 💡 — Bricolage 500, text-xl, muted white (--color-text-inverse-muted)

Six service cards (each card structure):

1. Gradient-stroked icon at top-left, ~48px size, mb-6. Use lucide icon paths with the gradient stroke pattern from section 11.
2. Service name (H3): Bricolage 700, text-2xl, white. mb-3.
3. Description paragraph: Inter 400, text-base, muted white (--color-text-inverse-muted), leading-relaxed. Use existing site copy. mb-8.
4. "Виж повече" pill button at the bottom — see exact spec below.

The six services with their icons (lucide-react names):

1. SEO оптимизация — Search icon
2. Ecommerce SEO — ShoppingBag icon
3. SEO одит — FileSearch icon
4. Изработка на сайт — Code (or Laptop) icon
5. Локално SEO — MapPin icon
6. Изработка на онлайн магазин — Store icon

Card hover state: Subtle lift (translateY(-2px)) + soft gradient glow shadow (box-shadow: 0 8px 32px rgba(139, 92, 246, 0.15)). Don't add a colored border — keep the dark-on-dark elegance.

Block 5: Foundations of the approach (4 principles)

• Section-label: 02 ОСНОВИ
• H2 mega: ОСНОВИТЕ НА УСПЕХА (uppercase, all-caps OK — 4 words)
• H3 emoji: Защо работата ми носи резултати ⚡
• Four principle cards:
  1. Стратегически партньор, не доставчик — "Не просто доставям проекти. Влизам в твоите цели."
  2. Подход, базиран на данни — "Стратегии, изградени върху доказателства, не върху предположения."
  3. Експертиза в онлайн търговия — "Различни плейбукове за Shopify, WooCommerce, Magento."
  4. Внимателно настроено за теб — "Започвам от твоите цели. Без копи-пейст решения."
• Layout: 2×2 grid, each card has its own H3 + paragraph

Block 6: Locations / Reach (light section)

• Section-label: 03 ОБХВАТ
• H2 mega: Работя от България. Навсякъде, където има интернет.
• Three-column display showing cities/regions served:
  • СОФИЯ — paragraph + phone
  • ПЛОВДИВ · ВАРНА · БУРГАС — paragraph + "среща на живо при заявка"
  • МЕЖДУНАРОДНО — paragraph + "Английски и български"
• This replaces Burst's "San Francisco · New York · London" pattern with Dimitar's BG + international reach

Block 7: Portfolio carousel (case studies)

• Section-label: 04 ПОРТФОЛИО
• H2 mega: ПОСЛЕДНИ КАЗУСИ (uppercase OK)
• H3 emoji: Реални резултати в Shopify, WooCommerce и Magento 📈
• Carousel with manual arrows (1/6 indicator)
• Each card: image/chart + brand-anonymized name (Моден онлайн магазин) + service tags (Shopify · Ecommerce SEO · Съдържание) + metric (+180% органични приходи / 9 мес.) + 2-line description + "Виж казуса" link
• Use the 6 case studies from current site (Моден, Електроника, Дом и градина, Локален бизнес, Нов сайт, Миграция към Shopify)
• CTAs below: "Виж всички казуси" + "Разговор"

Block 8: Testimonials with 5-star ratings

• Section-label: 05 ОТЗИВИ
• H2 mega: КАКВО КАЗВАТ КЛИЕНТИТЕ (uppercase OK)
• H3 emoji: Стремя се към безболезнено клиентско преживяване 🥳
• Three testimonial cards in a row (mobile: stack):
  • Big 5-star row above quote
  • Pull-quote (Bricolage 500, italic optional, large)
  • "Verified Review" small badge below
  • Reviewer role/industry: "Собственик · Мода · Shopify"
• Use the 3 testimonials from current site
• Bottom: "Powered by Clutch" badge once verified, or LinkedIn endorsement badge

Block 9: Contact form (light section)

• Section-label: 06 ВРЪЗКА
• H2 mega: Имаш проект? Хайде да поговорим.
• Two-column layout:
  • Left: copy + phone + WhatsApp + email links
  • Right: form fields:
    • Име (first + last)
    • Имейл (required) · Телефон (required)
    • Услуга (dropdown with 6 services + "Друго")
    • Валута (€ / лв / $)
    • Бюджет (5 brackets: до €500/мес · €500-1,500 · €1,500-3,000 · €3,000-5,000 · €5,000+)
    • Съобщение (textarea)
    • Submit button: "Изпрати запитване →" (gradient bg)
• Below form: "Всички полета със * са задължителни"
• Server Action → Resend email + ConvertKit subscription

Block 10: "Why not just another agency" differentiators

• Section-label: 07 ЗАЩО АЗ
• H2 mega: НЕ СЪМ „ПРОСТО ОЩЕ ЕДНА АГЕНЦИЯ"
• H3 emoji: Какво ме различава 👇
• Six cards in 3×2 grid (use existing site's "Защо аз, а не агенция" content + add Burst-style):
  1. Лично изпълнение — "По твоя проект работя аз — не юриор екип по скрипт."
  2. Приходи, не позиции — "Отчитам органични поръчки и приходи в Shopify/GA."
  3. Месец-за-месец — "Без лок-ин договори. Оставаш, защото работи."
  4. Ниша: онлайн магазини — "Различни плейбукове за Shopify, WooCommerce, Magento."
  5. Целият цикъл — "Техническо SEO + продуктови страници + съдържание + линкове."
  6. Подбрани проекти — "Ограничен брой клиенти. Отказвам около 7 от 10 запитвания."

Block 11: Final CTA (dark section)

• Mega-headline: Готов да растеш органично от Google?
• Single primary CTA "Запази 30-мин разговор →" (gradient)
• Optional: "Или ми пиши директно на WhatsApp" with WhatsApp icon link

Block 12: Footer

Keep current site's footer content (Микаго Груп ЕООД legal info), restyle:

• Four-column layout: Услуги · За мен · Връзка · Юридическо
• Logo wordmark left, social icons right (LinkedIn, optionally Instagram)
• Bottom line: copyright + ЕИК + ДДС + адрес

---

5. Other pages

Same Burst block patterns scaled per page type:

• Услуги hub (/услуги): Hero + 6 service cards with gradient icons + foundations + portfolio + CTA + footer
• Each service page: Hero (specific to that service) + "What's included" multi-block + process steps + pricing tier (if applicable) + 2 case studies + FAQ + final CTA
• За мен (/за-мен): Hero with photo + narrative (Bricolage with emoji) + experience timeline + tools/platforms grid + personal interests + CTA
• Казуси (/казуси): Hero + filterable case study grid + final CTA
• Цени (/цени): Hero + 3-tier pricing cards (gradient border on middle tier) + FAQ + CTA
• Блог (/блог): Hero + featured post (large card) + grid of blog cards + newsletter signup
• Контакт (/контакт): Hero + 2-column (form + contact methods) + Cal.com embed + map (optional)

---

6. Components to build/refactor

Core

1. <SectionLabel /> — gradient text uppercase label like 01 УСЛУГИ
2. <MegaHeadline /> — H2 in Bricolage 700-800, sentence case or uppercase
3. <EmojiSubhead /> — H3 with emoji at end
4. <GradientIcon /> — wrapper that applies linearGradient stroke to a lucide icon

Layout

5. <Section /> — alternating ink/paper backgrounds, with section-label + mega + sub-headline pattern
6. <Header /> — restyle existing, sticky with locale switcher placeholder (EN coming later)
7. <Footer /> — 4-column, keep Микаго Груп legal info

Cards

8. <ServiceCard /> — gradient icon + name + value prop + arrow link
9. <PrincipleCard /> — H3 + bold label + paragraph
10. <PortfolioCard /> — image + name + service tags + metric + description + link
11. <TestimonialCard /> — stars + quote + role/industry + verified badge
12. <DifferentiatorCard /> — used in "Why not just another agency" block

Interactive

13. <PortfolioCarousel /> — manual arrow navigation, 01/06 indicator
14. <ContactForm /> — React Hook Form + Zod, Server Action to Resend + ConvertKit
15. <FloatingButtons /> — sticky bottom-right WhatsApp + Email buttons
16. <TrustedByMarquee /> — animated logo strip, grayscale → color on hover
17. <FAQ /> — Radix Accordion with plus-icon rotate-to-x on open

Decorative

18. <GradientText /> — applies the burst-pink → purple gradient to text
19. <StatNumber /> — large gradient-colored stat (for "+180%", "5+", etc.)

---

7. Copy patterns (BG translations of Burst patterns)

Section labels (small, uppercase, gradient)

• 01 УСЛУГИ
• 02 ОСНОВИ
• 03 ОБХВАТ
• 04 ПОРТФОЛИО
• 05 ОТЗИВИ
• 06 ВРЪЗКА
• 07 ЗАЩО АЗ

Mega-headlines (H2, Bricolage 700-800)

Use sentence case for long, ALL-CAPS for short (≤4 words).

• Превръщам SEO в най-печелившия ви канал. (Hero)
• Не съм просто SEO агенция 👍🏻
• Нашите услуги or ОСНОВИТЕ НА УСПЕХА
• Работя от България. Навсякъде, където има интернет.
• ПОСЛЕДНИ КАЗУСИ
• КАКВО КАЗВАТ КЛИЕНТИТЕ
• Имаш проект? Хайде да поговорим.
• НЕ СЪМ „ПРОСТО ОЩЕ ЕДНА АГЕНЦИЯ"
• Готов да растеш органично от Google?

Emoji-punctuated subheads (H3, Bricolage 600)

One emoji per section. Match the emotion.

• Шест услуги, които работят заедно 💡
• Защо работата ми носи резултати ⚡
• Реални резултати в Shopify, WooCommerce и Magento 📈
• Стремя се към безболезнено клиентско преживяване 🥳
• Какво ме различава 👇
• Без презентация, без задължения 🤝

CTAs

• Primary: Запази 30-мин разговор → or Запази безплатна консултация →
• Secondary: Виж казуси · Виж услугите · Свали безплатен SEO одит
• Inline soft: Виж повече →

Trust strip (below hero)

5+ години опит · Shopify Partner · Месец-за-месец · Лично изпълнение · Резултати, не отчети

---

8. Tech stack (current — don't change)

Layer	Choice
Framework	Next.js 14 App Router + TypeScript
Styling	Tailwind CSS + CSS variables (token names above)
UI primitives	shadcn/ui (Radix) — Accordion, Dialog, Select for form
Content	MDX in /content (existing case studies + blog)
Forms	React Hook Form + Zod + Server Actions → Resend
Booking	Cal.com (https://cal.com/dimitarseo/30min)
Email	Resend
Analytics	Plausible + Microsoft Clarity
Hosting	Vercel (push to main deploys)
Fonts (NEW)	Bricolage Grotesque + Inter + Geist Mono via next/font/google

---

9. Redesign build order

Phase A — Foundations (2-3 days)

1. Install Bricolage Grotesque + Inter via next/font (replace any existing font setup)
2. Update Tailwind config: add new color tokens, --gradient-burst, font families
3. Update globals.css with new CSS variables
4. Create <GradientText />, <GradientIcon />, <SectionLabel />, <MegaHeadline />, <EmojiSubhead /> atoms
5. Build <Section /> layout component with new ink/paper alternation
6. Add sticky <FloatingButtons /> (WhatsApp + Email)

Phase B — Homepage block-by-block (3-5 days)

Refactor app/page.tsx (or app/(home)/page.tsx) to use the 12-block flow in section 4. Build one block, deploy preview, verify, move to next. Order:

1. Hero
2. Trusted-by strip
3. 3-block "What we do" summary
4. Services grid with gradient icons
5. Foundations principles
6. Locations / Reach
7. Portfolio carousel
8. Testimonials
9. Contact form
10. Differentiators
11. Final CTA
12. Footer

Phase C — Inner pages (3-4 days)

Apply same patterns to:

1. Each service page (6 pages)
2. About page (/за-мен)
3. Case studies hub + 3 detail pages
4. Pricing page
5. Blog hub
6. Contact page

Phase D — Polish + launch (1-2 days)

1. Mobile responsiveness QA every section
2. Lighthouse Mobile 95+ check on home + top 3 service pages
3. Accessibility: WCAG AA on all gradient text/buttons (check contrast)
4. SEO: hreflang ready for future EN version, schema.org per page type, dynamic OG images using new visual style
5. Final visual QA against burstdgtl.com side-by-side

---

10. Acceptance criteria per page

A page is "Burst-style done" when:

• Has a Section-label / Mega-headline / Emoji-subhead pattern in at least 2 places
• At least one section uses dark ink background (--color-ink)
• Service icons (where present) use gradient stroke
• Primary CTA uses gradient background hover state
• Section number labels appear above major H2s
• Mega-headlines render in Bricolage 700-800
• No remaining old typography or color tokens
• Floating WhatsApp + Email buttons visible after scroll
• Lighthouse Mobile ≥ 95
• Renders correctly with Dimitar's photo
• All text in Bulgarian (no leftover English placeholders)
• No console errors
• Linked from at least one navigation source

---

11. Common code patterns

Mega-headline with gradient text accent (JSX)

<h2 className="font-display text-5xl md:text-7xl font-bold tracking-tight leading-tight">
  Превръщам SEO в{" "}
  <span
    className="bg-clip-text text-transparent"
    style={{ backgroundImage: "var(--gradient-burst)" }}
  >
    най-печелившия
  </span>{" "}
  ви канал.
</h2>

Section-label (gradient uppercase)

<span
  className="inline-block text-xs uppercase tracking-[0.22em] font-semibold bg-clip-text text-transparent"
  style={{ backgroundImage: "var(--gradient-burst)" }}
>
  01 Услуги
</span>

Gradient-stroke icon (SVG with linearGradient)

<svg width="48" height="48" viewBox="0 0 24 24" fill="none">
  <defs>
    <linearGradient id="burstGrad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stopColor="#FF4D8D" />
      <stop offset="100%" stopColor="#8B5CF6" />
    </linearGradient>
  </defs>
  <path
    d="…lucide path…"
    stroke="url(#burstGrad)"
    strokeWidth="1.5"
    strokeLinecap="round"
    strokeLinejoin="round"
  />
</svg>

Wrap as <GradientIcon name="search" /> component that pulls the right lucide path.

Primary CTA (gradient background)

<Link
  href="https://cal.com/dimitarseo/30min"
  className="inline-flex items-center justify-center text-white font-semibold px-6 py-4 rounded-full transition-transform hover:scale-[1.02]"
  style={{ backgroundImage: "var(--gradient-burst)" }}
>
  Запази 30-мин разговор →
</Link>

"Виж повече" pill button (white outline on dark cards — Burst's service card CTA)

This is the small white-outlined pill button visible at the bottom of each dark service card.

<Link
  href="/услуги/seo-оптимизация"
  className="inline-flex items-center justify-center rounded-full border border-white/80 text-white text-sm font-medium px-5 py-2.5 transition-colors hover:bg-white hover:text-ink"
>
  Виж повече
</Link>

Service card (the full dark-on-dark Burst-style card)

<div className="group rounded-3xl bg-ink-2 p-8 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-[0_8px_32px_rgba(139,92,246,0.15)]">
  <GradientIcon name="Search" size={48} className="mb-6" />
  <h3 className="font-display text-2xl font-bold text-white mb-3">
    SEO оптимизация
  </h3>
  <p className="text-base text-text-inverse-muted leading-relaxed mb-8">
    SEO, който превръща трафика в приходи. Технически SEO, продуктови страници, линкове от релевантни домейни и съдържание с реално намерение за покупка.
  </p>
  <Link
    href="/услуги/seo-оптимизация"
    className="inline-flex items-center justify-center rounded-full border border-white/80 text-white text-sm font-medium px-5 py-2.5 transition-colors hover:bg-white hover:text-ink"
  >
    Виж повече
  </Link>
</div>

Section pattern (the triple-header)

<section className="bg-paper py-20 md:py-32">
  <div className="max-w-7xl mx-auto px-6 md:px-8">
    <SectionLabel>01 Услуги</SectionLabel>
    <MegaHeadline className="mt-4">Нашите услуги</MegaHeadline>
    <EmojiSubhead className="mt-6 text-text-muted">
      Шест услуги, които работят заедно 💡
    </EmojiSubhead>
    {/* ... block content ... */}
  </div>
</section>

---

12. Things to ask Dimitar (don't fabricate)

If any of these are missing — surface the question rather than guessing:

1. Real testimonial sources — Current site has 3 anonymized quotes. Are these real, paraphrased? Can they be replaced with verified Clutch/LinkedIn reviews once available?
2. Real client logos — Trusted-by strip needs real logos. Until then, use industry-tagged placeholder cards ("Мода · Shopify", "Електроника · WooCommerce").
3. Real case-study data — Confirm the +180%, +143%, +96% metrics. Are these publishable with chart screenshots?
4. EN version timing — Site is currently BG-only. The brief assumes EN comes later via next-intl. Confirm.
5. Photo refresh — Current photo of Dimitar is good. Suggest 2-3 additional shots for variety on other pages (about, contact).
6. Pricing confirmation — €499/mo entry visible on current site. Confirm tier structure before redesigning pricing page.

---

13. What NOT to do

• Don't copy Burst's content. Headlines, taglines, phrases — they're Burst's. Use them as structural inspiration only.
• Don't switch off Next.js. Burst is Elementor/WordPress — we stay on Next.js + Tailwind. The aesthetic is the goal, not the tech.
• Don't lose the ecommerce-SEO focus. Burst is full-service marketing. Dimitar is SEO-for-online-stores-first. Keep that.
• Don't drop the green accent entirely. It's Dimitar's "growth/results" signal. Keep for metric numbers + trust badges. The burst-pink/purple gradient is the new dominant identity; green is the secondary "results" identity.
• Don't use English placeholders. Site is Bulgarian. If a section needs content you don't have, use Bulgarian Lorem-style placeholder copy that fits the section's meaning, not generic Lorem.
• Don't ditch existing copy. The copy spine on the current site is good — restyle it, don't rewrite it. Only enhance with Burst's emoji/energy where natural.
• Don't all-caps long Bulgarian phrases. Cyrillic all-caps reads worse than Latin for anything over 4-5 words. Sentence case is fine for mega-headlines; reserve all-caps for short section titles only.

---

14. Final reminders

• This is a visual transformation, not a content rewrite. The current site at https://dimitarseocom.vercel.app/ is the content source of truth.
• The aesthetic target is https://burstdgtl.com/ — visit it before every major section build to recalibrate.
• Bulgarian-first, always. The site has no EN version yet.
• Mobile is not an afterthought. Burst works well on mobile because of the block-by-block structure — keep that discipline.
• Push to main after every block. Vercel preview deploys per PR.
• Ship the redesign in phases. Don't try to launch the whole new site in one go — Burst-ify one section at a time.

You have everything you need. Make dimitarseo.com burst.