Landing page

src/App.tsx

@@ -1,20 +1,15 @@
-import React, { useState } from "react";
-import Navbar from "./components/Navbar/Navbar";
-import LoginPopup from "./components/LoginPopup/LoginPopup";
-import SignupPopup from "./components/SignupPopup/SignupPopup";
-import LandingPage from "./components/LandingPage/LandingPage";
-import "./App.css";
+import type React from 'react';
+import { useState } from 'react';
+import { Navbar, LoginPopup, SignupPopup, LandingPage } from '@components';
+import './App.css';
 
 const App: React.FC = () => {
   const [showLogin, setShowLogin] = useState(false);
   const [showSignup, setShowSignup] = useState(false);
 
   return (
     <div className="app">
-      <Navbar
-        onLoginClick={() => setShowLogin(true)}
-        onSignupClick={() => setShowSignup(true)}
-      />
+      <Navbar onLoginClick={() => setShowLogin(true)} onSignupClick={() => setShowSignup(true)} />
       <LandingPage />
       {showLogin && <LoginPopup onClose={() => setShowLogin(false)} />}
       {showSignup && <SignupPopup onClose={() => setShowSignup(false)} />}

src/assets/index.ts

@@ -1 +1 @@
-export {};
+export { default as ThScribesLogo } from './TH-Scribes-Logo.png';

src/components/LandingPage/LandingPage.tsx

@@ -1,17 +1,18 @@
-import React from "react";
-import "./LandingPage.css";
-import THLogo from "../../assets/TH-Scribes-Logo.png"; // Import the logo
+import type React from 'react';
+import './LandingPage.css';
+import THLogo from '../../assets/TH-Scribes-Logo.png'; // Import the logo
 
 const LandingPage: React.FC = () => {
   return (
     <div className="landing-page">
       <img src={THLogo} alt="Landing Logo" className="landing-image" />
       <h2>Welcome to Tactical Hacker Scribes</h2>
       <p>
-      Empowering writers and creators with seamless onboarding, secure digital contracts, and a streamlined collaboration experience — all in one place.
+        Empowering writers and creators with seamless onboarding, secure digital contracts, and a streamlined
+        collaboration experience — all in one place.
       </p>
     </div>
   );
 };
 
-export default LandingPage;
+export default LandingPage;

src/components/LoginPopup/LoginPopup.tsx

@@ -1,6 +1,6 @@
-import React from "react";
-import "./LoginPopup.css";
-import THLogo from "../../assets/TH-Scribes-Logo.png"; // Import the logo
+import type React from 'react';
+import './LoginPopup.css';
+import { ThScribesLogo } from '@assets/index.js'; // Import the logo
 
 interface LoginPopupProps {
   onClose: () => void;
@@ -10,13 +10,15 @@ const LoginPopup: React.FC<LoginPopupProps> = ({ onClose }) => {
   return (
     <div className="popup-overlay">
       <div className="popup">
-        <img src={THLogo} alt="Logo" className="popup-logo" />
+        <img src={ThScribesLogo} alt="Logo" className="popup-logo" />
         <h2>Login</h2>
         <input type="email" placeholder="Email" className="popup-input" />
         <input type="password" placeholder="Password" className="popup-input" />
         <div className="popup-buttons">
-          <button className="popup-button">Login</button>
-          <button className="popup-close" onClick={onClose}>
+          <button className="popup-button" type="button">
+            Login
+          </button>
+          <button className="popup-close" type="button" onClick={onClose}>
             Cancel
           </button>
         </div>
@@ -25,4 +27,4 @@ const LoginPopup: React.FC<LoginPopupProps> = ({ onClose }) => {
   );
 };
 
-export default LoginPopup;
+export default LoginPopup;

src/components/Navbar/Navbar.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import type React from "react";
 import "./Navbar.css";
 import THLogo from "../../assets/TH-Scribes-Logo.png"; // Import the logo
 
@@ -16,10 +16,10 @@ const Navbar: React.FC<NavbarProps> = ({ onLoginClick, onSignupClick }) => {
           <h1 className="navbar-title">Tactical Hacker Scribes</h1>
         </div>
         <div className="navbar-links">
-          <button onClick={onLoginClick} className="navbar-button">
+          <button type="button" onClick={onLoginClick} className="navbar-button">
             Login
           </button>
-          <button onClick={onSignupClick} className="navbar-button">
+          <button type="button" onClick={onSignupClick} className="navbar-button">
             Signup
           </button>
         </div>

src/components/SignupPopup/SignupPopup.tsx

@@ -1,6 +1,6 @@
-import React from "react";
-import "./SignupPopup.css";
-import THLogo from "../../assets/TH-Scribes-Logo.png"; // Import the logo
+import type React from 'react';
+import './SignupPopup.css';
+import THLogo from '../../assets/TH-Scribes-Logo.png'; // Import the logo
 
 interface SignupPopupProps {
   onClose: () => void;
@@ -17,8 +17,10 @@ const SignupPopup: React.FC<SignupPopupProps> = ({ onClose }) => {
         <input type="password" placeholder="Create Password" className="popup-input" />
         <input type="number" placeholder="Year of Birth" className="popup-input" />
         <div className="popup-buttons">
-          <button className="popup-button">Signup</button>
-          <button className="popup-close" onClick={onClose}>
+          <button className="popup-button" type="button">
+            Signup
+          </button>
+          <button className="popup-close" type="button" onClick={onClose}>
             Cancel
           </button>
         </div>
@@ -27,4 +29,4 @@ const SignupPopup: React.FC<SignupPopupProps> = ({ onClose }) => {
   );
 };
 
-export default SignupPopup;
+export default SignupPopup;

src/components/index.ts

@@ -0,0 +1,4 @@
+export { default as LandingPage } from './LandingPage/LandingPage';
+export { default as LoginPopup } from './LoginPopup/LoginPopup';
+export { default as Navbar } from './Navbar/Navbar';
+export { default as SignupPopup } from './SignupPopup/SignupPopup';