Enhance homepage layout and content structure
- Updated the homepage to utilize a new layout with multiple widgets including Hero, Features, Content, CallToAction, and Contact. - Implemented dynamic translations for the homepage content to improve accessibility and user experience. - Set prerendering to true for better performance and SEO optimization.
This commit is contained in:
becarta
@@ -1,22 +1,166 @@
|
||||
---
|
||||
export const prerender = false;
|
||||
import { detectPreferredLanguage } from '~/utils/language';
|
||||
export const prerender = true;
|
||||
import Layout from '~/layouts/PageLayout.astro';
|
||||
import Hero from '~/components/widgets/Hero2.astro';
|
||||
import Features from '~/components/widgets/Features.astro';
|
||||
import Content from '~/components/widgets/Content.astro';
|
||||
import CallToAction from '~/components/widgets/CallToAction.astro';
|
||||
import Contact from '~/components/widgets/Contact.astro';
|
||||
import { getTranslation } from '~/i18n/translations';
|
||||
import OurCommitmentImage from '~/assets/images/OurCommitment.webp';
|
||||
|
||||
// Get the hash fragment if present
|
||||
const url = new URL(Astro.request.url);
|
||||
const hash = url.hash;
|
||||
const t = getTranslation('en');
|
||||
|
||||
// Check for language preference in cookies (set by client-side JS)
|
||||
const cookies = Astro.request.headers.get('cookie') || '';
|
||||
const cookieLanguage = cookies
|
||||
.split(';')
|
||||
.map((cookie) => cookie.trim())
|
||||
.find((cookie) => cookie.startsWith('preferredLanguage='))
|
||||
?.split('=')[1];
|
||||
|
||||
// Only use detected language if there's an explicit cookie preference
|
||||
const preferredLanguage = cookieLanguage || 'en';
|
||||
|
||||
// Redirect to the language-specific homepage
|
||||
return Astro.redirect(`/${preferredLanguage}/${hash}`);
|
||||
const metadata = {
|
||||
title: t.metadata.title,
|
||||
};
|
||||
---
|
||||
|
||||
<Layout metadata={metadata}>
|
||||
<!-- Hero Widget -->
|
||||
<Hero
|
||||
title={t.hero.title}
|
||||
subtitle={t.hero.subtitle}
|
||||
isDark={false}
|
||||
actions={[
|
||||
{
|
||||
variant: 'primary',
|
||||
text: t.homepage?.actions?.learnMore || 'Learn More',
|
||||
href: '#services',
|
||||
icon: 'tabler:arrow-down',
|
||||
},
|
||||
{ text: t.homepage?.actions?.contactMe || 'Contact Me', href: '#contact' },
|
||||
]}
|
||||
image={{
|
||||
src: '~/assets/images/HomepageIntroImage.webp',
|
||||
alt: 'person sitting behind a computer with pen and paper next to him, A coffee mug and tablet on the desk',
|
||||
}}
|
||||
/>
|
||||
|
||||
<!-- Features Widget -->
|
||||
<Features
|
||||
id="services"
|
||||
tagline={t.homepage?.services?.tagline || 'Services'}
|
||||
title={t.homepage?.services?.title || 'How I Can Help Your Organization'}
|
||||
subtitle={t.homepage?.services?.subtitle ||
|
||||
'I offer a range of specialized IT services to help businesses optimize their operations and digital infrastructure.'}
|
||||
items={(
|
||||
t.homepage?.services?.items || [
|
||||
{
|
||||
title: 'Workflow Automation',
|
||||
description:
|
||||
'Streamline your business processes with Power Automate solutions that reduce manual effort and increase operational efficiency.',
|
||||
icon: 'tabler:settings-automation',
|
||||
},
|
||||
{
|
||||
title: 'Intelligent Chatbots',
|
||||
description:
|
||||
'Develop smart chatbots in Copilot Studio that enhance user interactions through natural language processing and automated responses.',
|
||||
icon: 'tabler:message-chatbot',
|
||||
},
|
||||
{
|
||||
title: 'API Integrations',
|
||||
description:
|
||||
'Create seamless connections between your applications and services with custom API integrations for efficient data exchange.',
|
||||
icon: 'tabler:api',
|
||||
},
|
||||
{
|
||||
title: 'Microsoft 365 Management',
|
||||
description:
|
||||
'Optimize your Microsoft 365 environment with expert administration, security configurations, and service optimization.',
|
||||
icon: 'tabler:brand-office',
|
||||
},
|
||||
{
|
||||
title: 'SharePoint Solutions',
|
||||
description:
|
||||
'Set up, manage, and optimize SharePoint Online and on-premise deployments for effective document management and collaboration.',
|
||||
icon: 'tabler:share',
|
||||
},
|
||||
{
|
||||
title: 'IT Infrastructure Oversight',
|
||||
description:
|
||||
'Manage global IT infrastructures, including servers, networks, and end-user devices to ensure reliable operations.',
|
||||
icon: 'tabler:server',
|
||||
},
|
||||
]
|
||||
).map((item) => ({ ...item, icon: item.icon || 'tabler:check' }))}
|
||||
/>
|
||||
|
||||
<!-- Content Widget -->
|
||||
<Content
|
||||
isReversed
|
||||
tagline={t.homepage?.approach?.tagline || 'About My Approach'}
|
||||
title={t.homepage?.approach?.title || 'Our Commitment'}
|
||||
items={[]}
|
||||
image={{
|
||||
src: OurCommitmentImage,
|
||||
alt: 'IT Excellence and Innovation',
|
||||
}}
|
||||
>
|
||||
<Fragment slot="content">
|
||||
<div class="text-lg dark:text-slate-400">
|
||||
{
|
||||
(
|
||||
t.homepage?.approach?.missionContent || [
|
||||
'We are committed to driving IT excellence through strategic cloud optimization, process automation, and enterprise-grade technical support. We leverage cutting-edge technology to address complex business challenges and deliver measurable value.',
|
||||
'With deep expertise in Microsoft technologies and automation, we empower organizations to transform their digital capabilities and achieve their business objectives. We design solutions that enhance user experience and maximize productivity, ensuring technology empowers your business.',
|
||||
'We stay ahead of the curve by researching and implementing emerging technologies, providing scalable solutions that adapt to your evolving needs. Our approach aligns technical solutions with your core business objectives, delivering measurable ROI and a competitive advantage.',
|
||||
'Our mission is to leverage technology to solve real business challenges and create value through innovation. With over 15 years of IT experience, we bring a wealth of knowledge in Microsoft technologies, automation tools, and system integration to help organizations transform their digital capabilities and achieve their strategic goals.',
|
||||
]
|
||||
).map((paragraph, index, array) => <p class={index === array.length - 1 ? '' : 'mb-4'}>{paragraph}</p>)
|
||||
}
|
||||
</div>
|
||||
</Fragment>
|
||||
</Content>
|
||||
|
||||
<!-- CallToAction Widget -->
|
||||
<CallToAction
|
||||
callToAction={{
|
||||
text: t.homepage?.callToAction?.button || 'Contact Me',
|
||||
href: '#contact',
|
||||
icon: 'tabler:mail',
|
||||
}}
|
||||
>
|
||||
<Fragment slot="title">{t.homepage?.callToAction?.title || 'Ready to optimize your IT systems?'}</Fragment>
|
||||
<Fragment slot="subtitle">
|
||||
{
|
||||
t.homepage?.callToAction?.subtitle ||
|
||||
"Let's discuss how I can help your organization streamline processes, enhance collaboration, and drive digital transformation."
|
||||
}
|
||||
</Fragment>
|
||||
</CallToAction>
|
||||
|
||||
<!-- Contact Widget -->
|
||||
<Contact
|
||||
id="contact"
|
||||
title={t.homepage?.contact?.title || 'Get in Touch'}
|
||||
subtitle={t.homepage?.contact?.subtitle ||
|
||||
"Have a project in mind or questions about my services? Reach out and let's start a conversation."}
|
||||
inputs={[
|
||||
{
|
||||
type: 'text',
|
||||
name: 'name',
|
||||
label: t.homepage?.contact?.nameLabel || 'Name',
|
||||
placeholder: t.homepage?.contact?.namePlaceholder || 'Your name',
|
||||
},
|
||||
{
|
||||
type: 'email',
|
||||
name: 'email',
|
||||
label: t.homepage?.contact?.emailLabel || 'Email',
|
||||
placeholder: t.homepage?.contact?.emailPlaceholder || 'Your email address',
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
label: t.homepage?.contact?.messageLabel || 'Message',
|
||||
placeholder: t.homepage?.contact?.messagePlaceholder || 'Your message',
|
||||
rows: 8,
|
||||
}}
|
||||
disclaimer={{
|
||||
label:
|
||||
t.homepage?.contact?.disclaimer ||
|
||||
'By submitting this form, you agree to our privacy policy and allow us to use your information to contact you about our services.',
|
||||
}}
|
||||
description={t.homepage?.contact?.description ||
|
||||
"I'll respond to your message as soon as possible. You can also connect with me on LinkedIn or GitHub."}
|
||||
/>
|
||||
</Layout>
|
||||
|
||||
Reference in New Issue
Block a user