Skip to content

I18n domain #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MayGo wants to merge 15 commits into
base: main
Choose a base branch
from
+1,362 −606
Open

I18n domain #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
bc3ae98
Add comprehensive homepage components with Lottie animations
MayGo Mar 4, 2025
9d305b3
Add internationalization (i18n) support with next-intl
MayGo Mar 4, 2025
585ef04
Add component translations and update global type definitions
MayGo Mar 4, 2025
1b0c22d
Migrate component translations to page.json and remove separate compo…
MayGo Mar 4, 2025
e7c55e3
Migrate components to use next-intl translations and update constants
MayGo Mar 4, 2025
0b3354b
Add translations to GridBackground, PriceForOthers, and TechScroll co…
MayGo Mar 4, 2025
a833bea
Update Estonian translations for page.json
MayGo Mar 4, 2025
4011836
Update metadata generation with dynamic translations
MayGo Mar 5, 2025
96ec71b
Update project dependencies and layout structure
MayGo Mar 5, 2025
add938d
Add not-found handling and root page redirection
MayGo Mar 5, 2025
f6328fa
Update Estonian translations to remove "Reacti" and use "React"
MayGo Mar 5, 2025
9152f08
Update Estonian translation for owner title in page.json
MayGo Mar 5, 2025
bea19c2
Refactor LanguageSwitcher and IntroCallCard components
MayGo Mar 5, 2025
04bb29f
Restructure project layout and routing configuration
MayGo Mar 5, 2025
882a83b
Remove deprecated i18n routing and middleware files
MayGo Mar 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 9 additions & 17 deletions app/components/Benefits.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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>
Expand Down
262 changes: 111 additions & 151 deletions app/components/ComparePricing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 />
Expand Down
7 changes: 5 additions & 2 deletions app/components/Discuss.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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']}
Expand All @@ -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">
Expand Down
Loading