Initial commit

src/components/BrandLogo.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+export const BrandLogo = ({ className = "w-12 h-12" }) => (
+  <svg viewBox="0 0 512 512" className={className} fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M396.7 413.6L298.5 217.2V96h21.3c11.8 0 21.3-9.6 21.3-21.3V53.3C341.1 41.5 331.6 32 319.8 32H191.8c-11.8 0-21.3 9.6-21.3 21.3v21.3c0 11.8 9.6 21.3 21.3 21.3h21.3v121.2L115.1 413.6c-10.6 21.2 4.9 46.4 28.5 46.4h224.5c23.7 0 39.1-25.2 28.6-46.4zM245.3 170.7c11.8 0 21.3 9.6 21.3 21.3s-9.6 21.3-21.3 21.3-21.3-9.6-21.3-21.3 9.6-21.3 21.3-21.3zm-42.7 64c11.8 0 21.3 9.6 21.3 21.3s-9.6 21.3-21.3 21.3-21.3-9.6-21.3-21.3 9.6-21.3 21.3-21.3zm85.4 0c11.8 0 21.3 9.6 21.3 21.3s-9.6 21.3-21.3 21.3-21.3-9.6-21.3-21.3 9.6-21.3 21.3-21.3z" className="fill-current text-[#00A3FF]" stroke="currentColor" strokeWidth="20" strokeLinejoin="round"/>
+    <path d="M138 380 Q 256 340 374 380 L 368 440 H 144 Z" className="fill-[#00A3FF] opacity-80" />
+  </svg>
+);

src/components/Bubbles.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+export const Bubbles = () => (
+  <div className="absolute inset-0 overflow-hidden pointer-events-none z-0">
+    {Array.from({ length: 15 }).map((_, i) => (
+      <motion.div key={i} className="absolute rounded-full bg-[#00A3FF]/20 backdrop-blur-sm border border-[#00A3FF]/30"
+        initial={{ y: "120vh", x: Math.random() * 100 + "vw", scale: Math.random() * 0.5 + 0.5, opacity: 0 }}
+        animate={{ y: "-20vh", opacity: [0, 1, 0] }}
+        transition={{ duration: Math.random() * 10 + 10, repeat: Infinity, ease: "linear", delay: Math.random() * 10 }}
+        style={{ width: Math.random() * 50 + 20 + "px", height: Math.random() * 50 + 20 + "px" }}
+      />
+    ))}
+  </div>
+);

src/components/Footer.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Github } from 'lucide-react';
+import { BrandLogo } from './BrandLogo';
+import { SOCIALS } from '../data/content';
+
+export const Footer = () => (
+  <footer id="contact" className="py-12 border-t border-white/10 bg-black relative overflow-hidden">
+    <div className="absolute top-0 left-1/2 -translate-x-1/2 w-1/2 h-1 bg-[#00A3FF] blur-[100px] opacity-50"></div>
+    <div className="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-8">
+      <div className="flex items-center gap-3"><BrandLogo className="w-8 h-8 text-gray-600" /><span className="font-bold text-gray-500">LIQUID DEVELOPMENT</span></div>
+      <div className="flex gap-6"><a href={SOCIALS.github} className="text-gray-400 hover:text-[#00A3FF] transition-colors"><Github size={24} /></a></div>
+    </div>
+    <div className="text-center mt-8 text-gray-600 text-sm">&copy; {new Date().getFullYear()} Liquid Development. All rights reserved.</div>
+  </footer>
+);

src/components/Navbar.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Github, Mail } from 'lucide-react';
+import { BrandLogo } from './BrandLogo';
+import { ObfuscatedMail } from './ObfuscatedMail';
+import { NAV_LINKS, SOCIALS } from '../data/content';
+
+export const Navbar = () => {
+  // Extract email address from "mailto:..." string if necessary
+  const rawEmail = SOCIALS.email.replace('mailto:', '');
+
+  return (
+    <nav className="fixed top-0 left-0 right-0 z-50 backdrop-blur-xl bg-[#0e0e0e]/90 border-b border-white/5">
+      <div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <BrandLogo className="w-8 h-8 text-[#00A3FF]" />
+          <span className="font-bold text-lg md:text-xl tracking-wider text-white">LIQUID<span className="text-[#00A3FF]">DEVELOPMENT</span></span>
+        </div>
+        <div className="hidden md:flex gap-6 text-sm font-medium text-gray-300 items-center">
+          {NAV_LINKS.map((item) => (
+            <a key={item} href={`#${item.toLowerCase()}`} className="hover:text-[#00A3FF] transition-colors uppercase tracking-wide text-xs">{item}</a>
+          ))}
+          
+          <a href={SOCIALS.github} target="_blank" rel="noreferrer" className="bg-white/10 hover:bg-[#00A3FF] text-white p-2 rounded-full transition-all" title="GitHub">
+            <Github size={18} />
+          </a>
+
+          {/* Obfuscated Email Button */}
+          <ObfuscatedMail 
+            email={rawEmail} 
+            className="bg-white/10 hover:bg-[#00A3FF] text-white p-2 rounded-full transition-all flex items-center justify-center"
+            title="Contact Us"
+          >
+            <Mail size={18} />
+          </ObfuscatedMail>
+        </div>
+      </div>
+    </nav>
+  );
+};

src/components/ObfuscatedMail.jsx

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

src/components/TeamMember.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Github, Mail, Globe } from 'lucide-react';
+import { ObfuscatedMail } from './ObfuscatedMail';
+
+export const TeamMember = ({ name, nickname, img, gh, email, website, role, role2 }) => (
+  <motion.div whileHover={{ y: -5 }} className="group relative bg-[#121212] rounded-2xl p-6 border border-white/10 flex flex-col items-center text-center overflow-hidden shadow-lg hover:border-[#00A3FF]/40 transition-all duration-300">
+    <div className="absolute inset-0 bg-gradient-to-b from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+    <div className="absolute top-0 w-full h-1 bg-[#00A3FF] scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left"></div>
+    
+    <div className="w-28 h-28 rounded-full mb-5 p-1 border-2 border-[#00A3FF]/30 group-hover:border-[#00A3FF] transition-colors relative z-10">
+        <img src={img} alt={name} className="w-full h-full rounded-full object-cover bg-gray-800" />
+    </div>
+    
+    <div className="relative z-10 w-full">
+      <h4 className="text-xl font-bold text-white mb-1">{name}</h4>
+      <span className="text-sm font-mono text-gray-500 mb-4 block">@{nickname.toLowerCase()}</span>
+      
+      <div className="flex gap-2 justify-center mb-6">
+        <span className="px-3 py-1 rounded-md bg-[#00A3FF]/10 text-[#00A3FF] text-xs font-bold border border-[#00A3FF]/20 tracking-wider">FOUNDER</span>
+        <span className="px-3 py-1 rounded-md bg-blue-500/10 text-blue-300 text-xs font-bold border border-blue-500/20 tracking-wider">DEVELOPER</span>
+      </div>
+      
+      <div className="flex gap-3 justify-center w-full">
+        {/* Obfuscated Member Mail */}
+        <ObfuscatedMail 
+          email={email} 
+          className="flex-1 py-2 rounded-lg bg-white/5 hover:bg-[#00A3FF] hover:text-white text-gray-400 transition-all flex justify-center items-center group/icon"
+          title="Email"
+        >
+          <Mail size={18} />
+        </ObfuscatedMail>
+
+        <a href={gh} target="_blank" rel="noreferrer" className="flex-1 py-2 rounded-lg bg-white/5 hover:bg-[#00A3FF] hover:text-white text-gray-400 transition-all flex justify-center items-center" title="GitHub">
+          <Github size={18} />
+        </a>
+        <a href={website} target="_blank" rel="noreferrer" className="flex-1 py-2 rounded-lg bg-white/5 hover:bg-[#00A3FF] hover:text-white text-gray-400 transition-all flex justify-center items-center" title="Website">
+          <Globe size={18} />
+        </a>
+      </div>
+    </div>
+  </motion.div>
+);