reafactor: converted the entire thing into a nextjs app
This commit is contained in:
@@ -1,13 +1,13 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { Menu, X } from 'lucide-react';
|
||||
import logo from '@/assets/images/icon.png';
|
||||
import WaitlistModal from './WaitlistModal';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
|
||||
interface NavbarProps {
|
||||
onLogoClick?: (e: React.MouseEvent) => void;
|
||||
}
|
||||
|
||||
const Navbar: React.FC<NavbarProps> = ({ onLogoClick }) => {
|
||||
const Navbar: React.FC = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [isWaitlistOpen, setIsWaitlistOpen] = useState(false);
|
||||
|
||||
@@ -17,25 +17,27 @@ const Navbar: React.FC<NavbarProps> = ({ onLogoClick }) => {
|
||||
<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
|
||||
<Link
|
||||
href="/"
|
||||
className="flex items-center gap-2 cursor-pointer"
|
||||
onClick={onLogoClick}
|
||||
>
|
||||
<img
|
||||
<Image
|
||||
src={logo}
|
||||
alt="Nemia Logo"
|
||||
className="w-8 h-8 rounded-lg object-contain"
|
||||
width={32}
|
||||
height={32}
|
||||
className="rounded-lg object-contain"
|
||||
/>
|
||||
<span className="font-display font-bold text-xl tracking-tight text-white">
|
||||
Nemia
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* 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>
|
||||
<Link href="/#features" className="text-gray-300 hover:text-primary transition-colors text-sm font-medium">Features</Link>
|
||||
<Link href="/#how-it-works" className="text-gray-300 hover:text-primary transition-colors text-sm font-medium">How it Works</Link>
|
||||
<Link href="/#pricing" className="text-gray-300 hover:text-primary transition-colors text-sm font-medium">Pricing</Link>
|
||||
<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"
|
||||
@@ -60,9 +62,9 @@ const Navbar: React.FC<NavbarProps> = ({ onLogoClick }) => {
|
||||
{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>
|
||||
<Link 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</Link>
|
||||
<Link 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</Link>
|
||||
<Link 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</Link>
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsOpen(false);
|
||||
|
||||
Reference in New Issue
Block a user