Matiss/Nemia-Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: logo should render and get started button works

Browse Source
This commit is contained in:
Matiss Jurevics
2026-01-11 20:14:36 +00:00
parent 0a3096dbaf
commit 6edfe7cb52
4 changed files with 148 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
components/Navbar.tsx
View File

@@ -1,5 +1,7 @@
import React, { useState } from 'react';
import { Menu, X } from 'lucide-react';
import logo from '@/assets/images/icon.png';
import WaitlistModal from './WaitlistModal';
interface NavbarProps {
onLogoClick?: (e: React.MouseEvent) => void;
@@ -7,62 +9,79 @@ interface NavbarProps {
const Navbar: React.FC<NavbarProps> = ({ onLogoClick }) => {
const [isOpen, setIsOpen] = useState(false);
const [isWaitlistOpen, setIsWaitlistOpen] = useState(false);
return (
<nav className="fixed w-full z-50 bg-background-dark/80 backdrop-blur-md border-b border-gray-800">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between h-16 items-center">
{/* Logo */}
<div
className="flex items-center gap-2 cursor-pointer"
onClick={onLogoClick}
>
<img
src="/assets/images/icon.png"
alt="Nemia Logo"
className="w-8 h-8 rounded-lg object-contain"
/>
<span className="font-display font-bold text-xl tracking-tight text-white">
Nemia
</span>
</div>
{/* Desktop Nav */}
<div className="hidden md:flex items-center space-x-8">
<a href="#features" className="text-gray-300 hover:text-primary transition-colors text-sm font-medium">Features</a>
<a href="#how-it-works" className="text-gray-300 hover:text-primary transition-colors text-sm font-medium">How it Works</a>
<a href="#pricing" className="text-gray-300 hover:text-primary transition-colors text-sm font-medium">Pricing</a>
<button className="bg-primary text-gray-900 px-5 py-2 rounded-full font-semibold text-sm hover:brightness-110 transition-all shadow-glow">
Get Started
</button>
</div>
{/* Mobile Menu Button */}
<div className="md:hidden flex items-center">
<button
onClick={() => setIsOpen(!isOpen)}
className="text-gray-300 hover:text-white transition-colors"
<>
<nav className="fixed w-full z-50 bg-background-dark/80 backdrop-blur-md border-b border-gray-800">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between h-16 items-center">
{/* Logo */}
<div
className="flex items-center gap-2 cursor-pointer"
onClick={onLogoClick}
>
{isOpen ? <X size={24} /> : <Menu size={24} />}
</button>
</div>
</div>
</div>
<img
src={logo}
alt="Nemia Logo"
className="w-8 h-8 rounded-lg object-contain"
/>
<span className="font-display font-bold text-xl tracking-tight text-white">
Nemia
</span>
</div>
{/* Mobile Menu */}
{isOpen && (
<div className="md:hidden bg-surface-dark border-b border-gray-800">
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#features" className="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-800">Features</a>
<a href="#how-it-works" className="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-800">How it Works</a>
<a href="#pricing" className="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-800">Pricing</a>
<button className="w-full mt-4 bg-primary text-gray-900 px-5 py-3 rounded-xl font-bold hover:brightness-110 transition-all">
Get Started
</button>
{/* Desktop Nav */}
<div className="hidden md:flex items-center space-x-8">
<a href="#features" className="text-gray-300 hover:text-primary transition-colors text-sm font-medium">Features</a>
<a href="#how-it-works" className="text-gray-300 hover:text-primary transition-colors text-sm font-medium">How it Works</a>
<a href="#pricing" className="text-gray-300 hover:text-primary transition-colors text-sm font-medium">Pricing</a>
<button
onClick={() => setIsWaitlistOpen(true)}
className="bg-primary text-gray-900 px-5 py-2 rounded-full font-semibold text-sm hover:brightness-110 transition-all shadow-glow"
>
Get Started
</button>
</div>
{/* Mobile Menu Button */}
<div className="md:hidden flex items-center">
<button
onClick={() => setIsOpen(!isOpen)}
className="text-gray-300 hover:text-white transition-colors"
>
{isOpen ? <X size={24} /> : <Menu size={24} />}
</button>
</div>
</div>
</div>
)}
</nav>
{/* Mobile Menu */}
{isOpen && (
<div className="md:hidden bg-surface-dark border-b border-gray-800">
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#features" className="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-800">Features</a>
<a href="#how-it-works" className="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-800">How it Works</a>
<a href="#pricing" className="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-800">Pricing</a>
<button
onClick={() => {
setIsOpen(false);
setIsWaitlistOpen(true);
}}
className="w-full mt-4 bg-primary text-gray-900 px-5 py-3 rounded-xl font-bold hover:brightness-110 transition-all"
>
Get Started
</button>
</div>
</div>
)}
</nav>
<WaitlistModal
isOpen={isWaitlistOpen}
onClose={() => setIsWaitlistOpen(false)}
/>
</>
);
};