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

3
components/Footer.tsx
View File

@@ -1,5 +1,6 @@
import React from 'react';
import { Twitter } from 'lucide-react';
import logo from '@/assets/images/icon.png';
interface FooterProps {
onPrivacyClick?: (e: React.MouseEvent) => void;
@@ -14,7 +15,7 @@ const Footer: React.FC<FooterProps> = ({ onPrivacyClick }) => {
<div className="col-span-1">
<div className="flex items-center gap-2 mb-4">
<img
src="/assets/images/icon.png"
src={logo}
alt="Nemia Logo"
className="w-6 h-6 rounded object-contain"
/>

25
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,8 +9,10 @@ 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">
@@ -18,7 +22,7 @@ const Navbar: React.FC<NavbarProps> = ({ onLogoClick }) => {
onClick={onLogoClick}
>
<img
src="/assets/images/icon.png"
src={logo}
alt="Nemia Logo"
className="w-8 h-8 rounded-lg object-contain"
/>
@@ -32,7 +36,10 @@ const Navbar: React.FC<NavbarProps> = ({ onLogoClick }) => {
<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">
<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>
@@ -56,13 +63,25 @@ const Navbar: React.FC<NavbarProps> = ({ onLogoClick }) => {
<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">
<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)}
/>
</>
);
};

74
components/WaitlistModal.tsx Normal file
View File

@@ -0,0 +1,74 @@
import React from 'react';
import { X, Mail } from 'lucide-react';
interface WaitlistModalProps {
isOpen: boolean;
onClose: () => void;
}
const WaitlistModal: React.FC<WaitlistModalProps> = ({ isOpen, onClose }) => {
if (!isOpen) return null;
return (
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
{/* Backdrop */}
<div
className="absolute inset-0 bg-black/60 backdrop-blur-sm"
onClick={onClose}
/>
{/* Modal Content */}
<div className="relative bg-surface-dark border border-gray-800 rounded-3xl p-8 max-w-md w-full shadow-2xl animate-fade-in-up">
<button
onClick={onClose}
className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors"
>
<X size={24} />
</button>
<div className="text-center mb-8">
<div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
<Mail className="text-primary" size={24} />
</div>
<h3 className="text-2xl font-display font-bold text-white mb-2">
Join the Waitlist
</h3>
<p className="text-gray-400">
Be the first to experience focus-driven learning. We'll notify you when we launch!
</p>
</div>
<form
action="https://getlaunchlist.com/s/pAqdup"
method="POST"
className="space-y-4"
>
<div className="relative">
<Mail className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500" size={20} />
<input
type="email"
name="email"
placeholder="Enter your email"
required
autoFocus
className="w-full bg-background-dark border border-gray-700 rounded-xl py-4 pl-12 pr-4 text-white placeholder:text-gray-600 focus:outline-none focus:border-primary transition-colors"
/>
</div>
<button
type="submit"
className="w-full bg-primary text-gray-900 py-4 rounded-xl font-bold text-lg hover:brightness-110 transition-all shadow-glow"
>
Join Waitlist
</button>
</form>
<p className="mt-6 text-center text-xs text-gray-600">
No credit card required. Unsubscribe at any time.
</p>
</div>
</div>
);
};
export default WaitlistModal;

1
vite-env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="vite/client" />