Revamp homepage with explosive design and enhanced interactivity
- Introduced a new explosive hero section featuring vibrant animations and floating orbs for a dynamic visual experience. - Updated the layout to utilize a new translation method for improved content management. - Enhanced call-to-action buttons with modern styling and animations for better user engagement. - Implemented responsive design adjustments to ensure optimal viewing on various devices. - Replaced static content with dynamic elements, improving the overall interactivity and appeal of the homepage.
This commit is contained in:
377
src/i18n/translations.homepage.ts
Normal file
377
src/i18n/translations.homepage.ts
Normal file
@@ -0,0 +1,377 @@
|
||||
export interface ExplosiveHomepageTranslation {
|
||||
hero: {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
};
|
||||
actions: {
|
||||
learnMore: string;
|
||||
contactMe: string;
|
||||
};
|
||||
services: {
|
||||
tagline: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
items: {
|
||||
title: string;
|
||||
description: string;
|
||||
}[];
|
||||
};
|
||||
approach: {
|
||||
tagline: string;
|
||||
title: string;
|
||||
expertise: string;
|
||||
methods: {
|
||||
title: string;
|
||||
description: string;
|
||||
}[];
|
||||
highlights: string;
|
||||
};
|
||||
cta: {
|
||||
button: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
};
|
||||
contact: {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
description: string;
|
||||
fields: {
|
||||
name: string;
|
||||
namePlaceholder: string;
|
||||
email: string;
|
||||
emailPlaceholder: string;
|
||||
message: string;
|
||||
messagePlaceholder: string;
|
||||
};
|
||||
disclaimer: string;
|
||||
};
|
||||
}
|
||||
|
||||
export const supportedLanguages = ['en', 'nl', 'de', 'fr'] as const;
|
||||
|
||||
export function getExplosiveHomepageTranslation(lang: string): ExplosiveHomepageTranslation {
|
||||
return explosiveHomepageTranslations[lang] || explosiveHomepageTranslations['en'];
|
||||
}
|
||||
|
||||
export const explosiveHomepageTranslations: Record<string, ExplosiveHomepageTranslation> = {
|
||||
en: {
|
||||
hero: {
|
||||
title: "Transform Your Business",
|
||||
subtitle: "Unleash the power of AI automation • Microsoft 365 mastery • Custom integrations that actually work"
|
||||
},
|
||||
actions: {
|
||||
learnMore: "Ignite Your Business",
|
||||
contactMe: "Let's Talk"
|
||||
},
|
||||
services: {
|
||||
tagline: "AUTOMATION POWERHOUSE",
|
||||
title: "Services That Actually Move the Needle",
|
||||
subtitle: "Stop wasting time on manual tasks. Let's automate everything and watch your productivity explode.",
|
||||
items: [
|
||||
{
|
||||
title: "Power Automate Magic",
|
||||
description: "Turn 8-hour tasks into 5-minute workflows"
|
||||
},
|
||||
{
|
||||
title: "AI Chatbots That Work",
|
||||
description: "Smart bots that actually understand your business"
|
||||
},
|
||||
{
|
||||
title: "API Integration Wizardry",
|
||||
description: "Connect everything to everything"
|
||||
},
|
||||
{
|
||||
title: "Microsoft 365 Optimization",
|
||||
description: "Make M365 work like it should have from day one"
|
||||
},
|
||||
{
|
||||
title: "SharePoint That Doesn't Suck",
|
||||
description: "Finally, SharePoint that people actually want to use"
|
||||
},
|
||||
{
|
||||
title: "Infrastructure That Scales",
|
||||
description: "Rock-solid systems that grow with you"
|
||||
}
|
||||
]
|
||||
},
|
||||
approach: {
|
||||
tagline: "THE BERGSMA METHOD",
|
||||
title: "Less Talk, More Results",
|
||||
expertise: "15+ years perfecting the art of making technology work for business",
|
||||
methods: [
|
||||
{
|
||||
title: "Focus on Impact",
|
||||
description: "Every solution must move your business forward"
|
||||
},
|
||||
{
|
||||
title: "Speed of Implementation",
|
||||
description: "Fast deployment, immediate results"
|
||||
},
|
||||
{
|
||||
title: "Continuous Evolution",
|
||||
description: "Your tech stack evolves as you grow"
|
||||
}
|
||||
],
|
||||
highlights: "Microsoft MVP-level expertise\nPower Automate flows that save thousands of hours\nAI integrations that actually make sense\nEnterprise solutions with startup agility"
|
||||
},
|
||||
cta: {
|
||||
button: "LAUNCH YOUR TRANSFORMATION",
|
||||
title: "Ready to 10X Your Efficiency?",
|
||||
subtitle: "Premium automation solutions • Guaranteed results • Lightning-fast implementation"
|
||||
},
|
||||
contact: {
|
||||
title: "Let's Build Something Amazing",
|
||||
subtitle: "Ready to automate your way to success? Drop me a line and let's make your business unstoppable.",
|
||||
description: "Fast response guaranteed • Enterprise-ready solutions • Results you can measure",
|
||||
fields: {
|
||||
name: "👋 Your Name",
|
||||
namePlaceholder: "What should I call you?",
|
||||
email: "📧 Email",
|
||||
emailPlaceholder: "your.email@company.com",
|
||||
message: "💭 Tell Me About Your Project",
|
||||
messagePlaceholder: "What business process is driving you crazy? What would you automate if you could wave a magic wand?"
|
||||
},
|
||||
disclaimer: "🔒 Your info stays private. No spam, just solutions."
|
||||
}
|
||||
},
|
||||
nl: {
|
||||
hero: {
|
||||
title: "Transformeer Je Bedrijf",
|
||||
subtitle: "Ontgrendel de kracht van AI-automatisering • Microsoft 365 expertise • Maatwerk integraties die écht werken"
|
||||
},
|
||||
actions: {
|
||||
learnMore: "Ontketen Je Bedrijf",
|
||||
contactMe: "Laten We Praten"
|
||||
},
|
||||
services: {
|
||||
tagline: "AUTOMATISERING KRACHTCENTRALE",
|
||||
title: "Diensten Die Daadwerkelijk Impact Maken",
|
||||
subtitle: "Stop met tijdverspilling aan handmatige taken. Laten we alles automatiseren en je productiviteit explosief laten groeien.",
|
||||
items: [
|
||||
{
|
||||
title: "Power Automate Magie",
|
||||
description: "Verander 8-uurs taken in 5-minuten workflows"
|
||||
},
|
||||
{
|
||||
title: "AI Chatbots Die Werken",
|
||||
description: "Slimme bots die je bedrijf écht begrijpen"
|
||||
},
|
||||
{
|
||||
title: "API Integratie Tovenarij",
|
||||
description: "Verbind alles met alles"
|
||||
},
|
||||
{
|
||||
title: "Microsoft 365 Optimalisatie",
|
||||
description: "Laat M365 werken zoals het vanaf dag één had moeten doen"
|
||||
},
|
||||
{
|
||||
title: "SharePoint Dat Niet Zuigt",
|
||||
description: "Eindelijk SharePoint dat mensen daadwerkelijk willen gebruiken"
|
||||
},
|
||||
{
|
||||
title: "Infrastructuur Die Schaalt",
|
||||
description: "Rotssolide systemen die met je meegroeien"
|
||||
}
|
||||
]
|
||||
},
|
||||
approach: {
|
||||
tagline: "DE BERGSMA METHODE",
|
||||
title: "Minder Praten, Meer Resultaten",
|
||||
expertise: "15+ jaar het perfectioneren van technologie die voor bedrijven werkt",
|
||||
methods: [
|
||||
{
|
||||
title: "Focus op Impact",
|
||||
description: "Elke oplossing moet je bedrijf vooruit helpen"
|
||||
},
|
||||
{
|
||||
title: "Snelheid van Implementatie",
|
||||
description: "Snelle uitrol, directe resultaten"
|
||||
},
|
||||
{
|
||||
title: "Continue Evolutie",
|
||||
description: "Je tech stack evolueert terwijl je groeit"
|
||||
}
|
||||
],
|
||||
highlights: "Microsoft MVP-niveau expertise\nPower Automate flows die duizenden uren besparen\nAI integraties die echt logisch zijn\nEnterprise oplossingen met startup wendbaarheid"
|
||||
},
|
||||
cta: {
|
||||
button: "START JE TRANSFORMATIE",
|
||||
title: "Klaar om Je Efficiëntie te Vertienvoudigen?",
|
||||
subtitle: "Premium automatiseringsoplossingen • Gegarandeerde resultaten • Bliksemsnelle implementatie"
|
||||
},
|
||||
contact: {
|
||||
title: "Laten We Iets Geweldigs Bouwen",
|
||||
subtitle: "Klaar om je weg naar succes te automatiseren? Stuur me een berichtje en laten we je bedrijf onstuitbaar maken.",
|
||||
description: "Snelle reactie gegarandeerd • Enterprise-klare oplossingen • Meetbare resultaten",
|
||||
fields: {
|
||||
name: "👋 Je Naam",
|
||||
namePlaceholder: "Hoe moet ik je noemen?",
|
||||
email: "📧 Email",
|
||||
emailPlaceholder: "jouw.email@bedrijf.nl",
|
||||
message: "💭 Vertel Me Over Je Project",
|
||||
messagePlaceholder: "Welk bedrijfsproces maakt je gek? Wat zou je automatiseren als je een toverstaf kon zwaaien?"
|
||||
},
|
||||
disclaimer: "🔒 Je info blijft privé. Geen spam, alleen oplossingen."
|
||||
}
|
||||
},
|
||||
de: {
|
||||
hero: {
|
||||
title: "Transformieren Sie Ihr Unternehmen",
|
||||
subtitle: "Entfesseln Sie die Macht der KI-Automatisierung • Microsoft 365 Meisterschaft • Maßgeschneiderte Integrationen, die wirklich funktionieren"
|
||||
},
|
||||
actions: {
|
||||
learnMore: "Zünden Sie Ihr Business",
|
||||
contactMe: "Sprechen Wir"
|
||||
},
|
||||
services: {
|
||||
tagline: "AUTOMATISIERUNGS-KRAFTWERK",
|
||||
title: "Services Die Wirklich Durchschlagen",
|
||||
subtitle: "Hören Sie auf, Zeit mit manuellen Aufgaben zu verschwenden. Lassen Sie uns alles automatisieren und Ihre Produktivität explodieren.",
|
||||
items: [
|
||||
{
|
||||
title: "Power Automate Magie",
|
||||
description: "Verwandeln Sie 8-Stunden-Aufgaben in 5-Minuten-Workflows"
|
||||
},
|
||||
{
|
||||
title: "KI-Chatbots Die Funktionieren",
|
||||
description: "Intelligente Bots, die Ihr Unternehmen wirklich verstehen"
|
||||
},
|
||||
{
|
||||
title: "API-Integrations-Zauberei",
|
||||
description: "Verbinden Sie alles mit allem"
|
||||
},
|
||||
{
|
||||
title: "Microsoft 365 Optimierung",
|
||||
description: "Lassen Sie M365 so funktionieren, wie es von Tag eins hätte sein sollen"
|
||||
},
|
||||
{
|
||||
title: "SharePoint Das Nicht Nervt",
|
||||
description: "Endlich SharePoint, das Menschen tatsächlich nutzen wollen"
|
||||
},
|
||||
{
|
||||
title: "Infrastruktur Die Skaliert",
|
||||
description: "Felsenfeste Systeme, die mit Ihnen wachsen"
|
||||
}
|
||||
]
|
||||
},
|
||||
approach: {
|
||||
tagline: "DIE BERGSMA-METHODE",
|
||||
title: "Weniger Reden, Mehr Ergebnisse",
|
||||
expertise: "15+ Jahre Perfektion in der Kunst, Technologie für Unternehmen arbeiten zu lassen",
|
||||
methods: [
|
||||
{
|
||||
title: "Fokus auf Wirkung",
|
||||
description: "Jede Lösung muss Ihr Unternehmen voranbringen"
|
||||
},
|
||||
{
|
||||
title: "Geschwindigkeit der Umsetzung",
|
||||
description: "Schnelle Bereitstellung, sofortige Ergebnisse"
|
||||
},
|
||||
{
|
||||
title: "Kontinuierliche Evolution",
|
||||
description: "Ihr Tech-Stack entwickelt sich mit Ihrem Wachstum"
|
||||
}
|
||||
],
|
||||
highlights: "Microsoft MVP-Level Expertise\nPower Automate Flows, die Tausende von Stunden sparen\nKI-Integrationen, die wirklich Sinn machen\nEnterprise-Lösungen mit Startup-Agilität"
|
||||
},
|
||||
cta: {
|
||||
button: "STARTEN SIE IHRE TRANSFORMATION",
|
||||
title: "Bereit, Ihre Effizienz zu Verzehnfachen?",
|
||||
subtitle: "Premium-Automatisierungslösungen • Garantierte Ergebnisse • Blitzschnelle Umsetzung"
|
||||
},
|
||||
contact: {
|
||||
title: "Lassen Sie uns Etwas Großartiges Schaffen",
|
||||
subtitle: "Bereit, Ihren Weg zum Erfolg zu automatisieren? Schreiben Sie mir und lassen Sie uns Ihr Unternehmen unaufhaltbar machen.",
|
||||
description: "Schnelle Antwort garantiert • Enterprise-bereite Lösungen • Messbare Ergebnisse",
|
||||
fields: {
|
||||
name: "👋 Ihr Name",
|
||||
namePlaceholder: "Wie soll ich Sie nennen?",
|
||||
email: "📧 E-Mail",
|
||||
emailPlaceholder: "ihre.email@firma.de",
|
||||
message: "💭 Erzählen Sie mir von Ihrem Projekt",
|
||||
messagePlaceholder: "Welcher Geschäftsprozess macht Sie verrückt? Was würden Sie automatisieren, wenn Sie einen Zauberstab schwingen könnten?"
|
||||
},
|
||||
disclaimer: "🔒 Ihre Daten bleiben privat. Kein Spam, nur Lösungen."
|
||||
}
|
||||
},
|
||||
fr: {
|
||||
hero: {
|
||||
title: "Transformez Votre Entreprise",
|
||||
subtitle: "Libérez la puissance de l'automatisation IA • Maîtrise Microsoft 365 • Intégrations personnalisées qui fonctionnent vraiment"
|
||||
},
|
||||
actions: {
|
||||
learnMore: "Enflammez Votre Business",
|
||||
contactMe: "Parlons-En"
|
||||
},
|
||||
services: {
|
||||
tagline: "CENTRALE D'AUTOMATISATION",
|
||||
title: "Services Qui Font Vraiment la Différence",
|
||||
subtitle: "Arrêtez de perdre du temps sur les tâches manuelles. Automatisons tout et regardons votre productivité exploser.",
|
||||
items: [
|
||||
{
|
||||
title: "Magie Power Automate",
|
||||
description: "Transformez les tâches de 8 heures en workflows de 5 minutes"
|
||||
},
|
||||
{
|
||||
title: "Chatbots IA Qui Marchent",
|
||||
description: "Des bots intelligents qui comprennent vraiment votre entreprise"
|
||||
},
|
||||
{
|
||||
title: "Sorcellerie d'Intégration API",
|
||||
description: "Connectez tout à tout"
|
||||
},
|
||||
{
|
||||
title: "Optimisation Microsoft 365",
|
||||
description: "Faites fonctionner M365 comme ça aurait dû être dès le premier jour"
|
||||
},
|
||||
{
|
||||
title: "SharePoint Qui Ne Craint Pas",
|
||||
description: "Enfin, un SharePoint que les gens veulent vraiment utiliser"
|
||||
},
|
||||
{
|
||||
title: "Infrastructure Qui Scale",
|
||||
description: "Des systèmes solides comme le roc qui grandissent avec vous"
|
||||
}
|
||||
]
|
||||
},
|
||||
approach: {
|
||||
tagline: "LA MÉTHODE BERGSMA",
|
||||
title: "Moins de Blabla, Plus de Résultats",
|
||||
expertise: "15+ années à perfectionner l'art de faire fonctionner la technologie pour les entreprises",
|
||||
methods: [
|
||||
{
|
||||
title: "Focus sur l'Impact",
|
||||
description: "Chaque solution doit faire avancer votre entreprise"
|
||||
},
|
||||
{
|
||||
title: "Vitesse d'Implémentation",
|
||||
description: "Déploiement rapide, résultats immédiats"
|
||||
},
|
||||
{
|
||||
title: "Évolution Continue",
|
||||
description: "Votre stack tech évolue avec votre croissance"
|
||||
}
|
||||
],
|
||||
highlights: "Expertise niveau Microsoft MVP\nFlux Power Automate qui économisent des milliers d'heures\nIntégrations IA qui ont vraiment du sens\nSolutions d'entreprise avec l'agilité des startups"
|
||||
},
|
||||
cta: {
|
||||
button: "LANCEZ VOTRE TRANSFORMATION",
|
||||
title: "Prêt à Multiplier Votre Efficacité par 10 ?",
|
||||
subtitle: "Solutions d'automatisation premium • Résultats garantis • Implémentation ultra-rapide"
|
||||
},
|
||||
contact: {
|
||||
title: "Créons Quelque Chose d'Extraordinaire",
|
||||
subtitle: "Prêt à automatiser votre chemin vers le succès ? Envoyez-moi un message et rendons votre entreprise inarrêtable.",
|
||||
description: "Réponse rapide garantie • Solutions prêtes pour l'entreprise • Résultats mesurables",
|
||||
fields: {
|
||||
name: "👋 Votre Nom",
|
||||
namePlaceholder: "Comment dois-je vous appeler ?",
|
||||
email: "📧 Email",
|
||||
emailPlaceholder: "votre.email@entreprise.fr",
|
||||
message: "💭 Parlez-moi de Votre Projet",
|
||||
messagePlaceholder: "Quel processus métier vous rend fou ? Qu'automatiseriez-vous si vous pouviez agiter une baguette magique ?"
|
||||
},
|
||||
disclaimer: "🔒 Vos infos restent privées. Pas de spam, que des solutions."
|
||||
}
|
||||
}
|
||||
};
|
||||
212
src/pages/[lang]/index copy.astro
Normal file
212
src/pages/[lang]/index copy.astro
Normal file
@@ -0,0 +1,212 @@
|
||||
---
|
||||
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 Testimonials from '~/components/widgets/Testimonials.astro';
|
||||
import CallToAction from '~/components/widgets/CallToAction.astro';
|
||||
import Contact from '~/components/widgets/Contact.astro';
|
||||
import { getTranslation, supportedLanguages } from '~/i18n/translations';
|
||||
import OurCommitmentImage from '~/assets/images/OurCommitment.webp';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
return supportedLanguages.map((lang) => ({
|
||||
params: { lang },
|
||||
}));
|
||||
}
|
||||
|
||||
const { lang } = Astro.params;
|
||||
if (!supportedLanguages.includes(lang)) {
|
||||
return Astro.redirect('/en/');
|
||||
}
|
||||
|
||||
const t = getTranslation(lang);
|
||||
|
||||
const metadata = {
|
||||
title: 'IT Systems & Automation for Businesses',
|
||||
description: 'IT systems & automation for businesses. Microsoft 365, Power Automate, and cloud solutions by Richard Bergsma.'
|
||||
};
|
||||
---
|
||||
|
||||
<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>
|
||||
|
||||
<!-- Testimonials Widget
|
||||
<Testimonials
|
||||
tagline={t.homepage?.testimonials?.tagline || "Testimonials"}
|
||||
title={t.homepage?.testimonials?.title || "What Clients Say About My Work"}
|
||||
testimonials={(t.homepage?.testimonials?.items || [
|
||||
{
|
||||
testimonial:
|
||||
"Richard's expertise in Power Automate transformed our workflow processes, saving us countless hours and reducing errors significantly.",
|
||||
name: 'Client Name',
|
||||
description: 'Position, Company',
|
||||
},
|
||||
{
|
||||
testimonial:
|
||||
"The SharePoint implementation Richard delivered has revolutionized our document management and team collaboration capabilities.",
|
||||
name: 'Client Name',
|
||||
description: 'Position, Company',
|
||||
},
|
||||
{
|
||||
testimonial:
|
||||
"Richard's technical knowledge combined with his ability to understand our business needs resulted in solutions that truly addressed our challenges.",
|
||||
name: 'Client Name',
|
||||
description: 'Position, Company',
|
||||
},
|
||||
]).map(item => ({
|
||||
...item,
|
||||
image: {
|
||||
src: '~/assets/images/default.png',
|
||||
alt: item.name,
|
||||
}
|
||||
}))}
|
||||
/> -->
|
||||
|
||||
<!-- 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>
|
||||
@@ -4,11 +4,12 @@ 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 Testimonials from '~/components/widgets/Testimonials.astro';
|
||||
import CallToAction from '~/components/widgets/CallToAction.astro';
|
||||
import Contact from '~/components/widgets/Contact.astro';
|
||||
import { getTranslation, supportedLanguages } from '~/i18n/translations';
|
||||
import { getExplosiveHomepageTranslation } from '~/i18n/translations.homepage.ts';
|
||||
import OurCommitmentImage from '~/assets/images/OurCommitment.webp';
|
||||
import HomepageIntroImage from '~/assets/images/HomepageIntroImage.webp';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
return supportedLanguages.map((lang) => ({
|
||||
@@ -22,191 +23,637 @@ if (!supportedLanguages.includes(lang)) {
|
||||
}
|
||||
|
||||
const t = getTranslation(lang);
|
||||
const explosive = getExplosiveHomepageTranslation(lang);
|
||||
|
||||
const metadata = {
|
||||
title: 'IT Systems & Automation for Businesses',
|
||||
description: 'IT systems & automation for businesses. Microsoft 365, Power Automate, and cloud solutions by Richard Bergsma.'
|
||||
title: 'IT Systems & Automation for Businesses | Power Automate & Microsoft 365 Expert',
|
||||
description: 'Transform your business with expert IT automation solutions. Specializing in Power Automate, Microsoft 365, SharePoint, and custom API integrations for enhanced productivity and efficiency.'
|
||||
};
|
||||
---
|
||||
|
||||
<style>
|
||||
/* Explosive hero background with neon vibes */
|
||||
.hero-explosive {
|
||||
background:
|
||||
radial-gradient(circle at 20% 80%, #ff006e 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 20%, #8338ec 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 40%, #3a86ff 0%, transparent 50%),
|
||||
linear-gradient(135deg, #06ffa5 0%, #ff006e 25%, #8338ec 50%, #3a86ff 75%, #06ffa5 100%);
|
||||
background-size: 300% 300%, 250% 250%, 400% 400%, 600% 600%;
|
||||
animation: explosiveGradient 15s ease infinite;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Floating orbs with vivid colors */
|
||||
.floating-orbs {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.orb {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(2px);
|
||||
animation: orbFloat 20s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.orb-1 {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: radial-gradient(circle, #ff006e, #ff6b9d);
|
||||
top: 10%;
|
||||
left: 15%;
|
||||
animation-delay: 0s;
|
||||
box-shadow: 0 0 30px rgba(255, 0, 110, 0.3);
|
||||
}
|
||||
|
||||
.orb-2 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: radial-gradient(circle, #8338ec, #a663cc);
|
||||
top: 70%;
|
||||
right: 10%;
|
||||
animation-delay: -7s;
|
||||
box-shadow: 0 0 40px rgba(131, 56, 236, 0.3);
|
||||
}
|
||||
|
||||
.orb-3 {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: radial-gradient(circle, #3a86ff, #72b4ff);
|
||||
bottom: 30%;
|
||||
left: 70%;
|
||||
animation-delay: -14s;
|
||||
box-shadow: 0 0 25px rgba(58, 134, 255, 0.3);
|
||||
}
|
||||
|
||||
.orb-4 {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
background: radial-gradient(circle, #06ffa5, #59ffb8);
|
||||
top: 40%;
|
||||
left: 5%;
|
||||
animation-delay: -10s;
|
||||
box-shadow: 0 0 35px rgba(6, 255, 165, 0.3);
|
||||
}
|
||||
|
||||
.orb-5 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: radial-gradient(circle, #ffbe0b, #ffd23f);
|
||||
top: 20%;
|
||||
right: 30%;
|
||||
animation-delay: -3s;
|
||||
box-shadow: 0 0 20px rgba(255, 190, 11, 0.3);
|
||||
}
|
||||
|
||||
@keyframes explosiveGradient {
|
||||
0%, 100% { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 50%; }
|
||||
25% { background-position: 100% 100%, 50% 50%, 25% 75%, 100% 50%; }
|
||||
50% { background-position: 50% 25%, 100% 0%, 75% 25%, 50% 100%; }
|
||||
75% { background-position: 25% 75%, 25% 100%, 50% 50%, 0% 50%; }
|
||||
}
|
||||
|
||||
@keyframes orbFloat {
|
||||
0%, 100% {
|
||||
transform: translateY(0px) translateX(0px) scale(1);
|
||||
opacity: 0.6;
|
||||
}
|
||||
25% {
|
||||
transform: translateY(-60px) translateX(40px) scale(1.2);
|
||||
opacity: 0.8;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-30px) translateX(-20px) scale(0.9);
|
||||
opacity: 0.7;
|
||||
}
|
||||
75% {
|
||||
transform: translateY(-80px) translateX(60px) scale(1.1);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
/* Vibrant glass cards */
|
||||
:global(.glass-vibrant) {
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
backdrop-filter: blur(30px) !important;
|
||||
border: 2px solid rgba(255, 255, 255, 0.2) !important;
|
||||
box-shadow:
|
||||
0 25px 45px rgba(0, 0, 0, 0.1),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.1) inset,
|
||||
0 0 60px rgba(102, 126, 234, 0.3) !important;
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
border-radius: 32px !important;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:global(.glass-vibrant::before) {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg,
|
||||
rgba(255, 0, 110, 0.1) 0%,
|
||||
rgba(131, 56, 236, 0.1) 25%,
|
||||
rgba(58, 134, 255, 0.1) 50%,
|
||||
rgba(6, 255, 165, 0.1) 75%,
|
||||
rgba(255, 190, 11, 0.1) 100%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
:global(.glass-vibrant:hover::before) {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
:global(.glass-vibrant:hover) {
|
||||
box-shadow:
|
||||
0 40px 80px rgba(0, 0, 0, 0.2),
|
||||
0 0 0 2px rgba(255, 255, 255, 0.2) inset,
|
||||
0 0 100px rgba(102, 126, 234, 0.5) !important;
|
||||
}
|
||||
|
||||
/* Dark mode vibrant */
|
||||
:global(.dark .glass-vibrant) {
|
||||
background: rgba(0, 0, 0, 0.3) !important;
|
||||
border-color: rgba(255, 255, 255, 0.2) !important;
|
||||
box-shadow:
|
||||
0 25px 45px rgba(0, 0, 0, 0.4),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.1) inset,
|
||||
0 0 60px rgba(131, 56, 236, 0.4) !important;
|
||||
}
|
||||
|
||||
:global(.dark .glass-vibrant:hover) {
|
||||
box-shadow:
|
||||
0 40px 80px rgba(0, 0, 0, 0.6),
|
||||
0 0 0 2px rgba(255, 255, 255, 0.2) inset,
|
||||
0 0 100px rgba(131, 56, 236, 0.6) !important;
|
||||
}
|
||||
|
||||
/* Refined text effects */
|
||||
.neon-title {
|
||||
font-size: clamp(3rem, 8vw, 6rem);
|
||||
font-weight: 900;
|
||||
background: linear-gradient(135deg,
|
||||
#ff006e 0%,
|
||||
#8338ec 25%,
|
||||
#3a86ff 50%,
|
||||
#06ffa5 75%,
|
||||
#ffbe0b 100%);
|
||||
background-size: 300% 300%;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
animation: neonPulse 4s ease-in-out infinite alternate;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 2rem;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.neon-subtitle {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
text-shadow: 0 2px 10px rgba(255, 255, 255, 0.3);
|
||||
margin-bottom: 3rem;
|
||||
line-height: 1.4;
|
||||
max-width: 800px;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
/* Proper light mode fixes using html class */
|
||||
html:not(.dark) .neon-subtitle {
|
||||
color: rgba(15, 23, 42, 0.9) !important;
|
||||
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
@keyframes neonPulse {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Refined CTA buttons */
|
||||
.cta-explosive {
|
||||
background: linear-gradient(135deg, #ff006e, #8338ec, #3a86ff);
|
||||
background-size: 300% 300%;
|
||||
color: white;
|
||||
padding: 1.2rem 3rem;
|
||||
border-radius: 60px;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
font-size: 1.2rem;
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 8px 25px rgba(255, 0, 110, 0.25);
|
||||
border: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.cta-explosive::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
|
||||
transition: left 0.6s;
|
||||
}
|
||||
|
||||
.cta-explosive:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.cta-explosive:hover {
|
||||
transform: translateY(-3px) scale(1.05);
|
||||
box-shadow: 0 15px 35px rgba(255, 0, 110, 0.4);
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
.cta-secondary-explosive {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(20px);
|
||||
color: white;
|
||||
padding: 1.2rem 3rem;
|
||||
border-radius: 60px;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
font-size: 1.2rem;
|
||||
border: 2px solid rgba(6, 255, 165, 0.4);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.cta-secondary-explosive:hover {
|
||||
background: rgba(6, 255, 165, 0.15);
|
||||
transform: translateY(-2px) scale(1.03);
|
||||
border-color: rgba(6, 255, 165, 0.6);
|
||||
}
|
||||
|
||||
/* Light mode CTA fixes */
|
||||
html:not(.dark) .cta-secondary-explosive {
|
||||
background: rgba(255, 255, 255, 0.9) !important;
|
||||
color: rgba(15, 23, 42, 0.9) !important;
|
||||
border-color: rgba(6, 255, 165, 0.6) !important;
|
||||
}
|
||||
|
||||
html:not(.dark) .cta-secondary-explosive:hover {
|
||||
background: rgba(6, 255, 165, 0.1) !important;
|
||||
color: rgba(15, 23, 42, 1) !important;
|
||||
}
|
||||
|
||||
/* Light mode content card fixes */
|
||||
html:not(.dark) .light-mode-card {
|
||||
background: rgba(255, 255, 255, 0.8) !important;
|
||||
border-color: rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
html:not(.dark) .method-title {
|
||||
color: rgba(15, 23, 42, 0.9) !important;
|
||||
}
|
||||
|
||||
html:not(.dark) .method-description {
|
||||
color: rgba(75, 85, 99, 0.9) !important;
|
||||
}
|
||||
|
||||
html:not(.dark) .method-highlights {
|
||||
color: rgba(15, 23, 42, 0.8) !important;
|
||||
}
|
||||
|
||||
/* Light mode CTA section fixes */
|
||||
html:not(.dark) .cta-subtitle {
|
||||
color: rgba(15, 23, 42, 0.9) !important;
|
||||
}
|
||||
|
||||
@keyframes ctaGlow {
|
||||
0% { box-shadow: 0 8px 25px rgba(255, 0, 110, 0.25); }
|
||||
100% { box-shadow: 0 8px 25px rgba(58, 134, 255, 0.35); }
|
||||
}
|
||||
|
||||
/* Service cards with color coding */
|
||||
.service-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.service-card-1::before { background: linear-gradient(135deg, rgba(255, 0, 110, 0.2), rgba(255, 107, 157, 0.1)); }
|
||||
.service-card-2::before { background: linear-gradient(135deg, rgba(131, 56, 236, 0.2), rgba(166, 99, 204, 0.1)); }
|
||||
.service-card-3::before { background: linear-gradient(135deg, rgba(58, 134, 255, 0.2), rgba(114, 180, 255, 0.1)); }
|
||||
.service-card-4::before { background: linear-gradient(135deg, rgba(6, 255, 165, 0.2), rgba(89, 255, 184, 0.1)); }
|
||||
.service-card-5::before { background: linear-gradient(135deg, rgba(255, 190, 11, 0.2), rgba(255, 210, 63, 0.1)); }
|
||||
.service-card-6::before { background: linear-gradient(135deg, rgba(255, 87, 108, 0.2), rgba(255, 154, 158, 0.1)); }
|
||||
|
||||
.service-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.service-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Section backgrounds with gradients */
|
||||
.section-gradient-1 {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(255, 0, 110, 0.05) 0%,
|
||||
rgba(131, 56, 236, 0.05) 50%,
|
||||
rgba(58, 134, 255, 0.05) 100%);
|
||||
}
|
||||
|
||||
.section-gradient-2 {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(6, 255, 165, 0.05) 0%,
|
||||
rgba(255, 190, 11, 0.05) 50%,
|
||||
rgba(255, 87, 108, 0.05) 100%);
|
||||
}
|
||||
|
||||
.section-gradient-3 {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(58, 134, 255, 0.05) 0%,
|
||||
rgba(131, 56, 236, 0.05) 50%,
|
||||
rgba(255, 0, 110, 0.05) 100%);
|
||||
}
|
||||
|
||||
/* Content spacing */
|
||||
.content-section {
|
||||
margin: 8rem 0;
|
||||
position: relative;
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
.content-section:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.content-section:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Animation entrance */
|
||||
.explosive-entrance {
|
||||
animation: explosiveSlideUp 1s ease-out forwards;
|
||||
opacity: 0;
|
||||
transform: translateY(60px) scale(0.9);
|
||||
}
|
||||
|
||||
.explosive-entrance:nth-child(1) { animation-delay: 0.1s; }
|
||||
.explosive-entrance:nth-child(2) { animation-delay: 0.3s; }
|
||||
.explosive-entrance:nth-child(3) { animation-delay: 0.5s; }
|
||||
.explosive-entrance:nth-child(4) { animation-delay: 0.7s; }
|
||||
|
||||
@keyframes explosiveSlideUp {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Hero full screen */
|
||||
.hero-fullscreen {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.neon-title {
|
||||
font-size: clamp(2rem, 8vw, 4rem);
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.neon-subtitle {
|
||||
font-size: 1.2rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
margin: 5rem 0;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.cta-explosive,
|
||||
.cta-secondary-explosive {
|
||||
padding: 1rem 2rem;
|
||||
font-size: 1rem;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<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',
|
||||
}}
|
||||
/>
|
||||
<!-- Explosive Hero Section -->
|
||||
<div class="hero-fullscreen">
|
||||
<Hero
|
||||
isDark={false}
|
||||
actions={[
|
||||
{
|
||||
variant: 'primary',
|
||||
text: explosive.actions.learnMore,
|
||||
href: '#services',
|
||||
|
||||
<!-- 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',
|
||||
class: 'cta-explosive'
|
||||
},
|
||||
{
|
||||
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',
|
||||
text: explosive.actions.contactMe,
|
||||
href: '#contact',
|
||||
class: 'cta-secondary-explosive'
|
||||
},
|
||||
{
|
||||
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' }))}
|
||||
/>
|
||||
]}
|
||||
image={{
|
||||
src: HomepageIntroImage,
|
||||
alt: 'IT Automation Revolution',
|
||||
loading: 'eager',
|
||||
}}
|
||||
>
|
||||
<Fragment slot="bg">
|
||||
<div class="hero-explosive">
|
||||
<div class="floating-orbs">
|
||||
<div class="orb orb-1"></div>
|
||||
<div class="orb orb-2"></div>
|
||||
<div class="orb orb-3"></div>
|
||||
<div class="orb orb-4"></div>
|
||||
<div class="orb orb-5"></div>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
|
||||
<!-- 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">
|
||||
<Fragment slot="title">
|
||||
<div class="neon-title">
|
||||
{explosive.hero.title}
|
||||
</div>
|
||||
</Fragment>
|
||||
|
||||
<Fragment slot="subtitle">
|
||||
<div class="neon-subtitle">
|
||||
{explosive.hero.subtitle}
|
||||
</div>
|
||||
</Fragment>
|
||||
</Hero>
|
||||
</div>
|
||||
|
||||
<!-- Services with Color Explosions -->
|
||||
<div id="services" class="content-section section-gradient-1 explosive-entrance">
|
||||
<Features
|
||||
id="services"
|
||||
tagline={explosive.services.tagline}
|
||||
title={explosive.services.title}
|
||||
subtitle={explosive.services.subtitle}
|
||||
items={explosive.services.items.map((item, index) => ({
|
||||
title: item.title,
|
||||
description: item.description,
|
||||
icon: [
|
||||
'tabler:bolt',
|
||||
'tabler:robot',
|
||||
'tabler:plug-connected',
|
||||
'tabler:building-skyscraper',
|
||||
'tabler:share',
|
||||
'tabler:shield-check'
|
||||
][index],
|
||||
class: `service-card service-card-${index + 1}`
|
||||
}))}
|
||||
classes={{
|
||||
container: 'glass-vibrant'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Approach Section with Combined Card -->
|
||||
<div id="approach" class="content-section section-gradient-2 explosive-entrance">
|
||||
<Content
|
||||
isReversed
|
||||
tagline={explosive.approach.tagline}
|
||||
title={explosive.approach.title}
|
||||
items={[]}
|
||||
image={{
|
||||
src: OurCommitmentImage,
|
||||
alt: 'Results-Driven IT Solutions',
|
||||
loading: 'lazy',
|
||||
}}
|
||||
classes={{
|
||||
container: 'glass-vibrant'
|
||||
}}
|
||||
>
|
||||
<Fragment slot="content">
|
||||
<div class="text-xl text-white space-y-8">
|
||||
<div class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-pink-400 to-purple-400 mb-8">
|
||||
{explosive.approach.expertise}
|
||||
</div>
|
||||
|
||||
<!-- Combined Method Card -->
|
||||
<div class="bg-black/20 backdrop-blur-lg rounded-2xl p-8 border border-white/10 space-y-6 light-mode-card">
|
||||
{explosive.approach.methods.map((method, index) => (
|
||||
<div class="flex items-start space-x-4">
|
||||
<div class={`w-12 h-12 rounded-full ${
|
||||
['bg-gradient-to-r from-green-400 to-green-600',
|
||||
'bg-gradient-to-r from-yellow-400 to-orange-500',
|
||||
'bg-gradient-to-r from-blue-400 to-purple-500'][index]
|
||||
} flex items-center justify-center flex-shrink-0`}>
|
||||
<span class="text-2xl">{['🎯', '⚡', '🔄'][index]}</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-white mb-2 method-title">{method.title}</h3>
|
||||
<p class="text-gray-300 method-description">{method.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div class="text-lg pt-4 method-highlights" set:html={explosive.approach.highlights.replace(/\n/g, '<br/>')}>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
</Content>
|
||||
</div>
|
||||
|
||||
<!-- Call to Action Explosion -->
|
||||
<div id="cta" class="content-section section-gradient-3 explosive-entrance">
|
||||
<CallToAction
|
||||
callToAction={{
|
||||
text: explosive.cta.button,
|
||||
href: '#contact',
|
||||
icon: 'tabler:rocket',
|
||||
class: 'cta-explosive'
|
||||
}}
|
||||
classes={{
|
||||
container: 'glass-vibrant'
|
||||
}}
|
||||
>
|
||||
<Fragment slot="title">
|
||||
<div class="text-6xl font-black mb-6">
|
||||
<span class="text-transparent bg-clip-text bg-gradient-to-r from-pink-400 via-purple-400 to-blue-400">
|
||||
{explosive.cta.title}
|
||||
</span>
|
||||
</div>
|
||||
</Fragment>
|
||||
<Fragment slot="subtitle">
|
||||
<div class="text-2xl text-white font-semibold cta-subtitle">
|
||||
{explosive.cta.subtitle}
|
||||
</div>
|
||||
</Fragment>
|
||||
</CallToAction>
|
||||
</div>
|
||||
|
||||
<!-- Contact with Personality -->
|
||||
<div id="contact" class="content-section explosive-entrance">
|
||||
<Contact
|
||||
id="contact"
|
||||
title={explosive.contact.title}
|
||||
subtitle={explosive.contact.subtitle}
|
||||
inputs={[
|
||||
{
|
||||
(
|
||||
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>
|
||||
|
||||
<!-- Testimonials Widget
|
||||
<Testimonials
|
||||
tagline={t.homepage?.testimonials?.tagline || "Testimonials"}
|
||||
title={t.homepage?.testimonials?.title || "What Clients Say About My Work"}
|
||||
testimonials={(t.homepage?.testimonials?.items || [
|
||||
{
|
||||
testimonial:
|
||||
"Richard's expertise in Power Automate transformed our workflow processes, saving us countless hours and reducing errors significantly.",
|
||||
name: 'Client Name',
|
||||
description: 'Position, Company',
|
||||
},
|
||||
{
|
||||
testimonial:
|
||||
"The SharePoint implementation Richard delivered has revolutionized our document management and team collaboration capabilities.",
|
||||
name: 'Client Name',
|
||||
description: 'Position, Company',
|
||||
},
|
||||
{
|
||||
testimonial:
|
||||
"Richard's technical knowledge combined with his ability to understand our business needs resulted in solutions that truly addressed our challenges.",
|
||||
name: 'Client Name',
|
||||
description: 'Position, Company',
|
||||
},
|
||||
]).map(item => ({
|
||||
...item,
|
||||
image: {
|
||||
src: '~/assets/images/default.png',
|
||||
alt: item.name,
|
||||
}
|
||||
}))}
|
||||
/> -->
|
||||
|
||||
<!-- 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."}
|
||||
/>
|
||||
type: 'text',
|
||||
name: 'name',
|
||||
label: explosive.contact.fields.name,
|
||||
placeholder: explosive.contact.fields.namePlaceholder,
|
||||
},
|
||||
{
|
||||
type: 'email',
|
||||
name: 'email',
|
||||
label: explosive.contact.fields.email,
|
||||
placeholder: explosive.contact.fields.emailPlaceholder,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
label: explosive.contact.fields.message,
|
||||
placeholder: explosive.contact.fields.messagePlaceholder,
|
||||
rows: 6,
|
||||
}}
|
||||
disclaimer={{
|
||||
label: explosive.contact.disclaimer,
|
||||
}}
|
||||
description={explosive.contact.description}
|
||||
classes={{
|
||||
container: 'glass-vibrant'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Layout>
|
||||
Reference in New Issue
Block a user