Updated obfuscation in hero section

This commit is contained in:
2025-12-18 20:59:35 +01:00
parent f26edad96e
commit 296a17ebbc
2 changed files with 12 additions and 18 deletions

View File

@@ -1,24 +1,19 @@
import React, { useState } from 'react'; import React from 'react';
export const ObfuscatedMail = ({ email, className, children, title }) => { export const ObfuscatedMail = ({ email, className, children, title }) => {
// Start with a dummy link so bots don't see 'mailto:' const handleClick = (e) => {
const [href, setHref] = useState("#"); e.preventDefault();
window.location.href = `mailto:${email}`;
// Only reveal the real email when the user hovers or focuses
const reveal = () => {
setHref(`mailto:${email}`);
}; };
return ( return (
<a <button
href={href} onClick={handleClick}
onMouseEnter={reveal}
onFocus={reveal}
onClick={reveal}
className={className} className={className}
title={title || "Send email"} title={title || "Send email"}
type="button"
> >
{children} {children}
</a> </button>
); );
}; };

View File

@@ -19,12 +19,11 @@ export const Hero = () => {
</motion.div> </motion.div>
<motion.div initial={{ y: 20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ delay: 0.2 }}> <motion.div initial={{ y: 20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ delay: 0.2 }}>
{/* Obfuscated Title Link */} <h1 className="text-4xl md:text-7xl font-extrabold tracking-tighter mb-6">
<ObfuscatedMail email={rawEmail} className="block cursor-pointer hover:opacity-80 transition-opacity duration-300"> <ObfuscatedMail email={rawEmail} className="cursor-pointer hover:opacity-80 transition-opacity duration-300 bg-transparent border-none p-0 font-extrabold tracking-tighter text-4xl md:text-7xl text-white">
<h1 className="text-4xl md:text-7xl font-extrabold tracking-tighter mb-6">
LIQUID <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#00A3FF] to-cyan-200">DEVELOPMENT</span> LIQUID <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#00A3FF] to-cyan-200">DEVELOPMENT</span>
</h1> </ObfuscatedMail>
</ObfuscatedMail> </h1>
</motion.div> </motion.div>
<motion.p initial={{ y: 20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ delay: 0.4 }} className="text-lg md:text-2xl text-gray-400 mb-10 max-w-2xl mx-auto font-light">German Development Team</motion.p> <motion.p initial={{ y: 20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ delay: 0.4 }} className="text-lg md:text-2xl text-gray-400 mb-10 max-w-2xl mx-auto font-light">German Development Team</motion.p>