TacticalHacker · nikhil-amin · Apr 18, 2025 · Apr 18, 2025
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="./src/assets/TH-Logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Tactical Hacker Scribes</title>
   </head>

@@ -1,8 +1,11 @@
 #root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+  width: 100%; /* Make the root element span the full width */
+  height: 100%; /* Make the root element span the full height */
+  margin: 0; /* Remove auto-centering */
+  padding: 0; /* Remove extra padding */
+  background-color: #ffffff; /* Set the background color to white */
+  display: flex; /* Use flexbox to align content */
+  flex-direction: column; /* Stack child elements vertically */
 }
 
 .logo {

@@ -1,33 +1,25 @@
-import { useState } from 'react';
-import reactLogo from './assets/react.svg';
-import viteLogo from '/vite.svg';
-import './App.css';
+import React, { useState } from "react";
+import Navbar from "./components/Navbar";
+import LoginPopup from "./components/LoginPopup";
+import SignupPopup from "./components/SignupPopup";
+import LandingPage from "./components/LandingPage";
+import "./App.css";
 
-function App() {
-  const [count, setCount] = useState(0);
+const App: React.FC = () => {
+  const [showLogin, setShowLogin] = useState(false);
+  const [showSignup, setShowSignup] = useState(false);
 
   return (
-    <>
-      <div>
-        <a href="https://vite.dev" target="_blank" rel="noreferrer">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank" rel="noreferrer">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>TH - Scribes</h1>
-      <div className="card">
-        <button type="button" onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">Click on the Vite and React logos to learn more</p>
-    </>
+    <div className="app">
+      <Navbar
+        onLoginClick={() => setShowLogin(true)}
+        onSignupClick={() => setShowSignup(true)}
+      />
+      <LandingPage />
+      {showLogin && <LoginPopup onClose={() => setShowLogin(false)} />}
+      {showSignup && <SignupPopup onClose={() => setShowSignup(false)} />}
+    </div>
   );
-}
+};
 
 export default App;
@@ -0,0 +1,38 @@
+.landing-page {
+  width: 100%; /* Use 100% to avoid horizontal overflow caused by 100vw */
+  height: 100vh; /* Make it cover the full viewport height */
+  display: flex;
+  flex-direction: column; /* Stack elements vertically */
+  justify-content: center; /* Center content vertically */
+  align-items: center; /* Center content horizontally */
+  background-color: #f8f9fa; /* Light gray background */
+  color: #333; /* Dark gray text */
+  text-align: center; /* Center-align text */
+  padding: 2rem; /* Add padding for spacing */
+  box-sizing: border-box; /* Include padding in width/height calculations */
+  overflow-x: hidden; /* Prevent horizontal scrolling */
+}
+
+.landing-image {
+  max-width: 300px; /* Set a maximum width for the image */
+  height: auto; /* Maintain aspect ratio */
+  margin-bottom: 2rem; /* Add spacing below the image */
+  border-radius: 8px; /* Optional: Add rounded corners */
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(204, 204, 204, 0.5)); /* Add a faded gradient */
+  padding: 10px; /* Add padding inside the gradient */
+  box-sizing: border-box; /* Ensure padding doesn't affect the size */
+}
+
+.landing-page h2 {
+  font-size: 2rem;
+  color: #0056b3; /* Dark blue for the heading */
+  margin-bottom: 1rem;
+}
+
+.landing-page p {
+  font-size: 1.2rem;
+  color: #555; /* Medium gray for the text */
+  max-width: 600px; /* Constrain the text width */
+  margin: 0 auto; /* Center the text */
+  line-height: 1.6; /* Improve readability */
+}
@@ -0,0 +1,17 @@
+import React from "react";
+import "./LandingPage.css";
+import THLogo from "../assets/TH-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.
+      </p>
+    </div>
+  );
+};
+
+export default LandingPage;
@@ -0,0 +1,94 @@
+.popup-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
+  backdrop-filter: blur(8px); /* Add blur effect */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.popup {
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  text-align: center;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  width: 300px; /* Set a fixed width for symmetry */
+  box-sizing: border-box; /* Include padding in width calculations */
+}
+
+.popup-title {
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+  color: #333;
+}
+
+.popup-logo {
+  width: 80px; /* Set the logo width */
+  height: 80px; /* Set the logo height */
+  margin: 0 auto 1rem; /* Center the logo and add spacing below */
+  display: block;
+}
+
+.popup h2 {
+  margin-bottom: 1rem;
+  color: #0056b3; /* Dark blue for headings */
+}
+
+.popup-input {
+  display: block;
+  width: 100%; /* Make the input fields span the full width of the popup */
+  padding: 0.5rem;
+  margin: 0.5rem 0;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 1rem;
+  background-color: #f8f9fa; /* Light gray background for inputs */
+  color: #333; /* Dark gray text */
+  box-sizing: border-box; /* Include padding in width calculations */
+}
+
+.popup-input:focus {
+  border-color: #007bff; /* Bright blue border on focus */
+  outline: none;
+}
+
+.popup-buttons {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 1rem;
+}
+
+.popup-button,
+.popup-close {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1rem;
+  width: 48%; /* Ensure buttons take equal width and align symmetrically */
+  box-sizing: border-box; /* Include padding in width calculations */
+}
+
+.popup-button {
+  background-color: #007bff; /* Bright blue for primary action */
+  color: white;
+}
+
+.popup-button:hover {
+  background-color: #0056b3; /* Dark blue on hover */
+}
+
+.popup-close {
+  background-color: #dc3545; /* Red for cancel action */
+  color: white;
+}
+
+.popup-close:hover {
+  background-color: #a71d2a; /* Darker red on hover */
+}
@@ -0,0 +1,28 @@
+import React from "react";
+import "./LoginPopup.css";
+import THLogo from "../assets/TH-Logo.png"; // Import the logo
+
+interface LoginPopupProps {
+  onClose: () => void;
+}
+
+const LoginPopup: React.FC<LoginPopupProps> = ({ onClose }) => {
+  return (
+    <div className="popup-overlay">
+      <div className="popup">
+        <img src={THLogo} 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}>
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LoginPopup;
@@ -0,0 +1,62 @@
+.navbar {
+  position: fixed; /* Fix the navbar to the top */
+  top: 0;
+  left: 0;
+  width: 100%; /* Make it fill the width */
+  display: flex;
+  justify-content: center; /* Center the navbar content */
+  align-items: center;
+  padding: 0.5rem 2rem; /* Add padding for neatness */
+  background-color: #0056b3; /* Dark blue background */
+  color: white;
+  z-index: 1000; /* Ensure it stays above other elements */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
+}
+
+.navbar-content {
+  width: 100%;
+  max-width: 1200px; /* Constrain the navbar content to a maximum width */
+  display: flex;
+  justify-content: space-between; /* Space out the brand and links */
+  align-items: center;
+}
+
+.navbar-title {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: white; /* Ensure the title is white */
+}
+
+.navbar-links {
+  display: flex;
+  gap: 1rem; /* Add spacing between buttons */
+}
+
+.navbar-links .navbar-button {
+  padding: 0.5rem 1rem;
+  background-color: #28a745; /* Green for buttons */
+  color: white;
+  border: none;
+  cursor: pointer;
+  border-radius: 4px; /* Add slight rounding for a modern look */
+  font-size: 1rem;
+}
+
+.navbar-links .navbar-button:hover {
+  background-color: #218838; /* Darker green on hover */
+}
+
+.navbar-brand {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem; /* Add spacing between the logo and title */
+}
+
+.navbar-logo {
+  width: 40px; /* Set the logo width */
+  height: 40px; /* Set the logo height */
+  border-radius: 50%; /* Make the logo circular */
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(204, 204, 204, 0.5)); /* Add a faded gradient */
+  padding: 5px; /* Add padding inside the gradient */
+  box-sizing: border-box; /* Ensure padding doesn't affect the size */
+}
@@ -0,0 +1,31 @@
+import React from "react";
+import "./Navbar.css";
+import THLogo from "../assets/TH-Logo.png"; // Import the logo
+
+interface NavbarProps {
+  onLoginClick: () => void;
+  onSignupClick: () => void;
+}
+
+const Navbar: React.FC<NavbarProps> = ({ onLoginClick, onSignupClick }) => {
+  return (
+    <nav className="navbar">
+      <div className="navbar-content">
+        <div className="navbar-brand">
+          <img src={THLogo} alt="Logo" className="navbar-logo" />
+          <h1 className="navbar-title">Tactical Hacker Scribes</h1>
+        </div>
+        <div className="navbar-links">
+          <button onClick={onLoginClick} className="navbar-button">
+            Login
+          </button>
+          <button onClick={onSignupClick} className="navbar-button">
+            Signup
+          </button>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;