liquid-development/website
3
0
Fork 0
Code Issues Pull Requests Activity

add space between hero title

Browse Source
This commit is contained in:
Mathis Kirchner
2025-12-19 12:14:14 +00:00
parent 1c97147a6d
commit cd42922983
1 changed files with 53 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/sections/Hero.jsx
View File

@@ -1,69 +1,88 @@
import React from 'react'; import React from 'react';
import {motion} from 'framer-motion'; import { motion } from 'framer-motion';
import {ArrowRight} from 'lucide-react'; import { ArrowRight } from 'lucide-react';
import {BrandLogo} from '../components/BrandLogo'; import { BrandLogo } from '../components/BrandLogo';
import {Bubbles} from '../components/Bubbles'; import { Bubbles } from '../components/Bubbles';
import {ObfuscatedMail} from '../components/ObfuscatedMail'; import { ObfuscatedMail } from '../components/ObfuscatedMail';
import {SOCIALS} from '../data/content'; import { SOCIALS } from '../data/content';
export const Hero = () => { export const Hero = () => {
const emailSocial = SOCIALS.find(s => !s.link.startsWith('http')); const emailSocial = SOCIALS.find(s => !s.link.startsWith('http'));
const rawEmail = emailSocial ? emailSocial.link : 'hello@liquid-dev.de'; const rawEmail = emailSocial ? emailSocial.link : 'hello@liquid-dev.de';
return ( return (
<section id="home" className="relative h-screen flex items-center justify-center pt-20 overflow-hidden" <section
id="home"
className="relative h-screen flex items-center justify-center pt-20 overflow-hidden"
> >
<div className="absolute inset-0 opacity-10" <div
style={{ className="absolute inset-0 opacity-10"
backgroundImage: 'radial-gradient(#ffffff 1px, transparent 1px)', style={{
backgroundSize: '40px 40px' backgroundImage: 'radial-gradient(#ffffff 1px, transparent 1px)',
}}> backgroundSize: '40px 40px',
</div> }}
<Bubbles/> />
<Bubbles />
<div className="relative z-10 text-center px-6 max-w-6xl mx-auto"> <div className="relative z-10 text-center px-6 max-w-6xl mx-auto">
<motion.div initial={{scale: 0.8, opacity: 0}} animate={{scale: 1, opacity: 1}} <motion.div
transition={{duration: 0.8}} initial={{ scale: 0.8, opacity: 0 }}
className="mx-auto mb-8 w-24 h-24 md:w-32 md:h-32 rounded-full bg-[#00A3FF]/5 flex items-center justify-center border border-[#00A3FF]/30 shadow-[0_0_60px_-10px_rgba(0,163,255,0.4)]" animate={{ scale: 1, opacity: 1 }}
transition={{ duration: 0.8 }}
className="mx-auto mb-8 w-24 h-24 md:w-32 md:h-32 rounded-full bg-[#00A3FF]/5 flex items-center justify-center border border-[#00A3FF]/30 shadow-[0_0_60px_-10px_rgba(0,163,255,0.4)]"
> >
<BrandLogo className="w-14 h-14 md:w-20 md:h-20 text-[#00A3FF]"/> <BrandLogo className="w-14 h-14 md:w-20 md:h-20 text-[#00A3FF]" />
</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 }}
>
<h1 className="text-4xl md:text-7xl font-extrabold tracking-tighter mb-6"> <h1 className="text-4xl md:text-7xl font-extrabold tracking-tighter mb-6">
<ObfuscatedMail email={rawEmail} <ObfuscatedMail
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" 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"
> >
LIQUID LIQUID
<span <span className="ml-3 text-transparent bg-clip-text bg-gradient-to-r from-[#00A3FF] to-cyan-200">
className="text-transparent bg-clip-text bg-gradient-to-r from-[#00A3FF] to-cyan-200"
>
DEVELOPMENT DEVELOPMENT
</span> </span>
</ObfuscatedMail> </ObfuscatedMail>
</h1> </h1>
</motion.div> </motion.div>
<motion.p initial={{y: 20, opacity: 0}} animate={{y: 0, opacity: 1}} transition={{delay: 0.4}} <motion.p
className="text-lg md:text-2xl text-gray-400 mb-10 max-w-2xl mx-auto font-light">Open-source initial={{ y: 20, opacity: 0 }}
software development team 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"
>
Open-source software development team
</motion.p> </motion.p>
<motion.div initial={{y: 20, opacity: 0}} animate={{y: 0, opacity: 1}} transition={{delay: 0.6}} <motion.div
className="flex flex-col sm:flex-row gap-6 justify-center items-center"> initial={{ y: 20, opacity: 0 }}
<a href="#projects" animate={{ y: 0, opacity: 1 }}
className="px-8 py-3 rounded-full border border-[#00A3FF] hover:bg-[#00A3FF]/10 text-white font-bold transition-all flex items-center justify-center gap-2" transition={{ delay: 0.6 }}
className="flex flex-col sm:flex-row gap-6 justify-center items-center"
>
<a
href="#projects"
className="px-8 py-3 rounded-full border border-[#00A3FF] hover:bg-[#00A3FF]/10 text-white font-bold transition-all flex items-center justify-center gap-2"
> >
Explore Work Explore Work
</a> </a>
{/* Obfuscated Text Button */}
<ObfuscatedMail <ObfuscatedMail
email={rawEmail} email={rawEmail}
className="group flex items-center gap-2 text-white hover:text-gray-400 transition-colors font-medium cursor-pointer" className="group flex items-center gap-2 text-white hover:text-gray-400 transition-colors font-medium cursor-pointer"
> >
Contact Team Contact Team
<ArrowRight size={18} <ArrowRight
className="group-hover:translate-x-1 transition-transform text-[#00A3FF]" size={18}
className="group-hover:translate-x-1 transition-transform text-[#00A3FF]"
/> />
</ObfuscatedMail> </ObfuscatedMail>
</motion.div> </motion.div>