104 lines
7.2 KiB
TypeScript
104 lines
7.2 KiB
TypeScript
// app/contact/page.tsx
|
|
|
|
import { FaInstagram, FaLinkedin, FaDiscord, FaEnvelope, FaMapMarkerAlt } from 'react-icons/fa';
|
|
import Image from 'next/image';
|
|
|
|
export default function ContactPage() {
|
|
return (
|
|
<main className="flex flex-col flex-1 relative bg-slate-50 dark:bg-[#0d1117] overflow-hidden transition-colors duration-300">
|
|
|
|
{/* 1. Immersive Mountain Background */}
|
|
<Image
|
|
src="/assets/images/snowy_mountain_peaks.jpg"
|
|
alt="Snowy Mountains"
|
|
fill
|
|
priority
|
|
className="absolute inset-0 w-full h-full object-cover z-0"
|
|
/>
|
|
{/* Dark blur overlay so the text and cards remain perfectly readable */}
|
|
<div className="absolute inset-0 bg-slate-100/30 dark:bg-[#0d1117]/85 backdrop-blur-md z-0 transition-colors duration-300"></div>
|
|
|
|
<div className="h-25 shrink-0 z-10"></div>
|
|
|
|
<section className="relative z-10 flex-1 flex flex-col justify-center items-center py-12 px-6">
|
|
|
|
<div className="mb-12 text-center">
|
|
<h1 className="text-slate-900 dark:text-white text-[40px] md:text-[55px] uppercase font-black tracking-tighter drop-shadow-lg transition-colors">
|
|
Find me here!
|
|
</h1>
|
|
<p className="text-[#84c0a0] font-mono font-bold tracking-widest mt-2 uppercase">
|
|
Transmission & Socials
|
|
</p>
|
|
</div>
|
|
|
|
<div className="w-full max-w-3xl bg-white/80 dark:bg-white/5 backdrop-blur-xl rounded-4xl border border-slate-200 dark:border-white/10 shadow-xl dark:shadow-[0_8px_32px_rgba(0,0,0,0.5)] p-8 md:p-12 transition-colors duration-300">
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
|
|
|
|
<div className="flex flex-col gap-8">
|
|
<h3 className="text-slate-900 dark:text-white text-xl font-bold border-b border-slate-200 dark:border-white/10 pb-4 uppercase tracking-wider transition-colors">Direct Info</h3>
|
|
|
|
<div className="flex items-center gap-4 group">
|
|
<div className="w-12 h-12 rounded-2xl bg-[#84c0a0]/10 flex items-center justify-center border border-[#84c0a0]/30 group-hover:bg-[#84c0a0]/20 transition-all">
|
|
<FaEnvelope className="text-[#84c0a0] text-xl" />
|
|
</div>
|
|
<div>
|
|
<p className="text-slate-500 dark:text-gray-400 text-xs uppercase font-bold tracking-widest transition-colors">Email</p>
|
|
<a href="mailto:support@soderberg.tech" className="text-slate-900 dark:text-white font-medium hover:text-[#84c0a0] dark:hover:text-[#84c0a0] transition-colors break-all">
|
|
support@soderberg.tech
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4 group">
|
|
<div className="w-12 h-12 rounded-2xl bg-[#84c0a0]/10 flex items-center justify-center border border-[#84c0a0]/30">
|
|
<FaMapMarkerAlt className="text-[#84c0a0] text-xl" />
|
|
</div>
|
|
<div>
|
|
<p className="text-slate-500 dark:text-gray-400 text-xs uppercase font-bold tracking-widest transition-colors">Location</p>
|
|
<p className="text-slate-900 dark:text-white font-medium transition-colors">Höganäs, Sweden</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-4">
|
|
<h3 className="text-slate-900 dark:text-white text-xl font-bold border-b border-slate-200 dark:border-white/10 pb-4 uppercase tracking-wider transition-colors">Networks</h3>
|
|
|
|
<div className="grid grid-cols-1 gap-3">
|
|
<a href="https://www.linkedin.com/in/william-s%C3%B6derberg-5b79bb247" target="_blank" className="flex items-center justify-between p-4 rounded-2xl bg-white/50 dark:bg-white/5 border border-slate-200 dark:border-white/5 hover:border-[#0077b5]/50 hover:bg-[#0077b5]/10 transition-all group">
|
|
<div className="flex items-center gap-3 text-slate-900 dark:text-white font-bold transition-colors">
|
|
<FaLinkedin className="text-xl text-[#0077b5]" /> LinkedIn
|
|
</div>
|
|
<span className="text-slate-400 dark:text-gray-500 group-hover:text-[#0077b5] group-hover:translate-x-1 transition-all">→</span>
|
|
</a>
|
|
|
|
<a href="https://discordapp.com/users/271290165106966528" target="_blank" className="flex items-center justify-between p-4 rounded-2xl bg-white/50 dark:bg-white/5 border border-slate-200 dark:border-white/5 hover:border-[#5865F2]/50 hover:bg-[#5865F2]/10 transition-all group">
|
|
<div className="flex items-center gap-3 text-slate-900 dark:text-white font-bold transition-colors">
|
|
<FaDiscord className="text-xl text-[#5865F2]" /> Discord
|
|
</div>
|
|
<span className="text-slate-400 dark:text-gray-500 group-hover:text-[#5865F2] group-hover:translate-x-1 transition-all">→</span>
|
|
</a>
|
|
|
|
<a href="https://www.instagram.com/will.i.am.soderberg/" target="_blank" className="flex items-center justify-between p-4 rounded-2xl bg-white/50 dark:bg-white/5 border border-slate-200 dark:border-white/5 hover:border-[#E1306C]/50 hover:bg-[#E1306C]/10 transition-all group">
|
|
<div className="flex items-center gap-3 text-slate-900 dark:text-white font-bold transition-colors">
|
|
<FaInstagram className="text-xl text-[#E1306C]" /> Instagram
|
|
</div>
|
|
<span className="text-slate-400 dark:text-gray-500 group-hover:text-[#E1306C] group-hover:translate-x-1 transition-all">→</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-12">
|
|
<a
|
|
href="mailto:support@soderberg.tech?subject=Contact%20me"
|
|
className="w-full flex items-center justify-center gap-3 py-5 rounded-2xl bg-[#84c0a0] text-white dark:text-[#0d1117] font-bold text-lg hover:scale-[1.02] active:scale-[0.98] transition-all shadow-[0_0_20px_rgba(132,192,160,0.3)]"
|
|
>
|
|
<FaEnvelope /> Send an Email
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
);
|
|
} |