Adding button "get in touch", text additions
This commit is contained in:
parent
758f02f584
commit
b213bc58ff
|
|
@ -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) => (
|
||||
|
|
|
|||
|
|
@ -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%' },
|
||||
|
|
|
|||
|
|
@ -54,7 +54,8 @@
|
|||
&__button {
|
||||
@extend %hero-button-base;
|
||||
|
||||
&--primary {
|
||||
&--primary,
|
||||
&--tertiary {
|
||||
background: var(--gradient-primary);
|
||||
color: var(--color-background);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue