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:
@@ -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',
|
||||
|
||||
class: 'cta-explosive'
|
||||
},
|
||||
{
|
||||
text: explosive.actions.contactMe,
|
||||
href: '#contact',
|
||||
class: 'cta-secondary-explosive'
|
||||
},
|
||||
]}
|
||||
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>
|
||||
|
||||
<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>
|
||||
|
||||
<!-- 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' }))}
|
||||
/>
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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">
|
||||
<!-- 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."}
|
||||
/>
|
||||
</Layout>
|
||||
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