Adding button "get in touch", text additions

This commit is contained in:
Sascha 2025-10-09 13:21:02 +02:00
parent 758f02f584
commit b213bc58ff
3 changed files with 26 additions and 4 deletions

View File

@ -10,6 +10,7 @@ interface HeroSectionProps {
description?: string;
primaryButtonText?: string;
secondaryButtonText?: string;
tertiaryButtonText?: string;
statItems?: StatItem[];
}
@ -22,6 +23,7 @@ export default function HeroSection(props: HeroSectionProps = {}) {
description = texts.description,
primaryButtonText = texts.primaryButtonText,
secondaryButtonText = texts.secondaryButtonText,
tertiaryButtonText = texts.tertiaryButtonText,
statItems = texts.statItems,
} = props;
const location = useLocation();
@ -58,6 +60,17 @@ export default function HeroSection(props: HeroSectionProps = {}) {
}
}
};
const handleGetInTouch = () => {
const contactSection = document.querySelector('.contact-section');
if (contactSection) {
contactSection.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
};
return (
<section className="hero-section">
<div className="hero-section__container">
@ -79,6 +92,12 @@ export default function HeroSection(props: HeroSectionProps = {}) {
<Download className="hero-section__button-icon" />
{secondaryButtonText}
</button>
<button
className="hero-section__button hero-section__button--tertiary"
onClick={handleGetInTouch}
>
{tertiaryButtonText}
</button>
</div>
<div className="hero-section__stats">
{statItems.map((item, index) => (

View File

@ -28,6 +28,7 @@ export interface TextConfig {
description: string;
primaryButtonText: string;
secondaryButtonText: string;
tertiaryButtonText: string;
statItems: Array<{
label: string;
value: string;
@ -215,11 +216,12 @@ export const defaultTexts: TextConfig = {
},
hero: {
title: 'Building Digital Experiences',
title: 'Everyone deserves a smooth online experience',
description:
'Freelance software developer specializing in implementing the European Accessibility Act, modern web technologies and user experience.',
'I help you build accessible websites that make every visitor feel included, in line with the Accessibility Act.',
primaryButtonText: 'View Projects',
secondaryButtonText: 'Get in Touch',
secondaryButtonText: 'Download CV',
tertiaryButtonText: 'Get in Touch',
statItems: [
{ label: 'Years of Experience', value: '10+' },
{ label: 'Responsive Design', value: '100%' },

View File

@ -54,7 +54,8 @@
&__button {
@extend %hero-button-base;
&--primary {
&--primary,
&--tertiary {
background: var(--gradient-primary);
color: var(--color-background);