diff --git a/index.html b/index.html
index e4b9262..460572e 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
-
+
Tactical Hacker Scribes
diff --git a/src/App.css b/src/App.css
index b9d355d..9d1216e 100644
--- a/src/App.css
+++ b/src/App.css
@@ -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 {
diff --git a/src/App.tsx b/src/App.tsx
index b82e3a0..a0386b3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -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 (
- <>
-
- TH - Scribes
-
-
-
- Edit src/App.tsx and save to test HMR
-
-
Click on the Vite and React logos to learn more
-
+
+ setShowLogin(true)}
+ onSignupClick={() => setShowSignup(true)}
+ />
+
+ {showLogin && setShowLogin(false)} />}
+ {showSignup && setShowSignup(false)} />}
+
);
-}
+};
export default App;
diff --git a/src/assets/TH-Logo.png b/src/assets/TH-Logo.png
new file mode 100644
index 0000000..5833e4d
Binary files /dev/null and b/src/assets/TH-Logo.png differ
diff --git a/src/components/LandingPage.css b/src/components/LandingPage.css
new file mode 100644
index 0000000..901b62d
--- /dev/null
+++ b/src/components/LandingPage.css
@@ -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 */
+}
\ No newline at end of file
diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx
new file mode 100644
index 0000000..8734f5f
--- /dev/null
+++ b/src/components/LandingPage.tsx
@@ -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 (
+
+
+
Welcome to Tactical Hacker Scribes
+
+ Empowering writers and creators with seamless onboarding, secure digital contracts, and a streamlined collaboration experience — all in one place.
+
+
+
+
+
Login
+
+
+
+
+
+
+
+