From bc3ae98540f75491186c41faa768a8e7d2d22e76 Mon Sep 17 00:00:00 2001
From: Maigo Erit <maigo.erit@gmail.com>
Date: Tue, 4 Mar 2025 19:28:03 +0200
Subject: [PATCH 01/15] Add comprehensive homepage components with Lottie
 animations

- Created multiple new components for homepage sections (Hero, Benefits, Pricing, etc.)
- Added Lottie animation components for each section with dynamic rendering
- Implemented ScrollToAnchorOnPageLoad utility component
- Organized components and animations in app/[locale]/components directory
- Integrated various UI elements like Carousel, IntroCallCard, and PriceItem
---
 app/{ => [locale]}/components/Benefits.tsx                        | 0
 app/{ => [locale]}/components/Carousel.tsx                        | 0
 app/{ => [locale]}/components/ComparePricing.tsx                  | 0
 app/{ => [locale]}/components/Discuss.tsx                         | 0
 app/{ => [locale]}/components/Faq.tsx                             | 0
 app/{ => [locale]}/components/GridBackground.tsx                  | 0
 app/{ => [locale]}/components/Hero.tsx                            | 0
 app/{ => [locale]}/components/IntroCallCard.tsx                   | 0
 app/{ => [locale]}/components/PauseTry.tsx                        | 0
 app/{ => [locale]}/components/PriceForOthers.tsx                  | 0
 app/{ => [locale]}/components/PriceItem.tsx                       | 0
 app/{ => [locale]}/components/PriceItemButton.tsx                 | 0
 app/{ => [locale]}/components/Pricing.tsx                         | 0
 app/{ => [locale]}/components/ScollToAnchorOnPageLoad.tsx         | 0
 app/{ => [locale]}/components/TechScroll.tsx                      | 0
 app/{ => [locale]}/components/TechScrollingLogos.tsx              | 0
 app/{ => [locale]}/components/Testimonials.tsx                    | 0
 .../components/animations/Abstract-Waves-Circles2.json            | 0
 app/{ => [locale]}/components/animations/AbstractBg.tsx           | 0
 app/{ => [locale]}/components/animations/AdaptiveInterface.tsx    | 0
 app/{ => [locale]}/components/animations/BusinessAgreement.tsx    | 0
 app/{ => [locale]}/components/animations/BusinessValue.tsx        | 0
 app/{ => [locale]}/components/animations/CommunicationImage.tsx   | 0
 app/{ => [locale]}/components/animations/CompanyImage.tsx         | 0
 app/{ => [locale]}/components/animations/CustomerAssistance.tsx   | 0
 .../components/animations/CustomerReceivingEmail.tsx              | 0
 .../components/animations/DedicatedMaintananceImage.tsx           | 0
 .../components/animations/DeveloperCommunications.tsx             | 0
 app/{ => [locale]}/components/animations/DiscussImage.tsx         | 0
 app/{ => [locale]}/components/animations/EmployeeImage.tsx        | 0
 app/{ => [locale]}/components/animations/HeroImage.tsx            | 0
 app/{ => [locale]}/components/animations/ManWorking.tsx           | 0
 app/{ => [locale]}/components/animations/MoneyValueImage.tsx      | 0
 app/{ => [locale]}/components/animations/OnlineVideoChatting.tsx  | 0
 app/{ => [locale]}/components/animations/PricingImage.tsx         | 0
 app/{ => [locale]}/components/animations/Questions.tsx            | 0
 app/{ => [locale]}/components/animations/TurnaroundImage.tsx      | 0
 app/{ => [locale]}/components/animations/UpgradeImage.tsx         | 0
 app/{ => [locale]}/components/animations/WebDevelopment.tsx       | 0
 app/{ => [locale]}/components/animations/WorkingHome.tsx          | 0
 app/{ => [locale]}/components/animations/adaptive-interface.json  | 0
 app/{ => [locale]}/components/animations/business-agreement.json  | 0
 app/{ => [locale]}/components/animations/business-value.json      | 0
 app/{ => [locale]}/components/animations/communication.json       | 0
 app/{ => [locale]}/components/animations/company.json             | 0
 app/{ => [locale]}/components/animations/customer-assistance.json | 0
 .../components/animations/customer-receiving-email2.json          | 0
 .../components/animations/dedicated-maintenance.json              | 0
 .../components/animations/developer-communications.json           | 0
 app/{ => [locale]}/components/animations/discuss.json             | 0
 app/{ => [locale]}/components/animations/employee.json            | 0
 .../components/animations/financial-innovation.json               | 0
 app/{ => [locale]}/components/animations/hero-animation.json      | 0
 app/{ => [locale]}/components/animations/man-working.json         | 0
 app/{ => [locale]}/components/animations/money-value.json         | 0
 .../components/animations/online-video-chatting.json              | 0
 app/{ => [locale]}/components/animations/pricing.json             | 0
 app/{ => [locale]}/components/animations/questions.json           | 0
 app/{ => [locale]}/components/animations/turnaround.json          | 0
 app/{ => [locale]}/components/animations/upgrade.json             | 0
 app/{ => [locale]}/components/animations/web-development.json     | 0
 app/{ => [locale]}/components/animations/working-home.json        | 0
 app/{ => [locale]}/layout.tsx                                     | 0
 app/{ => [locale]}/page.tsx                                       | 0
 64 files changed, 0 insertions(+), 0 deletions(-)
 rename app/{ => [locale]}/components/Benefits.tsx (100%)
 rename app/{ => [locale]}/components/Carousel.tsx (100%)
 rename app/{ => [locale]}/components/ComparePricing.tsx (100%)
 rename app/{ => [locale]}/components/Discuss.tsx (100%)
 rename app/{ => [locale]}/components/Faq.tsx (100%)
 rename app/{ => [locale]}/components/GridBackground.tsx (100%)
 rename app/{ => [locale]}/components/Hero.tsx (100%)
 rename app/{ => [locale]}/components/IntroCallCard.tsx (100%)
 rename app/{ => [locale]}/components/PauseTry.tsx (100%)
 rename app/{ => [locale]}/components/PriceForOthers.tsx (100%)
 rename app/{ => [locale]}/components/PriceItem.tsx (100%)
 rename app/{ => [locale]}/components/PriceItemButton.tsx (100%)
 rename app/{ => [locale]}/components/Pricing.tsx (100%)
 rename app/{ => [locale]}/components/ScollToAnchorOnPageLoad.tsx (100%)
 rename app/{ => [locale]}/components/TechScroll.tsx (100%)
 rename app/{ => [locale]}/components/TechScrollingLogos.tsx (100%)
 rename app/{ => [locale]}/components/Testimonials.tsx (100%)
 rename app/{ => [locale]}/components/animations/Abstract-Waves-Circles2.json (100%)
 rename app/{ => [locale]}/components/animations/AbstractBg.tsx (100%)
 rename app/{ => [locale]}/components/animations/AdaptiveInterface.tsx (100%)
 rename app/{ => [locale]}/components/animations/BusinessAgreement.tsx (100%)
 rename app/{ => [locale]}/components/animations/BusinessValue.tsx (100%)
 rename app/{ => [locale]}/components/animations/CommunicationImage.tsx (100%)
 rename app/{ => [locale]}/components/animations/CompanyImage.tsx (100%)
 rename app/{ => [locale]}/components/animations/CustomerAssistance.tsx (100%)
 rename app/{ => [locale]}/components/animations/CustomerReceivingEmail.tsx (100%)
 rename app/{ => [locale]}/components/animations/DedicatedMaintananceImage.tsx (100%)
 rename app/{ => [locale]}/components/animations/DeveloperCommunications.tsx (100%)
 rename app/{ => [locale]}/components/animations/DiscussImage.tsx (100%)
 rename app/{ => [locale]}/components/animations/EmployeeImage.tsx (100%)
 rename app/{ => [locale]}/components/animations/HeroImage.tsx (100%)
 rename app/{ => [locale]}/components/animations/ManWorking.tsx (100%)
 rename app/{ => [locale]}/components/animations/MoneyValueImage.tsx (100%)
 rename app/{ => [locale]}/components/animations/OnlineVideoChatting.tsx (100%)
 rename app/{ => [locale]}/components/animations/PricingImage.tsx (100%)
 rename app/{ => [locale]}/components/animations/Questions.tsx (100%)
 rename app/{ => [locale]}/components/animations/TurnaroundImage.tsx (100%)
 rename app/{ => [locale]}/components/animations/UpgradeImage.tsx (100%)
 rename app/{ => [locale]}/components/animations/WebDevelopment.tsx (100%)
 rename app/{ => [locale]}/components/animations/WorkingHome.tsx (100%)
 rename app/{ => [locale]}/components/animations/adaptive-interface.json (100%)
 rename app/{ => [locale]}/components/animations/business-agreement.json (100%)
 rename app/{ => [locale]}/components/animations/business-value.json (100%)
 rename app/{ => [locale]}/components/animations/communication.json (100%)
 rename app/{ => [locale]}/components/animations/company.json (100%)
 rename app/{ => [locale]}/components/animations/customer-assistance.json (100%)
 rename app/{ => [locale]}/components/animations/customer-receiving-email2.json (100%)
 rename app/{ => [locale]}/components/animations/dedicated-maintenance.json (100%)
 rename app/{ => [locale]}/components/animations/developer-communications.json (100%)
 rename app/{ => [locale]}/components/animations/discuss.json (100%)
 rename app/{ => [locale]}/components/animations/employee.json (100%)
 rename app/{ => [locale]}/components/animations/financial-innovation.json (100%)
 rename app/{ => [locale]}/components/animations/hero-animation.json (100%)
 rename app/{ => [locale]}/components/animations/man-working.json (100%)
 rename app/{ => [locale]}/components/animations/money-value.json (100%)
 rename app/{ => [locale]}/components/animations/online-video-chatting.json (100%)
 rename app/{ => [locale]}/components/animations/pricing.json (100%)
 rename app/{ => [locale]}/components/animations/questions.json (100%)
 rename app/{ => [locale]}/components/animations/turnaround.json (100%)
 rename app/{ => [locale]}/components/animations/upgrade.json (100%)
 rename app/{ => [locale]}/components/animations/web-development.json (100%)
 rename app/{ => [locale]}/components/animations/working-home.json (100%)
 rename app/{ => [locale]}/layout.tsx (100%)
 rename app/{ => [locale]}/page.tsx (100%)

diff --git a/app/components/Benefits.tsx b/app/[locale]/components/Benefits.tsx
similarity index 100%
rename from app/components/Benefits.tsx
rename to app/[locale]/components/Benefits.tsx
diff --git a/app/components/Carousel.tsx b/app/[locale]/components/Carousel.tsx
similarity index 100%
rename from app/components/Carousel.tsx
rename to app/[locale]/components/Carousel.tsx
diff --git a/app/components/ComparePricing.tsx b/app/[locale]/components/ComparePricing.tsx
similarity index 100%
rename from app/components/ComparePricing.tsx
rename to app/[locale]/components/ComparePricing.tsx
diff --git a/app/components/Discuss.tsx b/app/[locale]/components/Discuss.tsx
similarity index 100%
rename from app/components/Discuss.tsx
rename to app/[locale]/components/Discuss.tsx
diff --git a/app/components/Faq.tsx b/app/[locale]/components/Faq.tsx
similarity index 100%
rename from app/components/Faq.tsx
rename to app/[locale]/components/Faq.tsx
diff --git a/app/components/GridBackground.tsx b/app/[locale]/components/GridBackground.tsx
similarity index 100%
rename from app/components/GridBackground.tsx
rename to app/[locale]/components/GridBackground.tsx
diff --git a/app/components/Hero.tsx b/app/[locale]/components/Hero.tsx
similarity index 100%
rename from app/components/Hero.tsx
rename to app/[locale]/components/Hero.tsx
diff --git a/app/components/IntroCallCard.tsx b/app/[locale]/components/IntroCallCard.tsx
similarity index 100%
rename from app/components/IntroCallCard.tsx
rename to app/[locale]/components/IntroCallCard.tsx
diff --git a/app/components/PauseTry.tsx b/app/[locale]/components/PauseTry.tsx
similarity index 100%
rename from app/components/PauseTry.tsx
rename to app/[locale]/components/PauseTry.tsx
diff --git a/app/components/PriceForOthers.tsx b/app/[locale]/components/PriceForOthers.tsx
similarity index 100%
rename from app/components/PriceForOthers.tsx
rename to app/[locale]/components/PriceForOthers.tsx
diff --git a/app/components/PriceItem.tsx b/app/[locale]/components/PriceItem.tsx
similarity index 100%
rename from app/components/PriceItem.tsx
rename to app/[locale]/components/PriceItem.tsx
diff --git a/app/components/PriceItemButton.tsx b/app/[locale]/components/PriceItemButton.tsx
similarity index 100%
rename from app/components/PriceItemButton.tsx
rename to app/[locale]/components/PriceItemButton.tsx
diff --git a/app/components/Pricing.tsx b/app/[locale]/components/Pricing.tsx
similarity index 100%
rename from app/components/Pricing.tsx
rename to app/[locale]/components/Pricing.tsx
diff --git a/app/components/ScollToAnchorOnPageLoad.tsx b/app/[locale]/components/ScollToAnchorOnPageLoad.tsx
similarity index 100%
rename from app/components/ScollToAnchorOnPageLoad.tsx
rename to app/[locale]/components/ScollToAnchorOnPageLoad.tsx
diff --git a/app/components/TechScroll.tsx b/app/[locale]/components/TechScroll.tsx
similarity index 100%
rename from app/components/TechScroll.tsx
rename to app/[locale]/components/TechScroll.tsx
diff --git a/app/components/TechScrollingLogos.tsx b/app/[locale]/components/TechScrollingLogos.tsx
similarity index 100%
rename from app/components/TechScrollingLogos.tsx
rename to app/[locale]/components/TechScrollingLogos.tsx
diff --git a/app/components/Testimonials.tsx b/app/[locale]/components/Testimonials.tsx
similarity index 100%
rename from app/components/Testimonials.tsx
rename to app/[locale]/components/Testimonials.tsx
diff --git a/app/components/animations/Abstract-Waves-Circles2.json b/app/[locale]/components/animations/Abstract-Waves-Circles2.json
similarity index 100%
rename from app/components/animations/Abstract-Waves-Circles2.json
rename to app/[locale]/components/animations/Abstract-Waves-Circles2.json
diff --git a/app/components/animations/AbstractBg.tsx b/app/[locale]/components/animations/AbstractBg.tsx
similarity index 100%
rename from app/components/animations/AbstractBg.tsx
rename to app/[locale]/components/animations/AbstractBg.tsx
diff --git a/app/components/animations/AdaptiveInterface.tsx b/app/[locale]/components/animations/AdaptiveInterface.tsx
similarity index 100%
rename from app/components/animations/AdaptiveInterface.tsx
rename to app/[locale]/components/animations/AdaptiveInterface.tsx
diff --git a/app/components/animations/BusinessAgreement.tsx b/app/[locale]/components/animations/BusinessAgreement.tsx
similarity index 100%
rename from app/components/animations/BusinessAgreement.tsx
rename to app/[locale]/components/animations/BusinessAgreement.tsx
diff --git a/app/components/animations/BusinessValue.tsx b/app/[locale]/components/animations/BusinessValue.tsx
similarity index 100%
rename from app/components/animations/BusinessValue.tsx
rename to app/[locale]/components/animations/BusinessValue.tsx
diff --git a/app/components/animations/CommunicationImage.tsx b/app/[locale]/components/animations/CommunicationImage.tsx
similarity index 100%
rename from app/components/animations/CommunicationImage.tsx
rename to app/[locale]/components/animations/CommunicationImage.tsx
diff --git a/app/components/animations/CompanyImage.tsx b/app/[locale]/components/animations/CompanyImage.tsx
similarity index 100%
rename from app/components/animations/CompanyImage.tsx
rename to app/[locale]/components/animations/CompanyImage.tsx
diff --git a/app/components/animations/CustomerAssistance.tsx b/app/[locale]/components/animations/CustomerAssistance.tsx
similarity index 100%
rename from app/components/animations/CustomerAssistance.tsx
rename to app/[locale]/components/animations/CustomerAssistance.tsx
diff --git a/app/components/animations/CustomerReceivingEmail.tsx b/app/[locale]/components/animations/CustomerReceivingEmail.tsx
similarity index 100%
rename from app/components/animations/CustomerReceivingEmail.tsx
rename to app/[locale]/components/animations/CustomerReceivingEmail.tsx
diff --git a/app/components/animations/DedicatedMaintananceImage.tsx b/app/[locale]/components/animations/DedicatedMaintananceImage.tsx
similarity index 100%
rename from app/components/animations/DedicatedMaintananceImage.tsx
rename to app/[locale]/components/animations/DedicatedMaintananceImage.tsx
diff --git a/app/components/animations/DeveloperCommunications.tsx b/app/[locale]/components/animations/DeveloperCommunications.tsx
similarity index 100%
rename from app/components/animations/DeveloperCommunications.tsx
rename to app/[locale]/components/animations/DeveloperCommunications.tsx
diff --git a/app/components/animations/DiscussImage.tsx b/app/[locale]/components/animations/DiscussImage.tsx
similarity index 100%
rename from app/components/animations/DiscussImage.tsx
rename to app/[locale]/components/animations/DiscussImage.tsx
diff --git a/app/components/animations/EmployeeImage.tsx b/app/[locale]/components/animations/EmployeeImage.tsx
similarity index 100%
rename from app/components/animations/EmployeeImage.tsx
rename to app/[locale]/components/animations/EmployeeImage.tsx
diff --git a/app/components/animations/HeroImage.tsx b/app/[locale]/components/animations/HeroImage.tsx
similarity index 100%
rename from app/components/animations/HeroImage.tsx
rename to app/[locale]/components/animations/HeroImage.tsx
diff --git a/app/components/animations/ManWorking.tsx b/app/[locale]/components/animations/ManWorking.tsx
similarity index 100%
rename from app/components/animations/ManWorking.tsx
rename to app/[locale]/components/animations/ManWorking.tsx
diff --git a/app/components/animations/MoneyValueImage.tsx b/app/[locale]/components/animations/MoneyValueImage.tsx
similarity index 100%
rename from app/components/animations/MoneyValueImage.tsx
rename to app/[locale]/components/animations/MoneyValueImage.tsx
diff --git a/app/components/animations/OnlineVideoChatting.tsx b/app/[locale]/components/animations/OnlineVideoChatting.tsx
similarity index 100%
rename from app/components/animations/OnlineVideoChatting.tsx
rename to app/[locale]/components/animations/OnlineVideoChatting.tsx
diff --git a/app/components/animations/PricingImage.tsx b/app/[locale]/components/animations/PricingImage.tsx
similarity index 100%
rename from app/components/animations/PricingImage.tsx
rename to app/[locale]/components/animations/PricingImage.tsx
diff --git a/app/components/animations/Questions.tsx b/app/[locale]/components/animations/Questions.tsx
similarity index 100%
rename from app/components/animations/Questions.tsx
rename to app/[locale]/components/animations/Questions.tsx
diff --git a/app/components/animations/TurnaroundImage.tsx b/app/[locale]/components/animations/TurnaroundImage.tsx
similarity index 100%
rename from app/components/animations/TurnaroundImage.tsx
rename to app/[locale]/components/animations/TurnaroundImage.tsx
diff --git a/app/components/animations/UpgradeImage.tsx b/app/[locale]/components/animations/UpgradeImage.tsx
similarity index 100%
rename from app/components/animations/UpgradeImage.tsx
rename to app/[locale]/components/animations/UpgradeImage.tsx
diff --git a/app/components/animations/WebDevelopment.tsx b/app/[locale]/components/animations/WebDevelopment.tsx
similarity index 100%
rename from app/components/animations/WebDevelopment.tsx
rename to app/[locale]/components/animations/WebDevelopment.tsx
diff --git a/app/components/animations/WorkingHome.tsx b/app/[locale]/components/animations/WorkingHome.tsx
similarity index 100%
rename from app/components/animations/WorkingHome.tsx
rename to app/[locale]/components/animations/WorkingHome.tsx
diff --git a/app/components/animations/adaptive-interface.json b/app/[locale]/components/animations/adaptive-interface.json
similarity index 100%
rename from app/components/animations/adaptive-interface.json
rename to app/[locale]/components/animations/adaptive-interface.json
diff --git a/app/components/animations/business-agreement.json b/app/[locale]/components/animations/business-agreement.json
similarity index 100%
rename from app/components/animations/business-agreement.json
rename to app/[locale]/components/animations/business-agreement.json
diff --git a/app/components/animations/business-value.json b/app/[locale]/components/animations/business-value.json
similarity index 100%
rename from app/components/animations/business-value.json
rename to app/[locale]/components/animations/business-value.json
diff --git a/app/components/animations/communication.json b/app/[locale]/components/animations/communication.json
similarity index 100%
rename from app/components/animations/communication.json
rename to app/[locale]/components/animations/communication.json
diff --git a/app/components/animations/company.json b/app/[locale]/components/animations/company.json
similarity index 100%
rename from app/components/animations/company.json
rename to app/[locale]/components/animations/company.json
diff --git a/app/components/animations/customer-assistance.json b/app/[locale]/components/animations/customer-assistance.json
similarity index 100%
rename from app/components/animations/customer-assistance.json
rename to app/[locale]/components/animations/customer-assistance.json
diff --git a/app/components/animations/customer-receiving-email2.json b/app/[locale]/components/animations/customer-receiving-email2.json
similarity index 100%
rename from app/components/animations/customer-receiving-email2.json
rename to app/[locale]/components/animations/customer-receiving-email2.json
diff --git a/app/components/animations/dedicated-maintenance.json b/app/[locale]/components/animations/dedicated-maintenance.json
similarity index 100%
rename from app/components/animations/dedicated-maintenance.json
rename to app/[locale]/components/animations/dedicated-maintenance.json
diff --git a/app/components/animations/developer-communications.json b/app/[locale]/components/animations/developer-communications.json
similarity index 100%
rename from app/components/animations/developer-communications.json
rename to app/[locale]/components/animations/developer-communications.json
diff --git a/app/components/animations/discuss.json b/app/[locale]/components/animations/discuss.json
similarity index 100%
rename from app/components/animations/discuss.json
rename to app/[locale]/components/animations/discuss.json
diff --git a/app/components/animations/employee.json b/app/[locale]/components/animations/employee.json
similarity index 100%
rename from app/components/animations/employee.json
rename to app/[locale]/components/animations/employee.json
diff --git a/app/components/animations/financial-innovation.json b/app/[locale]/components/animations/financial-innovation.json
similarity index 100%
rename from app/components/animations/financial-innovation.json
rename to app/[locale]/components/animations/financial-innovation.json
diff --git a/app/components/animations/hero-animation.json b/app/[locale]/components/animations/hero-animation.json
similarity index 100%
rename from app/components/animations/hero-animation.json
rename to app/[locale]/components/animations/hero-animation.json
diff --git a/app/components/animations/man-working.json b/app/[locale]/components/animations/man-working.json
similarity index 100%
rename from app/components/animations/man-working.json
rename to app/[locale]/components/animations/man-working.json
diff --git a/app/components/animations/money-value.json b/app/[locale]/components/animations/money-value.json
similarity index 100%
rename from app/components/animations/money-value.json
rename to app/[locale]/components/animations/money-value.json
diff --git a/app/components/animations/online-video-chatting.json b/app/[locale]/components/animations/online-video-chatting.json
similarity index 100%
rename from app/components/animations/online-video-chatting.json
rename to app/[locale]/components/animations/online-video-chatting.json
diff --git a/app/components/animations/pricing.json b/app/[locale]/components/animations/pricing.json
similarity index 100%
rename from app/components/animations/pricing.json
rename to app/[locale]/components/animations/pricing.json
diff --git a/app/components/animations/questions.json b/app/[locale]/components/animations/questions.json
similarity index 100%
rename from app/components/animations/questions.json
rename to app/[locale]/components/animations/questions.json
diff --git a/app/components/animations/turnaround.json b/app/[locale]/components/animations/turnaround.json
similarity index 100%
rename from app/components/animations/turnaround.json
rename to app/[locale]/components/animations/turnaround.json
diff --git a/app/components/animations/upgrade.json b/app/[locale]/components/animations/upgrade.json
similarity index 100%
rename from app/components/animations/upgrade.json
rename to app/[locale]/components/animations/upgrade.json
diff --git a/app/components/animations/web-development.json b/app/[locale]/components/animations/web-development.json
similarity index 100%
rename from app/components/animations/web-development.json
rename to app/[locale]/components/animations/web-development.json
diff --git a/app/components/animations/working-home.json b/app/[locale]/components/animations/working-home.json
similarity index 100%
rename from app/components/animations/working-home.json
rename to app/[locale]/components/animations/working-home.json
diff --git a/app/layout.tsx b/app/[locale]/layout.tsx
similarity index 100%
rename from app/layout.tsx
rename to app/[locale]/layout.tsx
diff --git a/app/page.tsx b/app/[locale]/page.tsx
similarity index 100%
rename from app/page.tsx
rename to app/[locale]/page.tsx

From 9d305b3b608b4f34699677cab3beaf1fd5c6357e Mon Sep 17 00:00:00 2001
From: Maigo Erit <maigo.erit@gmail.com>
Date: Tue, 4 Mar 2025 21:22:51 +0200
Subject: [PATCH 02/15] Add internationalization (i18n) support with next-intl

- Integrate next-intl for multi-language support
- Configure routing and middleware for locales (en, et)
- Add language switcher component
- Create message files for English and Estonian
- Update layout and components to support internationalization
- Add global type definitions for internationalization
- Implement locale-based routing and navigation
---
 app/[locale]/layout.tsx            | 53 +++++++++++-----
 app/[locale]/page.tsx              | 20 +++---
 app/layout.tsx                     | 11 ++++
 app/not-found.tsx                  | 17 ++++++
 components/Header/HeaderNavbar.tsx | 11 +++-
 components/Header/MenuDialog.tsx   | 14 ++++-
 components/LanguageSwitcher.tsx    | 37 ++++++++++++
 components/theme/ThemeProvider.tsx |  2 +-
 global.d.ts                        | 10 +++
 i18n/request.ts                    | 19 ++++++
 i18n/routing.ts                    | 14 +++++
 i18n/settings.ts                   |  3 +
 messages/en/page.json              |  9 +++
 messages/et/page.json              |  9 +++
 middleware.ts                      | 23 ++++---
 next.config.js                     |  8 +++
 package.json                       |  1 +
 pnpm-lock.yaml                     | 97 ++++++++++++++++++++++++++++++
 18 files changed, 318 insertions(+), 40 deletions(-)
 create mode 100644 app/layout.tsx
 create mode 100644 app/not-found.tsx
 create mode 100644 components/LanguageSwitcher.tsx
 create mode 100644 global.d.ts
 create mode 100644 i18n/request.ts
 create mode 100644 i18n/routing.ts
 create mode 100644 i18n/settings.ts
 create mode 100644 messages/en/page.json
 create mode 100644 messages/et/page.json
 create mode 100644 next.config.js

diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index 46e001e..a26d44c 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -2,7 +2,7 @@ import { Metadata } from 'next';
 import Head from 'next/head';
 
 import { getURL } from '@/utils/helpers';
-import { PropsWithChildren, Suspense } from 'react';
+import { Suspense } from 'react';
 
 import { ThemeProvider } from '@/components/theme/ThemeProvider';
 
@@ -11,9 +11,14 @@ import { Box } from '@chakra-ui/react';
 
 import { Footer } from '@/components/Header/Footer';
 import { HeaderNavbar } from '@/components/Header/HeaderNavbar';
+import { routing } from '@/i18n/routing';
 import { Analytics } from '@vercel/analytics/react';
 import { SpeedInsights } from '@vercel/speed-insights/next';
+import { NextIntlClientProvider } from 'next-intl';
+import { getMessages, setRequestLocale } from 'next-intl/server';
 import { M_PLUS_Rounded_1c, Roboto } from 'next/font/google';
+import { notFound } from 'next/navigation';
+import type { ReactNode } from 'react';
 
 const roboto = Roboto({
     weight: ['400', '500', '700'],
@@ -101,7 +106,25 @@ export async function generateMetadata(): Promise<Metadata> {
     };
 }
 
-export default async function RootLayout({ children }: PropsWithChildren) {
+type Props = {
+    children: ReactNode;
+    params: Promise<{ locale: string }>;
+};
+
+export default async function LocaleLayout({ children, params }: Props) {
+    const { locale } = await params;
+
+    // Ensure that the incoming `locale` is valid
+    if (!routing.locales.includes(locale as any)) {
+        notFound();
+    }
+
+    // Enable static rendering
+    setRequestLocale(locale);
+
+    // Providing all messages to the client
+    // side is the easiest way to get started
+    const messages = await getMessages();
     return (
         <>
             <Head>
@@ -109,23 +132,25 @@ export default async function RootLayout({ children }: PropsWithChildren) {
                 <link rel="canonical" href={meta.url} />
                 <meta http-equiv="Content-Language" content="en" />
             </Head>
-            <html suppressHydrationWarning lang="en" className={`${roboto.variable} ${mPlusRounded.variable}`}>
+            <html suppressHydrationWarning lang={locale} className={`${roboto.variable} ${mPlusRounded.variable}`}>
                 <body>
-                    <ThemeProvider enableColorScheme={false} defaultTheme="light">
-                        <Box>
-                            <Box maxW="1440px" mx="auto" px={[0, 2, 4]}>
-                                <HeaderNavbar />
+                    <NextIntlClientProvider messages={messages}>
+                        <ThemeProvider enableColorScheme={false} defaultTheme="light">
+                            <Box>
+                                <Box maxW="1440px" mx="auto" px={[0, 2, 4]}>
+                                    <HeaderNavbar />
 
-                                {children}
+                                    {children}
 
-                                <Footer />
+                                    <Footer />
+                                </Box>
                             </Box>
-                        </Box>
 
-                        <Suspense>
-                            <Toaster />
-                        </Suspense>
-                    </ThemeProvider>
+                            <Suspense>
+                                <Toaster />
+                            </Suspense>
+                        </ThemeProvider>
+                    </NextIntlClientProvider>
                     <Analytics />
                     <SpeedInsights />
                 </body>
diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
index d488179..a49fec3 100644
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -1,14 +1,14 @@
-import { Benefits } from '@/app/components/Benefits';
-import { ComparePricing } from '@/app/components/ComparePricing';
-import { Discuss } from '@/app/components/Discuss';
-import { Faq } from '@/app/components/Faq';
-import { Hero } from '@/app/components/Hero';
-import { PauseTry } from '@/app/components/PauseTry';
-import { Pricing } from '@/app/components/Pricing';
-import { ScrollToAnchorOnPageLoad } from '@/app/components/ScollToAnchorOnPageLoad';
-import { TechScroll } from '@/app/components/TechScroll';
-import { Testimonials } from '@/app/components/Testimonials';
 import { Flex } from '@chakra-ui/react';
+import { Benefits } from './components/Benefits';
+import { ComparePricing } from './components/ComparePricing';
+import { Discuss } from './components/Discuss';
+import { Faq } from './components/Faq';
+import { Hero } from './components/Hero';
+import { PauseTry } from './components/PauseTry';
+import { Pricing } from './components/Pricing';
+import { ScrollToAnchorOnPageLoad } from './components/ScollToAnchorOnPageLoad';
+import { TechScroll } from './components/TechScroll';
+import { Testimonials } from './components/Testimonials';
 
 export default async function HomePage() {
     return (
diff --git a/app/layout.tsx b/app/layout.tsx
new file mode 100644
index 0000000..2bb78c8
--- /dev/null
+++ b/app/layout.tsx
@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+
+type Props = {
+    children: ReactNode;
+};
+
+// Since we have a `not-found.tsx` page on the root, a layout file
+// is required, even if it's just passing children through.
+export default function RootLayout({ children }: Props) {
+    return children;
+}
diff --git a/app/not-found.tsx b/app/not-found.tsx
new file mode 100644
index 0000000..52d21f5
--- /dev/null
+++ b/app/not-found.tsx
@@ -0,0 +1,17 @@
+'use client';
+
+import Error from 'next/error';
+
+// Render the default Next.js 404 page when a route
+// is requested that doesn't match the middleware and
+// therefore doesn't have a locale associated with it.
+
+export default function NotFound() {
+    return (
+        <html lang="en">
+            <body>
+                <Error statusCode={404} />
+            </body>
+        </html>
+    );
+}
diff --git a/components/Header/HeaderNavbar.tsx b/components/Header/HeaderNavbar.tsx
index 8409b5e..223e268 100644
--- a/components/Header/HeaderNavbar.tsx
+++ b/components/Header/HeaderNavbar.tsx
@@ -1,3 +1,4 @@
+import LanguageSwitcher from '@/components/LanguageSwitcher';
 import { outerPadding } from '@/components/theme/padding.utils';
 import { Box, Flex } from '@chakra-ui/react';
 import { NextPage } from 'next';
@@ -19,11 +20,17 @@ export const HeaderNavbar: NextPage = () => {
                 <Logo />
 
                 <Box display={{ base: 'none', md: 'flex' }}>
-                    <Navlinks />
+                    <Flex align="center" gap={4}>
+                        <Navlinks />
+                        <LanguageSwitcher />
+                    </Flex>
                 </Box>
 
                 <Box display={{ base: 'flex', md: 'none' }}>
-                    <MenuDialog />
+                    <Flex align="center" gap={2}>
+                        <LanguageSwitcher />
+                        <MenuDialog />
+                    </Flex>
                 </Box>
             </Flex>
         </Box>
diff --git a/components/Header/MenuDialog.tsx b/components/Header/MenuDialog.tsx
index 4247d19..d755727 100644
--- a/components/Header/MenuDialog.tsx
+++ b/components/Header/MenuDialog.tsx
@@ -1,5 +1,6 @@
 'use client';
-import { Box, IconButton } from '@chakra-ui/react';
+import LanguageSwitcher from '@/components/LanguageSwitcher';
+import { Box, IconButton, Text, VStack } from '@chakra-ui/react';
 import { NextPage } from 'next';
 import { IoMenu } from 'react-icons/io5';
 import Navlinks from './Navlinks';
@@ -29,9 +30,16 @@ export const MenuDialog: NextPage = () => {
                     <DialogTitle></DialogTitle>
                 </DialogHeader>
                 <DialogBody>
-                    <Box w="full" justifyItems="center">
+                    <VStack w="full" gap={6} align="center">
                         <Navlinks />
-                    </Box>
+
+                        <Box pt={4}>
+                            <Text fontSize="sm" mb={2} textAlign="center">
+                                Language
+                            </Text>
+                            <LanguageSwitcher />
+                        </Box>
+                    </VStack>
                 </DialogBody>
                 <DialogFooter />
             </DialogContent>
diff --git a/components/LanguageSwitcher.tsx b/components/LanguageSwitcher.tsx
new file mode 100644
index 0000000..d66f02d
--- /dev/null
+++ b/components/LanguageSwitcher.tsx
@@ -0,0 +1,37 @@
+'use client';
+
+import { usePathname, useRouter } from '@/i18n/routing';
+import { locales } from '@/i18n/settings';
+import { Button, Flex } from '@chakra-ui/react';
+import { useLocale } from 'next-intl';
+import { useTransition } from 'react';
+
+export default function LanguageSwitcher() {
+    const [isPending, startTransition] = useTransition();
+    const locale = useLocale();
+    const router = useRouter();
+    const pathname = usePathname();
+
+    const handleLocaleChange = (newLocale: (typeof locales)[number]) => {
+        startTransition(() => {
+            // Navigate to the same page with the new locale
+            router.replace(pathname, { locale: newLocale });
+        });
+    };
+
+    return (
+        <Flex gap={2}>
+            {locales.map((l) => (
+                <Button
+                    key={l}
+                    size="sm"
+                    variant={l === locale ? 'solid' : 'ghost'}
+                    disabled={isPending || l === locale}
+                    onClick={() => handleLocaleChange(l)}
+                >
+                    {l.toUpperCase()}
+                </Button>
+            ))}
+        </Flex>
+    );
+}
diff --git a/components/theme/ThemeProvider.tsx b/components/theme/ThemeProvider.tsx
index 47778f8..5a84e23 100644
--- a/components/theme/ThemeProvider.tsx
+++ b/components/theme/ThemeProvider.tsx
@@ -1,8 +1,8 @@
 'use client';
 
 import { ChakraProvider } from '@chakra-ui/react';
-import { ColorModeProvider, type ColorModeProviderProps } from './color-mode';
 import { useEffect, useState } from 'react';
+import { ColorModeProvider, type ColorModeProviderProps } from './color-mode';
 import { sytemTheme } from './theme';
 
 export function ThemeProvider(props: ColorModeProviderProps) {
diff --git a/global.d.ts b/global.d.ts
new file mode 100644
index 0000000..2d74d8c
--- /dev/null
+++ b/global.d.ts
@@ -0,0 +1,10 @@
+// global.d.ts
+
+type PageMessages = typeof import('./messages/en/page.json');
+
+// Importing other language files ..
+
+// Create a new type by combining all message types
+type Messages = PageMessages;
+
+declare interface IntlMessages extends Messages {}
diff --git a/i18n/request.ts b/i18n/request.ts
new file mode 100644
index 0000000..c9532bb
--- /dev/null
+++ b/i18n/request.ts
@@ -0,0 +1,19 @@
+import { getRequestConfig } from 'next-intl/server';
+import { routing } from './routing';
+
+export default getRequestConfig(async ({ requestLocale }) => {
+    // This typically corresponds to the `[locale]` segment
+    let locale = await requestLocale;
+
+    // Ensure that a valid locale is used
+    if (!locale || !routing.locales.includes(locale as any)) {
+        locale = routing.defaultLocale;
+    }
+
+    return {
+        locale,
+        messages: {
+            ...(await import(`../messages/${locale}/page.json`))
+        }
+    };
+});
diff --git a/i18n/routing.ts b/i18n/routing.ts
new file mode 100644
index 0000000..80e0d36
--- /dev/null
+++ b/i18n/routing.ts
@@ -0,0 +1,14 @@
+import { createNavigation } from 'next-intl/navigation';
+import { defineRouting } from 'next-intl/routing';
+import { defaultLocale } from './settings';
+
+export const routing = defineRouting({
+    locales: ['en', 'et'],
+    defaultLocale: defaultLocale,
+    pathnames: {}
+});
+
+export type Pathnames = keyof typeof routing.pathnames;
+export type Locale = (typeof routing.locales)[number];
+
+export const { Link, permanentRedirect, redirect, usePathname, useRouter, getPathname } = createNavigation(routing);
diff --git a/i18n/settings.ts b/i18n/settings.ts
new file mode 100644
index 0000000..3d75424
--- /dev/null
+++ b/i18n/settings.ts
@@ -0,0 +1,3 @@
+export const locales = ['en', 'et'] as const;
+export type Locale = (typeof locales)[number];
+export const defaultLocale: Locale = 'en';
diff --git a/messages/en/page.json b/messages/en/page.json
new file mode 100644
index 0000000..c6ca33c
--- /dev/null
+++ b/messages/en/page.json
@@ -0,0 +1,9 @@
+{
+    "page": {
+        "title": "Users",
+        "form": {
+            "name": "Name",
+            "email": "Email"
+        }
+    }
+}
diff --git a/messages/et/page.json b/messages/et/page.json
new file mode 100644
index 0000000..a778313
--- /dev/null
+++ b/messages/et/page.json
@@ -0,0 +1,9 @@
+{
+    "page": {
+        "title": "Kasutajad",
+        "form": {
+            "name": "Nimi",
+            "email": "E-post"
+        }
+    }
+}
diff --git a/middleware.ts b/middleware.ts
index 8691132..934eeb7 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -1,17 +1,20 @@
-import { type NextRequest } from 'next/server';
+// middleware.ts
+import createMiddleware from 'next-intl/middleware';
+import { routing } from './i18n/routing';
 
-export async function middleware(request: NextRequest) {}
+export default createMiddleware(routing);
 
 export const config = {
     matcher: [
-        /*
-         * Match all request paths except:
-         * - _next/static (static files)
-         * - _next/image (image optimization files)
-         * - favicon.ico (favicon file)
-         * - images - .svg, .png, .jpg, .jpeg, .gif, .webp
-         * Feel free to modify this pattern to include more paths.
-         */
+        // Enable a redirect to a matching locale at the root
+        '/',
+
+        // Set a cookie to remember the previous locale for
+        // all requests that have a locale prefix
+        '/(et|en)/:path*',
+
+        // Enable redirects that add missing locales
+        // (e.g. `/pathnames` -> `/en/pathnames`)
         '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)'
     ]
 };
diff --git a/next.config.js b/next.config.js
new file mode 100644
index 0000000..569c961
--- /dev/null
+++ b/next.config.js
@@ -0,0 +1,8 @@
+const createNextIntlPlugin = require('next-intl/plugin');
+
+const withNextIntl = createNextIntlPlugin();
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+module.exports = withNextIntl(nextConfig);
diff --git a/package.json b/package.json
index 0bef63f..d3929bc 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
         "lottie-react": "^2.4.0",
         "motion": "^12.0.1",
         "next": "15.2.1",
+        "next-intl": "3.26.5",
         "next-sitemap": "^2.0.0",
         "next-themes": "^0.4.4",
         "react": "^19.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 37c1909..fa7c4f1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -47,6 +47,9 @@ importers:
       next:
         specifier: 15.2.1
         version: 15.2.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      next-intl:
+        specifier: 3.26.5
+        version: 3.26.5(next@15.2.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react@19.0.0)
       next-sitemap:
         specifier: ^2.0.0
         version: 2.5.28(next@15.2.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0))
@@ -413,6 +416,24 @@ packages:
   '@floating-ui/utils@0.2.9':
     resolution: {integrity: sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==}
 
+  '@formatjs/ecma402-abstract@2.3.3':
+    resolution: {integrity: sha512-pJT1OkhplSmvvr6i3CWTPvC/FGC06MbN5TNBfRO6Ox62AEz90eMq+dVvtX9Bl3jxCEkS0tATzDarRZuOLw7oFg==}
+
+  '@formatjs/fast-memoize@2.2.6':
+    resolution: {integrity: sha512-luIXeE2LJbQnnzotY1f2U2m7xuQNj2DA8Vq4ce1BY9ebRZaoPB1+8eZ6nXpLzsxuW5spQxr7LdCg+CApZwkqkw==}
+
+  '@formatjs/icu-messageformat-parser@2.11.1':
+    resolution: {integrity: sha512-o0AhSNaOfKoic0Sn1GkFCK4MxdRsw7mPJ5/rBpIqdvcC7MIuyUSW8WChUEvrK78HhNpYOgqCQbINxCTumJLzZA==}
+
+  '@formatjs/icu-skeleton-parser@1.8.13':
+    resolution: {integrity: sha512-N/LIdTvVc1TpJmMt2jVg0Fr1F7Q1qJPdZSCs19unMskCmVQ/sa0H9L8PWt13vq+gLdLg1+pPsvBLydL1Apahjg==}
+
+  '@formatjs/intl-localematcher@0.5.10':
+    resolution: {integrity: sha512-af3qATX+m4Rnd9+wHcjJ4w2ijq+rAVP3CCinJQvFv1kgSu1W6jypUmvleJxcewdxmutM8dmIRZFxO/IQBZmP2Q==}
+
+  '@formatjs/intl-localematcher@0.6.0':
+    resolution: {integrity: sha512-4rB4g+3hESy1bHSBG3tDFaMY2CH67iT7yne1e+0CLTsGLDcmoEWWpJjjpWVaYgYfYuohIRuo0E+N536gd2ZHZA==}
+
   '@hookform/error-message@2.0.1':
     resolution: {integrity: sha512-U410sAr92xgxT1idlu9WWOVjndxLdgPUHEB8Schr27C9eh7/xUnITWpCMF93s+lGiG++D4JnbSnrb5A21AdSNg==}
     peerDependencies:
@@ -1301,6 +1322,9 @@ packages:
       supports-color:
         optional: true
 
+  decimal.js@10.5.0:
+    resolution: {integrity: sha512-8vDa8Qxvr/+d94hSh5P3IJwI5t8/c0KsMp+g8bNw9cY2icONa5aPfvKeieW1WlG0WQYwwhJ7mjui2xtiePQSXw==}
+
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
@@ -1775,6 +1799,9 @@ packages:
     resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
     engines: {node: '>= 0.4'}
 
+  intl-messageformat@10.7.15:
+    resolution: {integrity: sha512-LRyExsEsefQSBjU2p47oAheoKz+EOJxSLDdjOaEjdriajfHsMXOmV/EhMvYSg9bAgCUHasuAC+mcUBe/95PfIg==}
+
   is-array-buffer@3.0.4:
     resolution: {integrity: sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==}
     engines: {node: '>= 0.4'}
@@ -2082,6 +2109,16 @@ packages:
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
+  negotiator@1.0.0:
+    resolution: {integrity: sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==}
+    engines: {node: '>= 0.6'}
+
+  next-intl@3.26.5:
+    resolution: {integrity: sha512-EQlCIfY0jOhRldiFxwSXG+ImwkQtDEfQeSOEQp6ieAGSLWGlgjdb/Ck/O7wMfC430ZHGeUKVKax8KGusTPKCgg==}
+    peerDependencies:
+      next: ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0 || ^19.0.0
+
   next-sitemap@2.5.28:
     resolution: {integrity: sha512-rDMTa7nLE0ikYnu8JDCrwQufIRm4b4Sg8BK11DGdDAmYpXmcmw4Qvm+oVBR8gUL97E6i2ihTM+cRx8mgENDACA==}
     engines: {node: '>=14.18'}
@@ -2670,6 +2707,11 @@ packages:
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
+  use-intl@3.26.5:
+    resolution: {integrity: sha512-OdsJnC/znPvHCHLQH/duvQNXnP1w0hPfS+tkSi3mAbfjYBGh4JnyfdwkQBfIVf7t8gs9eSX/CntxUMvtKdG2MQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0 || ^19.0.0
+
   web-streams-polyfill@3.3.2:
     resolution: {integrity: sha512-3pRGuxRF5gpuZc0W+EpwQRmCD7gRqcDOMt688KmdlDAgAyaB1XlN0zq2njfDNm44XVdIouE7pZ6GzbdyH47uIQ==}
     engines: {node: '>= 8'}
@@ -3078,6 +3120,36 @@ snapshots:
 
   '@floating-ui/utils@0.2.9': {}
 
+  '@formatjs/ecma402-abstract@2.3.3':
+    dependencies:
+      '@formatjs/fast-memoize': 2.2.6
+      '@formatjs/intl-localematcher': 0.6.0
+      decimal.js: 10.5.0
+      tslib: 2.8.1
+
+  '@formatjs/fast-memoize@2.2.6':
+    dependencies:
+      tslib: 2.8.1
+
+  '@formatjs/icu-messageformat-parser@2.11.1':
+    dependencies:
+      '@formatjs/ecma402-abstract': 2.3.3
+      '@formatjs/icu-skeleton-parser': 1.8.13
+      tslib: 2.8.1
+
+  '@formatjs/icu-skeleton-parser@1.8.13':
+    dependencies:
+      '@formatjs/ecma402-abstract': 2.3.3
+      tslib: 2.8.1
+
+  '@formatjs/intl-localematcher@0.5.10':
+    dependencies:
+      tslib: 2.8.1
+
+  '@formatjs/intl-localematcher@0.6.0':
+    dependencies:
+      tslib: 2.8.1
+
   '@hookform/error-message@2.0.1(react-dom@19.0.0(react@19.0.0))(react-hook-form@7.54.2(react@19.0.0))(react@19.0.0)':
     dependencies:
       react: 19.0.0
@@ -4184,6 +4256,8 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
+  decimal.js@10.5.0: {}
+
   deep-is@0.1.4: {}
 
   define-data-property@1.1.3:
@@ -4895,6 +4969,13 @@ snapshots:
       hasown: 2.0.2
       side-channel: 1.1.0
 
+  intl-messageformat@10.7.15:
+    dependencies:
+      '@formatjs/ecma402-abstract': 2.3.3
+      '@formatjs/fast-memoize': 2.2.6
+      '@formatjs/icu-messageformat-parser': 2.11.1
+      tslib: 2.8.1
+
   is-array-buffer@3.0.4:
     dependencies:
       call-bind: 1.0.6
@@ -5192,6 +5273,16 @@ snapshots:
 
   natural-compare@1.4.0: {}
 
+  negotiator@1.0.0: {}
+
+  next-intl@3.26.5(next@15.2.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react@19.0.0):
+    dependencies:
+      '@formatjs/intl-localematcher': 0.5.10
+      negotiator: 1.0.0
+      next: 15.2.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      use-intl: 3.26.5(react@19.0.0)
+
   next-sitemap@2.5.28(next@15.2.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)):
     dependencies:
       '@corex/deepmerge': 2.6.148
@@ -5885,6 +5976,12 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  use-intl@3.26.5(react@19.0.0):
+    dependencies:
+      '@formatjs/fast-memoize': 2.2.6
+      intl-messageformat: 10.7.15
+      react: 19.0.0
+
   web-streams-polyfill@3.3.2: {}
 
   which-boxed-primitive@1.0.2:

From 585ef048c2fc18275d825aa7ac9bd0398cf66677 Mon Sep 17 00:00:00 2001
From: Maigo Erit <maigo.erit@gmail.com>
Date: Tue, 4 Mar 2025 21:37:47 +0200
Subject: [PATCH 03/15] Add component translations and update global type
 definitions

- Create components.json translation files for English and Estonian
- Update Footer, MenuDialog, and Navlinks components to use translations
- Modify global.d.ts to include ComponentMessages type
- Integrate next-intl translations for component text content
---
 components/Header/Footer.tsx     |  9 ++++++---
 components/Header/MenuDialog.tsx |  5 ++++-
 components/Header/Navlinks.tsx   |  9 ++++++---
 global.d.ts                      |  3 ++-
 messages/en/components.json      | 15 +++++++++++++++
 messages/et/components.json      | 15 +++++++++++++++
 6 files changed, 48 insertions(+), 8 deletions(-)
 create mode 100644 messages/en/components.json
 create mode 100644 messages/et/components.json

diff --git a/components/Header/Footer.tsx b/components/Header/Footer.tsx
index 342ac9a..a272d99 100644
--- a/components/Header/Footer.tsx
+++ b/components/Header/Footer.tsx
@@ -2,10 +2,13 @@ import { mainRounded, outerPadding } from '@/components/theme/padding.utils';
 import { PRIVACY_POLICY_LINK, TERMS_AND_CONDITIONS_LINK } from '@/utils/constants';
 import { Box, Flex, Text } from '@chakra-ui/react';
 import type { NextPage } from 'next';
+import { useTranslations } from 'next-intl';
 import NextLink from 'next/link';
 import { Logo } from './Logo';
 
 export const Footer: NextPage = () => {
+    const t = useTranslations('footer');
+
     return (
         <Box as="footer" bg="bgColor" w="full" roundedTop={mainRounded} mt={6} px={outerPadding}>
             <Flex
@@ -18,18 +21,18 @@ export const Footer: NextPage = () => {
                 <Flex alignItems="center" gap={4}>
                     <Logo size="sm" />
                     <Text textStyle="sm" fontWeight="extralight" py={4}>
-                        Headquartered in Tallinn, Estonia (GMT+2)
+                        {t('location')}
                     </Text>
                 </Flex>
                 <Flex gap={6} py={[4, 4, 4, 8]}>
                     <NextLink href={PRIVACY_POLICY_LINK} passHref>
                         <Text textStyle="sm" fontWeight="bold">
-                            Privacy Policy
+                            {t('privacyPolicy')}
                         </Text>
                     </NextLink>
                     <NextLink href={TERMS_AND_CONDITIONS_LINK} passHref>
                         <Text textStyle="sm" fontWeight="bold">
-                            Terms of service
+                            {t('termsOfService')}
                         </Text>
                     </NextLink>
                 </Flex>
diff --git a/components/Header/MenuDialog.tsx b/components/Header/MenuDialog.tsx
index d755727..e40d156 100644
--- a/components/Header/MenuDialog.tsx
+++ b/components/Header/MenuDialog.tsx
@@ -2,6 +2,7 @@
 import LanguageSwitcher from '@/components/LanguageSwitcher';
 import { Box, IconButton, Text, VStack } from '@chakra-ui/react';
 import { NextPage } from 'next';
+import { useTranslations } from 'next-intl';
 import { IoMenu } from 'react-icons/io5';
 import Navlinks from './Navlinks';
 
@@ -17,6 +18,8 @@ import {
 } from '@/components/ui/dialog';
 
 export const MenuDialog: NextPage = () => {
+    const t = useTranslations('menuDialog');
+
     return (
         <DialogRoot size="xl">
             <DialogTrigger>
@@ -35,7 +38,7 @@ export const MenuDialog: NextPage = () => {
 
                         <Box pt={4}>
                             <Text fontSize="sm" mb={2} textAlign="center">
-                                Language
+                                {t('language')}
                             </Text>
                             <LanguageSwitcher />
                         </Box>
diff --git a/components/Header/Navlinks.tsx b/components/Header/Navlinks.tsx
index 9bf10d6..200f36a 100644
--- a/components/Header/Navlinks.tsx
+++ b/components/Header/Navlinks.tsx
@@ -1,28 +1,31 @@
 import { Button } from '@/components/ui/button';
 import { LOGIN_LINK } from '@/utils/constants';
 import { SimpleGrid } from '@chakra-ui/react';
+import { useTranslations } from 'next-intl';
 import NextLink from 'next/link';
 import { LuCalendarDays } from 'react-icons/lu';
 
 export default function Navlinks() {
+    const t = useTranslations('navLinks');
+
     return (
         <SimpleGrid columns={[1, 3]} gap="4" flex="1" maxW="500px" w="full">
             <NextLink href={LOGIN_LINK} passHref legacyBehavior>
                 <Button as="a" variant="outline" w="full" colorPalette="blue">
-                    Sign In
+                    {t('signIn')}
                 </Button>
             </NextLink>
 
             <NextLink href="#book" passHref legacyBehavior>
                 <Button variant="outline" w="full" colorPalette="blue">
                     <LuCalendarDays />
-                    Book a Call
+                    {t('bookCall')}
                 </Button>
             </NextLink>
 
             <NextLink href="#pricing" passHref legacyBehavior>
                 <Button variant="solid" w="full" colorPalette="blue">
-                    See pricing
+                    {t('seePricing')}
                 </Button>
             </NextLink>
         </SimpleGrid>
diff --git a/global.d.ts b/global.d.ts
index 2d74d8c..81c2cd6 100644
--- a/global.d.ts
+++ b/global.d.ts
@@ -1,10 +1,11 @@
 // global.d.ts
 
 type PageMessages = typeof import('./messages/en/page.json');
+type ComponentMessages = typeof import('./messages/en/components.json');
 
 // Importing other language files ..
 
 // Create a new type by combining all message types
-type Messages = PageMessages;
+type Messages = PageMessages & ComponentMessages;
 
 declare interface IntlMessages extends Messages {}
diff --git a/messages/en/components.json b/messages/en/components.json
new file mode 100644
index 0000000..c9ca0fa
--- /dev/null
+++ b/messages/en/components.json
@@ -0,0 +1,15 @@
+{
+    "navLinks": {
+        "signIn": "Sign In",
+        "bookCall": "Book a Call",
+        "seePricing": "See pricing"
+    },
+    "footer": {
+        "location": "Headquartered in Tallinn, Estonia (GMT+2)",
+        "privacyPolicy": "Privacy Policy",
+        "termsOfService": "Terms of service"
+    },
+    "menuDialog": {
+        "language": "Language"
+    }
+}
diff --git a/messages/et/components.json b/messages/et/components.json
new file mode 100644
index 0000000..c9ca0fa
--- /dev/null
+++ b/messages/et/components.json
@@ -0,0 +1,15 @@
+{
+    "navLinks": {
+        "signIn": "Sign In",
+        "bookCall": "Book a Call",
+        "seePricing": "See pricing"
+    },
+    "footer": {
+        "location": "Headquartered in Tallinn, Estonia (GMT+2)",
+        "privacyPolicy": "Privacy Policy",
+        "termsOfService": "Terms of service"
+    },
+    "menuDialog": {
+        "language": "Language"
+    }
+}

From 1b0c22dd66bea82fadebdd2cd21be53bb30f51c5 Mon Sep 17 00:00:00 2001
From: Maigo Erit <maigo.erit@gmail.com>
Date: Tue, 4 Mar 2025 21:48:55 +0200
Subject: [PATCH 04/15] Migrate component translations to page.json and remove
 separate components.json

- Remove components.json translation files for English and Estonian
- Move all component translations to page.json
- Update global.d.ts to remove ComponentMessages type
- Refactor components to use translations from consolidated page.json files
- Simplify internationalization structure by consolidating translation files
---
 app/[locale]/components/Benefits.tsx      |  26 ++---
 app/[locale]/components/Faq.tsx           |  55 ++---------
 app/[locale]/components/Hero.tsx          |  14 +--
 app/[locale]/components/IntroCallCard.tsx |  13 ++-
 app/[locale]/components/Pricing.tsx       |  20 ++--
 global.d.ts                               |   3 +-
 messages/en/components.json               |  15 ---
 messages/en/page.json                     | 109 ++++++++++++++++++++
 messages/et/components.json               |  15 ---
 messages/et/page.json                     | 115 +++++++++++++++++++++-
 10 files changed, 268 insertions(+), 117 deletions(-)
 delete mode 100644 messages/en/components.json
 delete mode 100644 messages/et/components.json

diff --git a/app/[locale]/components/Benefits.tsx b/app/[locale]/components/Benefits.tsx
index 7e701fc..1d21bfb 100644
--- a/app/[locale]/components/Benefits.tsx
+++ b/app/[locale]/components/Benefits.tsx
@@ -1,5 +1,6 @@
 import { mainHeadingSize, mainRounded } from '@/components/theme/padding.utils';
 import { Box, Flex, Heading, SimpleGrid, Text } from '@chakra-ui/react';
+import { useTranslations } from 'next-intl';
 import { AdaptiveInterface } from './animations/AdaptiveInterface';
 import { DeveloperCommunications } from './animations/DeveloperCommunications';
 import { WebDevelopment } from './animations/WebDevelopment';
@@ -37,34 +38,25 @@ const BenefitItem = ({
 };
 
 export const Benefits = () => {
+    const t = useTranslations('benefits');
+    const items = useTranslations('benefits.items');
+
     return (
         <Box w="full">
             <Box pb={4} pl={[4, 0]}>
-                <Heading size={mainHeadingSize}>Benefits</Heading>
+                <Heading size={mainHeadingSize}>{t('heading')}</Heading>
             </Box>
             <SimpleGrid columns={[1, 1, 2, 2, 4]} gap={4}>
-                <BenefitItem
-                    title="Dedicated Maintenance for Your Existing Projects"
-                    description="No need for a full team - one senior developer focuses on ensuring your React application remains performant and up-to-date."
-                >
+                <BenefitItem title={items('maintenance.title')} description={items('maintenance.description')}>
                     <WorkingHome />
                 </BenefitItem>
-                <BenefitItem
-                    title="Quick Turnaround for Bug Fixes & Updates"
-                    description="Rapid response for bug fixes and feature requests, starting within 48 hours. Keep your application running optimally!"
-                >
+                <BenefitItem title={items('bugFixes.title')} description={items('bugFixes.description')}>
                     <WebDevelopment />
                 </BenefitItem>
-                <BenefitItem
-                    title="Upgrade and Enhance Your Application"
-                    description="Seamlessly add new features and upgrade libraries to leverage the latest React capabilities without disrupting your workflow."
-                >
+                <BenefitItem title={items('upgrade.title')} description={items('upgrade.description')}>
                     <AdaptiveInterface />
                 </BenefitItem>
-                <BenefitItem
-                    title="Streamlined Ticket-Based Communication"
-                    description="All updates and requests are tracked through our ticketing system, ensuring transparency and organization for every task."
-                >
+                <BenefitItem title={items('communication.title')} description={items('communication.description')}>
                     <DeveloperCommunications />
                 </BenefitItem>
             </SimpleGrid>
diff --git a/app/[locale]/components/Faq.tsx b/app/[locale]/components/Faq.tsx
index e033d0b..6e5a3d9 100644
--- a/app/[locale]/components/Faq.tsx
+++ b/app/[locale]/components/Faq.tsx
@@ -1,52 +1,17 @@
 import { mainHeadingSize, mainRounded, mainSubtextSize, outerPadding } from '@/components/theme/padding.utils';
 import { CustomAccordion, CustomAccordionItem } from '@/components/ui/custom-accordion';
 import { Box, Flex, Heading, Text } from '@chakra-ui/react';
+import { useTranslations } from 'next-intl';
 import { Questions } from './animations/Questions';
 
-const items = [
-    {
-        title: 'What types of projects do you maintain?',
-        text: `We specialize in maintaining and upgrading existing React applications, ensuring they remain robust and efficient.`
-    },
-    {
-        title: 'Do you only maintain existing projects?',
-        text: `No, we can also help build new projects from scratch! We'll break down the development into manageable tickets and tasks, following the same efficient workflow used for maintenance. This structured approach ensures clear progress tracking and organized development, whether starting fresh or maintaining an existing codebase.`
-    },
-    {
-        title: 'Can I request both bug fixes and new features?',
-        text: 'Absolutely! Our service covers bug fixes, feature enhancements, and updates to libraries or frameworks.'
-    },
-    {
-        title: 'How do I get started with maintenance?',
-        text: "To get started, contact me to discuss your project and specific needs. I'll also need secure access to your codebase to begin supporting your application. Once everything is set up, we'll choose a ticketing system - whether it's your existing system (like Jira or Trello) or one I create for you - so you can start submitting tasks right away."
-    },
-    {
-        title: 'How fast will my requests be completed?',
-        text: 'Each task will start within 48 hours of being submitted. From there, most requests are completed in one to two days, depending on their complexity.'
-    },
-    {
-        title: 'How does onboarding work?',
-        text: "When you subscribe to a plan, I'll ensure a seamless onboarding process. If you already have a ticketing system, such as Jira, Trello, or another platform, I'm happy to adapt and work within your existing setup. If not, I'll create one for you and guide you through the process. I'll also securely access your codebase to ensure everything is ready for maintenance. The setup process is quick and focused entirely on your needs."
-    },
-    {
-        title: 'Who are the developers?',
-        text: "Trimatech is a one-man agency, ran by Maigo, the founder. Trimatech does not employ other developers, or outsource work to any other entity. You'll work directly with me through the entirety of your experience."
-    },
-    {
-        title: 'Is there a limit to how many requests I can make?',
-        text: "Once subscribed, you're able to add as many requests to your queue as you'd like, and they will be delivered one by one."
-    },
-    {
-        title: 'How does the pause feature work?',
-        text: "We understand you may not have enough work to fill up entire month. Perhaps you only have one or two requests at the moment. That's where pausing your subscription comes in handy. Billing cycles are based on 31 day period. Let's say you sign up and use the service for 21 days, and then decide to pause your subscription. This means that the billing cycle will be paused and you'll have 10 days of service remaining to be used anytime in the future."
-    },
-    {
-        title: 'What if I only have a single request?',
-        text: "That's fine. You can pause your subscription when finished and return when you have additional development needs. There's no need to let the remainder of your subscription go to waste."
-    }
-];
+interface FaqItem {
+    title: string;
+    text: string;
+}
 
 export const Faq = () => {
+    const t = useTranslations('faq');
+
     return (
         <Flex
             flexDirection={['column', 'column', 'row']}
@@ -58,14 +23,14 @@ export const Faq = () => {
         >
             <Flex flexDirection="column" h="full" gap={10} flex="1">
                 <Box flex="1">
-                    <Heading size={mainHeadingSize}>Frequently Asked Questions</Heading>
+                    <Heading size={mainHeadingSize}>{t('heading')}</Heading>
                     <Text fontSize={mainSubtextSize} pt={4}>
-                        Schedule a quick call to discuss your React maintenance needs and see if we're a good fit.
+                        {t('description')}
                     </Text>
                 </Box>
                 <Box w="full">
                     <CustomAccordion variant="subtle">
-                        {items.map((item, index) => (
+                        {t.raw('items').map((item: FaqItem, index: number) => (
                             <CustomAccordionItem key={index} title={item.title}>
                                 <Text fontSize="md">{item.text}</Text>
                             </CustomAccordionItem>
diff --git a/app/[locale]/components/Hero.tsx b/app/[locale]/components/Hero.tsx
index 8010b2e..d6c783f 100644
--- a/app/[locale]/components/Hero.tsx
+++ b/app/[locale]/components/Hero.tsx
@@ -1,10 +1,13 @@
 import { mainHeadingSize, mainRounded, mainSubtextSize, outerPadding } from '@/components/theme/padding.utils';
 import { Box, Flex, Heading, Text } from '@chakra-ui/react';
+import { useTranslations } from 'next-intl';
 import { GiEuropeanFlag } from 'react-icons/gi';
 import { AbstractBg } from './animations/AbstractBg';
 import { IntroCallCard } from './IntroCallCard';
 
 export const Hero = () => {
+    const t = useTranslations('hero');
+
     return (
         <Box position="relative" bg="bgColor" w="full" roundedBottom={mainRounded} p={outerPadding} overflow="hidden">
             <Flex
@@ -15,22 +18,19 @@ export const Hero = () => {
                 gap={outerPadding}
             >
                 <Flex flexDirection="column" flex="1" gap={6}>
-                    <Heading size={mainHeadingSize}>Expert React Maintenance & Development</Heading>
-                    <Text fontSize={mainSubtextSize}>
-                        Keep your React applications running smoothly with dedicated senior level support. No mid-level
-                        teams, no overhead - just direct access to expert maintenance when you need it.
-                    </Text>
+                    <Heading size={mainHeadingSize}>{t('heading')}</Heading>
+                    <Text fontSize={mainSubtextSize}>{t('description')}</Text>
                     <Flex align="center">
                         <Box bg="primary" p={1} rounded="full">
                             <GiEuropeanFlag color="yellow" size="36px" />
                         </Box>
                         <Text ml={2} fontWeight="medium" fontSize="md">
-                            EU-Based
+                            {t('euBased')}
                         </Text>
                     </Flex>
                     <Box flex="1" />
                     <Heading as="h2" size="xl" color="primary">
-                        Mission: Make all React apps fast, modern, and user-friendly
+                        {t('mission')}
                     </Heading>
                 </Flex>
                 <Box flex="1" h="full" position="relative" justifyItems="center">
diff --git a/app/[locale]/components/IntroCallCard.tsx b/app/[locale]/components/IntroCallCard.tsx
index 97c99ac..10ad5d7 100644
--- a/app/[locale]/components/IntroCallCard.tsx
+++ b/app/[locale]/components/IntroCallCard.tsx
@@ -3,11 +3,14 @@ import { shadowSharp } from '@/components/theme/theme.utils';
 import { Button } from '@/components/ui/button';
 import { EMAIL_TO, GITHUB_LINK, LINKEDIN_LINK } from '@/utils/constants';
 import { Box, Flex, Heading, IconButton, Image, LinkBox, LinkOverlay, Stack, Text } from '@chakra-ui/react';
+import { useTranslations } from 'next-intl';
 import NextLink from 'next/link';
 import { FaGithub, FaLinkedin, FaPaperPlane } from 'react-icons/fa';
 import { LuArrowRight } from 'react-icons/lu';
 
 export const IntroCallCard = () => {
+    const t = useTranslations('introCallCard');
+
     return (
         <Box bg="white" borderRadius={mainRound} p={8} boxShadow={shadowSharp} position="relative" zIndex={1} w="350px">
             <Flex direction="column" gap={7}>
@@ -41,18 +44,18 @@ export const IntroCallCard = () => {
                         </NextLink>
                     </Stack>
                     <Heading size="xl" fontWeight="medium" textAlign="center" mt={3}>
-                        Maigo Erit
+                        {t('ownerName')}
                     </Heading>
                     <Heading size="md" fontWeight="light" textAlign="center">
-                        Owner & React Expert
+                        {t('ownerTitle')}
                     </Heading>
                 </Box>
                 <Heading fontSize="3xl" width="210px">
-                    Book a 15 min intro call
+                    {t('bookIntroCall')}
                 </Heading>
                 <NextLink href="#book">
                     <Button colorPalette="blue" size="lg" w="full">
-                        Book a call
+                        {t('bookCallButton')}
                     </Button>
                 </NextLink>
                 <LinkBox>
@@ -62,7 +65,7 @@ export const IntroCallCard = () => {
                         </Box>
                         <Flex direction="column">
                             <Text fontSize="md" fontWeight="bold">
-                                Prefer to email?
+                                {t('preferEmail')}
                             </Text>
                             <Text fontSize="md" color="gray.500">
                                 <LinkOverlay asChild>
diff --git a/app/[locale]/components/Pricing.tsx b/app/[locale]/components/Pricing.tsx
index 21f8d6b..5eb15d7 100644
--- a/app/[locale]/components/Pricing.tsx
+++ b/app/[locale]/components/Pricing.tsx
@@ -1,16 +1,20 @@
 import { mainHeadingSize, mainRounded, mainSubtextSize, outerPadding } from '@/components/theme/padding.utils';
 import { Box, Flex, Heading, Text } from '@chakra-ui/react';
+import { useTranslations } from 'next-intl';
 import { BusinessValue } from './animations/BusinessValue';
 import { PriceForOthers } from './PriceForOthers';
 import { PriceItem } from './PriceItem';
 
 export const Pricing = () => {
+    const t = useTranslations('pricing');
+    const options = useTranslations('pricing.options');
+
     return (
         <Box bg="bgColor" w="full" rounded={mainRounded} p={outerPadding} id="pricing">
             <Box textAlign="center" pb={outerPadding}>
-                <Heading size={mainHeadingSize}>Simple & transparent pricing</Heading>
+                <Heading size={mainHeadingSize}>{t('heading')}</Heading>
                 <Text fontSize={mainSubtextSize} pt={4}>
-                    One comprehensive plan for all your React maintenance needs.
+                    {t('description')}
                 </Text>
             </Box>
             <Flex flexDirection={['column', 'column', 'column', 'row']} gap={4}>
@@ -25,15 +29,15 @@ export const Pricing = () => {
                         flexDirection={['column', 'column', 'column', 'column', 'row']}
                     >
                         <PriceForOthers
-                            title="Hiring a full time senior developer"
-                            price="10,000"
-                            subtext="with the overhead"
+                            title={options('fullTime.title')}
+                            price={options('fullTime.price')}
+                            subtext={options('fullTime.subtext')}
                             href="#full-time-engineer"
                         />
                         <PriceForOthers
-                            title="Hiring a good development company"
-                            price="16,000"
-                            subtext="or €100 / hour"
+                            title={options('company.title')}
+                            price={options('company.price')}
+                            subtext={options('company.subtext')}
                             href="#development-company"
                         />
                     </Flex>
diff --git a/global.d.ts b/global.d.ts
index 81c2cd6..2d74d8c 100644
--- a/global.d.ts
+++ b/global.d.ts
@@ -1,11 +1,10 @@
 // global.d.ts
 
 type PageMessages = typeof import('./messages/en/page.json');
-type ComponentMessages = typeof import('./messages/en/components.json');
 
 // Importing other language files ..
 
 // Create a new type by combining all message types
-type Messages = PageMessages & ComponentMessages;
+type Messages = PageMessages;
 
 declare interface IntlMessages extends Messages {}
diff --git a/messages/en/components.json b/messages/en/components.json
deleted file mode 100644
index c9ca0fa..0000000
--- a/messages/en/components.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-    "navLinks": {
-        "signIn": "Sign In",
-        "bookCall": "Book a Call",
-        "seePricing": "See pricing"
-    },
-    "footer": {
-        "location": "Headquartered in Tallinn, Estonia (GMT+2)",
-        "privacyPolicy": "Privacy Policy",
-        "termsOfService": "Terms of service"
-    },
-    "menuDialog": {
-        "language": "Language"
-    }
-}
diff --git a/messages/en/page.json b/messages/en/page.json
index c6ca33c..84149cb 100644
--- a/messages/en/page.json
+++ b/messages/en/page.json
@@ -5,5 +5,114 @@
             "name": "Name",
             "email": "Email"
         }
+    },
+    "navLinks": {
+        "signIn": "Sign In",
+        "bookCall": "Book a Call",
+        "seePricing": "See pricing"
+    },
+    "footer": {
+        "location": "Headquartered in Tallinn, Estonia (GMT+2)",
+        "privacyPolicy": "Privacy Policy",
+        "termsOfService": "Terms of service"
+    },
+    "menuDialog": {
+        "language": "Language"
+    },
+    "hero": {
+        "heading": "Expert React Maintenance & Development",
+        "description": "Keep your React applications running smoothly with dedicated senior level support. No mid-level teams, no overhead - just direct access to expert maintenance when you need it.",
+        "euBased": "EU-Based",
+        "mission": "Mission: Make all React apps fast, modern, and user-friendly"
+    },
+    "benefits": {
+        "heading": "Benefits",
+        "items": {
+            "maintenance": {
+                "title": "Dedicated Maintenance for Your Existing Projects",
+                "description": "No need for a full team - one senior developer focuses on ensuring your React application remains performant and up-to-date."
+            },
+            "bugFixes": {
+                "title": "Quick Turnaround for Bug Fixes & Updates",
+                "description": "Rapid response for bug fixes and feature requests, starting within 48 hours. Keep your application running optimally!"
+            },
+            "upgrade": {
+                "title": "Upgrade and Enhance Your Application",
+                "description": "Seamlessly add new features and upgrade libraries to leverage the latest React capabilities without disrupting your workflow."
+            },
+            "communication": {
+                "title": "Streamlined Ticket-Based Communication",
+                "description": "All updates and requests are tracked through our ticketing system, ensuring transparency and organization for every task."
+            }
+        }
+    },
+    "introCallCard": {
+        "ownerName": "Maigo Erit",
+        "ownerTitle": "Owner & React Expert",
+        "bookIntroCall": "Book a 15 min intro call",
+        "bookCallButton": "Book a call",
+        "preferEmail": "Prefer to email?"
+    },
+    "pricing": {
+        "heading": "Simple & transparent pricing",
+        "description": "One comprehensive plan for all your React maintenance needs.",
+        "options": {
+            "fullTime": {
+                "title": "Hiring a full time senior developer",
+                "price": "10,000",
+                "subtext": "with the overhead"
+            },
+            "company": {
+                "title": "Hiring a good development company",
+                "price": "16,000",
+                "subtext": "or €100 / hour"
+            }
+        }
+    },
+    "faq": {
+        "heading": "Frequently Asked Questions",
+        "description": "Schedule a quick call to discuss your React maintenance needs and see if we're a good fit.",
+        "items": [
+            {
+                "title": "What types of projects do you maintain?",
+                "text": "We specialize in maintaining and upgrading existing React applications, ensuring they remain robust and efficient."
+            },
+            {
+                "title": "Do you only maintain existing projects?",
+                "text": "No, we can also help build new projects from scratch! We'll break down the development into manageable tickets and tasks, following the same efficient workflow used for maintenance. This structured approach ensures clear progress tracking and organized development, whether starting fresh or maintaining an existing codebase."
+            },
+            {
+                "title": "Can I request both bug fixes and new features?",
+                "text": "Absolutely! Our service covers bug fixes, feature enhancements, and updates to libraries or frameworks."
+            },
+            {
+                "title": "How do I get started with maintenance?",
+                "text": "To get started, contact me to discuss your project and specific needs. I'll also need secure access to your codebase to begin supporting your application. Once everything is set up, we'll choose a ticketing system - whether it's your existing system (like Jira or Trello) or one I create for you - so you can start submitting tasks right away."
+            },
+            {
+                "title": "How fast will my requests be completed?",
+                "text": "Each task will start within 48 hours of being submitted. From there, most requests are completed in one to two days, depending on their complexity."
+            },
+            {
+                "title": "How does onboarding work?",
+                "text": "When you subscribe to a plan, I'll ensure a seamless onboarding process. If you already have a ticketing system, such as Jira, Trello, or another platform, I'm happy to adapt and work within your existing setup. If not, I'll create one for you and guide you through the process. I'll also securely access your codebase to ensure everything is ready for maintenance. The setup process is quick and focused entirely on your needs."
+            },
+            {
+                "title": "Who are the developers?",
+                "text": "Trimatech is a one-man agency, ran by Maigo, the founder. Trimatech does not employ other developers, or outsource work to any other entity. You'll work directly with me through the entirety of your experience."
+            },
+            {
+                "title": "Is there a limit to how many requests I can make?",
+                "text": "Once subscribed, you're able to add as many requests to your queue as you'd like, and they will be delivered one by one."
+            },
+            {
+                "title": "How does the pause feature work?",
+                "text": "We understand you may not have enough work to fill up entire month. Perhaps you only have one or two requests at the moment. That's where pausing your subscription comes in handy. Billing cycles are based on 31 day period. Let's say you sign up and use the service for 21 days, and then decide to pause your subscription. This means that the billing cycle will be paused and you'll have 10 days of service remaining to be used anytime in the future."
+            },
+            {
+                "title": "What if I only have a single request?",
+                "text": "That's fine. You can pause your subscription when finished and return when you have additional development needs. There's no need to let the remainder of your subscription go to waste."
+            }
+        ]
     }
 }
diff --git a/messages/et/components.json b/messages/et/components.json
deleted file mode 100644
index c9ca0fa..0000000
--- a/messages/et/components.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-    "navLinks": {
-        "signIn": "Sign In",
-        "bookCall": "Book a Call",
-        "seePricing": "See pricing"
-    },
-    "footer": {
-        "location": "Headquartered in Tallinn, Estonia (GMT+2)",
-        "privacyPolicy": "Privacy Policy",
-        "termsOfService": "Terms of service"
-    },
-    "menuDialog": {
-        "language": "Language"
-    }
-}
diff --git a/messages/et/page.json b/messages/et/page.json
index a778313..84149cb 100644
--- a/messages/et/page.json
+++ b/messages/et/page.json
@@ -1,9 +1,118 @@
 {
     "page": {
-        "title": "Kasutajad",
+        "title": "Users",
         "form": {
-            "name": "Nimi",
-            "email": "E-post"
+            "name": "Name",
+            "email": "Email"
         }
+    },
+    "navLinks": {
+        "signIn": "Sign In",
+        "bookCall": "Book a Call",
+        "seePricing": "See pricing"
+    },
+    "footer": {
+        "location": "Headquartered in Tallinn, Estonia (GMT+2)",
+        "privacyPolicy": "Privacy Policy",
+        "termsOfService": "Terms of service"
+    },
+    "menuDialog": {
+        "language": "Language"
+    },
+    "hero": {
+        "heading": "Expert React Maintenance & Development",
+        "description": "Keep your React applications running smoothly with dedicated senior level support. No mid-level teams, no overhead - just direct access to expert maintenance when you need it.",
+        "euBased": "EU-Based",
+        "mission": "Mission: Make all React apps fast, modern, and user-friendly"
+    },
+    "benefits": {
+        "heading": "Benefits",
+        "items": {
+            "maintenance": {
+                "title": "Dedicated Maintenance for Your Existing Projects",
+                "description": "No need for a full team - one senior developer focuses on ensuring your React application remains performant and up-to-date."
+            },
+            "bugFixes": {
+                "title": "Quick Turnaround for Bug Fixes & Updates",
+                "description": "Rapid response for bug fixes and feature requests, starting within 48 hours. Keep your application running optimally!"
+            },
+            "upgrade": {
+                "title": "Upgrade and Enhance Your Application",
+                "description": "Seamlessly add new features and upgrade libraries to leverage the latest React capabilities without disrupting your workflow."
+            },
+            "communication": {
+                "title": "Streamlined Ticket-Based Communication",
+                "description": "All updates and requests are tracked through our ticketing system, ensuring transparency and organization for every task."
+            }
+        }
+    },
+    "introCallCard": {
+        "ownerName": "Maigo Erit",
+        "ownerTitle": "Owner & React Expert",
+        "bookIntroCall": "Book a 15 min intro call",
+        "bookCallButton": "Book a call",
+        "preferEmail": "Prefer to email?"
+    },
+    "pricing": {
+        "heading": "Simple & transparent pricing",
+        "description": "One comprehensive plan for all your React maintenance needs.",
+        "options": {
+            "fullTime": {
+                "title": "Hiring a full time senior developer",
+                "price": "10,000",
+                "subtext": "with the overhead"
+            },
+            "company": {
+                "title": "Hiring a good development company",
+                "price": "16,000",
+                "subtext": "or €100 / hour"
+            }
+        }
+    },
+    "faq": {
+        "heading": "Frequently Asked Questions",
+        "description": "Schedule a quick call to discuss your React maintenance needs and see if we're a good fit.",
+        "items": [
+            {
+                "title": "What types of projects do you maintain?",
+                "text": "We specialize in maintaining and upgrading existing React applications, ensuring they remain robust and efficient."
+            },
+            {
+                "title": "Do you only maintain existing projects?",
+                "text": "No, we can also help build new projects from scratch! We'll break down the development into manageable tickets and tasks, following the same efficient workflow used for maintenance. This structured approach ensures clear progress tracking and organized development, whether starting fresh or maintaining an existing codebase."
+            },
+            {
+                "title": "Can I request both bug fixes and new features?",
+                "text": "Absolutely! Our service covers bug fixes, feature enhancements, and updates to libraries or frameworks."
+            },
+            {
+                "title": "How do I get started with maintenance?",
+                "text": "To get started, contact me to discuss your project and specific needs. I'll also need secure access to your codebase to begin supporting your application. Once everything is set up, we'll choose a ticketing system - whether it's your existing system (like Jira or Trello) or one I create for you - so you can start submitting tasks right away."
+            },
+            {
+                "title": "How fast will my requests be completed?",
+                "text": "Each task will start within 48 hours of being submitted. From there, most requests are completed in one to two days, depending on their complexity."
+            },
+            {
+                "title": "How does onboarding work?",
+                "text": "When you subscribe to a plan, I'll ensure a seamless onboarding process. If you already have a ticketing system, such as Jira, Trello, or another platform, I'm happy to adapt and work within your existing setup. If not, I'll create one for you and guide you through the process. I'll also securely access your codebase to ensure everything is ready for maintenance. The setup process is quick and focused entirely on your needs."
+            },
+            {
+                "title": "Who are the developers?",
+                "text": "Trimatech is a one-man agency, ran by Maigo, the founder. Trimatech does not employ other developers, or outsource work to any other entity. You'll work directly with me through the entirety of your experience."
+            },
+            {
+                "title": "Is there a limit to how many requests I can make?",
+                "text": "Once subscribed, you're able to add as many requests to your queue as you'd like, and they will be delivered one by one."
+            },
+            {
+                "title": "How does the pause feature work?",
+                "text": "We understand you may not have enough work to fill up entire month. Perhaps you only have one or two requests at the moment. That's where pausing your subscription comes in handy. Billing cycles are based on 31 day period. Let's say you sign up and use the service for 21 days, and then decide to pause your subscription. This means that the billing cycle will be paused and you'll have 10 days of service remaining to be used anytime in the future."
+            },
+            {
+                "title": "What if I only have a single request?",
+                "text": "That's fine. You can pause your subscription when finished and return when you have additional development needs. There's no need to let the remainder of your subscription go to waste."
+            }
+        ]
     }
 }

From e7c55e3b87d57ce533cb3fc41bade0ac38b921de Mon Sep 17 00:00:00 2001
From: Maigo Erit <maigo.erit@gmail.com>
Date: Tue, 4 Mar 2025 23:11:21 +0200
Subject: [PATCH 05/15] Migrate components to use next-intl translations and
 update constants

- Update ComparePricing, Discuss, PauseTry, PriceItem, PriceItemButton, and Testimonials components to use next-intl translations
- Move hardcoded text content to page.json translation files for English and Estonian
- Update EMAIL_TO constant to use .dev domain
- Refactor components to dynamically render text using useTranslations hook
---
 app/[locale]/components/ComparePricing.tsx  | 262 +++++++++-----------
 app/[locale]/components/Discuss.tsx         |   7 +-
 app/[locale]/components/PauseTry.tsx        |  57 ++---
 app/[locale]/components/PriceItem.tsx       |  18 +-
 app/[locale]/components/PriceItemButton.tsx |   5 +-
 app/[locale]/components/Testimonials.tsx    |  42 +---
 messages/en/page.json                       | 192 ++++++++++++++
 messages/et/page.json                       | 192 ++++++++++++++
 utils/constants.ts                          |   2 +-
 9 files changed, 537 insertions(+), 240 deletions(-)

diff --git a/app/[locale]/components/ComparePricing.tsx b/app/[locale]/components/ComparePricing.tsx
index 2d0b8f8..31bc250 100644
--- a/app/[locale]/components/ComparePricing.tsx
+++ b/app/[locale]/components/ComparePricing.tsx
@@ -1,5 +1,6 @@
 import { mainHeadingSize, mainRounded, outerPadding } from '@/components/theme/padding.utils';
 import { Box, Flex, Heading, SimpleGrid, Span, Text } from '@chakra-ui/react';
+import { useTranslations } from 'next-intl';
 import { BusinessAgreement } from './animations/BusinessAgreement';
 import { CustomerAssistance } from './animations/CustomerAssistance';
 import { MoneyValueImage } from './animations/MoneyValueImage';
@@ -17,172 +18,131 @@ const TextRow = ({ heading, text }: { heading: string; text: string }) => (
     </Text>
 );
 
-const FullTimeEngineer = () => (
-    <Flex
-        flexDirection="column"
-        gap={headingGap}
-        flex="1"
-        bg="bgColor"
-        rounded={mainRounded}
-        p={outerPadding}
-        id="full-time-engineer"
-    >
-        <Box w="full" h="200px">
-            <CustomerAssistance />
-        </Box>
-        <Heading as="h2" size={headingSize} mb={2}>
-            Hiring a full-time engineer
-        </Heading>
-        <Flex flexDirection="column" gap={textGap}>
-            <TextRow heading="Cost" text="~€8,000-€10,000/month (gross, including taxes, benefits, and overhead)." />
-            <TextRow
-                heading="Commitment"
-                text="160 hours/month, but not all those hours will be productive if the workload is small or inconsistent."
-            />
-            <TextRow
-                heading="Downsides"
-                text="Recruitment effort, onboarding time, managing idle hours for smaller workloads, and possible challenges with developer turnover."
-            />
-        </Flex>
-        <Box flex="1" />
-        <Heading as="h2" size={headingSize} color="primary">
-            With our subscription:
-        </Heading>
-        <Flex flexDirection="column" gap={textGap}>
-            <TextRow heading="Cost" text={`~50% savings compared to a full-time senior React developer.`} />
-            <TextRow
-                heading="Flexibility"
-                text="Perfect for projects with small, steady workloads where a full-time employee isn't needed."
-            />
-            <TextRow
-                heading="Efficiency"
-                text="Tasks are based on your priorities: ~8-12 significant tasks completed per month. Less wasted time - get results, not idle hours."
-            />
-            <TextRow
-                heading="Hassle-Free Start"
-                text="Begin immediately with no recruitment, onboarding, or admin overhead."
-            />
-            <TextRow
-                heading="On-Demand Results"
-                text="Quality-backed deliverables tailored to your project priorities, without delays or inefficiencies."
-            />
-        </Flex>
-    </Flex>
-);
+const FullTimeEngineer = () => {
+    const t = useTranslations('comparePricing.fullTimeEngineer');
 
-export const HiringCompany = () => (
-    <Flex
-        flexDirection="column"
-        gap={headingGap}
-        flex="1"
-        bg="bgColor"
-        rounded={mainRounded}
-        p={outerPadding}
-        id="development-company"
-    >
-        <Box w="full" h="200px">
-            <BusinessAgreement />
-        </Box>
-        <Heading as="h2" size={headingSize}>
-            Hiring a development company
-        </Heading>
-        <Flex flexDirection="column" gap={textGap}>
-            <TextRow
-                heading="Cost"
-                text="€100-€150/hour. For 160 hours, this is ~€16,000-€24,000/month. Even smaller workloads (e.g., 50 hours) cost €5,000-€7,500."
-            />
-            <TextRow
-                heading="Commitment"
-                text="Many companies require minimum monthly contracts or long-term retainers (e.g., 3-6 months), making it difficult to pause during inconsistent workloads. After pausing, they may not have capacity when you need to resume."
-            />
-            <TextRow
-                heading="Downsides"
-                text="Overestimation padding, possible involvement of junior developers, and slower communication through middle management."
-            />
-        </Flex>
-        <Box flex="1" />
-        <Heading as="h2" size={headingSize} color="primary">
-            With our subscription:
-        </Heading>
-        <Flex flexDirection="column" gap={textGap}>
-            <TextRow
-                heading="Cost"
-                text={`~25% savings compared to 50 hours with a company, and significantly less for larger workloads.`}
-            />
-            <TextRow heading="Flexible Commitment" text="Pause or cancel anytime based on your workload." />
-            <TextRow
-                heading="Direct Expertise"
-                text="Work is handled exclusively by a senior React developer - no juniors or inflated estimates."
-            />
-            <TextRow
-                heading="Streamlined Communication"
-                text="Direct collaboration ensures faster feedback and no time wasted on unnecessary middlemen or delays."
-            />
+    return (
+        <Flex
+            flexDirection="column"
+            gap={headingGap}
+            flex="1"
+            bg="bgColor"
+            rounded={mainRounded}
+            p={outerPadding}
+            id="full-time-engineer"
+        >
+            <Box w="full" h="200px">
+                <CustomerAssistance />
+            </Box>
+            <Heading as="h2" size={headingSize} mb={2}>
+                {t('title')}
+            </Heading>
+            <Flex flexDirection="column" gap={textGap}>
+                <TextRow heading={t('cost.title')} text={t('cost.text')} />
+                <TextRow heading={t('commitment.title')} text={t('commitment.text')} />
+                <TextRow heading={t('downsides.title')} text={t('downsides.text')} />
+            </Flex>
+            <Box flex="1" />
+            <Heading as="h2" size={headingSize} color="primary">
+                {t('withSubscription')}
+            </Heading>
+            <Flex flexDirection="column" gap={textGap}>
+                <TextRow heading={t('subscriptionCost.title')} text={t('subscriptionCost.text')} />
+                <TextRow heading={t('flexibility.title')} text={t('flexibility.text')} />
+                <TextRow heading={t('efficiency.title')} text={t('efficiency.text')} />
+                <TextRow heading={t('hassleStart.title')} text={t('hassleStart.text')} />
+                <TextRow heading={t('onDemand.title')} text={t('onDemand.text')} />
+            </Flex>
         </Flex>
-    </Flex>
-);
+    );
+};
 
-const SubscriptionValue = () => (
-    <Flex
-        flexDirection={['column', 'column', 'row']}
-        gap={headingGap}
-        w="full"
-        bg="bgColor"
-        rounded={mainRounded}
-        p={outerPadding}
-    >
-        <Flex flexDirection="column" gap={headingGap} w="full" flex="1">
+export const HiringCompany = () => {
+    const t = useTranslations('comparePricing.hiringCompany');
+
+    return (
+        <Flex
+            flexDirection="column"
+            gap={headingGap}
+            flex="1"
+            bg="bgColor"
+            rounded={mainRounded}
+            p={outerPadding}
+            id="development-company"
+        >
+            <Box w="full" h="200px">
+                <BusinessAgreement />
+            </Box>
             <Heading as="h2" size={headingSize}>
-                Subscription value at a glance
+                {t('title')}
             </Heading>
             <Flex flexDirection="column" gap={textGap}>
-                <TextRow
-                    heading="Monthly Output"
-                    text="~8-12 tasks per month (equivalent to 50 hours of senior-level work)."
-                />
-                <TextRow
-                    heading="Cost Savings"
-                    text="Save ~50% compared to hiring a full-time engineer and ~25% compared to outsourcing to a company."
-                />
-                <TextRow
-                    heading="Hassle-Free Start"
-                    text="Begin without recruitment, onboarding, or management overhead - just quality focused results when you need them."
-                />
-                <TextRow
-                    heading="Flexibility & Simplicity"
-                    text="No long term contracts, commitments, or penalties - pause or cancel anytime. Start immediately with no delays or onboarding required."
-                />
-                <TextRow
-                    heading="Exclusive Expertise"
-                    text="Work is completed by a senior React developer who provides dedicated attention to your needs - no juniors, no middle management, and no compromises on quality."
-                />
-
-                <TextRow
-                    heading="Efficiency Through AI and Modern Practices"
-                    text="Using AI-powered solutions like Cursor.ai and the latest development methodologies, combined with continuous improvements in workflows, results are delivered with a speed and proficiency comparable to small software teams of just a few years ago. This ensures exceptional quality and faster project delivery."
-                />
+                <TextRow heading={t('cost.title')} text={t('cost.text')} />
+                <TextRow heading={t('commitment.title')} text={t('commitment.text')} />
+                <TextRow heading={t('downsides.title')} text={t('downsides.text')} />
+            </Flex>
+            <Box flex="1" />
+            <Heading as="h2" size={headingSize} color="primary">
+                {t('withSubscription')}
+            </Heading>
+            <Flex flexDirection="column" gap={textGap}>
+                <TextRow heading={t('subscriptionCost.title')} text={t('subscriptionCost.text')} />
+                <TextRow heading={t('flexibility.title')} text={t('flexibility.text')} />
+                <TextRow heading={t('expertise.title')} text={t('expertise.text')} />
+                <TextRow heading={t('communication.title')} text={t('communication.text')} />
             </Flex>
         </Flex>
-        <Box
+    );
+};
+
+const SubscriptionValue = () => {
+    const t = useTranslations('comparePricing.subscriptionValue');
+
+    return (
+        <Flex
+            flexDirection={['column', 'column', 'row']}
+            gap={headingGap}
             w="full"
-            flex="1"
-            h="300px"
-            mt={9}
-            display="flex"
-            justifyContent="center"
-            alignItems="center"
-            alignSelf="center"
+            bg="bgColor"
+            rounded={mainRounded}
+            p={outerPadding}
         >
-            <MoneyValueImage />
-        </Box>
-    </Flex>
-);
+            <Flex flexDirection="column" gap={headingGap} w="full" flex="1">
+                <Heading as="h2" size={headingSize}>
+                    {t('title')}
+                </Heading>
+                <Flex flexDirection="column" gap={textGap}>
+                    <TextRow heading={t('monthlyOutput.title')} text={t('monthlyOutput.text')} />
+                    <TextRow heading={t('costSavings.title')} text={t('costSavings.text')} />
+                    <TextRow heading={t('hassleStart.title')} text={t('hassleStart.text')} />
+                    <TextRow heading={t('flexibility.title')} text={t('flexibility.text')} />
+                    <TextRow heading={t('expertise.title')} text={t('expertise.text')} />
+                    <TextRow heading={t('efficiency.title')} text={t('efficiency.text')} />
+                </Flex>
+            </Flex>
+            <Box
+                w="full"
+                flex="1"
+                h="300px"
+                mt={9}
+                display="flex"
+                justifyContent="center"
+                alignItems="center"
+                alignSelf="center"
+            >
+                <MoneyValueImage />
+            </Box>
+        </Flex>
+    );
+};
 
 export const ComparePricing = () => {
+    const t = useTranslations('comparePricing');
+
     return (
         <Box w="full">
             <Box pb={4} pl={[4, 0]}>
-                <Heading size={mainHeadingSize}>How does this compare?</Heading>
+                <Heading size={mainHeadingSize}>{t('heading')}</Heading>
             </Box>
             <SimpleGrid columns={[1, 1, 2]} gap={4}>
                 <FullTimeEngineer />
diff --git a/app/[locale]/components/Discuss.tsx b/app/[locale]/components/Discuss.tsx
index b3aa889..741d926 100644
--- a/app/[locale]/components/Discuss.tsx
+++ b/app/[locale]/components/Discuss.tsx
@@ -8,10 +8,13 @@ import {
 } from '@/components/theme/padding.utils';
 import { shadowSharp } from '@/components/theme/theme.utils';
 import { Box, Flex, Heading, Text } from '@chakra-ui/react';
+import { useTranslations } from 'next-intl';
 import { InlineWidget } from 'react-calendly';
 import { OnlineVideoChatting } from './animations/OnlineVideoChatting';
 
 export const Discuss = () => {
+    const t = useTranslations('discuss');
+
     return (
         <Flex
             flexDirection={['column', 'column', 'row']}
@@ -24,9 +27,9 @@ export const Discuss = () => {
         >
             <Flex flexDirection="column" justifyContent="center" alignItems="center" h="full" gap={outerPadding}>
                 <Box flex="1">
-                    <Heading size={mainHeadingSize}>Let's discuss your project</Heading>
+                    <Heading size={mainHeadingSize}>{t('heading')}</Heading>
                     <Text fontSize={mainSubtextSize} pt={4}>
-                        Schedule a quick call to discuss your React maintenance needs and see if we're a good fit.
+                        {t('description')}
                     </Text>
                 </Box>
                 <Box h="450px" display="flex" alignItems="center" justifyContent="center">
diff --git a/app/[locale]/components/PauseTry.tsx b/app/[locale]/components/PauseTry.tsx
index d3f9f3f..fba2b35 100644
--- a/app/[locale]/components/PauseTry.tsx
+++ b/app/[locale]/components/PauseTry.tsx
@@ -1,6 +1,7 @@
 import { mainRound } from '@/components/theme/padding.utils';
 import { REFUND_PRICE, WEEK_PRICE } from '@/utils/constants';
 import { Box, Flex, Heading, Span, Stack, Text } from '@chakra-ui/react';
+import { useTranslations } from 'next-intl';
 import { LuCircleCheck, LuCirclePause } from 'react-icons/lu';
 
 const PauseTryItem = ({
@@ -29,66 +30,52 @@ const PauseTryItem = ({
 const fontSize = 'md';
 
 export const PauseTry = () => {
+    const pauseT = useTranslations('pauseTry.pause');
+    const tryT = useTranslations('pauseTry.try');
+
     return (
         <Box w="full" px={[2, 0]}>
             <Flex flexDirection={['column', 'column', 'row']} gap={4}>
-                <PauseTryItem title="Pause anytime" icon={<LuCirclePause size={40} color="primary" />}>
+                <PauseTryItem title={pauseT('title')} icon={<LuCirclePause size={40} color="primary" />}>
                     <Stack pt={4}>
-                        <Text fontSize={fontSize}>
-                            When there’s no work left to be done on your projects, just pause your subscription.
-                            Resuming is easy, and your plan picks up right where you left off, ensuring no lost progress
-                            or continuity gaps.
-                        </Text>
-                        <Text fontSize={fontSize}>
-                            This flexibility is essential for managing your budget effectively, especially during
-                            periods of downtime.
-                        </Text>
-                        <Text fontSize={fontSize}>Benefits include:</Text>
+                        <Text fontSize={fontSize}>{pauseT('text1')}</Text>
+                        <Text fontSize={fontSize}>{pauseT('text2')}</Text>
+                        <Text fontSize={fontSize}>{pauseT('benefits')}</Text>
                         <Stack>
                             <Text fontSize={fontSize}>
-                                <Span fontWeight="bold">No Commitment</Span>: Easily pause whenever necessary without
-                                financial penalties.
+                                <Span fontWeight="bold">{pauseT('noCommitment.title')}</Span>:{' '}
+                                {pauseT('noCommitment.description')}
                             </Text>
                             <Text fontSize={fontSize}>
-                                <Span fontWeight="bold">Stay on Track</Span>: Return to ongoing work without losing
-                                progress.
+                                <Span fontWeight="bold">{pauseT('stayOnTrack.title')}</Span>:{' '}
+                                {pauseT('stayOnTrack.description')}
                             </Text>
                             <Text fontSize={fontSize}>
-                                <Span fontWeight="bold">Focused Management</Span>: Use your time and resources
-                                efficiently while still having access to quality React maintenance when you need it.
+                                <Span fontWeight="bold">{pauseT('focusedManagement.title')}</Span>:{' '}
+                                {pauseT('focusedManagement.description')}
                             </Text>
                         </Stack>
                     </Stack>
                 </PauseTryItem>
-                <PauseTryItem title="Try it for a week" icon={<LuCircleCheck size={40} color="primary" />}>
+                <PauseTryItem title={tryT('title')} icon={<LuCircleCheck size={40} color="primary" />}>
                     <Stack pt={4}>
-                        <Text fontSize={fontSize}>
-                            For €{WEEK_PRICE}, experience the value of senior-level React maintenance for the first
-                            week.
-                        </Text>
-                        <Text fontSize={fontSize}>In one week, you could either:</Text>
+                        <Text fontSize={fontSize}>{tryT('text1', { weekPrice: WEEK_PRICE })}</Text>
+                        <Text fontSize={fontSize}>{tryT('text2')}</Text>
                         <Stack>
                             <Text fontSize={fontSize}>
-                                <Span fontWeight="bold">Fix</Span> ~8 bugs, from minor UI issues to moderate
-                                functionality fixes.
+                                <Span fontWeight="bold">{tryT('fix.title')}</Span> {tryT('fix.description')}
                             </Text>
                             <Text fontSize={fontSize}>
-                                <Span fontWeight="bold">Implement</Span> ~2 features, like a custom dashboard component
-                                or an interactive form.
+                                <Span fontWeight="bold">{tryT('implement.title')}</Span> {tryT('implement.description')}
                             </Text>
                             <Text fontSize={fontSize}>
-                                <Span fontWeight="bold">Update</Span> all libraries to the latest versions and enhance
-                                app performance for smoother functionality.
+                                <Span fontWeight="bold">{tryT('update.title')}</Span> {tryT('update.description')}
                             </Text>
                             <Text fontSize={fontSize}>
-                                <Span fontWeight="bold">Set up</Span> automated testing, laying the groundwork for
-                                continuous integration and better long-term reliability.
+                                <Span fontWeight="bold">{tryT('setUp.title')}</Span> {tryT('setUp.description')}
                             </Text>
                         </Stack>
-                        <Text fontSize={fontSize}>
-                            If you're not satisfied, you'll be refunded the remaining €{REFUND_PRICE} of your
-                            subscription - no strings attached!
-                        </Text>
+                        <Text fontSize={fontSize}>{tryT('refundText', { refundPrice: REFUND_PRICE })}</Text>
                     </Stack>
                 </PauseTryItem>
             </Flex>
diff --git a/app/[locale]/components/PriceItem.tsx b/app/[locale]/components/PriceItem.tsx
index e892a47..769fee3 100644
--- a/app/[locale]/components/PriceItem.tsx
+++ b/app/[locale]/components/PriceItem.tsx
@@ -2,10 +2,13 @@ import { mainHeadingSize, mainRound } from '@/components/theme/padding.utils';
 import { shadowSharp } from '@/components/theme/theme.utils';
 import { MAIN_PRICE, PRODUCT_LINK } from '@/utils/constants';
 import { Box, Flex, Heading, List, Text, VStack } from '@chakra-ui/react';
+import { useTranslations } from 'next-intl';
 import NextLink from 'next/link';
 import { PriceItemButton } from './PriceItemButton';
 
 export function PriceItem() {
+    const t = useTranslations('priceItem');
+
     return (
         <Flex
             flexDirection="column"
@@ -24,7 +27,7 @@ export function PriceItem() {
             position="relative"
         >
             <Heading fontSize="3xl" fontWeight="bold">
-                Monthly Club
+                {t('title')}
             </Heading>
             <Box>
                 <Flex justify="center" align="baseline">
@@ -32,25 +35,18 @@ export function PriceItem() {
                         €{MAIN_PRICE}
                     </Heading>
                     <Text fontSize="md" w="0" whiteSpace="nowrap">
-                        / month
+                        {t('perMonth')}
                     </Text>
                 </Flex>
             </Box>
             <Box pb={4} alignSelf="center">
                 <Text fontSize="lg" fontWeight="light" maxW="300px">
-                    React development & maintenance by a senior developer
+                    {t('subtitle')}
                 </Text>
             </Box>
             <VStack gap={3} align="start">
                 <List.Root gap={4} variant="plain" align="center">
-                    {[
-                        'One task handled at a time for complete focus',
-                        'New tasks begin within ~48 hours of completion',
-                        'Unlimited projects managed under one unified backlog',
-                        'Direct communication with the developer working on your tasks',
-                        'Flexible subscription to fit your needs - pause or cancel anytime',
-                        'Full transparency, with tasks tracked in your preferred system (Jira, Trello, etc)'
-                    ].map((feature, index) => (
+                    {t.raw('features').map((feature: string, index: number) => (
                         <List.Item key={index} fontWeight={'semibold'}>
                             <List.Indicator asChild>
                                 <Flex
diff --git a/app/[locale]/components/PriceItemButton.tsx b/app/[locale]/components/PriceItemButton.tsx
index de24bd3..0a530f2 100644
--- a/app/[locale]/components/PriceItemButton.tsx
+++ b/app/[locale]/components/PriceItemButton.tsx
@@ -2,6 +2,7 @@
 import { Button } from '@/components/ui/button';
 import { Box, BoxProps } from '@chakra-ui/react';
 import { keyframes } from '@emotion/react';
+import { useTranslations } from 'next-intl';
 
 const pulse = keyframes`
   0%  { transform: scaleX(1) scaleY(1); opacity: 0.3; }
@@ -29,10 +30,12 @@ const AnimatedBox = (props: BoxProps) => {
 };
 
 export function PriceItemButton() {
+    const t = useTranslations('priceItem');
+
     return (
         <Box display="inline-block" position="relative" mt={4}>
             <Button colorPalette="blue" size="lg" zIndex={10}>
-                Join today
+                {t('button')}
             </Button>
             <AnimatedBox animationDelay="0s" />
             <AnimatedBox animationDelay="0.5s" />
diff --git a/app/[locale]/components/Testimonials.tsx b/app/[locale]/components/Testimonials.tsx
index 5086795..c57fca8 100644
--- a/app/[locale]/components/Testimonials.tsx
+++ b/app/[locale]/components/Testimonials.tsx
@@ -1,5 +1,6 @@
 import { mainRound } from '@/components/theme/padding.utils';
 import { Avatar, Box, Flex, Heading, Text } from '@chakra-ui/react';
+import { useTranslations } from 'next-intl';
 import { Carousel } from './Carousel';
 
 const TestimonialItem = ({
@@ -38,49 +39,12 @@ const TestimonialItem = ({
 };
 
 export const Testimonials = () => {
-    const testimonials = [
-        {
-            title: 'Ella Martinez, Activizor',
-            avatar: '/testimonials/activizor.jpg',
-            content:
-                'Staying on top of updates for our tools was always a headache for our small team. Since we started working with Trimatech, things have changed! Our workflow flows much better, and the performance improvements made a big difference for all of us.'
-        },
-        {
-            title: 'James Wilson, MedCore Systems',
-            avatar: '/testimonials/medcore.jpg',
-            content:
-                "Our booking system was an ongoing issue, and hiring a dev wasn't in the budget. Partnering with Trimatech has really stabilized everything - fewer complaints from users and much less stress on our end. It's been a fantastic solution for us!"
-        },
-        {
-            title: 'Sophie Taylor, UrbanTrack',
-            avatar: '/testimonials/urbantrack.jpg',
-            content:
-                'Our logistics app is super complex, but since engaging with Trimatech, issues are getting fixed much quicker. They even offer suggestions that help us improve our system. It feels great to be proactive instead of always reacting to problems!'
-        },
-        {
-            title: 'Daniel Brown, RentEase Solutions',
-            avatar: '/testimonials/rentease.png',
-            content:
-                'We struggled with bugs and updates taking forever. Working with Trimatech has completely turned that around. Everything gets resolved promptly; finally, we can focus on growing our business rather than dealing with glitches!'
-        },
-        {
-            title: 'Clara Müller, GlobalLink Commerce',
-            avatar: '/testimonials/globallink.jpg',
-            content:
-                "For over a year, Trimatech has been managing our eCommerce platform, and I can't express how comforting that has been. Their expertise means that any bumps are handled swiftly, and our operations run so much smoother now!"
-        },
-        {
-            title: 'Ryan Harris, Control NQP',
-            avatar: '/testimonials/control.jpg',
-            content:
-                'After we launched our React desktop app, we realized we needed help keeping it in shape. Maigo has made all the difference - updates, fixes, performance tweaks - all taken care of! I can actually focus on improving the user experience instead of worrying!'
-        }
-    ];
+    const testimonials = useTranslations('testimonials');
 
     return (
         <Box w="full" px={[2, 0]}>
             <Carousel>
-                {testimonials.map((testimonial, index) => (
+                {testimonials.raw('items').map((testimonial: any, index: number) => (
                     <TestimonialItem key={index} title={testimonial.title} imageSrc={testimonial.avatar}>
                         {testimonial.content}
                     </TestimonialItem>
diff --git a/messages/en/page.json b/messages/en/page.json
index 84149cb..94961af 100644
--- a/messages/en/page.json
+++ b/messages/en/page.json
@@ -69,6 +69,198 @@
             }
         }
     },
+    "priceItem": {
+        "title": "Monthly Club",
+        "perMonth": "/ month",
+        "subtitle": "React development & maintenance by a senior developer",
+        "features": [
+            "One task handled at a time for complete focus",
+            "New tasks begin within ~48 hours of completion",
+            "Unlimited projects managed under one unified backlog",
+            "Direct communication with the developer working on your tasks",
+            "Flexible subscription to fit your needs - pause or cancel anytime",
+            "Full transparency, with tasks tracked in your preferred system (Jira, Trello, etc)"
+        ],
+        "button": "Join today"
+    },
+    "pauseTry": {
+        "pause": {
+            "title": "Pause anytime",
+            "text1": "When there's no work left to be done on your projects, just pause your subscription. Resuming is easy, and your plan picks up right where you left off, ensuring no lost progress or continuity gaps.",
+            "text2": "This flexibility is essential for managing your budget effectively, especially during periods of downtime.",
+            "benefits": "Benefits include:",
+            "noCommitment": {
+                "title": "No Commitment",
+                "description": "Easily pause whenever necessary without financial penalties."
+            },
+            "stayOnTrack": {
+                "title": "Stay on Track",
+                "description": "Return to ongoing work without losing progress."
+            },
+            "focusedManagement": {
+                "title": "Focused Management",
+                "description": "Use your time and resources efficiently while still having access to quality React maintenance when you need it."
+            }
+        },
+        "try": {
+            "title": "Try it for a week",
+            "text1": "For €{weekPrice}, experience the value of senior-level React maintenance for the first week.",
+            "text2": "In one week, you could either:",
+            "fix": {
+                "title": "Fix",
+                "description": "~8 bugs, from minor UI issues to moderate functionality fixes."
+            },
+            "implement": {
+                "title": "Implement",
+                "description": "~2 features, like a custom dashboard component or an interactive form."
+            },
+            "update": {
+                "title": "Update",
+                "description": "all libraries to the latest versions and enhance app performance for smoother functionality."
+            },
+            "setUp": {
+                "title": "Set up",
+                "description": "automated testing, laying the groundwork for continuous integration and better long-term reliability."
+            },
+            "refundText": "If you're not satisfied, you'll be refunded the remaining €{refundPrice} of your subscription - no strings attached!"
+        }
+    },
+    "testimonials": {
+        "items": [
+            {
+                "title": "Ella Martinez, Activizor",
+                "avatar": "/testimonials/activizor.jpg",
+                "content": "Staying on top of updates for our tools was always a headache for our small team. Since we started working with Trimatech, things have changed! Our workflow flows much better, and the performance improvements made a big difference for all of us."
+            },
+            {
+                "title": "James Wilson, MedCore Systems",
+                "avatar": "/testimonials/medcore.jpg",
+                "content": "Our booking system was an ongoing issue, and hiring a dev wasn't in the budget. Partnering with Trimatech has really stabilized everything - fewer complaints from users and much less stress on our end. It's been a fantastic solution for us!"
+            },
+            {
+                "title": "Sophie Taylor, UrbanTrack",
+                "avatar": "/testimonials/urbantrack.jpg",
+                "content": "Our logistics app is super complex, but since engaging with Trimatech, issues are getting fixed much quicker. They even offer suggestions that help us improve our system. It feels great to be proactive instead of always reacting to problems!"
+            },
+            {
+                "title": "Daniel Brown, RentEase Solutions",
+                "avatar": "/testimonials/rentease.png",
+                "content": "We struggled with bugs and updates taking forever. Working with Trimatech has completely turned that around. Everything gets resolved promptly; finally, we can focus on growing our business rather than dealing with glitches!"
+            },
+            {
+                "title": "Clara Müller, GlobalLink Commerce",
+                "avatar": "/testimonials/globallink.jpg",
+                "content": "For over a year, Trimatech has been managing our eCommerce platform, and I can't express how comforting that has been. Their expertise means that any bumps are handled swiftly, and our operations run so much smoother now!"
+            },
+            {
+                "title": "Ryan Harris, Control NQP",
+                "avatar": "/testimonials/control.jpg",
+                "content": "After we launched our React desktop app, we realized we needed help keeping it in shape. Maigo has made all the difference - updates, fixes, performance tweaks - all taken care of! I can actually focus on improving the user experience instead of worrying!"
+            }
+        ]
+    },
+    "discuss": {
+        "heading": "Let's discuss your project",
+        "description": "Schedule a quick call to discuss your React maintenance needs and see if we're a good fit."
+    },
+    "comparePricing": {
+        "heading": "How does this compare?",
+        "fullTimeEngineer": {
+            "title": "Hiring a full-time engineer",
+            "cost": {
+                "title": "Cost",
+                "text": "~€8,000-€10,000/month (gross, including taxes, benefits, and overhead)."
+            },
+            "commitment": {
+                "title": "Commitment",
+                "text": "160 hours/month, but not all those hours will be productive if the workload is small or inconsistent."
+            },
+            "downsides": {
+                "title": "Downsides",
+                "text": "Recruitment effort, onboarding time, managing idle hours for smaller workloads, and possible challenges with developer turnover."
+            },
+            "withSubscription": "With our subscription:",
+            "subscriptionCost": {
+                "title": "Cost",
+                "text": "~50% savings compared to a full-time senior React developer."
+            },
+            "flexibility": {
+                "title": "Flexibility",
+                "text": "Perfect for projects with small, steady workloads where a full-time employee isn't needed."
+            },
+            "efficiency": {
+                "title": "Efficiency",
+                "text": "Tasks are based on your priorities: ~8-12 significant tasks completed per month. Less wasted time - get results, not idle hours."
+            },
+            "hassleStart": {
+                "title": "Hassle-Free Start",
+                "text": "Begin immediately with no recruitment, onboarding, or admin overhead."
+            },
+            "onDemand": {
+                "title": "On-Demand Results",
+                "text": "Quality-backed deliverables tailored to your project priorities, without delays or inefficiencies."
+            }
+        },
+        "hiringCompany": {
+            "title": "Hiring a development company",
+            "cost": {
+                "title": "Cost",
+                "text": "€100-€150/hour. For 160 hours, this is ~€16,000-€24,000/month. Even smaller workloads (e.g., 50 hours) cost €5,000-€7,500."
+            },
+            "commitment": {
+                "title": "Commitment",
+                "text": "Many companies require minimum monthly contracts or long-term retainers (e.g., 3-6 months), making it difficult to pause during inconsistent workloads. After pausing, they may not have capacity when you need to resume."
+            },
+            "downsides": {
+                "title": "Downsides",
+                "text": "Overestimation padding, possible involvement of junior developers, and slower communication through middle management."
+            },
+            "withSubscription": "With our subscription:",
+            "subscriptionCost": {
+                "title": "Cost",
+                "text": "~25% savings compared to 50 hours with a company, and significantly less for larger workloads."
+            },
+            "flexibility": {
+                "title": "Flexible Commitment",
+                "text": "Pause or cancel anytime based on your workload."
+            },
+            "expertise": {
+                "title": "Direct Expertise",
+                "text": "Work is handled exclusively by a senior React developer - no juniors or inflated estimates."
+            },
+            "communication": {
+                "title": "Streamlined Communication",
+                "text": "Direct collaboration ensures faster feedback and no time wasted on unnecessary middlemen or delays."
+            }
+        },
+        "subscriptionValue": {
+            "title": "Subscription value at a glance",
+            "monthlyOutput": {
+                "title": "Monthly Output",
+                "text": "~8-12 tasks per month (equivalent to 50 hours of senior-level work)."
+            },
+            "costSavings": {
+                "title": "Cost Savings",
+                "text": "Save ~50% compared to hiring a full-time engineer and ~25% compared to outsourcing to a company."
+            },
+            "hassleStart": {
+                "title": "Hassle-Free Start",
+                "text": "Begin without recruitment, onboarding, or management overhead - just quality focused results when you need them."
+            },
+            "flexibility": {
+                "title": "Flexibility & Simplicity",
+                "text": "No long term contracts, commitments, or penalties - pause or cancel anytime. Start immediately with no delays or onboarding required."
+            },
+            "expertise": {
+                "title": "Exclusive Expertise",
+                "text": "Work is completed by a senior React developer who provides dedicated attention to your needs - no juniors, no middle management, and no compromises on quality."
+            },
+            "efficiency": {
+                "title": "Efficiency Through AI and Modern Practices",
+                "text": "Using AI-powered solutions like Cursor.ai and the latest development methodologies, combined with continuous improvements in workflows, results are delivered with a speed and proficiency comparable to small software teams of just a few years ago. This ensures exceptional quality and faster project delivery."
+            }
+        }
+    },
     "faq": {
         "heading": "Frequently Asked Questions",
         "description": "Schedule a quick call to discuss your React maintenance needs and see if we're a good fit.",
diff --git a/messages/et/page.json b/messages/et/page.json
index 84149cb..94961af 100644
--- a/messages/et/page.json
+++ b/messages/et/page.json
@@ -69,6 +69,198 @@
             }
         }
     },
+    "priceItem": {
+        "title": "Monthly Club",
+        "perMonth": "/ month",
+        "subtitle": "React development & maintenance by a senior developer",
+        "features": [
+            "One task handled at a time for complete focus",
+            "New tasks begin within ~48 hours of completion",
+            "Unlimited projects managed under one unified backlog",
+            "Direct communication with the developer working on your tasks",
+            "Flexible subscription to fit your needs - pause or cancel anytime",
+            "Full transparency, with tasks tracked in your preferred system (Jira, Trello, etc)"
+        ],
+        "button": "Join today"
+    },
+    "pauseTry": {
+        "pause": {
+            "title": "Pause anytime",
+            "text1": "When there's no work left to be done on your projects, just pause your subscription. Resuming is easy, and your plan picks up right where you left off, ensuring no lost progress or continuity gaps.",
+            "text2": "This flexibility is essential for managing your budget effectively, especially during periods of downtime.",
+            "benefits": "Benefits include:",
+            "noCommitment": {
+                "title": "No Commitment",
+                "description": "Easily pause whenever necessary without financial penalties."
+            },
+            "stayOnTrack": {
+                "title": "Stay on Track",
+                "description": "Return to ongoing work without losing progress."
+            },
+            "focusedManagement": {
+                "title": "Focused Management",
+                "description": "Use your time and resources efficiently while still having access to quality React maintenance when you need it."
+            }
+        },
+        "try": {
+            "title": "Try it for a week",
+            "text1": "For €{weekPrice}, experience the value of senior-level React maintenance for the first week.",
+            "text2": "In one week, you could either:",
+            "fix": {
+                "title": "Fix",
+                "description": "~8 bugs, from minor UI issues to moderate functionality fixes."
+            },
+            "implement": {
+                "title": "Implement",
+                "description": "~2 features, like a custom dashboard component or an interactive form."
+            },
+            "update": {
+                "title": "Update",
+                "description": "all libraries to the latest versions and enhance app performance for smoother functionality."
+            },
+            "setUp": {
+                "title": "Set up",
+                "description": "automated testing, laying the groundwork for continuous integration and better long-term reliability."
+            },
+            "refundText": "If you're not satisfied, you'll be refunded the remaining €{refundPrice} of your subscription - no strings attached!"
+        }
+    },
+    "testimonials": {
+        "items": [
+            {
+                "title": "Ella Martinez, Activizor",
+                "avatar": "/testimonials/activizor.jpg",
+                "content": "Staying on top of updates for our tools was always a headache for our small team. Since we started working with Trimatech, things have changed! Our workflow flows much better, and the performance improvements made a big difference for all of us."
+            },
+            {
+                "title": "James Wilson, MedCore Systems",
+                "avatar": "/testimonials/medcore.jpg",
+                "content": "Our booking system was an ongoing issue, and hiring a dev wasn't in the budget. Partnering with Trimatech has really stabilized everything - fewer complaints from users and much less stress on our end. It's been a fantastic solution for us!"
+            },
+            {
+                "title": "Sophie Taylor, UrbanTrack",
+                "avatar": "/testimonials/urbantrack.jpg",
+                "content": "Our logistics app is super complex, but since engaging with Trimatech, issues are getting fixed much quicker. They even offer suggestions that help us improve our system. It feels great to be proactive instead of always reacting to problems!"
+            },
+            {
+                "title": "Daniel Brown, RentEase Solutions",
+                "avatar": "/testimonials/rentease.png",
+                "content": "We struggled with bugs and updates taking forever. Working with Trimatech has completely turned that around. Everything gets resolved promptly; finally, we can focus on growing our business rather than dealing with glitches!"
+            },
+            {
+                "title": "Clara Müller, GlobalLink Commerce",
+                "avatar": "/testimonials/globallink.jpg",
+                "content": "For over a year, Trimatech has been managing our eCommerce platform, and I can't express how comforting that has been. Their expertise means that any bumps are handled swiftly, and our operations run so much smoother now!"
+            },
+            {
+                "title": "Ryan Harris, Control NQP",
+                "avatar": "/testimonials/control.jpg",
+                "content": "After we launched our React desktop app, we realized we needed help keeping it in shape. Maigo has made all the difference - updates, fixes, performance tweaks - all taken care of! I can actually focus on improving the user experience instead of worrying!"
+            }
+        ]
+    },
+    "discuss": {
+        "heading": "Let's discuss your project",
+        "description": "Schedule a quick call to discuss your React maintenance needs and see if we're a good fit."
+    },
+    "comparePricing": {
+        "heading": "How does this compare?",
+        "fullTimeEngineer": {
+            "title": "Hiring a full-time engineer",
+            "cost": {
+                "title": "Cost",
+                "text": "~€8,000-€10,000/month (gross, including taxes, benefits, and overhead)."
+            },
+            "commitment": {
+                "title": "Commitment",
+                "text": "160 hours/month, but not all those hours will be productive if the workload is small or inconsistent."
+            },
+            "downsides": {
+                "title": "Downsides",
+                "text": "Recruitment effort, onboarding time, managing idle hours for smaller workloads, and possible challenges with developer turnover."
+            },
+            "withSubscription": "With our subscription:",
+            "subscriptionCost": {
+                "title": "Cost",
+                "text": "~50% savings compared to a full-time senior React developer."
+            },
+            "flexibility": {
+                "title": "Flexibility",
+                "text": "Perfect for projects with small, steady workloads where a full-time employee isn't needed."
+            },
+            "efficiency": {
+                "title": "Efficiency",
+                "text": "Tasks are based on your priorities: ~8-12 significant tasks completed per month. Less wasted time - get results, not idle hours."
+            },
+            "hassleStart": {
+                "title": "Hassle-Free Start",
+                "text": "Begin immediately with no recruitment, onboarding, or admin overhead."
+            },
+            "onDemand": {
+                "title": "On-Demand Results",
+                "text": "Quality-backed deliverables tailored to your project priorities, without delays or inefficiencies."
+            }
+        },
+        "hiringCompany": {
+            "title": "Hiring a development company",
+            "cost": {
+                "title": "Cost",
+                "text": "€100-€150/hour. For 160 hours, this is ~€16,000-€24,000/month. Even smaller workloads (e.g., 50 hours) cost €5,000-€7,500."
+            },
+            "commitment": {
+                "title": "Commitment",
+                "text": "Many companies require minimum monthly contracts or long-term retainers (e.g., 3-6 months), making it difficult to pause during inconsistent workloads. After pausing, they may not have capacity when you need to resume."
+            },
+            "downsides": {
+                "title": "Downsides",
+                "text": "Overestimation padding, possible involvement of junior developers, and slower communication through middle management."
+            },
+            "withSubscription": "With our subscription:",
+            "subscriptionCost": {
+                "title": "Cost",
+                "text": "~25% savings compared to 50 hours with a company, and significantly less for larger workloads."
+            },
+            "flexibility": {
+                "title": "Flexible Commitment",
+                "text": "Pause or cancel anytime based on your workload."
+            },
+            "expertise": {
+                "title": "Direct Expertise",
+                "text": "Work is handled exclusively by a senior React developer - no juniors or inflated estimates."
+            },
+            "communication": {
+                "title": "Streamlined Communication",
+                "text": "Direct collaboration ensures faster feedback and no time wasted on unnecessary middlemen or delays."
+            }
+        },
+        "subscriptionValue": {
+            "title": "Subscription value at a glance",
+            "monthlyOutput": {
+                "title": "Monthly Output",
+                "text": "~8-12 tasks per month (equivalent to 50 hours of senior-level work)."
+            },
+            "costSavings": {
+                "title": "Cost Savings",
+                "text": "Save ~50% compared to hiring a full-time engineer and ~25% compared to outsourcing to a company."
+            },
+            "hassleStart": {
+                "title": "Hassle-Free Start",
+                "text": "Begin without recruitment, onboarding, or management overhead - just quality focused results when you need them."
+            },
+            "flexibility": {
+                "title": "Flexibility & Simplicity",
+                "text": "No long term contracts, commitments, or penalties - pause or cancel anytime. Start immediately with no delays or onboarding required."
+            },
+            "expertise": {
+                "title": "Exclusive Expertise",
+                "text": "Work is completed by a senior React developer who provides dedicated attention to your needs - no juniors, no middle management, and no compromises on quality."
+            },
+            "efficiency": {
+                "title": "Efficiency Through AI and Modern Practices",
+                "text": "Using AI-powered solutions like Cursor.ai and the latest development methodologies, combined with continuous improvements in workflows, results are delivered with a speed and proficiency comparable to small software teams of just a few years ago. This ensures exceptional quality and faster project delivery."
+            }
+        }
+    },
     "faq": {
         "heading": "Frequently Asked Questions",
         "description": "Schedule a quick call to discuss your React maintenance needs and see if we're a good fit.",
diff --git a/utils/constants.ts b/utils/constants.ts
index c06f834..b8a61cd 100644
--- a/utils/constants.ts
+++ b/utils/constants.ts
@@ -18,7 +18,7 @@ export const WEEK_PRICE = '995';
 
 export const REFUND_PRICE = '3,000';
 
-export const EMAIL_TO = 'info@trimatech.ee';
+export const EMAIL_TO = 'info@trimatech.dev';
 
 export const LINKEDIN_LINK = 'https://www.linkedin.com/in/maigo-erit/';
 export const GITHUB_LINK = 'https://github.com/MayGo';

From 0b3354bcce77b2445074e539a3a4870f24da6495 Mon Sep 17 00:00:00 2001
From: Maigo Erit <maigo.erit@gmail.com>
Date: Tue, 4 Mar 2025 23:37:31 +0200
Subject: [PATCH 06/15] Add translations to GridBackground, PriceForOthers, and
 TechScroll components

- Integrate next-intl translations for GridBackground, PriceForOthers, and TechScroll components
- Update page.json translation files for English and Estonian with new translation keys
- Replace hardcoded text with dynamic translations using useTranslations hook
---
 app/[locale]/components/GridBackground.tsx |  5 ++++-
 app/[locale]/components/PriceForOthers.tsx |  9 ++++++---
 app/[locale]/components/TechScroll.tsx     |  5 ++++-
 messages/en/page.json                      | 11 +++++++++++
 messages/et/page.json                      | 11 +++++++++++
 5 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/app/[locale]/components/GridBackground.tsx b/app/[locale]/components/GridBackground.tsx
index 967bce4..28d6dc1 100644
--- a/app/[locale]/components/GridBackground.tsx
+++ b/app/[locale]/components/GridBackground.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { Box, Flex, Heading, Text } from '@chakra-ui/react';
+import { useTranslations } from 'next-intl';
 
 interface GridBackgroundProps {
     title: string;
@@ -9,6 +10,8 @@ interface GridBackgroundProps {
 }
 
 export function GridBackground({ title, description, showAvailability = true }: GridBackgroundProps) {
+    const t = useTranslations('gridBackground');
+
     return (
         <Box
             px="10"
@@ -69,7 +72,7 @@ export function GridBackground({ title, description, showAvailability = true }:
                             animation="pulse 2s infinite"
                             boxShadow="0 0 8px #20bb5a"
                         />
-                        Call Now
+                        {t('callNow')}
                     </Flex>
                 )}
             </Flex>
diff --git a/app/[locale]/components/PriceForOthers.tsx b/app/[locale]/components/PriceForOthers.tsx
index b155e20..8835219 100644
--- a/app/[locale]/components/PriceForOthers.tsx
+++ b/app/[locale]/components/PriceForOthers.tsx
@@ -1,5 +1,6 @@
 import { mainRound } from '@/components/theme/padding.utils';
 import { Box, Heading, IconButton, Text } from '@chakra-ui/react';
+import { useTranslations } from 'next-intl';
 import NextLink from 'next/link';
 import { MdOutlineKeyboardDoubleArrowDown } from 'react-icons/md';
 
@@ -14,23 +15,25 @@ export const PriceForOthers = ({
     subtext: string;
     href: string;
 }) => {
+    const t = useTranslations('priceForOthers');
+
     return (
         <Box borderWidth="1px" borderRadius={mainRound} borderColor="borderColor" p={8} w="full" position="relative">
             <Text fontSize="larger" fontWeight="semibold" mb={2}>
                 {title}
             </Text>
             <Text fontSize="lg" fontWeight="light" mb={2}>
-                up to{' '}
+                {t('upTo')}{' '}
                 <Heading as="span" size={'3xl'} fontWeight="bold" color="red.500">
                     €{price}
                 </Heading>{' '}
-                / month
+                {t('perMonth')}
             </Text>
             <Text fontSize="lg" fontWeight="light">
                 {subtext}
             </Text>
             <NextLink href={href} passHref legacyBehavior>
-                <IconButton as="a" aria-label="Go to target section" position="absolute" bottom="4" right="4">
+                <IconButton as="a" aria-label={t('goToSection')} position="absolute" bottom="4" right="4">
                     <MdOutlineKeyboardDoubleArrowDown />
                 </IconButton>
             </NextLink>
diff --git a/app/[locale]/components/TechScroll.tsx b/app/[locale]/components/TechScroll.tsx
index 1e24654..08dcb4f 100644
--- a/app/[locale]/components/TechScroll.tsx
+++ b/app/[locale]/components/TechScroll.tsx
@@ -1,12 +1,15 @@
 import { mainHeadingSize } from '@/components/theme/padding.utils';
 import { Box, Heading } from '@chakra-ui/react';
+import { useTranslations } from 'next-intl';
 import TechScrollingLogos from './TechScrollingLogos';
 
 export const TechScroll = () => {
+    const t = useTranslations('techScroll');
+
     return (
         <Box>
             <Box pb={4} pl={[4, 0]}>
-                <Heading size={mainHeadingSize}>Technology Stack</Heading>
+                <Heading size={mainHeadingSize}>{t('heading')}</Heading>
             </Box>
 
             <TechScrollingLogos />
diff --git a/messages/en/page.json b/messages/en/page.json
index 94961af..3d1fbcd 100644
--- a/messages/en/page.json
+++ b/messages/en/page.json
@@ -261,6 +261,17 @@
             }
         }
     },
+    "gridBackground": {
+        "callNow": "Call Now"
+    },
+    "priceForOthers": {
+        "upTo": "up to",
+        "perMonth": "/ month",
+        "goToSection": "Go to target section"
+    },
+    "techScroll": {
+        "heading": "Technology Stack"
+    },
     "faq": {
         "heading": "Frequently Asked Questions",
         "description": "Schedule a quick call to discuss your React maintenance needs and see if we're a good fit.",
diff --git a/messages/et/page.json b/messages/et/page.json
index 94961af..3d1fbcd 100644
--- a/messages/et/page.json
+++ b/messages/et/page.json
@@ -261,6 +261,17 @@
             }
         }
     },
+    "gridBackground": {
+        "callNow": "Call Now"
+    },
+    "priceForOthers": {
+        "upTo": "up to",
+        "perMonth": "/ month",
+        "goToSection": "Go to target section"
+    },
+    "techScroll": {
+        "heading": "Technology Stack"
+    },
     "faq": {
         "heading": "Frequently Asked Questions",
         "description": "Schedule a quick call to discuss your React maintenance needs and see if we're a good fit.",

From a833bead4aba59b59ee678552d5c796f44961bb8 Mon Sep 17 00:00:00 2001
From: Maigo Erit <maigo.erit@gmail.com>
Date: Tue, 4 Mar 2025 23:45:20 +0200
Subject: [PATCH 07/15] Update Estonian translations for page.json

- Complete translation of entire page.json file to Estonian
- Translate all sections including hero, benefits, pricing, testimonials, and FAQ
- Maintain consistent translation style and tone throughout the document
---
 messages/et/page.json | 296 +++++++++++++++++++++---------------------
 1 file changed, 148 insertions(+), 148 deletions(-)

diff --git a/messages/et/page.json b/messages/et/page.json
index 3d1fbcd..0e6ff8c 100644
--- a/messages/et/page.json
+++ b/messages/et/page.json
@@ -1,128 +1,128 @@
 {
     "page": {
-        "title": "Users",
+        "title": "Kasutajad",
         "form": {
-            "name": "Name",
-            "email": "Email"
+            "name": "Nimi",
+            "email": "E-post"
         }
     },
     "navLinks": {
-        "signIn": "Sign In",
-        "bookCall": "Book a Call",
-        "seePricing": "See pricing"
+        "signIn": "Logi sisse",
+        "bookCall": "Broneeri kõne",
+        "seePricing": "Vaata hindasid"
     },
     "footer": {
-        "location": "Headquartered in Tallinn, Estonia (GMT+2)",
-        "privacyPolicy": "Privacy Policy",
-        "termsOfService": "Terms of service"
+        "location": "Peakontor Tallinnas, Eestis (GMT+2)",
+        "privacyPolicy": "Privaatsuspoliitika",
+        "termsOfService": "Kasutustingimused"
     },
     "menuDialog": {
-        "language": "Language"
+        "language": "Keel"
     },
     "hero": {
-        "heading": "Expert React Maintenance & Development",
-        "description": "Keep your React applications running smoothly with dedicated senior level support. No mid-level teams, no overhead - just direct access to expert maintenance when you need it.",
-        "euBased": "EU-Based",
-        "mission": "Mission: Make all React apps fast, modern, and user-friendly"
+        "heading": "Eksperttasemel Reacti hooldus ja arendus",
+        "description": "Hoia oma Reacti rakendused sujuvalt töös pühendunud kõrgtasemel toega. Ei mingit kesktaseme meeskondi ega lisakulusid - ainult otsene juurdepääs eksperthooldusele, kui seda vajad.",
+        "euBased": "EL-põhine",
+        "mission": "Missioon: Muuta kõik Reacti rakendused kiireks, kaasaegseks ja kasutajasõbralikuks"
     },
     "benefits": {
-        "heading": "Benefits",
+        "heading": "Eelised",
         "items": {
             "maintenance": {
-                "title": "Dedicated Maintenance for Your Existing Projects",
-                "description": "No need for a full team - one senior developer focuses on ensuring your React application remains performant and up-to-date."
+                "title": "Pühendunud hooldus sinu olemasolevatele projektidele",
+                "description": "Pole vaja täismeeskonda - üks kogenud arendaja keskendub sinu Reacti rakenduse jõudluse ja ajakohasuse tagamisele."
             },
             "bugFixes": {
-                "title": "Quick Turnaround for Bug Fixes & Updates",
-                "description": "Rapid response for bug fixes and feature requests, starting within 48 hours. Keep your application running optimally!"
+                "title": "Kiire reageerimine vigade parandamiseks ja uuendusteks",
+                "description": "Kiire reageerimine vigade parandamiseks ja funktsioonide taotlustele, alustades 48 tunni jooksul. Hoia oma rakendus optimaalselt töös!"
             },
             "upgrade": {
-                "title": "Upgrade and Enhance Your Application",
-                "description": "Seamlessly add new features and upgrade libraries to leverage the latest React capabilities without disrupting your workflow."
+                "title": "Uuenda ja täiusta oma rakendust",
+                "description": "Lisa sujuvalt uusi funktsioone ja uuenda teeke, et kasutada uusimaid Reacti võimalusi ilma töövoolu häirimata."
             },
             "communication": {
-                "title": "Streamlined Ticket-Based Communication",
-                "description": "All updates and requests are tracked through our ticketing system, ensuring transparency and organization for every task."
+                "title": "Optimeeritud piletipõhine suhtlus",
+                "description": "Kõiki uuendusi ja taotlusi jälgitakse meie piletisüsteemi kaudu, tagades läbipaistvuse ja korrastatuse iga ülesande jaoks."
             }
         }
     },
     "introCallCard": {
         "ownerName": "Maigo Erit",
-        "ownerTitle": "Owner & React Expert",
-        "bookIntroCall": "Book a 15 min intro call",
-        "bookCallButton": "Book a call",
-        "preferEmail": "Prefer to email?"
+        "ownerTitle": "Omanik ja Reacti ekspert",
+        "bookIntroCall": "Broneeri 15-minutiline tutvumiskõne",
+        "bookCallButton": "Broneeri kõne",
+        "preferEmail": "Eelistad e-posti?"
     },
     "pricing": {
-        "heading": "Simple & transparent pricing",
-        "description": "One comprehensive plan for all your React maintenance needs.",
+        "heading": "Lihtne ja läbipaistev hinnastamine",
+        "description": "Üks põhjalik plaan kõigi sinu Reacti hooldusvajadustele.",
         "options": {
             "fullTime": {
-                "title": "Hiring a full time senior developer",
+                "title": "Täiskohaga kogenud arendaja palkamine",
                 "price": "10,000",
-                "subtext": "with the overhead"
+                "subtext": "koos lisakuludega"
             },
             "company": {
-                "title": "Hiring a good development company",
+                "title": "Hea arendusettevõtte palkamine",
                 "price": "16,000",
-                "subtext": "or €100 / hour"
+                "subtext": "või €100 / tund"
             }
         }
     },
     "priceItem": {
-        "title": "Monthly Club",
-        "perMonth": "/ month",
-        "subtitle": "React development & maintenance by a senior developer",
+        "title": "Kuuklubi",
+        "perMonth": "/ kuu",
+        "subtitle": "Reacti arendus ja hooldus kogenud arendaja poolt",
         "features": [
-            "One task handled at a time for complete focus",
-            "New tasks begin within ~48 hours of completion",
-            "Unlimited projects managed under one unified backlog",
-            "Direct communication with the developer working on your tasks",
-            "Flexible subscription to fit your needs - pause or cancel anytime",
-            "Full transparency, with tasks tracked in your preferred system (Jira, Trello, etc)"
+            "Üks ülesanne korraga täieliku keskendumise tagamiseks",
+            "Uued ülesanded algavad ~48 tunni jooksul pärast eelmise lõpetamist",
+            "Piiramatu arv projekte hallatakse ühe ühtse tööjärjekorra all",
+            "Otsene suhtlus arendajaga, kes töötab sinu ülesannetega",
+            "Paindlik tellimus vastavalt sinu vajadustele - peata või tühista igal ajal",
+            "Täielik läbipaistvus, ülesandeid jälgitakse sinu eelistatud süsteemis (Jira, Trello jne)"
         ],
-        "button": "Join today"
+        "button": "Liitu täna"
     },
     "pauseTry": {
         "pause": {
-            "title": "Pause anytime",
-            "text1": "When there's no work left to be done on your projects, just pause your subscription. Resuming is easy, and your plan picks up right where you left off, ensuring no lost progress or continuity gaps.",
-            "text2": "This flexibility is essential for managing your budget effectively, especially during periods of downtime.",
-            "benefits": "Benefits include:",
+            "title": "Peata igal ajal",
+            "text1": "Kui sinu projektides pole enam tööd teha, peata lihtsalt oma tellimus. Jätkamine on lihtne ja sinu plaan jätkub täpselt sealt, kus pooleli jäi, tagades, et ei lähe kaotsi edasiminek ega tekiks järjepidevuse lünki.",
+            "text2": "See paindlikkus on oluline eelarve tõhusaks haldamiseks, eriti seisakuperioodidel.",
+            "benefits": "Eelised on:",
             "noCommitment": {
-                "title": "No Commitment",
-                "description": "Easily pause whenever necessary without financial penalties."
+                "title": "Kohustuste puudumine",
+                "description": "Peata hõlpsasti, kui vaja, ilma rahaliste karistusteta."
             },
             "stayOnTrack": {
-                "title": "Stay on Track",
-                "description": "Return to ongoing work without losing progress."
+                "title": "Püsi rajal",
+                "description": "Naase käimasoleva töö juurde ilma edasiminekut kaotamata."
             },
             "focusedManagement": {
-                "title": "Focused Management",
-                "description": "Use your time and resources efficiently while still having access to quality React maintenance when you need it."
+                "title": "Fokuseeritud juhtimine",
+                "description": "Kasuta oma aega ja ressursse tõhusalt, omades siiski juurdepääsu kvaliteetsele Reacti hooldusele, kui seda vajad."
             }
         },
         "try": {
-            "title": "Try it for a week",
-            "text1": "For €{weekPrice}, experience the value of senior-level React maintenance for the first week.",
-            "text2": "In one week, you could either:",
+            "title": "Proovi nädal aega",
+            "text1": "€{weekPrice} eest koge kõrgtasemel Reacti hoolduse väärtust esimese nädala jooksul.",
+            "text2": "Ühe nädala jooksul võiksid kas:",
             "fix": {
-                "title": "Fix",
-                "description": "~8 bugs, from minor UI issues to moderate functionality fixes."
+                "title": "Parandada",
+                "description": "~8 viga, alates väikestest kasutajaliidese probleemidest kuni mõõdukate funktsionaalsuse parandusteni."
             },
             "implement": {
-                "title": "Implement",
-                "description": "~2 features, like a custom dashboard component or an interactive form."
+                "title": "Rakendada",
+                "description": "~2 funktsiooni, nagu kohandatud juhtpaneeli komponent või interaktiivne vorm."
             },
             "update": {
-                "title": "Update",
-                "description": "all libraries to the latest versions and enhance app performance for smoother functionality."
+                "title": "Uuendada",
+                "description": "kõik teegid uusimatele versioonidele ja parandada rakenduse jõudlust sujuvamaks funktsionaalsuseks."
             },
             "setUp": {
-                "title": "Set up",
-                "description": "automated testing, laying the groundwork for continuous integration and better long-term reliability."
+                "title": "Seadistada",
+                "description": "automatiseeritud testimine, luues aluse pidevaks integratsiooniks ja paremaks pikaajaliseks usaldusväärsuseks."
             },
-            "refundText": "If you're not satisfied, you'll be refunded the remaining €{refundPrice} of your subscription - no strings attached!"
+            "refundText": "Kui sa pole rahul, tagastatakse sulle ülejäänud €{refundPrice} sinu tellimusest - ilma igasuguste tingimusteta!"
         }
     },
     "testimonials": {
@@ -130,191 +130,191 @@
             {
                 "title": "Ella Martinez, Activizor",
                 "avatar": "/testimonials/activizor.jpg",
-                "content": "Staying on top of updates for our tools was always a headache for our small team. Since we started working with Trimatech, things have changed! Our workflow flows much better, and the performance improvements made a big difference for all of us."
+                "content": "Meie väikese meeskonna jaoks oli uuenduste haldamine alati peavalu. Pärast Trimatechiga koostöö alustamist on asjad muutunud! Meie töövoog on palju sujuvam ja jõudluse parandused on teinud meile kõigile suure erinevuse."
             },
             {
                 "title": "James Wilson, MedCore Systems",
                 "avatar": "/testimonials/medcore.jpg",
-                "content": "Our booking system was an ongoing issue, and hiring a dev wasn't in the budget. Partnering with Trimatech has really stabilized everything - fewer complaints from users and much less stress on our end. It's been a fantastic solution for us!"
+                "content": "Meie broneerimissüsteem oli pidev probleem ja arendaja palkamine polnud eelarves. Koostöö Trimatechiga on kõike tõeliselt stabiliseerinud - vähem kaebusi kasutajatelt ja palju vähem stressi meie jaoks. See on olnud meie jaoks suurepärane lahendus!"
             },
             {
                 "title": "Sophie Taylor, UrbanTrack",
                 "avatar": "/testimonials/urbantrack.jpg",
-                "content": "Our logistics app is super complex, but since engaging with Trimatech, issues are getting fixed much quicker. They even offer suggestions that help us improve our system. It feels great to be proactive instead of always reacting to problems!"
+                "content": "Meie logistikarakendus on äärmiselt keeruline, kuid pärast Trimatechiga koostöö alustamist lahendatakse probleeme palju kiiremini. Nad pakuvad isegi soovitusi, mis aitavad meil süsteemi parandada. On suurepärane olla proaktiivne, mitte alati probleemidele reageerida!"
             },
             {
                 "title": "Daniel Brown, RentEase Solutions",
                 "avatar": "/testimonials/rentease.png",
-                "content": "We struggled with bugs and updates taking forever. Working with Trimatech has completely turned that around. Everything gets resolved promptly; finally, we can focus on growing our business rather than dealing with glitches!"
+                "content": "Meil oli probleeme vigade ja uuendustega, mis võtsid igavesti aega. Trimatechiga koostöö on selle täielikult muutnud. Kõik lahendatakse kiiresti; lõpuks saame keskenduda oma äri kasvatamisele, mitte tõrgetega tegelemisele!"
             },
             {
                 "title": "Clara Müller, GlobalLink Commerce",
                 "avatar": "/testimonials/globallink.jpg",
-                "content": "For over a year, Trimatech has been managing our eCommerce platform, and I can't express how comforting that has been. Their expertise means that any bumps are handled swiftly, and our operations run so much smoother now!"
+                "content": "Juba üle aasta on Trimatech hallanud meie e-kaubanduse platvormi ja ma ei suuda väljendada, kui lohutav see on olnud. Nende oskusteave tähendab, et kõik takistused lahendatakse kiiresti ja meie tegevus toimib nüüd palju sujuvamalt!"
             },
             {
                 "title": "Ryan Harris, Control NQP",
                 "avatar": "/testimonials/control.jpg",
-                "content": "After we launched our React desktop app, we realized we needed help keeping it in shape. Maigo has made all the difference - updates, fixes, performance tweaks - all taken care of! I can actually focus on improving the user experience instead of worrying!"
+                "content": "Pärast Reacti töölauarakenduse käivitamist mõistsime, et vajame abi selle korras hoidmiseks. Maigo on teinud suure erinevuse - uuendused, parandused, jõudluse täiustused - kõik on hoolitsetud! Ma saan tegelikult keskenduda kasutajakogemuse parandamisele, mitte muretsemisele!"
             }
         ]
     },
     "discuss": {
-        "heading": "Let's discuss your project",
-        "description": "Schedule a quick call to discuss your React maintenance needs and see if we're a good fit."
+        "heading": "Arutame sinu projekti",
+        "description": "Planeeri kiire kõne, et arutada oma Reacti hooldusvajadusi ja näha, kas sobime hästi kokku."
     },
     "comparePricing": {
-        "heading": "How does this compare?",
+        "heading": "Kuidas see võrdlub?",
         "fullTimeEngineer": {
-            "title": "Hiring a full-time engineer",
+            "title": "Täiskohaga inseneri palkamine",
             "cost": {
-                "title": "Cost",
-                "text": "~€8,000-€10,000/month (gross, including taxes, benefits, and overhead)."
+                "title": "Kulu",
+                "text": "~€8,000-€10,000/kuus (bruto, koos maksude, hüvitiste ja lisakuludega)."
             },
             "commitment": {
-                "title": "Commitment",
-                "text": "160 hours/month, but not all those hours will be productive if the workload is small or inconsistent."
+                "title": "Kohustus",
+                "text": "160 tundi/kuus, kuid mitte kõik need tunnid pole produktiivsed, kui töömaht on väike või ebaühtlane."
             },
             "downsides": {
-                "title": "Downsides",
-                "text": "Recruitment effort, onboarding time, managing idle hours for smaller workloads, and possible challenges with developer turnover."
+                "title": "Puudused",
+                "text": "Värbamispingutus, sisseelamisaeg, jõudeaja haldamine väiksemate töökoormuste puhul ja võimalikud probleemid arendaja lahkumisega."
             },
-            "withSubscription": "With our subscription:",
+            "withSubscription": "Meie tellimusega:",
             "subscriptionCost": {
-                "title": "Cost",
-                "text": "~50% savings compared to a full-time senior React developer."
+                "title": "Kulu",
+                "text": "~50% säästu võrreldes täiskohaga kogenud Reacti arendajaga."
             },
             "flexibility": {
-                "title": "Flexibility",
-                "text": "Perfect for projects with small, steady workloads where a full-time employee isn't needed."
+                "title": "Paindlikkus",
+                "text": "Ideaalne projektidele, millel on väike, stabiilne töökoormus, kus täiskohaga töötajat pole vaja."
             },
             "efficiency": {
-                "title": "Efficiency",
-                "text": "Tasks are based on your priorities: ~8-12 significant tasks completed per month. Less wasted time - get results, not idle hours."
+                "title": "Tõhusus",
+                "text": "Ülesanded põhinevad sinu prioriteetidel: ~8-12 olulist ülesannet täidetakse kuus. Vähem raisatud aega - saad tulemusi, mitte jõudeaega."
             },
             "hassleStart": {
-                "title": "Hassle-Free Start",
-                "text": "Begin immediately with no recruitment, onboarding, or admin overhead."
+                "title": "Muretu algus",
+                "text": "Alusta kohe ilma värbamise, sisseelamiseta või administratiivse lisakoormuseta."
             },
             "onDemand": {
-                "title": "On-Demand Results",
-                "text": "Quality-backed deliverables tailored to your project priorities, without delays or inefficiencies."
+                "title": "Nõudmisel tulemused",
+                "text": "Kvaliteetsed tulemused, mis on kohandatud sinu projekti prioriteetidele, ilma viivituste või ebaefektiivsuseta."
             }
         },
         "hiringCompany": {
-            "title": "Hiring a development company",
+            "title": "Arendusettevõtte palkamine",
             "cost": {
-                "title": "Cost",
-                "text": "€100-€150/hour. For 160 hours, this is ~€16,000-€24,000/month. Even smaller workloads (e.g., 50 hours) cost €5,000-€7,500."
+                "title": "Kulu",
+                "text": "€100-€150/tund. 160 tunni puhul on see ~€16,000-€24,000/kuus. Isegi väiksemad töökoormused (nt 50 tundi) maksavad €5,000-€7,500."
             },
             "commitment": {
-                "title": "Commitment",
-                "text": "Many companies require minimum monthly contracts or long-term retainers (e.g., 3-6 months), making it difficult to pause during inconsistent workloads. After pausing, they may not have capacity when you need to resume."
+                "title": "Kohustus",
+                "text": "Paljud ettevõtted nõuavad minimaalseid kuulepinguid või pikaajalisi ettemakseid (nt 3-6 kuud), mis teeb pausi tegemise ebaühtlase töökoormuse ajal raskeks. Pärast pausi ei pruugi neil olla võimsust, kui vajad jätkamist."
             },
             "downsides": {
-                "title": "Downsides",
-                "text": "Overestimation padding, possible involvement of junior developers, and slower communication through middle management."
+                "title": "Puudused",
+                "text": "Ülehindamise polsterdamine, võimalik noorarendajate kaasamine ja aeglasem suhtlus keskastme juhtimise kaudu."
             },
-            "withSubscription": "With our subscription:",
+            "withSubscription": "Meie tellimusega:",
             "subscriptionCost": {
-                "title": "Cost",
-                "text": "~25% savings compared to 50 hours with a company, and significantly less for larger workloads."
+                "title": "Kulu",
+                "text": "~25% säästu võrreldes 50 tunniga ettevõttes ja oluliselt vähem suuremate töökoormuste puhul."
             },
             "flexibility": {
-                "title": "Flexible Commitment",
-                "text": "Pause or cancel anytime based on your workload."
+                "title": "Paindlik kohustus",
+                "text": "Peata või tühista igal ajal vastavalt oma töökoormusele."
             },
             "expertise": {
-                "title": "Direct Expertise",
-                "text": "Work is handled exclusively by a senior React developer - no juniors or inflated estimates."
+                "title": "Otsene oskusteave",
+                "text": "Tööd teeb ainult kogenud Reacti arendaja - ei mingeid noorarendajaid ega paisutatud hinnanguid."
             },
             "communication": {
-                "title": "Streamlined Communication",
-                "text": "Direct collaboration ensures faster feedback and no time wasted on unnecessary middlemen or delays."
+                "title": "Optimeeritud suhtlus",
+                "text": "Otsene koostöö tagab kiirema tagasiside ja ei raiska aega ebavajalikele vahendajatele või viivitustele."
             }
         },
         "subscriptionValue": {
-            "title": "Subscription value at a glance",
+            "title": "Tellimuse väärtus lühidalt",
             "monthlyOutput": {
-                "title": "Monthly Output",
-                "text": "~8-12 tasks per month (equivalent to 50 hours of senior-level work)."
+                "title": "Kuine väljund",
+                "text": "~8-12 ülesannet kuus (võrdub 50 tunniga kõrgtasemel tööd)."
             },
             "costSavings": {
-                "title": "Cost Savings",
-                "text": "Save ~50% compared to hiring a full-time engineer and ~25% compared to outsourcing to a company."
+                "title": "Kulude kokkuhoid",
+                "text": "Säästa ~50% võrreldes täiskohaga inseneri palkamisega ja ~25% võrreldes ettevõttele allhanke tegemisega."
             },
             "hassleStart": {
-                "title": "Hassle-Free Start",
-                "text": "Begin without recruitment, onboarding, or management overhead - just quality focused results when you need them."
+                "title": "Muretu algus",
+                "text": "Alusta ilma värbamise, sisseelamiseta või juhtimise lisakoormuseta - ainult kvaliteetsed fokuseeritud tulemused, kui neid vajad."
             },
             "flexibility": {
-                "title": "Flexibility & Simplicity",
-                "text": "No long term contracts, commitments, or penalties - pause or cancel anytime. Start immediately with no delays or onboarding required."
+                "title": "Paindlikkus ja lihtsus",
+                "text": "Ei mingeid pikaajalisi lepinguid, kohustusi ega karistusi - peata või tühista igal ajal. Alusta kohe ilma viivituste või sisseelamiseta."
             },
             "expertise": {
-                "title": "Exclusive Expertise",
-                "text": "Work is completed by a senior React developer who provides dedicated attention to your needs - no juniors, no middle management, and no compromises on quality."
+                "title": "Eksklusiivne oskusteave",
+                "text": "Tööd teeb kogenud Reacti arendaja, kes pakub pühendunud tähelepanu sinu vajadustele - ei mingeid noorarendajaid, keskastme juhtimist ega kompromisse kvaliteedi osas."
             },
             "efficiency": {
-                "title": "Efficiency Through AI and Modern Practices",
-                "text": "Using AI-powered solutions like Cursor.ai and the latest development methodologies, combined with continuous improvements in workflows, results are delivered with a speed and proficiency comparable to small software teams of just a few years ago. This ensures exceptional quality and faster project delivery."
+                "title": "Tõhusus läbi tehisintellekti ja kaasaegsete praktikate",
+                "text": "Kasutades tehisintellektil põhinevaid lahendusi nagu Cursor.ai ja uusimaid arendusmeetodeid, kombineerituna pideva töövoogude täiustamisega, saavutatakse tulemused kiirusega ja oskuslikkusega, mis on võrreldav väikeste tarkvarameeskondadega vaid mõne aasta tagusest ajast. See tagab erakordse kvaliteedi ja kiirema projekti valmimise."
             }
         }
     },
     "gridBackground": {
-        "callNow": "Call Now"
+        "callNow": "Helista kohe"
     },
     "priceForOthers": {
-        "upTo": "up to",
-        "perMonth": "/ month",
-        "goToSection": "Go to target section"
+        "upTo": "kuni",
+        "perMonth": "/ kuus",
+        "goToSection": "Mine sihtjaotiseni"
     },
     "techScroll": {
-        "heading": "Technology Stack"
+        "heading": "Tehnoloogia stack"
     },
     "faq": {
-        "heading": "Frequently Asked Questions",
-        "description": "Schedule a quick call to discuss your React maintenance needs and see if we're a good fit.",
+        "heading": "Korduma kippuvad küsimused",
+        "description": "Planeeri kiire kõne, et arutada oma Reacti hooldusvajadusi ja näha, kas sobime hästi kokku.",
         "items": [
             {
-                "title": "What types of projects do you maintain?",
-                "text": "We specialize in maintaining and upgrading existing React applications, ensuring they remain robust and efficient."
+                "title": "Milliseid projekte te hooldate?",
+                "text": "Me spetsialiseerume olemasolevate Reacti rakenduste hooldamisele ja uuendamisele, tagades, et need jäävad tugevaks ja tõhusaks."
             },
             {
-                "title": "Do you only maintain existing projects?",
-                "text": "No, we can also help build new projects from scratch! We'll break down the development into manageable tickets and tasks, following the same efficient workflow used for maintenance. This structured approach ensures clear progress tracking and organized development, whether starting fresh or maintaining an existing codebase."
+                "title": "Kas te ainult hooldate olemasolevaid projekte?",
+                "text": "Ei, me saame aidata ka uusi projekte nullist üles ehitada! Me jagame arenduse hallatavateks piletiteks ja ülesanneteks, järgides sama tõhusat töövoogu, mida kasutatakse hoolduse jaoks. See struktureeritud lähenemine tagab selge edenemise jälgimise ja organiseeritud arenduse, olgu siis alustades nullist või hooldades olemasolevat koodibaasi."
             },
             {
-                "title": "Can I request both bug fixes and new features?",
-                "text": "Absolutely! Our service covers bug fixes, feature enhancements, and updates to libraries or frameworks."
+                "title": "Kas ma saan taotleda nii vigade parandusi kui ka uusi funktsioone?",
+                "text": "Absoluutselt! Meie teenus hõlmab vigade parandusi, funktsioonide täiustamist ja teekide või raamistike uuendamist."
             },
             {
-                "title": "How do I get started with maintenance?",
-                "text": "To get started, contact me to discuss your project and specific needs. I'll also need secure access to your codebase to begin supporting your application. Once everything is set up, we'll choose a ticketing system - whether it's your existing system (like Jira or Trello) or one I create for you - so you can start submitting tasks right away."
+                "title": "Kuidas alustada hooldusega?",
+                "text": "Alustamiseks võta minuga ühendust, et arutada oma projekti ja konkreetseid vajadusi. Vajan ka turvalist juurdepääsu sinu koodibaasile, et hakata sinu rakendust toetama. Kui kõik on seadistatud, valime piletisüsteemi - kas sinu olemasolev süsteem (nagu Jira või Trello) või üks, mille ma sulle loon - et saaksid kohe hakata ülesandeid esitama."
             },
             {
-                "title": "How fast will my requests be completed?",
-                "text": "Each task will start within 48 hours of being submitted. From there, most requests are completed in one to two days, depending on their complexity."
+                "title": "Kui kiiresti minu taotlused täidetakse?",
+                "text": "Iga ülesandega alustatakse 48 tunni jooksul pärast esitamist. Sealt edasi täidetakse enamik taotlusi ühe kuni kahe päeva jooksul, sõltuvalt nende keerukusest."
             },
             {
-                "title": "How does onboarding work?",
-                "text": "When you subscribe to a plan, I'll ensure a seamless onboarding process. If you already have a ticketing system, such as Jira, Trello, or another platform, I'm happy to adapt and work within your existing setup. If not, I'll create one for you and guide you through the process. I'll also securely access your codebase to ensure everything is ready for maintenance. The setup process is quick and focused entirely on your needs."
+                "title": "Kuidas toimub sisseelamine?",
+                "text": "Kui tellid plaani, tagan sujuva sisseelamisprotsessi. Kui sul on juba piletisüsteem, nagu Jira, Trello või mõni muu platvorm, olen hea meelega valmis kohanema ja töötama sinu olemasoleva seadistusega. Kui mitte, loon sulle ühe ja juhendan sind protsessi läbi. Samuti pääsen turvaliselt ligi sinu koodibaasile, et tagada, et kõik on hoolduseks valmis. Seadistusprotsess on kiire ja keskendub täielikult sinu vajadustele."
             },
             {
-                "title": "Who are the developers?",
-                "text": "Trimatech is a one-man agency, ran by Maigo, the founder. Trimatech does not employ other developers, or outsource work to any other entity. You'll work directly with me through the entirety of your experience."
+                "title": "Kes on arendajad?",
+                "text": "Trimatech on ühe-mehe agentuur, mida juhib Maigo, asutaja. Trimatech ei palka teisi arendajaid ega telli tööd allhankena ühelegi teisele üksusele. Töötad otse minuga kogu oma kogemuse vältel."
             },
             {
-                "title": "Is there a limit to how many requests I can make?",
-                "text": "Once subscribed, you're able to add as many requests to your queue as you'd like, and they will be delivered one by one."
+                "title": "Kas on piirang, kui palju taotlusi ma saan teha?",
+                "text": "Kui oled tellinud, saad lisada oma järjekorda nii palju taotlusi, kui soovid, ja need täidetakse ükshaaval."
             },
             {
-                "title": "How does the pause feature work?",
-                "text": "We understand you may not have enough work to fill up entire month. Perhaps you only have one or two requests at the moment. That's where pausing your subscription comes in handy. Billing cycles are based on 31 day period. Let's say you sign up and use the service for 21 days, and then decide to pause your subscription. This means that the billing cycle will be paused and you'll have 10 days of service remaining to be used anytime in the future."
+                "title": "Kuidas toimib peatamise funktsioon?",
+                "text": "Me mõistame, et sul ei pruugi olla piisavalt tööd, et täita tervet kuud. Võib-olla on sul hetkel ainult üks või kaks taotlust. Siin tuleb kasuks tellimuse peatamine. Arveldusperioodid põhinevad 31-päevasel perioodil. Ütleme, et registreerud ja kasutad teenust 21 päeva ning otsustad siis oma tellimuse peatada. See tähendab, et arveldusperiood peatatakse ja sul jääb 10 päeva teenust, mida saad kasutada tulevikus mis tahes ajal."
             },
             {
-                "title": "What if I only have a single request?",
-                "text": "That's fine. You can pause your subscription when finished and return when you have additional development needs. There's no need to let the remainder of your subscription go to waste."
+                "title": "Mis siis, kui mul on ainult üks taotlus?",
+                "text": "See on korras. Võid oma tellimuse peatada, kui oled lõpetanud, ja naasta, kui sul on täiendavaid arendusvajadusi. Pole vaja lasta oma tellimuse ülejäänud osal raisku minna."
             }
         ]
     }

From 4011836c31c0eed416a6ffd0f68b9ec98f6689fa Mon Sep 17 00:00:00 2001
From: Maigo Erit <maigo.erit@gmail.com>
Date: Wed, 5 Mar 2025 11:01:48 +0200
Subject: [PATCH 08/15] Update metadata generation with dynamic translations

- Add support for locale-specific metadata in layout.tsx
- Integrate metadata translations from page.json for both English and Estonian
- Include dynamic title, description, keywords, and alt text
- Adjust OpenGraph and Twitter metadata to use translated content
- Update Content-Language meta tag to use current locale
---
 app/[locale]/layout.tsx | 51 ++++++++++++++++++++++-------------------
 messages/en/page.json   | 18 +++++++++++++++
 messages/et/page.json   | 18 +++++++++++++++
 3 files changed, 63 insertions(+), 24 deletions(-)

diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index a26d44c..c5e25cc 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -45,24 +45,27 @@ const meta = {
     url: getURL()
 };
 
-export async function generateMetadata(): Promise<Metadata> {
+type MetadataTranslation = {
+    title: string;
+    description: string;
+    keywords: string[];
+    ogAlt: string;
+    twitterAlt: string;
+};
+
+export async function generateMetadata({ params }: { params: { locale: string } }): Promise<Metadata> {
+    const messages = await getMessages();
+    const metadata = (messages as unknown as { metadata: MetadataTranslation }).metadata;
+
     return {
-        title: meta.title,
-        description: meta.description,
+        title: metadata.title,
+        description: metadata.description,
         referrer: 'origin-when-cross-origin',
-        keywords: [
-            'React',
-            'Maintenance',
-            'Development',
-            'Senior Developer',
-            'Bug Fixes',
-            'Feature Updates',
-            'React Consulting',
-            'Web Development',
-            'Application Maintenance',
-            'Code Review'
+        keywords: metadata.keywords,
+        authors: [
+            { name: 'Trimatech', url: 'https://trimatech.dev/' },
+            { name: 'Maigo Erit', url: 'https://trimatech.dev/' }
         ],
-        authors: [{ name: 'Trimatech', url: 'https://trimatech.dev/' }],
         creator: 'Trimatech',
         publisher: 'Trimatech',
         robots: meta.robots,
@@ -76,30 +79,30 @@ export async function generateMetadata(): Promise<Metadata> {
         },
         openGraph: {
             url: meta.url,
-            title: meta.title,
-            description: meta.description,
+            title: metadata.title,
+            description: metadata.description,
             images: [
                 {
                     url: meta.cardImage,
                     width: 1200,
                     height: 630,
-                    alt: 'Trimatech - Expert React Maintenance & Development'
+                    alt: metadata.ogAlt
                 }
             ],
             type: 'website',
-            siteName: meta.title,
-            locale: 'en_US'
+            siteName: metadata.title,
+            locale: params.locale === 'et' ? 'et_EE' : 'en_US'
         },
         twitter: {
             card: 'summary_large_image',
             site: '@Trimatech',
             creator: '@Trimatech',
-            title: meta.title,
-            description: meta.description,
+            title: metadata.title,
+            description: metadata.description,
             images: [
                 {
                     url: meta.cardImage,
-                    alt: 'Trimatech - Expert React Maintenance & Development'
+                    alt: metadata.twitterAlt
                 }
             ]
         }
@@ -130,7 +133,7 @@ export default async function LocaleLayout({ children, params }: Props) {
             <Head>
                 <meta name="viewport" content="width=device-width, initial-scale=1" />
                 <link rel="canonical" href={meta.url} />
-                <meta http-equiv="Content-Language" content="en" />
+                <meta http-equiv="Content-Language" content={locale} />
             </Head>
             <html suppressHydrationWarning lang={locale} className={`${roboto.variable} ${mPlusRounded.variable}`}>
                 <body>
diff --git a/messages/en/page.json b/messages/en/page.json
index 3d1fbcd..0cfdd66 100644
--- a/messages/en/page.json
+++ b/messages/en/page.json
@@ -6,6 +6,24 @@
             "email": "Email"
         }
     },
+    "metadata": {
+        "title": "Expert React Maintenance & Development",
+        "description": "Keep your React applications running smoothly with dedicated senior level support. No mid-level teams, no overhead - just direct access to expert maintenance when you need it.",
+        "keywords": [
+            "React",
+            "Maintenance",
+            "Development",
+            "Senior Developer",
+            "Bug Fixes",
+            "Feature Updates",
+            "React Consulting",
+            "Web Development",
+            "Application Maintenance",
+            "Code Review"
+        ],
+        "ogAlt": "Trimatech - Expert React Maintenance & Development",
+        "twitterAlt": "Trimatech - Expert React Maintenance & Development"
+    },
     "navLinks": {
         "signIn": "Sign In",
         "bookCall": "Book a Call",
diff --git a/messages/et/page.json b/messages/et/page.json
index 0e6ff8c..dbcef4c 100644
--- a/messages/et/page.json
+++ b/messages/et/page.json
@@ -6,6 +6,24 @@
             "email": "E-post"
         }
     },
+    "metadata": {
+        "title": "Eksperttasemel Reacti hooldus ja arendus",
+        "description": "Hoia oma Reacti rakendused sujuvalt töös pühendunud kõrgtasemel toega. Ei mingit kesktaseme meeskondi ega lisakulusid - ainult otsene juurdepääs eksperthooldusele, kui seda vajad.",
+        "keywords": [
+            "React",
+            "Hooldus",
+            "Arendus",
+            "Kogenud arendaja",
+            "Vigade parandused",
+            "Funktsioonide uuendused",
+            "Reacti konsultatsioon",
+            "Veebiarendus",
+            "Rakenduse hooldus",
+            "Koodi ülevaatus"
+        ],
+        "ogAlt": "Trimatech - Eksperttasemel Reacti hooldus ja arendus",
+        "twitterAlt": "Trimatech - Eksperttasemel Reacti hooldus ja arendus"
+    },
     "navLinks": {
         "signIn": "Logi sisse",
         "bookCall": "Broneeri kõne",

From 96ec71b7d18764441f3b38c98f127a117dcad09e Mon Sep 17 00:00:00 2001
From: Maigo Erit <maigo.erit@gmail.com>
Date: Wed, 5 Mar 2025 16:00:07 +0200
Subject: [PATCH 09/15] Update project dependencies and layout structure

- Upgrade TypeScript, React types, and Node types to latest versions
- Refactor root and locale layouts to improve structure and performance
- Add loading skeleton component for better user experience
- Remove redundant not-found page
- Integrate Vercel Analytics and Speed Insights
- Simplify theme and font configuration
---
 app/[locale]/layout.tsx    |  96 ++++++----------------
 app/layout.tsx             |  56 +++++++++++--
 app/loading.tsx            |  29 +++++++
 app/not-found.tsx          |  17 ----
 components/ui/skeleton.tsx |  55 +++++++++++++
 package.json               |   8 +-
 pnpm-lock.yaml             | 162 ++++++++++++++++++-------------------
 7 files changed, 243 insertions(+), 180 deletions(-)
 create mode 100644 app/loading.tsx
 delete mode 100644 app/not-found.tsx
 create mode 100644 components/ui/skeleton.tsx

diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index c5e25cc..427ea48 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -1,39 +1,12 @@
-import { Metadata } from 'next';
-import Head from 'next/head';
-
-import { getURL } from '@/utils/helpers';
-import { Suspense } from 'react';
-
-import { ThemeProvider } from '@/components/theme/ThemeProvider';
-
-import { Toaster } from '@/components/ui/Toaster';
-import { Box } from '@chakra-ui/react';
-
 import { Footer } from '@/components/Header/Footer';
 import { HeaderNavbar } from '@/components/Header/HeaderNavbar';
 import { routing } from '@/i18n/routing';
-import { Analytics } from '@vercel/analytics/react';
-import { SpeedInsights } from '@vercel/speed-insights/next';
+import { getURL } from '@/utils/helpers';
+import { Box } from '@chakra-ui/react';
+import { Metadata } from 'next';
 import { NextIntlClientProvider } from 'next-intl';
 import { getMessages, setRequestLocale } from 'next-intl/server';
-import { M_PLUS_Rounded_1c, Roboto } from 'next/font/google';
-import { notFound } from 'next/navigation';
-import type { ReactNode } from 'react';
-
-const roboto = Roboto({
-    weight: ['400', '500', '700'],
-    subsets: ['latin'],
-    display: 'swap',
-    variable: '--font-roboto'
-});
-
-const mPlusRounded = M_PLUS_Rounded_1c({
-    weight: ['300', '500', '700'],
-    subsets: ['latin'],
-    display: 'swap',
-    variable: '--font-mplus',
-    preload: false // Add this to prevent the font loading error
-});
+import { ReactNode } from 'react';
 
 const meta = {
     title: 'Expert React Maintenance & Development',
@@ -56,6 +29,7 @@ type MetadataTranslation = {
 export async function generateMetadata({ params }: { params: { locale: string } }): Promise<Metadata> {
     const messages = await getMessages();
     const metadata = (messages as unknown as { metadata: MetadataTranslation }).metadata;
+    const { locale } = params;
 
     return {
         title: metadata.title,
@@ -91,7 +65,7 @@ export async function generateMetadata({ params }: { params: { locale: string }
             ],
             type: 'website',
             siteName: metadata.title,
-            locale: params.locale === 'et' ? 'et_EE' : 'en_US'
+            locale: locale === 'et' ? 'et_EE' : 'en_US'
         },
         twitter: {
             card: 'summary_large_image',
@@ -109,55 +83,35 @@ export async function generateMetadata({ params }: { params: { locale: string }
     };
 }
 
-type Props = {
+export function generateStaticParams() {
+    return routing.locales.map((locale) => ({ locale }));
+}
+
+interface LayoutProps {
     children: ReactNode;
     params: Promise<{ locale: string }>;
-};
+}
 
-export default async function LocaleLayout({ children, params }: Props) {
+export default async function LocaleLayout({ children, params }: LayoutProps) {
     const { locale } = await params;
 
-    // Ensure that the incoming `locale` is valid
-    if (!routing.locales.includes(locale as any)) {
-        notFound();
-    }
-
-    // Enable static rendering
+    // Enable static rendering for this locale
     setRequestLocale(locale);
 
-    // Providing all messages to the client
-    // side is the easiest way to get started
+    // Get messages for this locale
     const messages = await getMessages();
-    return (
-        <>
-            <Head>
-                <meta name="viewport" content="width=device-width, initial-scale=1" />
-                <link rel="canonical" href={meta.url} />
-                <meta http-equiv="Content-Language" content={locale} />
-            </Head>
-            <html suppressHydrationWarning lang={locale} className={`${roboto.variable} ${mPlusRounded.variable}`}>
-                <body>
-                    <NextIntlClientProvider messages={messages}>
-                        <ThemeProvider enableColorScheme={false} defaultTheme="light">
-                            <Box>
-                                <Box maxW="1440px" mx="auto" px={[0, 2, 4]}>
-                                    <HeaderNavbar />
 
-                                    {children}
+    return (
+        <NextIntlClientProvider messages={messages}>
+            <Box>
+                <Box maxW="1440px" mx="auto" px={[0, 2, 4]}>
+                    <HeaderNavbar />
 
-                                    <Footer />
-                                </Box>
-                            </Box>
+                    {children}
 
-                            <Suspense>
-                                <Toaster />
-                            </Suspense>
-                        </ThemeProvider>
-                    </NextIntlClientProvider>
-                    <Analytics />
-                    <SpeedInsights />
-                </body>
-            </html>
-        </>
+                    <Footer />
+                </Box>
+            </Box>
+        </NextIntlClientProvider>
     );
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index 2bb78c8..2d7a055 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,11 +1,53 @@
-import { ReactNode } from 'react';
+import { ThemeProvider } from '@/components/theme/ThemeProvider';
+import { Toaster } from '@/components/ui/Toaster';
+import { Analytics } from '@vercel/analytics/react';
+import { SpeedInsights } from '@vercel/speed-insights/next';
+import { M_PLUS_Rounded_1c, Roboto } from 'next/font/google';
+import Head from 'next/head';
+import type { ReactNode } from 'react';
+import { Suspense } from 'react';
 
-type Props = {
+const roboto = Roboto({
+    weight: ['400', '500', '700'],
+    subsets: ['latin'],
+    display: 'swap',
+    variable: '--font-roboto'
+});
+
+const mPlusRounded = M_PLUS_Rounded_1c({
+    weight: ['300', '500', '700'],
+    subsets: ['latin'],
+    display: 'swap',
+    variable: '--font-mplus',
+    preload: false // Add this to prevent the font loading error
+});
+
+interface Props {
     children: ReactNode;
-};
+    params: Promise<{ locale: string }>;
+}
+
+export default async function RootLayout({ children, params }: Props) {
+    const { locale } = await params;
 
-// Since we have a `not-found.tsx` page on the root, a layout file
-// is required, even if it's just passing children through.
-export default function RootLayout({ children }: Props) {
-    return children;
+    return (
+        <>
+            <Head>
+                <meta name="viewport" content="width=device-width, initial-scale=1" />
+                <meta http-equiv="Content-Language" content={locale} />
+            </Head>
+            <html suppressHydrationWarning lang={locale} className={`${roboto.variable} ${mPlusRounded.variable}`}>
+                <body>
+                    <ThemeProvider enableColorScheme={false} defaultTheme="light">
+                        {children}
+                        <Suspense>
+                            <Toaster />
+                        </Suspense>
+                    </ThemeProvider>
+                    <Analytics />
+                    <SpeedInsights />
+                </body>
+            </html>
+        </>
+    );
 }
diff --git a/app/loading.tsx b/app/loading.tsx
new file mode 100644
index 0000000..83f52a3
--- /dev/null
+++ b/app/loading.tsx
@@ -0,0 +1,29 @@
+import { mainRounded } from '@/components/theme/padding.utils';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Box, SimpleGrid, VStack } from '@chakra-ui/react';
+
+export default function Loading() {
+    return (
+        <Box maxW="1440px" mx="auto" px={[0, 2, 4]} minH="100vh" w="full">
+            <VStack gap={[4, 6, 6, 6, 10]} w="full">
+                {/* Hero Section Skeleton */}
+                <Box w="full">
+                    <Skeleton height="70px" w="full" mb="1px" bg="bgColor" />
+                    <Skeleton height="670px" w="full" roundedBottom={mainRounded} bg="bgColor" />
+                </Box>
+
+                <Box w="full">
+                    <Box pb={5} pl={[4, 0]}>
+                        <Skeleton w="300px" rounded="full" h="60px" bg="bgColor" />
+                    </Box>
+                    <SimpleGrid columns={[1, 1, 2, 2, 4]} gap={4}>
+                        <Skeleton w="full" h="500px" rounded={mainRounded} p={6} minW="300px" bg="bgColor" />
+                        <Skeleton w="full" h="500px" rounded={mainRounded} p={6} minW="300px" bg="bgColor" />
+                        <Skeleton w="full" h="500px" rounded={mainRounded} p={6} minW="300px" bg="bgColor" />
+                        <Skeleton w="full" h="500px" rounded={mainRounded} p={6} minW="300px" bg="bgColor" />
+                    </SimpleGrid>
+                </Box>
+            </VStack>
+        </Box>
+    );
+}
diff --git a/app/not-found.tsx b/app/not-found.tsx
deleted file mode 100644
index 52d21f5..0000000
--- a/app/not-found.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-'use client';
-
-import Error from 'next/error';
-
-// Render the default Next.js 404 page when a route
-// is requested that doesn't match the middleware and
-// therefore doesn't have a locale associated with it.
-
-export default function NotFound() {
-    return (
-        <html lang="en">
-            <body>
-                <Error statusCode={404} />
-            </body>
-        </html>
-    );
-}
diff --git a/components/ui/skeleton.tsx b/components/ui/skeleton.tsx
new file mode 100644
index 0000000..489f6ac
--- /dev/null
+++ b/components/ui/skeleton.tsx
@@ -0,0 +1,55 @@
+import type { SkeletonProps as ChakraSkeletonProps, CircleProps } from '@chakra-ui/react';
+import { Box, Skeleton as ChakraSkeleton, Circle, Stack } from '@chakra-ui/react';
+import * as React from 'react';
+
+export interface SkeletonCircleProps extends ChakraSkeletonProps {
+    size?: CircleProps['size'];
+}
+
+export const SkeletonCircle = React.forwardRef<HTMLDivElement, SkeletonCircleProps>(
+    function SkeletonCircle(props, ref) {
+        const { size, ...rest } = props;
+        return (
+            <Circle size={size} asChild ref={ref}>
+                <ChakraSkeleton {...rest} />
+            </Circle>
+        );
+    }
+);
+
+export interface SkeletonTextProps extends ChakraSkeletonProps {
+    noOfLines?: number;
+}
+
+export const SkeletonText = React.forwardRef<HTMLDivElement, SkeletonTextProps>(function SkeletonText(props, ref) {
+    const { noOfLines = 3, gap, ...rest } = props;
+    return (
+        <Stack gap={gap} width="full" ref={ref}>
+            {Array.from({ length: noOfLines }).map((_, index) => (
+                <ChakraSkeleton height="4" key={index} {...props} _last={{ maxW: '80%' }} {...rest} />
+            ))}
+        </Stack>
+    );
+});
+
+export const SkeletonField = React.forwardRef<HTMLDivElement, SkeletonTextProps>(function SkeletonField(props, ref) {
+    return (
+        <Box ref={ref} w="full" {...props}>
+            <SkeletonText noOfLines={1} gap={0} mb={2} />
+            <ChakraSkeleton height={10} />
+        </Box>
+    );
+});
+
+export const SkeletonFields = React.forwardRef<HTMLDivElement, SkeletonTextProps>(function SkeletonFields(props, ref) {
+    const { noOfLines = 3, gap, ...rest } = props;
+    return (
+        <Stack gap={gap} width="full" ref={ref}>
+            {Array.from({ length: noOfLines }).map((_, index) => (
+                <SkeletonField key={index} {...rest} />
+            ))}
+        </Stack>
+    );
+});
+
+export const Skeleton = ChakraSkeleton;
diff --git a/package.json b/package.json
index d3929bc..74a626a 100644
--- a/package.json
+++ b/package.json
@@ -50,14 +50,14 @@
         "zod-form-data": "^2.0.2"
     },
     "devDependencies": {
-        "@types/node": "^22.10.7",
-        "@types/react": "^19.0.7",
-        "@types/react-dom": "^19.0.3",
+        "@types/node": "^22.13.9",
+        "@types/react": "^19.0.10",
+        "@types/react-dom": "^19.0.4",
         "eslint": "^9.18.0",
         "eslint-config-next": "15.1.5",
         "eslint-config-prettier": "^10.0.1",
         "eslint-plugin-react": "^7.37.4",
         "prettier": "^3.3.1",
-        "typescript": "^5.7.3"
+        "typescript": "^5.8.2"
     }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fa7c4f1..4a27910 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,19 +10,19 @@ importers:
     dependencies:
       '@chakra-ui/cli':
         specifier: 3.8.1
-        version: 3.8.1(@chakra-ui/react@3.8.1(@emotion/react@11.14.0(@types/react@19.0.7)(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0))
+        version: 3.8.1(@chakra-ui/react@3.8.1(@emotion/react@11.14.0(@types/react@19.0.10)(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0))
       '@chakra-ui/react':
         specifier: 3.8.1
-        version: 3.8.1(@emotion/react@11.14.0(@types/react@19.0.7)(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+        version: 3.8.1(@emotion/react@11.14.0(@types/react@19.0.10)(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@emotion/cache':
         specifier: ^11.14.0
         version: 11.14.0
       '@emotion/react':
         specifier: ^11.14.0
-        version: 11.14.0(@types/react@19.0.7)(react@19.0.0)
+        version: 11.14.0(@types/react@19.0.10)(react@19.0.0)
       '@emotion/styled':
         specifier: ^11.14.0
-        version: 11.14.0(@emotion/react@11.14.0(@types/react@19.0.7)(react@19.0.0))(@types/react@19.0.7)(react@19.0.0)
+        version: 11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@19.0.0))(@types/react@19.0.10)(react@19.0.0)
       '@hookform/error-message':
         specifier: ^2.0.1
         version: 2.0.1(react-dom@19.0.0(react@19.0.0))(react-hook-form@7.54.2(react@19.0.0))(react@19.0.0)
@@ -85,20 +85,20 @@ importers:
         version: 2.0.2(zod@3.22.4)
     devDependencies:
       '@types/node':
-        specifier: ^22.10.7
-        version: 22.10.7
+        specifier: ^22.13.9
+        version: 22.13.9
       '@types/react':
-        specifier: ^19.0.7
-        version: 19.0.7
+        specifier: ^19.0.10
+        version: 19.0.10
       '@types/react-dom':
-        specifier: ^19.0.3
-        version: 19.0.3(@types/react@19.0.7)
+        specifier: ^19.0.4
+        version: 19.0.4(@types/react@19.0.10)
       eslint:
         specifier: ^9.18.0
         version: 9.18.0
       eslint-config-next:
         specifier: 15.1.5
-        version: 15.1.5(eslint@9.18.0)(typescript@5.7.3)
+        version: 15.1.5(eslint@9.18.0)(typescript@5.8.2)
       eslint-config-prettier:
         specifier: ^10.0.1
         version: 10.0.1(eslint@9.18.0)
@@ -109,8 +109,8 @@ importers:
         specifier: ^3.3.1
         version: 3.4.2
       typescript:
-        specifier: ^5.7.3
-        version: 5.7.3
+        specifier: ^5.8.2
+        version: 5.8.2
 
 packages:
 
@@ -709,19 +709,19 @@ packages:
   '@types/ms@2.1.0':
     resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
 
-  '@types/node@22.10.7':
-    resolution: {integrity: sha512-V09KvXxFiutGp6B7XkpaDXlNadZxrzajcY50EuoLIpQ6WWYCSvf19lVIazzfIzQvhUN2HjX12spLojTnhuKlGg==}
+  '@types/node@22.13.9':
+    resolution: {integrity: sha512-acBjXdRJ3A6Pb3tqnw9HZmyR3Fiol3aGxRCK1x3d+6CDAMjl7I649wpSd+yNURCjbOUGu9tqtLKnTGxmK6CyGw==}
 
   '@types/parse-json@4.0.2':
     resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
 
-  '@types/react-dom@19.0.3':
-    resolution: {integrity: sha512-0Knk+HJiMP/qOZgMyNFamlIjw9OFCsyC2ZbigmEEyXXixgre6IQpm/4V+r3qH4GC1JPvRJKInw+on2rV6YZLeA==}
+  '@types/react-dom@19.0.4':
+    resolution: {integrity: sha512-4fSQ8vWFkg+TGhePfUzVmat3eC14TXYSsiiDSLI0dVLsrm9gZFABjPy/Qu6TKgl1tq1Bu1yDsuQgY3A3DOjCcg==}
     peerDependencies:
       '@types/react': ^19.0.0
 
-  '@types/react@19.0.7':
-    resolution: {integrity: sha512-MoFsEJKkAtZCrC1r6CM8U22GzhG7u2Wir8ons/aCKH6MBdD1ibV24zOSSkdZVUKqN5i396zG5VKLYZ3yaUZdLA==}
+  '@types/react@19.0.10':
+    resolution: {integrity: sha512-JuRQ9KXLEjaUNjTWpzuR231Z2WpIwczOkBEIvbHNCzQefFIT0L8IqE6NV6ULLyC1SI/i234JnDoMkfg+RjQj2g==}
 
   '@typescript-eslint/eslint-plugin@8.20.0':
     resolution: {integrity: sha512-naduuphVw5StFfqp4Gq4WhIBE2gN1GEmMUExpJYknZJdRnc+2gDzB8Z3+5+/Kv33hPQRDGzQO/0opHE72lZZ6A==}
@@ -2682,8 +2682,8 @@ packages:
     resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
     engines: {node: '>= 0.4'}
 
-  typescript@5.7.3:
-    resolution: {integrity: sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==}
+  typescript@5.8.2:
+    resolution: {integrity: sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==}
     engines: {node: '>=14.17'}
     hasBin: true
 
@@ -2862,9 +2862,9 @@ snapshots:
       '@babel/helper-validator-identifier': 7.22.20
       to-fast-properties: 2.0.0
 
-  '@chakra-ui/cli@3.8.1(@chakra-ui/react@3.8.1(@emotion/react@11.14.0(@types/react@19.0.7)(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0))':
+  '@chakra-ui/cli@3.8.1(@chakra-ui/react@3.8.1(@emotion/react@11.14.0(@types/react@19.0.10)(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0))':
     dependencies:
-      '@chakra-ui/react': 3.8.1(@emotion/react@11.14.0(@types/react@19.0.7)(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@chakra-ui/react': 3.8.1(@emotion/react@11.14.0(@types/react@19.0.10)(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@clack/prompts': 0.9.1
       '@pandacss/is-valid-prop': 0.41.0
       '@types/cli-table': 0.3.4
@@ -2887,11 +2887,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@chakra-ui/react@3.8.1(@emotion/react@11.14.0(@types/react@19.0.7)(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+  '@chakra-ui/react@3.8.1(@emotion/react@11.14.0(@types/react@19.0.10)(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@ark-ui/react': 4.9.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@emotion/is-prop-valid': 1.3.1
-      '@emotion/react': 11.14.0(@types/react@19.0.7)(react@19.0.0)
+      '@emotion/react': 11.14.0(@types/react@19.0.10)(react@19.0.0)
       '@emotion/serialize': 1.3.3
       '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@19.0.0)
       '@emotion/utils': 1.4.2
@@ -2949,7 +2949,7 @@ snapshots:
 
   '@emotion/memoize@0.9.0': {}
 
-  '@emotion/react@11.14.0(@types/react@19.0.7)(react@19.0.0)':
+  '@emotion/react@11.14.0(@types/react@19.0.10)(react@19.0.0)':
     dependencies:
       '@babel/runtime': 7.23.9
       '@emotion/babel-plugin': 11.13.5
@@ -2961,7 +2961,7 @@ snapshots:
       hoist-non-react-statics: 3.3.2
       react: 19.0.0
     optionalDependencies:
-      '@types/react': 19.0.7
+      '@types/react': 19.0.10
 
   '@emotion/serialize@1.3.3':
     dependencies:
@@ -2973,18 +2973,18 @@ snapshots:
 
   '@emotion/sheet@1.4.0': {}
 
-  '@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.7)(react@19.0.0))(@types/react@19.0.7)(react@19.0.0)':
+  '@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.0.10)(react@19.0.0))(@types/react@19.0.10)(react@19.0.0)':
     dependencies:
       '@babel/runtime': 7.23.9
       '@emotion/babel-plugin': 11.13.5
       '@emotion/is-prop-valid': 1.3.1
-      '@emotion/react': 11.14.0(@types/react@19.0.7)(react@19.0.0)
+      '@emotion/react': 11.14.0(@types/react@19.0.10)(react@19.0.0)
       '@emotion/serialize': 1.3.3
       '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@19.0.0)
       '@emotion/utils': 1.4.2
       react: 19.0.0
     optionalDependencies:
-      '@types/react': 19.0.7
+      '@types/react': 19.0.10
 
   '@emotion/unitless@0.10.0': {}
 
@@ -3357,47 +3357,47 @@ snapshots:
 
   '@types/ms@2.1.0': {}
 
-  '@types/node@22.10.7':
+  '@types/node@22.13.9':
     dependencies:
       undici-types: 6.20.0
 
   '@types/parse-json@4.0.2': {}
 
-  '@types/react-dom@19.0.3(@types/react@19.0.7)':
+  '@types/react-dom@19.0.4(@types/react@19.0.10)':
     dependencies:
-      '@types/react': 19.0.7
+      '@types/react': 19.0.10
 
-  '@types/react@19.0.7':
+  '@types/react@19.0.10':
     dependencies:
       csstype: 3.1.3
 
-  '@typescript-eslint/eslint-plugin@8.20.0(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.7.3))(eslint@9.18.0)(typescript@5.7.3)':
+  '@typescript-eslint/eslint-plugin@8.20.0(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.8.2))(eslint@9.18.0)(typescript@5.8.2)':
     dependencies:
       '@eslint-community/regexpp': 4.10.0
-      '@typescript-eslint/parser': 6.21.0(eslint@9.18.0)(typescript@5.7.3)
+      '@typescript-eslint/parser': 6.21.0(eslint@9.18.0)(typescript@5.8.2)
       '@typescript-eslint/scope-manager': 8.20.0
-      '@typescript-eslint/type-utils': 8.20.0(eslint@9.18.0)(typescript@5.7.3)
-      '@typescript-eslint/utils': 8.20.0(eslint@9.18.0)(typescript@5.7.3)
+      '@typescript-eslint/type-utils': 8.20.0(eslint@9.18.0)(typescript@5.8.2)
+      '@typescript-eslint/utils': 8.20.0(eslint@9.18.0)(typescript@5.8.2)
       '@typescript-eslint/visitor-keys': 8.20.0
       eslint: 9.18.0
       graphemer: 1.4.0
       ignore: 5.3.1
       natural-compare: 1.4.0
-      ts-api-utils: 2.0.0(typescript@5.7.3)
-      typescript: 5.7.3
+      ts-api-utils: 2.0.0(typescript@5.8.2)
+      typescript: 5.8.2
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.7.3)':
+  '@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.8.2)':
     dependencies:
       '@typescript-eslint/scope-manager': 6.21.0
       '@typescript-eslint/types': 6.21.0
-      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.7.3)
+      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.8.2)
       '@typescript-eslint/visitor-keys': 6.21.0
       debug: 4.4.0
       eslint: 9.18.0
     optionalDependencies:
-      typescript: 5.7.3
+      typescript: 5.8.2
     transitivePeerDependencies:
       - supports-color
 
@@ -3411,14 +3411,14 @@ snapshots:
       '@typescript-eslint/types': 8.20.0
       '@typescript-eslint/visitor-keys': 8.20.0
 
-  '@typescript-eslint/type-utils@8.20.0(eslint@9.18.0)(typescript@5.7.3)':
+  '@typescript-eslint/type-utils@8.20.0(eslint@9.18.0)(typescript@5.8.2)':
     dependencies:
-      '@typescript-eslint/typescript-estree': 8.20.0(typescript@5.7.3)
-      '@typescript-eslint/utils': 8.20.0(eslint@9.18.0)(typescript@5.7.3)
+      '@typescript-eslint/typescript-estree': 8.20.0(typescript@5.8.2)
+      '@typescript-eslint/utils': 8.20.0(eslint@9.18.0)(typescript@5.8.2)
       debug: 4.4.0
       eslint: 9.18.0
-      ts-api-utils: 2.0.0(typescript@5.7.3)
-      typescript: 5.7.3
+      ts-api-utils: 2.0.0(typescript@5.8.2)
+      typescript: 5.8.2
     transitivePeerDependencies:
       - supports-color
 
@@ -3426,7 +3426,7 @@ snapshots:
 
   '@typescript-eslint/types@8.20.0': {}
 
-  '@typescript-eslint/typescript-estree@6.21.0(typescript@5.7.3)':
+  '@typescript-eslint/typescript-estree@6.21.0(typescript@5.8.2)':
     dependencies:
       '@typescript-eslint/types': 6.21.0
       '@typescript-eslint/visitor-keys': 6.21.0
@@ -3435,13 +3435,13 @@ snapshots:
       is-glob: 4.0.3
       minimatch: 9.0.3
       semver: 7.6.3
-      ts-api-utils: 1.2.1(typescript@5.7.3)
+      ts-api-utils: 1.2.1(typescript@5.8.2)
     optionalDependencies:
-      typescript: 5.7.3
+      typescript: 5.8.2
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/typescript-estree@8.20.0(typescript@5.7.3)':
+  '@typescript-eslint/typescript-estree@8.20.0(typescript@5.8.2)':
     dependencies:
       '@typescript-eslint/types': 8.20.0
       '@typescript-eslint/visitor-keys': 8.20.0
@@ -3450,19 +3450,19 @@ snapshots:
       is-glob: 4.0.3
       minimatch: 9.0.5
       semver: 7.6.3
-      ts-api-utils: 2.0.0(typescript@5.7.3)
-      typescript: 5.7.3
+      ts-api-utils: 2.0.0(typescript@5.8.2)
+      typescript: 5.8.2
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.20.0(eslint@9.18.0)(typescript@5.7.3)':
+  '@typescript-eslint/utils@8.20.0(eslint@9.18.0)(typescript@5.8.2)':
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@9.18.0)
       '@typescript-eslint/scope-manager': 8.20.0
       '@typescript-eslint/types': 8.20.0
-      '@typescript-eslint/typescript-estree': 8.20.0(typescript@5.7.3)
+      '@typescript-eslint/typescript-estree': 8.20.0(typescript@5.8.2)
       eslint: 9.18.0
-      typescript: 5.7.3
+      typescript: 5.8.2
     transitivePeerDependencies:
       - supports-color
 
@@ -4493,21 +4493,21 @@ snapshots:
 
   escape-string-regexp@4.0.0: {}
 
-  eslint-config-next@15.1.5(eslint@9.18.0)(typescript@5.7.3):
+  eslint-config-next@15.1.5(eslint@9.18.0)(typescript@5.8.2):
     dependencies:
       '@next/eslint-plugin-next': 15.1.5
       '@rushstack/eslint-patch': 1.10.5
-      '@typescript-eslint/eslint-plugin': 8.20.0(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.7.3))(eslint@9.18.0)(typescript@5.7.3)
-      '@typescript-eslint/parser': 6.21.0(eslint@9.18.0)(typescript@5.7.3)
+      '@typescript-eslint/eslint-plugin': 8.20.0(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.8.2))(eslint@9.18.0)(typescript@5.8.2)
+      '@typescript-eslint/parser': 6.21.0(eslint@9.18.0)(typescript@5.8.2)
       eslint: 9.18.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@9.18.0)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.7.3))(eslint-import-resolver-typescript@3.6.1)(eslint@9.18.0)
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@9.18.0)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.8.2))(eslint-import-resolver-typescript@3.6.1)(eslint@9.18.0)
       eslint-plugin-jsx-a11y: 6.10.2(eslint@9.18.0)
       eslint-plugin-react: 7.37.4(eslint@9.18.0)
       eslint-plugin-react-hooks: 5.1.0(eslint@9.18.0)
     optionalDependencies:
-      typescript: 5.7.3
+      typescript: 5.8.2
     transitivePeerDependencies:
       - eslint-import-resolver-webpack
       - supports-color
@@ -4524,13 +4524,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@9.18.0):
+  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@9.18.0):
     dependencies:
       debug: 4.4.0
       enhanced-resolve: 5.15.0
       eslint: 9.18.0
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@9.18.0)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.7.3))(eslint-import-resolver-typescript@3.6.1)(eslint@9.18.0)
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@9.18.0)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.8.2))(eslint-import-resolver-typescript@3.6.1)(eslint@9.18.0)
       fast-glob: 3.3.2
       get-tsconfig: 4.7.2
       is-core-module: 2.13.1
@@ -4541,29 +4541,29 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@9.18.0):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@9.18.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
-      '@typescript-eslint/parser': 6.21.0(eslint@9.18.0)(typescript@5.7.3)
+      '@typescript-eslint/parser': 6.21.0(eslint@9.18.0)(typescript@5.8.2)
       eslint: 9.18.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@9.18.0)
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@9.18.0)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.8.0(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@9.18.0):
+  eslint-module-utils@2.8.0(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@9.18.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
-      '@typescript-eslint/parser': 6.21.0(eslint@9.18.0)(typescript@5.7.3)
+      '@typescript-eslint/parser': 6.21.0(eslint@9.18.0)(typescript@5.8.2)
       eslint: 9.18.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@9.18.0)
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@9.18.0)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.7.3))(eslint-import-resolver-typescript@3.6.1)(eslint@9.18.0):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.8.2))(eslint-import-resolver-typescript@3.6.1)(eslint@9.18.0):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -4574,7 +4574,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 9.18.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@9.18.0)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@9.18.0)
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
@@ -4586,7 +4586,7 @@ snapshots:
       string.prototype.trimend: 1.0.9
       tsconfig-paths: 3.15.0
     optionalDependencies:
-      '@typescript-eslint/parser': 6.21.0(eslint@9.18.0)(typescript@5.7.3)
+      '@typescript-eslint/parser': 6.21.0(eslint@9.18.0)(typescript@5.8.2)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
@@ -5821,7 +5821,7 @@ snapshots:
 
   stripe@14.25.0:
     dependencies:
-      '@types/node': 22.10.7
+      '@types/node': 22.13.9
       qs: 6.11.2
 
   styled-jsx@5.1.6(react@19.0.0):
@@ -5867,13 +5867,13 @@ snapshots:
     dependencies:
       is-number: 7.0.0
 
-  ts-api-utils@1.2.1(typescript@5.7.3):
+  ts-api-utils@1.2.1(typescript@5.8.2):
     dependencies:
-      typescript: 5.7.3
+      typescript: 5.8.2
 
-  ts-api-utils@2.0.0(typescript@5.7.3):
+  ts-api-utils@2.0.0(typescript@5.8.2):
     dependencies:
-      typescript: 5.7.3
+      typescript: 5.8.2
 
   ts-interface-checker@0.1.13: {}
 
@@ -5950,7 +5950,7 @@ snapshots:
       possible-typed-array-names: 1.0.0
       reflect.getprototypeof: 1.0.10
 
-  typescript@5.7.3: {}
+  typescript@5.8.2: {}
 
   unbox-primitive@1.0.2:
     dependencies:

From add938d6a8bafcac8e97e6114d59cee3b20680fb Mon Sep 17 00:00:00 2001
From: Maigo Erit <maigo.erit@gmail.com>
Date: Wed, 5 Mar 2025 17:32:07 +0200
Subject: [PATCH 10/15] Add not-found handling and root page redirection

- Implement global not-found page for handling 404 errors
- Add root page redirection to default locale (/en)
- Update locale layout to validate incoming locale and use notFound() for invalid locales
- Improve routing and error handling in the application structure
---
 app/[locale]/layout.tsx |  16 ++-
 app/not-found.tsx       |  17 +++
 app/page.tsx            |   6 ++
 package.json            |   4 +-
 pnpm-lock.yaml          | 222 +++++++++++++++++-----------------------
 5 files changed, 128 insertions(+), 137 deletions(-)
 create mode 100644 app/not-found.tsx
 create mode 100644 app/page.tsx

diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index 427ea48..1d51ecc 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -6,6 +6,7 @@ import { Box } from '@chakra-ui/react';
 import { Metadata } from 'next';
 import { NextIntlClientProvider } from 'next-intl';
 import { getMessages, setRequestLocale } from 'next-intl/server';
+import { notFound } from 'next/navigation';
 import { ReactNode } from 'react';
 
 const meta = {
@@ -26,10 +27,10 @@ type MetadataTranslation = {
     twitterAlt: string;
 };
 
-export async function generateMetadata({ params }: { params: { locale: string } }): Promise<Metadata> {
+export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise<Metadata> {
     const messages = await getMessages();
     const metadata = (messages as unknown as { metadata: MetadataTranslation }).metadata;
-    const { locale } = params;
+    const { locale } = await params;
 
     return {
         title: metadata.title,
@@ -87,14 +88,19 @@ export function generateStaticParams() {
     return routing.locales.map((locale) => ({ locale }));
 }
 
-interface LayoutProps {
+type Props = {
     children: ReactNode;
     params: Promise<{ locale: string }>;
-}
+};
 
-export default async function LocaleLayout({ children, params }: LayoutProps) {
+export default async function LocaleLayout({ children, params }: Props) {
     const { locale } = await params;
 
+    // Ensure that the incoming `locale` is valid
+    if (!routing.locales.includes(locale as any)) {
+        notFound();
+    }
+
     // Enable static rendering for this locale
     setRequestLocale(locale);
 
diff --git a/app/not-found.tsx b/app/not-found.tsx
new file mode 100644
index 0000000..21a8259
--- /dev/null
+++ b/app/not-found.tsx
@@ -0,0 +1,17 @@
+'use client';
+
+import Error from 'next/error';
+
+// This page renders when a route like `/unknown.txt` is requested.
+// In this case, the layout at `app/[locale]/layout.tsx` receives
+// an invalid value as the `[locale]` param and calls `notFound()`.
+
+export default function GlobalNotFound() {
+    return (
+        <html lang="en">
+            <body>
+                <Error statusCode={404} />;
+            </body>
+        </html>
+    );
+}
diff --git a/app/page.tsx b/app/page.tsx
new file mode 100644
index 0000000..28ca103
--- /dev/null
+++ b/app/page.tsx
@@ -0,0 +1,6 @@
+import { redirect } from 'next/navigation';
+
+// This page only renders when the app is built statically (output: 'export')
+export default function RootPage() {
+    redirect('/en');
+}
diff --git a/package.json b/package.json
index 74a626a..e38c45c 100644
--- a/package.json
+++ b/package.json
@@ -53,8 +53,8 @@
         "@types/node": "^22.13.9",
         "@types/react": "^19.0.10",
         "@types/react-dom": "^19.0.4",
-        "eslint": "^9.18.0",
-        "eslint-config-next": "15.1.5",
+        "eslint": "^9.21.0",
+        "eslint-config-next": "15.2.1",
         "eslint-config-prettier": "^10.0.1",
         "eslint-plugin-react": "^7.37.4",
         "prettier": "^3.3.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4a27910..35a6937 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -94,17 +94,17 @@ importers:
         specifier: ^19.0.4
         version: 19.0.4(@types/react@19.0.10)
       eslint:
-        specifier: ^9.18.0
-        version: 9.18.0
+        specifier: ^9.21.0
+        version: 9.21.0
       eslint-config-next:
-        specifier: 15.1.5
-        version: 15.1.5(eslint@9.18.0)(typescript@5.8.2)
+        specifier: 15.2.1
+        version: 15.2.1(eslint@9.21.0)(typescript@5.8.2)
       eslint-config-prettier:
         specifier: ^10.0.1
-        version: 10.0.1(eslint@9.18.0)
+        version: 10.0.1(eslint@9.21.0)
       eslint-plugin-react:
         specifier: ^7.37.4
-        version: 7.37.4(eslint@9.18.0)
+        version: 7.37.4(eslint@9.21.0)
       prettier:
         specifier: ^3.3.1
         version: 3.4.2
@@ -375,36 +375,32 @@ packages:
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
 
-  '@eslint-community/regexpp@4.10.0':
-    resolution: {integrity: sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==}
-    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
-
   '@eslint-community/regexpp@4.12.1':
     resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
 
-  '@eslint/config-array@0.19.1':
-    resolution: {integrity: sha512-fo6Mtm5mWyKjA/Chy1BYTdn5mGJoDNjC7C64ug20ADsRDGrA85bN3uK3MaKbeRkRuuIEAR5N33Jr1pbm411/PA==}
+  '@eslint/config-array@0.19.2':
+    resolution: {integrity: sha512-GNKqxfHG2ySmJOBSHg7LxeUx4xpuCoFjacmlCoYWEbaPXLwvfIjixRI12xCQZeULksQb23uiA8F40w5TojpV7w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/core@0.10.0':
-    resolution: {integrity: sha512-gFHJ+xBOo4G3WRlR1e/3G8A6/KZAH6zcE/hkLRCZTi/B9avAG365QhFA8uOGzTMqgTghpn7/fSnscW++dpMSAw==}
+  '@eslint/core@0.12.0':
+    resolution: {integrity: sha512-cmrR6pytBuSMTaBweKoGMwu3EiHiEC+DoyupPmlZ0HxBJBtIxwe+j/E4XPIKNx+Q74c8lXKPwYawBf5glsTkHg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/eslintrc@3.2.0':
-    resolution: {integrity: sha512-grOjVNN8P3hjJn/eIETF1wwd12DdnwFDoyceUJLYYdkpbwq3nLi+4fqrTAONx7XDALqlL220wC/RHSC/QTI/0w==}
+  '@eslint/eslintrc@3.3.0':
+    resolution: {integrity: sha512-yaVPAiNAalnCZedKLdR21GOGILMLKPyqSLWaAjQFvYA2i/ciDi8ArYVr69Anohb6cH2Ukhqti4aFnYyPm8wdwQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/js@9.18.0':
-    resolution: {integrity: sha512-fK6L7rxcq6/z+AaQMtiFTkvbHkBLNlwyRxHpKawP0x3u9+NC6MQTnFW+AdpwC6gfHTW0051cokQgtTN2FqlxQA==}
+  '@eslint/js@9.21.0':
+    resolution: {integrity: sha512-BqStZ3HX8Yz6LvsF5ByXYrtigrV5AXADWLAGc7PH/1SxOb7/FIYYMszZZWiUou/GB9P2lXWk2SV4d+Z8h0nknw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/object-schema@2.1.5':
-    resolution: {integrity: sha512-o0bhxnL89h5Bae5T318nFoFzGy+YE5i/gGkoPAgkmTVdRKTiv3p8JHevPiPaMwoloKfEiiaHlawCqaZMqRm+XQ==}
+  '@eslint/object-schema@2.1.6':
+    resolution: {integrity: sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/plugin-kit@0.2.5':
-    resolution: {integrity: sha512-lB05FkqEdUg2AA0xEbUz0SnkXT1LcCTa438W4IWTUh4hdOnVbQyOJ81OrDXsJk/LSiJHubgGEFoR5EHq1NsH1A==}
+  '@eslint/plugin-kit@0.2.7':
+    resolution: {integrity: sha512-JubJ5B2pJ4k4yGxaNLdbjrnk9d/iDz6/q8wOilpIowd6PJPgaxCuHBnBszq7Ce2TyMrywm5r4PnKm6V3iiZF+g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@floating-ui/core@1.6.9':
@@ -462,8 +458,8 @@ packages:
     resolution: {integrity: sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==}
     engines: {node: '>=18.18'}
 
-  '@humanwhocodes/retry@0.4.1':
-    resolution: {integrity: sha512-c7hNEllBlenFTHBky65mhq8WD2kbN9Q6gk0bTk8lSBvc554jpXSkST1iePudpt7+A/AQvuHs9EMqjHDXMY1lrA==}
+  '@humanwhocodes/retry@0.4.2':
+    resolution: {integrity: sha512-xeO57FpIu4p1Ri3Jq/EXq4ClRm86dVF2z/+kvFnyqVYRavTZmaFaUBbWCOuuTh0o/g7DSsk6kc2vrS4Vl5oPOQ==}
     engines: {node: '>=18.18'}
 
   '@img/sharp-darwin-arm64@0.33.5':
@@ -602,8 +598,8 @@ packages:
   '@next/env@15.2.1':
     resolution: {integrity: sha512-JmY0qvnPuS2NCWOz2bbby3Pe0VzdAQ7XpEB6uLIHmtXNfAsAO0KLQLkuAoc42Bxbo3/jMC3dcn9cdf+piCcG2Q==}
 
-  '@next/eslint-plugin-next@15.1.5':
-    resolution: {integrity: sha512-3cCrXBybsqe94UxD6DBQCYCCiP9YohBMgZ5IzzPYHmPzj8oqNlhBii5b6o1HDDaRHdz2pVnSsAROCtrczy8O0g==}
+  '@next/eslint-plugin-next@15.2.1':
+    resolution: {integrity: sha512-6ppeToFd02z38SllzWxayLxjjNfzvc7Wm07gQOKSLjyASvKcXjNStZrLXMHuaWkhjqxe+cnhb2uzfWXm1VEj/Q==}
 
   '@next/swc-darwin-arm64@15.2.1':
     resolution: {integrity: sha512-aWXT+5KEREoy3K5AKtiKwioeblmOvFFjd+F3dVleLvvLiQ/mD//jOOuUcx5hzcO9ISSw4lrqtUPntTpK32uXXQ==}
@@ -1428,8 +1424,8 @@ packages:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
 
-  eslint-config-next@15.1.5:
-    resolution: {integrity: sha512-Awm7iUJY8toOR+fU8yTxZnA7/LyOGUGOd6cENCuDfJ3gucHOSmLdOSGJ4u+nlrs8p5qXemua42bZmq+uOzxl6Q==}
+  eslint-config-next@15.2.1:
+    resolution: {integrity: sha512-mhsprz7l0no8X+PdDnVHF4dZKu9YBJp2Rf6ztWbXBLJ4h6gxmW//owbbGJMBVUU+PibGJDAqZhW4pt8SC8HSow==}
     peerDependencies:
       eslint: ^7.23.0 || ^8.0.0 || ^9.0.0
       typescript: '>=3.3.1'
@@ -1474,27 +1470,6 @@ packages:
       eslint-import-resolver-webpack:
         optional: true
 
-  eslint-module-utils@2.8.0:
-    resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: '*'
-      eslint-import-resolver-node: '*'
-      eslint-import-resolver-typescript: '*'
-      eslint-import-resolver-webpack: '*'
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-      eslint:
-        optional: true
-      eslint-import-resolver-node:
-        optional: true
-      eslint-import-resolver-typescript:
-        optional: true
-      eslint-import-resolver-webpack:
-        optional: true
-
   eslint-plugin-import@2.31.0:
     resolution: {integrity: sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==}
     engines: {node: '>=4'}
@@ -1535,8 +1510,8 @@ packages:
     resolution: {integrity: sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  eslint@9.18.0:
-    resolution: {integrity: sha512-+waTfRWQlSbpt3KWE+CjrPPYnbq9kfZIYUqapc0uBXyjTp8aYXZDsUH16m39Ryq3NjAVP4tjuF7KaukeqoCoaA==}
+  eslint@9.21.0:
+    resolution: {integrity: sha512-KjeihdFqTPhOMXTt7StsDxriV4n66ueuF/jfPNC3j/lduHwr/ijDwJMsF+wyMJethgiKi5wniIE243vi07d3pg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     hasBin: true
     peerDependencies:
@@ -3065,28 +3040,26 @@ snapshots:
   '@esbuild/win32-x64@0.20.2':
     optional: true
 
-  '@eslint-community/eslint-utils@4.4.0(eslint@9.18.0)':
+  '@eslint-community/eslint-utils@4.4.0(eslint@9.21.0)':
     dependencies:
-      eslint: 9.18.0
+      eslint: 9.21.0
       eslint-visitor-keys: 3.4.3
 
-  '@eslint-community/regexpp@4.10.0': {}
-
   '@eslint-community/regexpp@4.12.1': {}
 
-  '@eslint/config-array@0.19.1':
+  '@eslint/config-array@0.19.2':
     dependencies:
-      '@eslint/object-schema': 2.1.5
+      '@eslint/object-schema': 2.1.6
       debug: 4.4.0
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/core@0.10.0':
+  '@eslint/core@0.12.0':
     dependencies:
       '@types/json-schema': 7.0.15
 
-  '@eslint/eslintrc@3.2.0':
+  '@eslint/eslintrc@3.3.0':
     dependencies:
       ajv: 6.12.6
       debug: 4.4.0
@@ -3100,13 +3073,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/js@9.18.0': {}
+  '@eslint/js@9.21.0': {}
 
-  '@eslint/object-schema@2.1.5': {}
+  '@eslint/object-schema@2.1.6': {}
 
-  '@eslint/plugin-kit@0.2.5':
+  '@eslint/plugin-kit@0.2.7':
     dependencies:
-      '@eslint/core': 0.10.0
+      '@eslint/core': 0.12.0
       levn: 0.4.1
 
   '@floating-ui/core@1.6.9':
@@ -3171,7 +3144,7 @@ snapshots:
 
   '@humanwhocodes/retry@0.3.1': {}
 
-  '@humanwhocodes/retry@0.4.1': {}
+  '@humanwhocodes/retry@0.4.2': {}
 
   '@img/sharp-darwin-arm64@0.33.5':
     optionalDependencies:
@@ -3284,7 +3257,7 @@ snapshots:
 
   '@next/env@15.2.1': {}
 
-  '@next/eslint-plugin-next@15.1.5':
+  '@next/eslint-plugin-next@15.2.1':
     dependencies:
       fast-glob: 3.3.1
 
@@ -3371,15 +3344,15 @@ snapshots:
     dependencies:
       csstype: 3.1.3
 
-  '@typescript-eslint/eslint-plugin@8.20.0(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.8.2))(eslint@9.18.0)(typescript@5.8.2)':
+  '@typescript-eslint/eslint-plugin@8.20.0(@typescript-eslint/parser@6.21.0(eslint@9.21.0)(typescript@5.8.2))(eslint@9.21.0)(typescript@5.8.2)':
     dependencies:
-      '@eslint-community/regexpp': 4.10.0
-      '@typescript-eslint/parser': 6.21.0(eslint@9.18.0)(typescript@5.8.2)
+      '@eslint-community/regexpp': 4.12.1
+      '@typescript-eslint/parser': 6.21.0(eslint@9.21.0)(typescript@5.8.2)
       '@typescript-eslint/scope-manager': 8.20.0
-      '@typescript-eslint/type-utils': 8.20.0(eslint@9.18.0)(typescript@5.8.2)
-      '@typescript-eslint/utils': 8.20.0(eslint@9.18.0)(typescript@5.8.2)
+      '@typescript-eslint/type-utils': 8.20.0(eslint@9.21.0)(typescript@5.8.2)
+      '@typescript-eslint/utils': 8.20.0(eslint@9.21.0)(typescript@5.8.2)
       '@typescript-eslint/visitor-keys': 8.20.0
-      eslint: 9.18.0
+      eslint: 9.21.0
       graphemer: 1.4.0
       ignore: 5.3.1
       natural-compare: 1.4.0
@@ -3388,14 +3361,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.8.2)':
+  '@typescript-eslint/parser@6.21.0(eslint@9.21.0)(typescript@5.8.2)':
     dependencies:
       '@typescript-eslint/scope-manager': 6.21.0
       '@typescript-eslint/types': 6.21.0
       '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.8.2)
       '@typescript-eslint/visitor-keys': 6.21.0
       debug: 4.4.0
-      eslint: 9.18.0
+      eslint: 9.21.0
     optionalDependencies:
       typescript: 5.8.2
     transitivePeerDependencies:
@@ -3411,12 +3384,12 @@ snapshots:
       '@typescript-eslint/types': 8.20.0
       '@typescript-eslint/visitor-keys': 8.20.0
 
-  '@typescript-eslint/type-utils@8.20.0(eslint@9.18.0)(typescript@5.8.2)':
+  '@typescript-eslint/type-utils@8.20.0(eslint@9.21.0)(typescript@5.8.2)':
     dependencies:
       '@typescript-eslint/typescript-estree': 8.20.0(typescript@5.8.2)
-      '@typescript-eslint/utils': 8.20.0(eslint@9.18.0)(typescript@5.8.2)
+      '@typescript-eslint/utils': 8.20.0(eslint@9.21.0)(typescript@5.8.2)
       debug: 4.4.0
-      eslint: 9.18.0
+      eslint: 9.21.0
       ts-api-utils: 2.0.0(typescript@5.8.2)
       typescript: 5.8.2
     transitivePeerDependencies:
@@ -3455,13 +3428,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.20.0(eslint@9.18.0)(typescript@5.8.2)':
+  '@typescript-eslint/utils@8.20.0(eslint@9.21.0)(typescript@5.8.2)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.18.0)
+      '@eslint-community/eslint-utils': 4.4.0(eslint@9.21.0)
       '@typescript-eslint/scope-manager': 8.20.0
       '@typescript-eslint/types': 8.20.0
       '@typescript-eslint/typescript-estree': 8.20.0(typescript@5.8.2)
-      eslint: 9.18.0
+      eslint: 9.21.0
       typescript: 5.8.2
     transitivePeerDependencies:
       - supports-color
@@ -4493,47 +4466,47 @@ snapshots:
 
   escape-string-regexp@4.0.0: {}
 
-  eslint-config-next@15.1.5(eslint@9.18.0)(typescript@5.8.2):
+  eslint-config-next@15.2.1(eslint@9.21.0)(typescript@5.8.2):
     dependencies:
-      '@next/eslint-plugin-next': 15.1.5
+      '@next/eslint-plugin-next': 15.2.1
       '@rushstack/eslint-patch': 1.10.5
-      '@typescript-eslint/eslint-plugin': 8.20.0(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.8.2))(eslint@9.18.0)(typescript@5.8.2)
-      '@typescript-eslint/parser': 6.21.0(eslint@9.18.0)(typescript@5.8.2)
-      eslint: 9.18.0
+      '@typescript-eslint/eslint-plugin': 8.20.0(@typescript-eslint/parser@6.21.0(eslint@9.21.0)(typescript@5.8.2))(eslint@9.21.0)(typescript@5.8.2)
+      '@typescript-eslint/parser': 6.21.0(eslint@9.21.0)(typescript@5.8.2)
+      eslint: 9.21.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@9.18.0)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.8.2))(eslint-import-resolver-typescript@3.6.1)(eslint@9.18.0)
-      eslint-plugin-jsx-a11y: 6.10.2(eslint@9.18.0)
-      eslint-plugin-react: 7.37.4(eslint@9.18.0)
-      eslint-plugin-react-hooks: 5.1.0(eslint@9.18.0)
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@9.21.0)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@9.21.0)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@9.21.0)(typescript@5.8.2))(eslint-import-resolver-typescript@3.6.1)(eslint@9.21.0)
+      eslint-plugin-jsx-a11y: 6.10.2(eslint@9.21.0)
+      eslint-plugin-react: 7.37.4(eslint@9.21.0)
+      eslint-plugin-react-hooks: 5.1.0(eslint@9.21.0)
     optionalDependencies:
       typescript: 5.8.2
     transitivePeerDependencies:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-config-prettier@10.0.1(eslint@9.18.0):
+  eslint-config-prettier@10.0.1(eslint@9.21.0):
     dependencies:
-      eslint: 9.18.0
+      eslint: 9.21.0
 
   eslint-import-resolver-node@0.3.9:
     dependencies:
       debug: 3.2.7
-      is-core-module: 2.13.1
+      is-core-module: 2.16.1
       resolve: 1.22.8
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@9.18.0):
+  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@9.21.0)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@9.21.0):
     dependencies:
       debug: 4.4.0
       enhanced-resolve: 5.15.0
-      eslint: 9.18.0
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@9.18.0)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.8.2))(eslint-import-resolver-typescript@3.6.1)(eslint@9.18.0)
+      eslint: 9.21.0
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@6.21.0(eslint@9.21.0)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@9.21.0)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@6.21.0(eslint@9.21.0)(typescript@5.8.2))(eslint-import-resolver-typescript@3.6.1)(eslint@9.21.0)
       fast-glob: 3.3.2
       get-tsconfig: 4.7.2
-      is-core-module: 2.13.1
+      is-core-module: 2.16.1
       is-glob: 4.0.3
     transitivePeerDependencies:
       - '@typescript-eslint/parser'
@@ -4541,29 +4514,18 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@9.18.0):
-    dependencies:
-      debug: 3.2.7
-    optionalDependencies:
-      '@typescript-eslint/parser': 6.21.0(eslint@9.18.0)(typescript@5.8.2)
-      eslint: 9.18.0
-      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@9.18.0)
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-module-utils@2.8.0(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@9.18.0):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@6.21.0(eslint@9.21.0)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@9.21.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
-      '@typescript-eslint/parser': 6.21.0(eslint@9.18.0)(typescript@5.8.2)
-      eslint: 9.18.0
+      '@typescript-eslint/parser': 6.21.0(eslint@9.21.0)(typescript@5.8.2)
+      eslint: 9.21.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@9.18.0)
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@9.21.0)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@9.21.0)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.8.2))(eslint-import-resolver-typescript@3.6.1)(eslint@9.18.0):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@6.21.0(eslint@9.21.0)(typescript@5.8.2))(eslint-import-resolver-typescript@3.6.1)(eslint@9.21.0):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -4572,9 +4534,9 @@ snapshots:
       array.prototype.flatmap: 1.3.3
       debug: 3.2.7
       doctrine: 2.1.0
-      eslint: 9.18.0
+      eslint: 9.21.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@6.21.0(eslint@9.18.0)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@9.18.0)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@6.21.0(eslint@9.21.0)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@9.21.0)
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
@@ -4586,13 +4548,13 @@ snapshots:
       string.prototype.trimend: 1.0.9
       tsconfig-paths: 3.15.0
     optionalDependencies:
-      '@typescript-eslint/parser': 6.21.0(eslint@9.18.0)(typescript@5.8.2)
+      '@typescript-eslint/parser': 6.21.0(eslint@9.21.0)(typescript@5.8.2)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-jsx-a11y@6.10.2(eslint@9.18.0):
+  eslint-plugin-jsx-a11y@6.10.2(eslint@9.21.0):
     dependencies:
       aria-query: 5.3.2
       array-includes: 3.1.8
@@ -4602,7 +4564,7 @@ snapshots:
       axobject-query: 4.1.0
       damerau-levenshtein: 1.0.8
       emoji-regex: 9.2.2
-      eslint: 9.18.0
+      eslint: 9.21.0
       hasown: 2.0.2
       jsx-ast-utils: 3.3.5
       language-tags: 1.0.9
@@ -4611,11 +4573,11 @@ snapshots:
       safe-regex-test: 1.1.0
       string.prototype.includes: 2.0.1
 
-  eslint-plugin-react-hooks@5.1.0(eslint@9.18.0):
+  eslint-plugin-react-hooks@5.1.0(eslint@9.21.0):
     dependencies:
-      eslint: 9.18.0
+      eslint: 9.21.0
 
-  eslint-plugin-react@7.37.4(eslint@9.18.0):
+  eslint-plugin-react@7.37.4(eslint@9.21.0):
     dependencies:
       array-includes: 3.1.8
       array.prototype.findlast: 1.2.5
@@ -4623,7 +4585,7 @@ snapshots:
       array.prototype.tosorted: 1.1.4
       doctrine: 2.1.0
       es-iterator-helpers: 1.2.1
-      eslint: 9.18.0
+      eslint: 9.21.0
       estraverse: 5.3.0
       hasown: 2.0.2
       jsx-ast-utils: 3.3.5
@@ -4646,18 +4608,18 @@ snapshots:
 
   eslint-visitor-keys@4.2.0: {}
 
-  eslint@9.18.0:
+  eslint@9.21.0:
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@9.18.0)
+      '@eslint-community/eslint-utils': 4.4.0(eslint@9.21.0)
       '@eslint-community/regexpp': 4.12.1
-      '@eslint/config-array': 0.19.1
-      '@eslint/core': 0.10.0
-      '@eslint/eslintrc': 3.2.0
-      '@eslint/js': 9.18.0
-      '@eslint/plugin-kit': 0.2.5
+      '@eslint/config-array': 0.19.2
+      '@eslint/core': 0.12.0
+      '@eslint/eslintrc': 3.3.0
+      '@eslint/js': 9.21.0
+      '@eslint/plugin-kit': 0.2.7
       '@humanfs/node': 0.16.6
       '@humanwhocodes/module-importer': 1.0.1
-      '@humanwhocodes/retry': 0.4.1
+      '@humanwhocodes/retry': 0.4.2
       '@types/estree': 1.0.6
       '@types/json-schema': 7.0.15
       ajv: 6.12.6

From f6328fa79d29cac6de86d37762b46d1e1149f3bd Mon Sep 17 00:00:00 2001
From: Maigo Erit <maigo.erit@gmail.com>
Date: Wed, 5 Mar 2025 17:44:55 +0200
Subject: [PATCH 11/15] Update Estonian translations to remove "Reacti" and use
 "React"

- Refine translations in page.json for Estonian locale
- Remove unnecessary "i" from "Reacti" throughout the document
- Maintain consistent translation style and terminology
- Update metadata, hero, benefits, and other sections with corrected React terminology
---
 messages/et/page.json | 44 +++++++++++++++++++++----------------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/messages/et/page.json b/messages/et/page.json
index dbcef4c..be65533 100644
--- a/messages/et/page.json
+++ b/messages/et/page.json
@@ -7,8 +7,8 @@
         }
     },
     "metadata": {
-        "title": "Eksperttasemel Reacti hooldus ja arendus",
-        "description": "Hoia oma Reacti rakendused sujuvalt töös pühendunud kõrgtasemel toega. Ei mingit kesktaseme meeskondi ega lisakulusid - ainult otsene juurdepääs eksperthooldusele, kui seda vajad.",
+        "title": "Eksperttasemel React hooldus ja arendus",
+        "description": "Hoia oma React rakendused sujuvalt töös pühendunud kõrgtasemel toega. Ei mingit kesktaseme meeskondi ega lisakulusid - ainult otsene juurdepääs eksperthooldusele, kui seda vajad.",
         "keywords": [
             "React",
             "Hooldus",
@@ -16,13 +16,13 @@
             "Kogenud arendaja",
             "Vigade parandused",
             "Funktsioonide uuendused",
-            "Reacti konsultatsioon",
+            "React konsultatsioon",
             "Veebiarendus",
             "Rakenduse hooldus",
             "Koodi ülevaatus"
         ],
-        "ogAlt": "Trimatech - Eksperttasemel Reacti hooldus ja arendus",
-        "twitterAlt": "Trimatech - Eksperttasemel Reacti hooldus ja arendus"
+        "ogAlt": "Trimatech - Eksperttasemel React hooldus ja arendus",
+        "twitterAlt": "Trimatech - Eksperttasemel React hooldus ja arendus"
     },
     "navLinks": {
         "signIn": "Logi sisse",
@@ -38,17 +38,17 @@
         "language": "Keel"
     },
     "hero": {
-        "heading": "Eksperttasemel Reacti hooldus ja arendus",
-        "description": "Hoia oma Reacti rakendused sujuvalt töös pühendunud kõrgtasemel toega. Ei mingit kesktaseme meeskondi ega lisakulusid - ainult otsene juurdepääs eksperthooldusele, kui seda vajad.",
+        "heading": "Eksperttasemel React hooldus ja arendus",
+        "description": "Hoia oma React rakendused sujuvalt töös pühendunud kõrgtasemel toega. Ei mingit kesktaseme meeskondi ega lisakulusid - ainult otsene juurdepääs eksperthooldusele, kui seda vajad.",
         "euBased": "EL-põhine",
-        "mission": "Missioon: Muuta kõik Reacti rakendused kiireks, kaasaegseks ja kasutajasõbralikuks"
+        "mission": "Missioon: Muuta kõik React rakendused kiireks, kaasaegseks ja kasutajasõbralikuks"
     },
     "benefits": {
         "heading": "Eelised",
         "items": {
             "maintenance": {
                 "title": "Pühendunud hooldus sinu olemasolevatele projektidele",
-                "description": "Pole vaja täismeeskonda - üks kogenud arendaja keskendub sinu Reacti rakenduse jõudluse ja ajakohasuse tagamisele."
+                "description": "Pole vaja täismeeskonda - üks kogenud arendaja keskendub sinu React rakenduse jõudluse ja ajakohasuse tagamisele."
             },
             "bugFixes": {
                 "title": "Kiire reageerimine vigade parandamiseks ja uuendusteks",
@@ -56,7 +56,7 @@
             },
             "upgrade": {
                 "title": "Uuenda ja täiusta oma rakendust",
-                "description": "Lisa sujuvalt uusi funktsioone ja uuenda teeke, et kasutada uusimaid Reacti võimalusi ilma töövoolu häirimata."
+                "description": "Lisa sujuvalt uusi funktsioone ja uuenda teeke, et kasutada uusimaid React võimalusi ilma töövoolu häirimata."
             },
             "communication": {
                 "title": "Optimeeritud piletipõhine suhtlus",
@@ -66,14 +66,14 @@
     },
     "introCallCard": {
         "ownerName": "Maigo Erit",
-        "ownerTitle": "Omanik ja Reacti ekspert",
+        "ownerTitle": "Omanik ja React ekspert",
         "bookIntroCall": "Broneeri 15-minutiline tutvumiskõne",
         "bookCallButton": "Broneeri kõne",
         "preferEmail": "Eelistad e-posti?"
     },
     "pricing": {
         "heading": "Lihtne ja läbipaistev hinnastamine",
-        "description": "Üks põhjalik plaan kõigi sinu Reacti hooldusvajadustele.",
+        "description": "Üks põhjalik plaan kõigi sinu React hooldusvajadustele.",
         "options": {
             "fullTime": {
                 "title": "Täiskohaga kogenud arendaja palkamine",
@@ -90,7 +90,7 @@
     "priceItem": {
         "title": "Kuuklubi",
         "perMonth": "/ kuu",
-        "subtitle": "Reacti arendus ja hooldus kogenud arendaja poolt",
+        "subtitle": "React arendus ja hooldus kogenud arendaja poolt",
         "features": [
             "Üks ülesanne korraga täieliku keskendumise tagamiseks",
             "Uued ülesanded algavad ~48 tunni jooksul pärast eelmise lõpetamist",
@@ -117,12 +117,12 @@
             },
             "focusedManagement": {
                 "title": "Fokuseeritud juhtimine",
-                "description": "Kasuta oma aega ja ressursse tõhusalt, omades siiski juurdepääsu kvaliteetsele Reacti hooldusele, kui seda vajad."
+                "description": "Kasuta oma aega ja ressursse tõhusalt, omades siiski juurdepääsu kvaliteetsele React hooldusele, kui seda vajad."
             }
         },
         "try": {
             "title": "Proovi nädal aega",
-            "text1": "€{weekPrice} eest koge kõrgtasemel Reacti hoolduse väärtust esimese nädala jooksul.",
+            "text1": "€{weekPrice} eest koge kõrgtasemel React hoolduse väärtust esimese nädala jooksul.",
             "text2": "Ühe nädala jooksul võiksid kas:",
             "fix": {
                 "title": "Parandada",
@@ -173,13 +173,13 @@
             {
                 "title": "Ryan Harris, Control NQP",
                 "avatar": "/testimonials/control.jpg",
-                "content": "Pärast Reacti töölauarakenduse käivitamist mõistsime, et vajame abi selle korras hoidmiseks. Maigo on teinud suure erinevuse - uuendused, parandused, jõudluse täiustused - kõik on hoolitsetud! Ma saan tegelikult keskenduda kasutajakogemuse parandamisele, mitte muretsemisele!"
+                "content": "Pärast React töölauarakenduse käivitamist mõistsime, et vajame abi selle korras hoidmiseks. Maigo on teinud suure erinevuse - uuendused, parandused, jõudluse täiustused - kõik on hoolitsetud! Ma saan tegelikult keskenduda kasutajakogemuse parandamisele, mitte muretsemisele!"
             }
         ]
     },
     "discuss": {
         "heading": "Arutame sinu projekti",
-        "description": "Planeeri kiire kõne, et arutada oma Reacti hooldusvajadusi ja näha, kas sobime hästi kokku."
+        "description": "Planeeri kiire kõne, et arutada oma React hooldusvajadusi ja näha, kas sobime hästi kokku."
     },
     "comparePricing": {
         "heading": "Kuidas see võrdlub?",
@@ -200,7 +200,7 @@
             "withSubscription": "Meie tellimusega:",
             "subscriptionCost": {
                 "title": "Kulu",
-                "text": "~50% säästu võrreldes täiskohaga kogenud Reacti arendajaga."
+                "text": "~50% säästu võrreldes täiskohaga kogenud React arendajaga."
             },
             "flexibility": {
                 "title": "Paindlikkus",
@@ -244,7 +244,7 @@
             },
             "expertise": {
                 "title": "Otsene oskusteave",
-                "text": "Tööd teeb ainult kogenud Reacti arendaja - ei mingeid noorarendajaid ega paisutatud hinnanguid."
+                "text": "Tööd teeb ainult kogenud React arendaja - ei mingeid noorarendajaid ega paisutatud hinnanguid."
             },
             "communication": {
                 "title": "Optimeeritud suhtlus",
@@ -271,7 +271,7 @@
             },
             "expertise": {
                 "title": "Eksklusiivne oskusteave",
-                "text": "Tööd teeb kogenud Reacti arendaja, kes pakub pühendunud tähelepanu sinu vajadustele - ei mingeid noorarendajaid, keskastme juhtimist ega kompromisse kvaliteedi osas."
+                "text": "Tööd teeb kogenud React arendaja, kes pakub pühendunud tähelepanu sinu vajadustele - ei mingeid noorarendajaid, keskastme juhtimist ega kompromisse kvaliteedi osas."
             },
             "efficiency": {
                 "title": "Tõhusus läbi tehisintellekti ja kaasaegsete praktikate",
@@ -292,11 +292,11 @@
     },
     "faq": {
         "heading": "Korduma kippuvad küsimused",
-        "description": "Planeeri kiire kõne, et arutada oma Reacti hooldusvajadusi ja näha, kas sobime hästi kokku.",
+        "description": "Planeeri kiire kõne, et arutada oma React hooldusvajadusi ja näha, kas sobime hästi kokku.",
         "items": [
             {
                 "title": "Milliseid projekte te hooldate?",
-                "text": "Me spetsialiseerume olemasolevate Reacti rakenduste hooldamisele ja uuendamisele, tagades, et need jäävad tugevaks ja tõhusaks."
+                "text": "Me spetsialiseerume olemasolevate React rakenduste hooldamisele ja uuendamisele, tagades, et need jäävad tugevaks ja tõhusaks."
             },
             {
                 "title": "Kas te ainult hooldate olemasolevaid projekte?",

From 9152f08b99a9aff1c74562d6dd66797443b32680 Mon Sep 17 00:00:00 2001
From: Maigo Erit <maigo.erit@gmail.com>
Date: Wed, 5 Mar 2025 17:47:22 +0200
Subject: [PATCH 12/15] Update Estonian translation for owner title in
 page.json

- Refine owner title translation in Estonian locale
- Modify "&" symbol usage in owner title
- Maintain consistent translation style for introCallCard section
---
 messages/et/page.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/messages/et/page.json b/messages/et/page.json
index be65533..117e8ef 100644
--- a/messages/et/page.json
+++ b/messages/et/page.json
@@ -66,7 +66,7 @@
     },
     "introCallCard": {
         "ownerName": "Maigo Erit",
-        "ownerTitle": "Omanik ja React ekspert",
+        "ownerTitle": "Omanik & React ekspert",
         "bookIntroCall": "Broneeri 15-minutiline tutvumiskõne",
         "bookCallButton": "Broneeri kõne",
         "preferEmail": "Eelistad e-posti?"

From bea19c25dfcff2623e7832acc22011949e1a143b Mon Sep 17 00:00:00 2001
From: Maigo Erit <maigo.erit@gmail.com>
Date: Wed, 5 Mar 2025 21:01:24 +0200
Subject: [PATCH 13/15] Refactor LanguageSwitcher and IntroCallCard components

- Update LanguageSwitcher to use custom Button component and improve locale switching
- Modify IntroCallCard heading with adjusted line height
- Update Estonian translations with minor text refinements
---
 app/[locale]/components/IntroCallCard.tsx |  2 +-
 components/LanguageSwitcher.tsx           | 31 +++++++++++++----------
 messages/et/page.json                     | 24 +++++++++---------
 3 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/app/[locale]/components/IntroCallCard.tsx b/app/[locale]/components/IntroCallCard.tsx
index 10ad5d7..9822619 100644
--- a/app/[locale]/components/IntroCallCard.tsx
+++ b/app/[locale]/components/IntroCallCard.tsx
@@ -50,7 +50,7 @@ export const IntroCallCard = () => {
                         {t('ownerTitle')}
                     </Heading>
                 </Box>
-                <Heading fontSize="3xl" width="210px">
+                <Heading fontSize="3xl" lineHeight="1.3">
                     {t('bookIntroCall')}
                 </Heading>
                 <NextLink href="#book">
diff --git a/components/LanguageSwitcher.tsx b/components/LanguageSwitcher.tsx
index d66f02d..fca6e30 100644
--- a/components/LanguageSwitcher.tsx
+++ b/components/LanguageSwitcher.tsx
@@ -2,9 +2,10 @@
 
 import { usePathname, useRouter } from '@/i18n/routing';
 import { locales } from '@/i18n/settings';
-import { Button, Flex } from '@chakra-ui/react';
+import { Flex, Text } from '@chakra-ui/react';
 import { useLocale } from 'next-intl';
 import { useTransition } from 'react';
+import { Button } from './ui/button';
 
 export default function LanguageSwitcher() {
     const [isPending, startTransition] = useTransition();
@@ -14,24 +15,26 @@ export default function LanguageSwitcher() {
 
     const handleLocaleChange = (newLocale: (typeof locales)[number]) => {
         startTransition(() => {
-            // Navigate to the same page with the new locale
             router.replace(pathname, { locale: newLocale });
         });
     };
 
     return (
-        <Flex gap={2}>
-            {locales.map((l) => (
-                <Button
-                    key={l}
-                    size="sm"
-                    variant={l === locale ? 'solid' : 'ghost'}
-                    disabled={isPending || l === locale}
-                    onClick={() => handleLocaleChange(l)}
-                >
-                    {l.toUpperCase()}
-                </Button>
-            ))}
+        <Flex>
+            {locales.map((l) => {
+                const isActive = l === locale;
+                return (
+                    <Button
+                        size="sm"
+                        variant="ghost"
+                        colorPalette="blue"
+                        disabled={isPending}
+                        onClick={() => handleLocaleChange(l)}
+                    >
+                        <Text textDecoration={isActive ? 'underline' : 'none'}>{l.toUpperCase()}</Text>
+                    </Button>
+                );
+            })}
         </Flex>
     );
 }
diff --git a/messages/et/page.json b/messages/et/page.json
index 117e8ef..cbbd04d 100644
--- a/messages/et/page.json
+++ b/messages/et/page.json
@@ -8,7 +8,7 @@
     },
     "metadata": {
         "title": "Eksperttasemel React hooldus ja arendus",
-        "description": "Hoia oma React rakendused sujuvalt töös pühendunud kõrgtasemel toega. Ei mingit kesktaseme meeskondi ega lisakulusid - ainult otsene juurdepääs eksperthooldusele, kui seda vajad.",
+        "description": "Hoia oma React rakendused sujuvalt töös pühendunud kõrgtasemel toega. Ei mingeid kesktaseme meeskondi ega lisakulusid - ainult otsene juurdepääs eksperthooldusele, kui seda vajad.",
         "keywords": [
             "React",
             "Hooldus",
@@ -38,8 +38,8 @@
         "language": "Keel"
     },
     "hero": {
-        "heading": "Eksperttasemel React hooldus ja arendus",
-        "description": "Hoia oma React rakendused sujuvalt töös pühendunud kõrgtasemel toega. Ei mingit kesktaseme meeskondi ega lisakulusid - ainult otsene juurdepääs eksperthooldusele, kui seda vajad.",
+        "heading": "React ekspert - hooldus ja arendus",
+        "description": "Hoia oma React rakendused sujuvas töös tipptasemel toega. Unusta keskpärased meeskonnad ja peidetud kulud - saad otse eksperdi abi, kui seda vajad.",
         "euBased": "EL-põhine",
         "mission": "Missioon: Muuta kõik React rakendused kiireks, kaasaegseks ja kasutajasõbralikuks"
     },
@@ -47,11 +47,11 @@
         "heading": "Eelised",
         "items": {
             "maintenance": {
-                "title": "Pühendunud hooldus sinu olemasolevatele projektidele",
+                "title": "Pühendunud hooldus sinu praegustele projektidele",
                 "description": "Pole vaja täismeeskonda - üks kogenud arendaja keskendub sinu React rakenduse jõudluse ja ajakohasuse tagamisele."
             },
             "bugFixes": {
-                "title": "Kiire reageerimine vigade parandamiseks ja uuendusteks",
+                "title": "Kiire reageerimine vigade parandustele ja uuendustele",
                 "description": "Kiire reageerimine vigade parandamiseks ja funktsioonide taotlustele, alustades 48 tunni jooksul. Hoia oma rakendus optimaalselt töös!"
             },
             "upgrade": {
@@ -67,13 +67,13 @@
     "introCallCard": {
         "ownerName": "Maigo Erit",
         "ownerTitle": "Omanik & React ekspert",
-        "bookIntroCall": "Broneeri 15-minutiline tutvumiskõne",
+        "bookIntroCall": "Broneeri 15 min tutvumiskõne",
         "bookCallButton": "Broneeri kõne",
         "preferEmail": "Eelistad e-posti?"
     },
     "pricing": {
         "heading": "Lihtne ja läbipaistev hinnastamine",
-        "description": "Üks põhjalik plaan kõigi sinu React hooldusvajadustele.",
+        "description": "Üks põhjalik plaan kõigi sinu React arendusvajadustele.",
         "options": {
             "fullTime": {
                 "title": "Täiskohaga kogenud arendaja palkamine",
@@ -88,11 +88,11 @@
         }
     },
     "priceItem": {
-        "title": "Kuuklubi",
+        "title": "Igakuine Klubi",
         "perMonth": "/ kuu",
         "subtitle": "React arendus ja hooldus kogenud arendaja poolt",
         "features": [
-            "Üks ülesanne korraga täieliku keskendumise tagamiseks",
+            "Üks ülesanne korraga, et tagada täielik keskendumine",
             "Uued ülesanded algavad ~48 tunni jooksul pärast eelmise lõpetamist",
             "Piiramatu arv projekte hallatakse ühe ühtse tööjärjekorra all",
             "Otsene suhtlus arendajaga, kes töötab sinu ülesannetega",
@@ -104,12 +104,12 @@
     "pauseTry": {
         "pause": {
             "title": "Peata igal ajal",
-            "text1": "Kui sinu projektides pole enam tööd teha, peata lihtsalt oma tellimus. Jätkamine on lihtne ja sinu plaan jätkub täpselt sealt, kus pooleli jäi, tagades, et ei lähe kaotsi edasiminek ega tekiks järjepidevuse lünki.",
+            "text1": "Kui su projektides pole hetkel tööd teha, peata lihtsalt tellimus. Jätkamine on lihtne ja sinu plaan jätkub täpselt sealt, kus pooleli jäi, tagades, et ei lähe kaotsi edasiminek ega tekiks järjepidevuse lünki.",
             "text2": "See paindlikkus on oluline eelarve tõhusaks haldamiseks, eriti seisakuperioodidel.",
             "benefits": "Eelised on:",
             "noCommitment": {
                 "title": "Kohustuste puudumine",
-                "description": "Peata hõlpsasti, kui vaja, ilma rahaliste karistusteta."
+                "description": "Peata tellimus igal ajal ilma lisakuludeta."
             },
             "stayOnTrack": {
                 "title": "Püsi rajal",
@@ -288,7 +288,7 @@
         "goToSection": "Mine sihtjaotiseni"
     },
     "techScroll": {
-        "heading": "Tehnoloogia stack"
+        "heading": "Kasutatavad tehnoloogiad"
     },
     "faq": {
         "heading": "Korduma kippuvad küsimused",

From 04bb29f5fa64a672aff6ce6508bda50fdde40720 Mon Sep 17 00:00:00 2001
From: Maigo Erit <maigo.erit@gmail.com>
Date: Wed, 5 Mar 2025 23:05:19 +0200
Subject: [PATCH 14/15] Restructure project layout and routing configuration

- Remove [locale] directory and consolidate routes in root app directory
- Modify middleware and routing configuration to support locales without prefix
- Update HeaderNavbar to remove LanguageSwitcher component
- Add various animation components for different sections
- Refactor page structure to improve overall application layout
---
 app/[locale]/layout.tsx                       | 123 ------------------
 app/[locale]/page.tsx                         |  28 ----
 app/{[locale] => }/components/Benefits.tsx    |   0
 app/{[locale] => }/components/Carousel.tsx    |   0
 .../components/ComparePricing.tsx             |   0
 app/{[locale] => }/components/Discuss.tsx     |   0
 app/{[locale] => }/components/Faq.tsx         |   0
 .../components/GridBackground.tsx             |   0
 app/{[locale] => }/components/Hero.tsx        |   0
 .../components/IntroCallCard.tsx              |   0
 app/{[locale] => }/components/PauseTry.tsx    |   0
 .../components/PriceForOthers.tsx             |   0
 app/{[locale] => }/components/PriceItem.tsx   |   0
 .../components/PriceItemButton.tsx            |   0
 app/{[locale] => }/components/Pricing.tsx     |   0
 .../components/ScollToAnchorOnPageLoad.tsx    |   0
 app/{[locale] => }/components/TechScroll.tsx  |   0
 .../components/TechScrollingLogos.tsx         |   0
 .../components/Testimonials.tsx               |   0
 .../animations/Abstract-Waves-Circles2.json   |   0
 .../components/animations/AbstractBg.tsx      |   0
 .../animations/AdaptiveInterface.tsx          |   0
 .../animations/BusinessAgreement.tsx          |   0
 .../components/animations/BusinessValue.tsx   |   0
 .../animations/CommunicationImage.tsx         |   0
 .../components/animations/CompanyImage.tsx    |   0
 .../animations/CustomerAssistance.tsx         |   0
 .../animations/CustomerReceivingEmail.tsx     |   0
 .../animations/DedicatedMaintananceImage.tsx  |   0
 .../animations/DeveloperCommunications.tsx    |   0
 .../components/animations/DiscussImage.tsx    |   0
 .../components/animations/EmployeeImage.tsx   |   0
 .../components/animations/HeroImage.tsx       |   0
 .../components/animations/ManWorking.tsx      |   0
 .../components/animations/MoneyValueImage.tsx |   0
 .../animations/OnlineVideoChatting.tsx        |   0
 .../components/animations/PricingImage.tsx    |   0
 .../components/animations/Questions.tsx       |   0
 .../components/animations/TurnaroundImage.tsx |   0
 .../components/animations/UpgradeImage.tsx    |   0
 .../components/animations/WebDevelopment.tsx  |   0
 .../components/animations/WorkingHome.tsx     |   0
 .../animations/adaptive-interface.json        |   0
 .../animations/business-agreement.json        |   0
 .../components/animations/business-value.json |   0
 .../components/animations/communication.json  |   0
 .../components/animations/company.json        |   0
 .../animations/customer-assistance.json       |   0
 .../animations/customer-receiving-email2.json |   0
 .../animations/dedicated-maintenance.json     |   0
 .../animations/developer-communications.json  |   0
 .../components/animations/discuss.json        |   0
 .../components/animations/employee.json       |   0
 .../animations/financial-innovation.json      |   0
 .../components/animations/hero-animation.json |   0
 .../components/animations/man-working.json    |   0
 .../components/animations/money-value.json    |   0
 .../animations/online-video-chatting.json     |   0
 .../components/animations/pricing.json        |   0
 .../components/animations/questions.json      |   0
 .../components/animations/turnaround.json     |   0
 .../components/animations/upgrade.json        |   0
 .../animations/web-development.json           |   0
 .../components/animations/working-home.json   |   0
 app/layout.tsx                                | 105 ++++++++++++++-
 app/not-found.tsx                             |  17 ---
 app/page.tsx                                  |  30 ++++-
 components/Header/HeaderNavbar.tsx            |   3 -
 i18n/routing.ts                               |   1 +
 middleware.ts                                 |  37 +++---
 70 files changed, 147 insertions(+), 197 deletions(-)
 delete mode 100644 app/[locale]/layout.tsx
 delete mode 100644 app/[locale]/page.tsx
 rename app/{[locale] => }/components/Benefits.tsx (100%)
 rename app/{[locale] => }/components/Carousel.tsx (100%)
 rename app/{[locale] => }/components/ComparePricing.tsx (100%)
 rename app/{[locale] => }/components/Discuss.tsx (100%)
 rename app/{[locale] => }/components/Faq.tsx (100%)
 rename app/{[locale] => }/components/GridBackground.tsx (100%)
 rename app/{[locale] => }/components/Hero.tsx (100%)
 rename app/{[locale] => }/components/IntroCallCard.tsx (100%)
 rename app/{[locale] => }/components/PauseTry.tsx (100%)
 rename app/{[locale] => }/components/PriceForOthers.tsx (100%)
 rename app/{[locale] => }/components/PriceItem.tsx (100%)
 rename app/{[locale] => }/components/PriceItemButton.tsx (100%)
 rename app/{[locale] => }/components/Pricing.tsx (100%)
 rename app/{[locale] => }/components/ScollToAnchorOnPageLoad.tsx (100%)
 rename app/{[locale] => }/components/TechScroll.tsx (100%)
 rename app/{[locale] => }/components/TechScrollingLogos.tsx (100%)
 rename app/{[locale] => }/components/Testimonials.tsx (100%)
 rename app/{[locale] => }/components/animations/Abstract-Waves-Circles2.json (100%)
 rename app/{[locale] => }/components/animations/AbstractBg.tsx (100%)
 rename app/{[locale] => }/components/animations/AdaptiveInterface.tsx (100%)
 rename app/{[locale] => }/components/animations/BusinessAgreement.tsx (100%)
 rename app/{[locale] => }/components/animations/BusinessValue.tsx (100%)
 rename app/{[locale] => }/components/animations/CommunicationImage.tsx (100%)
 rename app/{[locale] => }/components/animations/CompanyImage.tsx (100%)
 rename app/{[locale] => }/components/animations/CustomerAssistance.tsx (100%)
 rename app/{[locale] => }/components/animations/CustomerReceivingEmail.tsx (100%)
 rename app/{[locale] => }/components/animations/DedicatedMaintananceImage.tsx (100%)
 rename app/{[locale] => }/components/animations/DeveloperCommunications.tsx (100%)
 rename app/{[locale] => }/components/animations/DiscussImage.tsx (100%)
 rename app/{[locale] => }/components/animations/EmployeeImage.tsx (100%)
 rename app/{[locale] => }/components/animations/HeroImage.tsx (100%)
 rename app/{[locale] => }/components/animations/ManWorking.tsx (100%)
 rename app/{[locale] => }/components/animations/MoneyValueImage.tsx (100%)
 rename app/{[locale] => }/components/animations/OnlineVideoChatting.tsx (100%)
 rename app/{[locale] => }/components/animations/PricingImage.tsx (100%)
 rename app/{[locale] => }/components/animations/Questions.tsx (100%)
 rename app/{[locale] => }/components/animations/TurnaroundImage.tsx (100%)
 rename app/{[locale] => }/components/animations/UpgradeImage.tsx (100%)
 rename app/{[locale] => }/components/animations/WebDevelopment.tsx (100%)
 rename app/{[locale] => }/components/animations/WorkingHome.tsx (100%)
 rename app/{[locale] => }/components/animations/adaptive-interface.json (100%)
 rename app/{[locale] => }/components/animations/business-agreement.json (100%)
 rename app/{[locale] => }/components/animations/business-value.json (100%)
 rename app/{[locale] => }/components/animations/communication.json (100%)
 rename app/{[locale] => }/components/animations/company.json (100%)
 rename app/{[locale] => }/components/animations/customer-assistance.json (100%)
 rename app/{[locale] => }/components/animations/customer-receiving-email2.json (100%)
 rename app/{[locale] => }/components/animations/dedicated-maintenance.json (100%)
 rename app/{[locale] => }/components/animations/developer-communications.json (100%)
 rename app/{[locale] => }/components/animations/discuss.json (100%)
 rename app/{[locale] => }/components/animations/employee.json (100%)
 rename app/{[locale] => }/components/animations/financial-innovation.json (100%)
 rename app/{[locale] => }/components/animations/hero-animation.json (100%)
 rename app/{[locale] => }/components/animations/man-working.json (100%)
 rename app/{[locale] => }/components/animations/money-value.json (100%)
 rename app/{[locale] => }/components/animations/online-video-chatting.json (100%)
 rename app/{[locale] => }/components/animations/pricing.json (100%)
 rename app/{[locale] => }/components/animations/questions.json (100%)
 rename app/{[locale] => }/components/animations/turnaround.json (100%)
 rename app/{[locale] => }/components/animations/upgrade.json (100%)
 rename app/{[locale] => }/components/animations/web-development.json (100%)
 rename app/{[locale] => }/components/animations/working-home.json (100%)
 delete mode 100644 app/not-found.tsx

diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
deleted file mode 100644
index 1d51ecc..0000000
--- a/app/[locale]/layout.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import { Footer } from '@/components/Header/Footer';
-import { HeaderNavbar } from '@/components/Header/HeaderNavbar';
-import { routing } from '@/i18n/routing';
-import { getURL } from '@/utils/helpers';
-import { Box } from '@chakra-ui/react';
-import { Metadata } from 'next';
-import { NextIntlClientProvider } from 'next-intl';
-import { getMessages, setRequestLocale } from 'next-intl/server';
-import { notFound } from 'next/navigation';
-import { ReactNode } from 'react';
-
-const meta = {
-    title: 'Expert React Maintenance & Development',
-    description:
-        'Keep your React applications running smoothly with dedicated senior level support. No mid-level teams, no overhead - just direct access to expert maintenance when you need it.',
-    cardImage: '/og.png',
-    robots: 'follow, index',
-    favicon: '/favicon.ico',
-    url: getURL()
-};
-
-type MetadataTranslation = {
-    title: string;
-    description: string;
-    keywords: string[];
-    ogAlt: string;
-    twitterAlt: string;
-};
-
-export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise<Metadata> {
-    const messages = await getMessages();
-    const metadata = (messages as unknown as { metadata: MetadataTranslation }).metadata;
-    const { locale } = await params;
-
-    return {
-        title: metadata.title,
-        description: metadata.description,
-        referrer: 'origin-when-cross-origin',
-        keywords: metadata.keywords,
-        authors: [
-            { name: 'Trimatech', url: 'https://trimatech.dev/' },
-            { name: 'Maigo Erit', url: 'https://trimatech.dev/' }
-        ],
-        creator: 'Trimatech',
-        publisher: 'Trimatech',
-        robots: meta.robots,
-        icons: {
-            icon: meta.favicon,
-            apple: [{ url: '/apple-icon.png' }]
-        },
-        metadataBase: new URL(meta.url),
-        alternates: {
-            canonical: '/'
-        },
-        openGraph: {
-            url: meta.url,
-            title: metadata.title,
-            description: metadata.description,
-            images: [
-                {
-                    url: meta.cardImage,
-                    width: 1200,
-                    height: 630,
-                    alt: metadata.ogAlt
-                }
-            ],
-            type: 'website',
-            siteName: metadata.title,
-            locale: locale === 'et' ? 'et_EE' : 'en_US'
-        },
-        twitter: {
-            card: 'summary_large_image',
-            site: '@Trimatech',
-            creator: '@Trimatech',
-            title: metadata.title,
-            description: metadata.description,
-            images: [
-                {
-                    url: meta.cardImage,
-                    alt: metadata.twitterAlt
-                }
-            ]
-        }
-    };
-}
-
-export function generateStaticParams() {
-    return routing.locales.map((locale) => ({ locale }));
-}
-
-type Props = {
-    children: ReactNode;
-    params: Promise<{ locale: string }>;
-};
-
-export default async function LocaleLayout({ children, params }: Props) {
-    const { locale } = await params;
-
-    // Ensure that the incoming `locale` is valid
-    if (!routing.locales.includes(locale as any)) {
-        notFound();
-    }
-
-    // Enable static rendering for this locale
-    setRequestLocale(locale);
-
-    // Get messages for this locale
-    const messages = await getMessages();
-
-    return (
-        <NextIntlClientProvider messages={messages}>
-            <Box>
-                <Box maxW="1440px" mx="auto" px={[0, 2, 4]}>
-                    <HeaderNavbar />
-
-                    {children}
-
-                    <Footer />
-                </Box>
-            </Box>
-        </NextIntlClientProvider>
-    );
-}
diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
deleted file mode 100644
index a49fec3..0000000
--- a/app/[locale]/page.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Flex } from '@chakra-ui/react';
-import { Benefits } from './components/Benefits';
-import { ComparePricing } from './components/ComparePricing';
-import { Discuss } from './components/Discuss';
-import { Faq } from './components/Faq';
-import { Hero } from './components/Hero';
-import { PauseTry } from './components/PauseTry';
-import { Pricing } from './components/Pricing';
-import { ScrollToAnchorOnPageLoad } from './components/ScollToAnchorOnPageLoad';
-import { TechScroll } from './components/TechScroll';
-import { Testimonials } from './components/Testimonials';
-
-export default async function HomePage() {
-    return (
-        <Flex flexDirection="column" gap={[4, 6, 6, 6, 10]}>
-            <Hero />
-            <Benefits />
-            <TechScroll />
-            <Pricing />
-            <PauseTry />
-            <ComparePricing />
-            <Faq />
-            <Testimonials />
-            <Discuss />
-            <ScrollToAnchorOnPageLoad />
-        </Flex>
-    );
-}
diff --git a/app/[locale]/components/Benefits.tsx b/app/components/Benefits.tsx
similarity index 100%
rename from app/[locale]/components/Benefits.tsx
rename to app/components/Benefits.tsx
diff --git a/app/[locale]/components/Carousel.tsx b/app/components/Carousel.tsx
similarity index 100%
rename from app/[locale]/components/Carousel.tsx
rename to app/components/Carousel.tsx
diff --git a/app/[locale]/components/ComparePricing.tsx b/app/components/ComparePricing.tsx
similarity index 100%
rename from app/[locale]/components/ComparePricing.tsx
rename to app/components/ComparePricing.tsx
diff --git a/app/[locale]/components/Discuss.tsx b/app/components/Discuss.tsx
similarity index 100%
rename from app/[locale]/components/Discuss.tsx
rename to app/components/Discuss.tsx
diff --git a/app/[locale]/components/Faq.tsx b/app/components/Faq.tsx
similarity index 100%
rename from app/[locale]/components/Faq.tsx
rename to app/components/Faq.tsx
diff --git a/app/[locale]/components/GridBackground.tsx b/app/components/GridBackground.tsx
similarity index 100%
rename from app/[locale]/components/GridBackground.tsx
rename to app/components/GridBackground.tsx
diff --git a/app/[locale]/components/Hero.tsx b/app/components/Hero.tsx
similarity index 100%
rename from app/[locale]/components/Hero.tsx
rename to app/components/Hero.tsx
diff --git a/app/[locale]/components/IntroCallCard.tsx b/app/components/IntroCallCard.tsx
similarity index 100%
rename from app/[locale]/components/IntroCallCard.tsx
rename to app/components/IntroCallCard.tsx
diff --git a/app/[locale]/components/PauseTry.tsx b/app/components/PauseTry.tsx
similarity index 100%
rename from app/[locale]/components/PauseTry.tsx
rename to app/components/PauseTry.tsx
diff --git a/app/[locale]/components/PriceForOthers.tsx b/app/components/PriceForOthers.tsx
similarity index 100%
rename from app/[locale]/components/PriceForOthers.tsx
rename to app/components/PriceForOthers.tsx
diff --git a/app/[locale]/components/PriceItem.tsx b/app/components/PriceItem.tsx
similarity index 100%
rename from app/[locale]/components/PriceItem.tsx
rename to app/components/PriceItem.tsx
diff --git a/app/[locale]/components/PriceItemButton.tsx b/app/components/PriceItemButton.tsx
similarity index 100%
rename from app/[locale]/components/PriceItemButton.tsx
rename to app/components/PriceItemButton.tsx
diff --git a/app/[locale]/components/Pricing.tsx b/app/components/Pricing.tsx
similarity index 100%
rename from app/[locale]/components/Pricing.tsx
rename to app/components/Pricing.tsx
diff --git a/app/[locale]/components/ScollToAnchorOnPageLoad.tsx b/app/components/ScollToAnchorOnPageLoad.tsx
similarity index 100%
rename from app/[locale]/components/ScollToAnchorOnPageLoad.tsx
rename to app/components/ScollToAnchorOnPageLoad.tsx
diff --git a/app/[locale]/components/TechScroll.tsx b/app/components/TechScroll.tsx
similarity index 100%
rename from app/[locale]/components/TechScroll.tsx
rename to app/components/TechScroll.tsx
diff --git a/app/[locale]/components/TechScrollingLogos.tsx b/app/components/TechScrollingLogos.tsx
similarity index 100%
rename from app/[locale]/components/TechScrollingLogos.tsx
rename to app/components/TechScrollingLogos.tsx
diff --git a/app/[locale]/components/Testimonials.tsx b/app/components/Testimonials.tsx
similarity index 100%
rename from app/[locale]/components/Testimonials.tsx
rename to app/components/Testimonials.tsx
diff --git a/app/[locale]/components/animations/Abstract-Waves-Circles2.json b/app/components/animations/Abstract-Waves-Circles2.json
similarity index 100%
rename from app/[locale]/components/animations/Abstract-Waves-Circles2.json
rename to app/components/animations/Abstract-Waves-Circles2.json
diff --git a/app/[locale]/components/animations/AbstractBg.tsx b/app/components/animations/AbstractBg.tsx
similarity index 100%
rename from app/[locale]/components/animations/AbstractBg.tsx
rename to app/components/animations/AbstractBg.tsx
diff --git a/app/[locale]/components/animations/AdaptiveInterface.tsx b/app/components/animations/AdaptiveInterface.tsx
similarity index 100%
rename from app/[locale]/components/animations/AdaptiveInterface.tsx
rename to app/components/animations/AdaptiveInterface.tsx
diff --git a/app/[locale]/components/animations/BusinessAgreement.tsx b/app/components/animations/BusinessAgreement.tsx
similarity index 100%
rename from app/[locale]/components/animations/BusinessAgreement.tsx
rename to app/components/animations/BusinessAgreement.tsx
diff --git a/app/[locale]/components/animations/BusinessValue.tsx b/app/components/animations/BusinessValue.tsx
similarity index 100%
rename from app/[locale]/components/animations/BusinessValue.tsx
rename to app/components/animations/BusinessValue.tsx
diff --git a/app/[locale]/components/animations/CommunicationImage.tsx b/app/components/animations/CommunicationImage.tsx
similarity index 100%
rename from app/[locale]/components/animations/CommunicationImage.tsx
rename to app/components/animations/CommunicationImage.tsx
diff --git a/app/[locale]/components/animations/CompanyImage.tsx b/app/components/animations/CompanyImage.tsx
similarity index 100%
rename from app/[locale]/components/animations/CompanyImage.tsx
rename to app/components/animations/CompanyImage.tsx
diff --git a/app/[locale]/components/animations/CustomerAssistance.tsx b/app/components/animations/CustomerAssistance.tsx
similarity index 100%
rename from app/[locale]/components/animations/CustomerAssistance.tsx
rename to app/components/animations/CustomerAssistance.tsx
diff --git a/app/[locale]/components/animations/CustomerReceivingEmail.tsx b/app/components/animations/CustomerReceivingEmail.tsx
similarity index 100%
rename from app/[locale]/components/animations/CustomerReceivingEmail.tsx
rename to app/components/animations/CustomerReceivingEmail.tsx
diff --git a/app/[locale]/components/animations/DedicatedMaintananceImage.tsx b/app/components/animations/DedicatedMaintananceImage.tsx
similarity index 100%
rename from app/[locale]/components/animations/DedicatedMaintananceImage.tsx
rename to app/components/animations/DedicatedMaintananceImage.tsx
diff --git a/app/[locale]/components/animations/DeveloperCommunications.tsx b/app/components/animations/DeveloperCommunications.tsx
similarity index 100%
rename from app/[locale]/components/animations/DeveloperCommunications.tsx
rename to app/components/animations/DeveloperCommunications.tsx
diff --git a/app/[locale]/components/animations/DiscussImage.tsx b/app/components/animations/DiscussImage.tsx
similarity index 100%
rename from app/[locale]/components/animations/DiscussImage.tsx
rename to app/components/animations/DiscussImage.tsx
diff --git a/app/[locale]/components/animations/EmployeeImage.tsx b/app/components/animations/EmployeeImage.tsx
similarity index 100%
rename from app/[locale]/components/animations/EmployeeImage.tsx
rename to app/components/animations/EmployeeImage.tsx
diff --git a/app/[locale]/components/animations/HeroImage.tsx b/app/components/animations/HeroImage.tsx
similarity index 100%
rename from app/[locale]/components/animations/HeroImage.tsx
rename to app/components/animations/HeroImage.tsx
diff --git a/app/[locale]/components/animations/ManWorking.tsx b/app/components/animations/ManWorking.tsx
similarity index 100%
rename from app/[locale]/components/animations/ManWorking.tsx
rename to app/components/animations/ManWorking.tsx
diff --git a/app/[locale]/components/animations/MoneyValueImage.tsx b/app/components/animations/MoneyValueImage.tsx
similarity index 100%
rename from app/[locale]/components/animations/MoneyValueImage.tsx
rename to app/components/animations/MoneyValueImage.tsx
diff --git a/app/[locale]/components/animations/OnlineVideoChatting.tsx b/app/components/animations/OnlineVideoChatting.tsx
similarity index 100%
rename from app/[locale]/components/animations/OnlineVideoChatting.tsx
rename to app/components/animations/OnlineVideoChatting.tsx
diff --git a/app/[locale]/components/animations/PricingImage.tsx b/app/components/animations/PricingImage.tsx
similarity index 100%
rename from app/[locale]/components/animations/PricingImage.tsx
rename to app/components/animations/PricingImage.tsx
diff --git a/app/[locale]/components/animations/Questions.tsx b/app/components/animations/Questions.tsx
similarity index 100%
rename from app/[locale]/components/animations/Questions.tsx
rename to app/components/animations/Questions.tsx
diff --git a/app/[locale]/components/animations/TurnaroundImage.tsx b/app/components/animations/TurnaroundImage.tsx
similarity index 100%
rename from app/[locale]/components/animations/TurnaroundImage.tsx
rename to app/components/animations/TurnaroundImage.tsx
diff --git a/app/[locale]/components/animations/UpgradeImage.tsx b/app/components/animations/UpgradeImage.tsx
similarity index 100%
rename from app/[locale]/components/animations/UpgradeImage.tsx
rename to app/components/animations/UpgradeImage.tsx
diff --git a/app/[locale]/components/animations/WebDevelopment.tsx b/app/components/animations/WebDevelopment.tsx
similarity index 100%
rename from app/[locale]/components/animations/WebDevelopment.tsx
rename to app/components/animations/WebDevelopment.tsx
diff --git a/app/[locale]/components/animations/WorkingHome.tsx b/app/components/animations/WorkingHome.tsx
similarity index 100%
rename from app/[locale]/components/animations/WorkingHome.tsx
rename to app/components/animations/WorkingHome.tsx
diff --git a/app/[locale]/components/animations/adaptive-interface.json b/app/components/animations/adaptive-interface.json
similarity index 100%
rename from app/[locale]/components/animations/adaptive-interface.json
rename to app/components/animations/adaptive-interface.json
diff --git a/app/[locale]/components/animations/business-agreement.json b/app/components/animations/business-agreement.json
similarity index 100%
rename from app/[locale]/components/animations/business-agreement.json
rename to app/components/animations/business-agreement.json
diff --git a/app/[locale]/components/animations/business-value.json b/app/components/animations/business-value.json
similarity index 100%
rename from app/[locale]/components/animations/business-value.json
rename to app/components/animations/business-value.json
diff --git a/app/[locale]/components/animations/communication.json b/app/components/animations/communication.json
similarity index 100%
rename from app/[locale]/components/animations/communication.json
rename to app/components/animations/communication.json
diff --git a/app/[locale]/components/animations/company.json b/app/components/animations/company.json
similarity index 100%
rename from app/[locale]/components/animations/company.json
rename to app/components/animations/company.json
diff --git a/app/[locale]/components/animations/customer-assistance.json b/app/components/animations/customer-assistance.json
similarity index 100%
rename from app/[locale]/components/animations/customer-assistance.json
rename to app/components/animations/customer-assistance.json
diff --git a/app/[locale]/components/animations/customer-receiving-email2.json b/app/components/animations/customer-receiving-email2.json
similarity index 100%
rename from app/[locale]/components/animations/customer-receiving-email2.json
rename to app/components/animations/customer-receiving-email2.json
diff --git a/app/[locale]/components/animations/dedicated-maintenance.json b/app/components/animations/dedicated-maintenance.json
similarity index 100%
rename from app/[locale]/components/animations/dedicated-maintenance.json
rename to app/components/animations/dedicated-maintenance.json
diff --git a/app/[locale]/components/animations/developer-communications.json b/app/components/animations/developer-communications.json
similarity index 100%
rename from app/[locale]/components/animations/developer-communications.json
rename to app/components/animations/developer-communications.json
diff --git a/app/[locale]/components/animations/discuss.json b/app/components/animations/discuss.json
similarity index 100%
rename from app/[locale]/components/animations/discuss.json
rename to app/components/animations/discuss.json
diff --git a/app/[locale]/components/animations/employee.json b/app/components/animations/employee.json
similarity index 100%
rename from app/[locale]/components/animations/employee.json
rename to app/components/animations/employee.json
diff --git a/app/[locale]/components/animations/financial-innovation.json b/app/components/animations/financial-innovation.json
similarity index 100%
rename from app/[locale]/components/animations/financial-innovation.json
rename to app/components/animations/financial-innovation.json
diff --git a/app/[locale]/components/animations/hero-animation.json b/app/components/animations/hero-animation.json
similarity index 100%
rename from app/[locale]/components/animations/hero-animation.json
rename to app/components/animations/hero-animation.json
diff --git a/app/[locale]/components/animations/man-working.json b/app/components/animations/man-working.json
similarity index 100%
rename from app/[locale]/components/animations/man-working.json
rename to app/components/animations/man-working.json
diff --git a/app/[locale]/components/animations/money-value.json b/app/components/animations/money-value.json
similarity index 100%
rename from app/[locale]/components/animations/money-value.json
rename to app/components/animations/money-value.json
diff --git a/app/[locale]/components/animations/online-video-chatting.json b/app/components/animations/online-video-chatting.json
similarity index 100%
rename from app/[locale]/components/animations/online-video-chatting.json
rename to app/components/animations/online-video-chatting.json
diff --git a/app/[locale]/components/animations/pricing.json b/app/components/animations/pricing.json
similarity index 100%
rename from app/[locale]/components/animations/pricing.json
rename to app/components/animations/pricing.json
diff --git a/app/[locale]/components/animations/questions.json b/app/components/animations/questions.json
similarity index 100%
rename from app/[locale]/components/animations/questions.json
rename to app/components/animations/questions.json
diff --git a/app/[locale]/components/animations/turnaround.json b/app/components/animations/turnaround.json
similarity index 100%
rename from app/[locale]/components/animations/turnaround.json
rename to app/components/animations/turnaround.json
diff --git a/app/[locale]/components/animations/upgrade.json b/app/components/animations/upgrade.json
similarity index 100%
rename from app/[locale]/components/animations/upgrade.json
rename to app/components/animations/upgrade.json
diff --git a/app/[locale]/components/animations/web-development.json b/app/components/animations/web-development.json
similarity index 100%
rename from app/[locale]/components/animations/web-development.json
rename to app/components/animations/web-development.json
diff --git a/app/[locale]/components/animations/working-home.json b/app/components/animations/working-home.json
similarity index 100%
rename from app/[locale]/components/animations/working-home.json
rename to app/components/animations/working-home.json
diff --git a/app/layout.tsx b/app/layout.tsx
index 2d7a055..8795d4a 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,7 +1,14 @@
+import { Footer } from '@/components/Header/Footer';
+import { HeaderNavbar } from '@/components/Header/HeaderNavbar';
 import { ThemeProvider } from '@/components/theme/ThemeProvider';
 import { Toaster } from '@/components/ui/Toaster';
+import { getURL } from '@/utils/helpers';
+import { Box } from '@chakra-ui/react';
 import { Analytics } from '@vercel/analytics/react';
 import { SpeedInsights } from '@vercel/speed-insights/next';
+import { Metadata } from 'next';
+import { NextIntlClientProvider } from 'next-intl';
+import { getLocale, getMessages } from 'next-intl/server';
 import { M_PLUS_Rounded_1c, Roboto } from 'next/font/google';
 import Head from 'next/head';
 import type { ReactNode } from 'react';
@@ -22,27 +29,111 @@ const mPlusRounded = M_PLUS_Rounded_1c({
     preload: false // Add this to prevent the font loading error
 });
 
+const meta = {
+    title: 'Expert React Maintenance & Development',
+    description:
+        'Keep your React applications running smoothly with dedicated senior level support. No mid-level teams, no overhead - just direct access to expert maintenance when you need it.',
+    cardImage: '/og.png',
+    robots: 'follow, index',
+    favicon: '/favicon.ico',
+    url: getURL()
+};
+
+type MetadataTranslation = {
+    title: string;
+    description: string;
+    keywords: string[];
+    ogAlt: string;
+    twitterAlt: string;
+};
+
+export async function generateMetadata(): Promise<Metadata> {
+    const messages = await getMessages();
+    const metadata = (messages as unknown as { metadata: MetadataTranslation }).metadata;
+    const locale = await getLocale();
+
+    return {
+        title: metadata.title,
+        description: metadata.description,
+        referrer: 'origin-when-cross-origin',
+        keywords: metadata.keywords,
+        authors: [
+            { name: 'Trimatech', url: 'https://trimatech.dev/' },
+            { name: 'Maigo Erit', url: 'https://trimatech.dev/' }
+        ],
+        creator: 'Trimatech',
+        publisher: 'Trimatech',
+        robots: meta.robots,
+        icons: {
+            icon: meta.favicon,
+            apple: [{ url: '/apple-icon.png' }]
+        },
+        metadataBase: new URL(meta.url),
+        alternates: {
+            canonical: '/'
+        },
+        openGraph: {
+            url: meta.url,
+            title: metadata.title,
+            description: metadata.description,
+            images: [
+                {
+                    url: meta.cardImage,
+                    width: 1200,
+                    height: 630,
+                    alt: metadata.ogAlt
+                }
+            ],
+            type: 'website',
+            siteName: metadata.title,
+            locale: locale === 'et' ? 'et_EE' : 'en_US'
+        },
+        twitter: {
+            card: 'summary_large_image',
+            site: '@Trimatech',
+            creator: '@Trimatech',
+            title: metadata.title,
+            description: metadata.description,
+            images: [
+                {
+                    url: meta.cardImage,
+                    alt: metadata.twitterAlt
+                }
+            ]
+        }
+    };
+}
+
 interface Props {
     children: ReactNode;
-    params: Promise<{ locale: string }>;
 }
 
-export default async function RootLayout({ children, params }: Props) {
-    const { locale } = await params;
+export default async function RootLayout({ children }: Props) {
+    const locale = await getLocale();
+    const messages = await getMessages();
 
     return (
         <>
             <Head>
                 <meta name="viewport" content="width=device-width, initial-scale=1" />
+                <link rel="canonical" href={meta.url} />
                 <meta http-equiv="Content-Language" content={locale} />
             </Head>
             <html suppressHydrationWarning lang={locale} className={`${roboto.variable} ${mPlusRounded.variable}`}>
                 <body>
                     <ThemeProvider enableColorScheme={false} defaultTheme="light">
-                        {children}
-                        <Suspense>
-                            <Toaster />
-                        </Suspense>
+                        <NextIntlClientProvider messages={messages}>
+                            <Box>
+                                <Box maxW="1440px" mx="auto" px={[0, 2, 4]}>
+                                    <HeaderNavbar />
+                                    {children}
+                                    <Footer />
+                                </Box>
+                            </Box>
+                            <Suspense>
+                                <Toaster />
+                            </Suspense>
+                        </NextIntlClientProvider>
                     </ThemeProvider>
                     <Analytics />
                     <SpeedInsights />
diff --git a/app/not-found.tsx b/app/not-found.tsx
deleted file mode 100644
index 21a8259..0000000
--- a/app/not-found.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-'use client';
-
-import Error from 'next/error';
-
-// This page renders when a route like `/unknown.txt` is requested.
-// In this case, the layout at `app/[locale]/layout.tsx` receives
-// an invalid value as the `[locale]` param and calls `notFound()`.
-
-export default function GlobalNotFound() {
-    return (
-        <html lang="en">
-            <body>
-                <Error statusCode={404} />;
-            </body>
-        </html>
-    );
-}
diff --git a/app/page.tsx b/app/page.tsx
index 28ca103..3136541 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,6 +1,28 @@
-import { redirect } from 'next/navigation';
+import { Flex } from '@chakra-ui/react';
+import { Benefits } from './components/Benefits';
+import { ComparePricing } from './components/ComparePricing';
+import { Discuss } from './components/Discuss';
+import { Faq } from './components/Faq';
+import { Hero } from './components/Hero';
+import { PauseTry } from './components/PauseTry';
+import { Pricing } from './components/Pricing';
+import { ScrollToAnchorOnPageLoad } from './components/ScollToAnchorOnPageLoad';
+import { TechScroll } from './components/TechScroll';
+import { Testimonials } from './components/Testimonials';
 
-// This page only renders when the app is built statically (output: 'export')
-export default function RootPage() {
-    redirect('/en');
+export default function HomePage() {
+    return (
+        <Flex flexDirection="column" gap={[4, 6, 6, 6, 10]}>
+            <Hero />
+            <Benefits />
+            <TechScroll />
+            <Pricing />
+            <PauseTry />
+            <ComparePricing />
+            <Faq />
+            <Testimonials />
+            <Discuss />
+            <ScrollToAnchorOnPageLoad />
+        </Flex>
+    );
 }
diff --git a/components/Header/HeaderNavbar.tsx b/components/Header/HeaderNavbar.tsx
index 223e268..b232804 100644
--- a/components/Header/HeaderNavbar.tsx
+++ b/components/Header/HeaderNavbar.tsx
@@ -1,4 +1,3 @@
-import LanguageSwitcher from '@/components/LanguageSwitcher';
 import { outerPadding } from '@/components/theme/padding.utils';
 import { Box, Flex } from '@chakra-ui/react';
 import { NextPage } from 'next';
@@ -22,13 +21,11 @@ export const HeaderNavbar: NextPage = () => {
                 <Box display={{ base: 'none', md: 'flex' }}>
                     <Flex align="center" gap={4}>
                         <Navlinks />
-                        <LanguageSwitcher />
                     </Flex>
                 </Box>
 
                 <Box display={{ base: 'flex', md: 'none' }}>
                     <Flex align="center" gap={2}>
-                        <LanguageSwitcher />
                         <MenuDialog />
                     </Flex>
                 </Box>
diff --git a/i18n/routing.ts b/i18n/routing.ts
index 80e0d36..2d4632e 100644
--- a/i18n/routing.ts
+++ b/i18n/routing.ts
@@ -5,6 +5,7 @@ import { defaultLocale } from './settings';
 export const routing = defineRouting({
     locales: ['en', 'et'],
     defaultLocale: defaultLocale,
+    localePrefix: 'never',
     pathnames: {}
 });
 
diff --git a/middleware.ts b/middleware.ts
index 934eeb7..96ec1d8 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -1,20 +1,27 @@
-// middleware.ts
 import createMiddleware from 'next-intl/middleware';
-import { routing } from './i18n/routing';
+import { locales } from './i18n/settings';
 
-export default createMiddleware(routing);
+export default createMiddleware({
+    locales,
+    defaultLocale: 'en',
+    localeDetection: false, // Disable locale detection from Accept-Language header
+    localePrefix: 'never', // Don't use locale prefixes in URLs
+    domains: [
+        {
+            domain: 'trimatech.ee',
+            defaultLocale: 'et'
+        },
+        {
+            domain: 'trimatech.dev',
+            defaultLocale: 'en'
+        },
+        {
+            domain: 'localhost:3000',
+            defaultLocale: 'en'
+        }
+    ]
+});
 
 export const config = {
-    matcher: [
-        // Enable a redirect to a matching locale at the root
-        '/',
-
-        // Set a cookie to remember the previous locale for
-        // all requests that have a locale prefix
-        '/(et|en)/:path*',
-
-        // Enable redirects that add missing locales
-        // (e.g. `/pathnames` -> `/en/pathnames`)
-        '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)'
-    ]
+    matcher: ['/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)']
 };

From 882a83bc9e4da9dea30bcb429bd4c4eb01349807 Mon Sep 17 00:00:00 2001
From: Maigo Erit <maigo.erit@gmail.com>
Date: Thu, 6 Mar 2025 10:50:19 +0200
Subject: [PATCH 15/15] Remove deprecated i18n routing and middleware files

- Delete middleware.ts with locale configuration
- Remove next.config.js and replace with next.config.ts
- Delete LanguageSwitcher component from project
- Remove routing.ts file and consolidate locale settings
- Update request.ts to use direct imports and improve error handling
- Remove language switcher from MenuDialog component
---
 components/Header/MenuDialog.tsx | 10 +-------
 components/LanguageSwitcher.tsx  | 40 --------------------------------
 i18n/request.ts                  | 11 +++++----
 i18n/routing.ts                  | 15 ------------
 middleware.ts                    | 27 ---------------------
 next.config.js                   |  8 -------
 next.config.ts                   |  8 +++++++
 7 files changed, 16 insertions(+), 103 deletions(-)
 delete mode 100644 components/LanguageSwitcher.tsx
 delete mode 100644 i18n/routing.ts
 delete mode 100644 middleware.ts
 delete mode 100644 next.config.js
 create mode 100644 next.config.ts

diff --git a/components/Header/MenuDialog.tsx b/components/Header/MenuDialog.tsx
index e40d156..85c0b55 100644
--- a/components/Header/MenuDialog.tsx
+++ b/components/Header/MenuDialog.tsx
@@ -1,6 +1,5 @@
 'use client';
-import LanguageSwitcher from '@/components/LanguageSwitcher';
-import { Box, IconButton, Text, VStack } from '@chakra-ui/react';
+import { IconButton, VStack } from '@chakra-ui/react';
 import { NextPage } from 'next';
 import { useTranslations } from 'next-intl';
 import { IoMenu } from 'react-icons/io5';
@@ -35,13 +34,6 @@ export const MenuDialog: NextPage = () => {
                 <DialogBody>
                     <VStack w="full" gap={6} align="center">
                         <Navlinks />
-
-                        <Box pt={4}>
-                            <Text fontSize="sm" mb={2} textAlign="center">
-                                {t('language')}
-                            </Text>
-                            <LanguageSwitcher />
-                        </Box>
                     </VStack>
                 </DialogBody>
                 <DialogFooter />
diff --git a/components/LanguageSwitcher.tsx b/components/LanguageSwitcher.tsx
deleted file mode 100644
index fca6e30..0000000
--- a/components/LanguageSwitcher.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-'use client';
-
-import { usePathname, useRouter } from '@/i18n/routing';
-import { locales } from '@/i18n/settings';
-import { Flex, Text } from '@chakra-ui/react';
-import { useLocale } from 'next-intl';
-import { useTransition } from 'react';
-import { Button } from './ui/button';
-
-export default function LanguageSwitcher() {
-    const [isPending, startTransition] = useTransition();
-    const locale = useLocale();
-    const router = useRouter();
-    const pathname = usePathname();
-
-    const handleLocaleChange = (newLocale: (typeof locales)[number]) => {
-        startTransition(() => {
-            router.replace(pathname, { locale: newLocale });
-        });
-    };
-
-    return (
-        <Flex>
-            {locales.map((l) => {
-                const isActive = l === locale;
-                return (
-                    <Button
-                        size="sm"
-                        variant="ghost"
-                        colorPalette="blue"
-                        disabled={isPending}
-                        onClick={() => handleLocaleChange(l)}
-                    >
-                        <Text textDecoration={isActive ? 'underline' : 'none'}>{l.toUpperCase()}</Text>
-                    </Button>
-                );
-            })}
-        </Flex>
-    );
-}
diff --git a/i18n/request.ts b/i18n/request.ts
index c9532bb..d628439 100644
--- a/i18n/request.ts
+++ b/i18n/request.ts
@@ -1,19 +1,22 @@
 import { getRequestConfig } from 'next-intl/server';
-import { routing } from './routing';
+import { defaultLocale, locales } from './settings';
 
 export default getRequestConfig(async ({ requestLocale }) => {
     // This typically corresponds to the `[locale]` segment
     let locale = await requestLocale;
 
     // Ensure that a valid locale is used
-    if (!locale || !routing.locales.includes(locale as any)) {
-        locale = routing.defaultLocale;
+    if (!locale || !locales.includes(locale as any)) {
+        locale = defaultLocale;
     }
 
+    // Dynamic import with better error handling
+    const messages = await import(`../messages/${locale}/page.json`);
+
     return {
         locale,
         messages: {
-            ...(await import(`../messages/${locale}/page.json`))
+            ...messages
         }
     };
 });
diff --git a/i18n/routing.ts b/i18n/routing.ts
deleted file mode 100644
index 2d4632e..0000000
--- a/i18n/routing.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { createNavigation } from 'next-intl/navigation';
-import { defineRouting } from 'next-intl/routing';
-import { defaultLocale } from './settings';
-
-export const routing = defineRouting({
-    locales: ['en', 'et'],
-    defaultLocale: defaultLocale,
-    localePrefix: 'never',
-    pathnames: {}
-});
-
-export type Pathnames = keyof typeof routing.pathnames;
-export type Locale = (typeof routing.locales)[number];
-
-export const { Link, permanentRedirect, redirect, usePathname, useRouter, getPathname } = createNavigation(routing);
diff --git a/middleware.ts b/middleware.ts
deleted file mode 100644
index 96ec1d8..0000000
--- a/middleware.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import createMiddleware from 'next-intl/middleware';
-import { locales } from './i18n/settings';
-
-export default createMiddleware({
-    locales,
-    defaultLocale: 'en',
-    localeDetection: false, // Disable locale detection from Accept-Language header
-    localePrefix: 'never', // Don't use locale prefixes in URLs
-    domains: [
-        {
-            domain: 'trimatech.ee',
-            defaultLocale: 'et'
-        },
-        {
-            domain: 'trimatech.dev',
-            defaultLocale: 'en'
-        },
-        {
-            domain: 'localhost:3000',
-            defaultLocale: 'en'
-        }
-    ]
-});
-
-export const config = {
-    matcher: ['/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)']
-};
diff --git a/next.config.js b/next.config.js
deleted file mode 100644
index 569c961..0000000
--- a/next.config.js
+++ /dev/null
@@ -1,8 +0,0 @@
-const createNextIntlPlugin = require('next-intl/plugin');
-
-const withNextIntl = createNextIntlPlugin();
-
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
-
-module.exports = withNextIntl(nextConfig);
diff --git a/next.config.ts b/next.config.ts
new file mode 100644
index 0000000..a897bf9
--- /dev/null
+++ b/next.config.ts
@@ -0,0 +1,8 @@
+import { NextConfig } from 'next';
+import createNextIntlPlugin from 'next-intl/plugin';
+
+const withNextIntl = createNextIntlPlugin();
+
+const config: NextConfig = {};
+
+export default withNextIntl(config);