Merge pull request #239 from samiurprapon/front/landing

Improvise #216 - Feature/homepage landing fixed responses

frontend/index.html

@@ -8,8 +8,14 @@
   <meta name="title" content="Aether" />
   <link rel="icon" href="favicon.ico" />
   <title>Aether</title>
-
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+    </style>
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
+    </style>
   <link rel="preconnect" href="https://fonts.gstatic.com" />
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
   <link
     href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap"
     rel="stylesheet" />

frontend/package.json

@@ -14,6 +14,7 @@
 		"@commitlint/config-conventional": "^19.5.0",
 		"@emotion/react": "^11.13.3",
 		"@emotion/styled": "^11.13.0",
+		"@heroicons/react": "^2.1.5",
 		"@mui/icons-material": "^6.1.5",
 		"@mui/material": "^6.1.5",
 		"@reduxjs/toolkit": "^2.3.0",

frontend/src/App.tsx

@@ -1,10 +1,16 @@
-import Locales from './components/Locales';
-import Routes from './routes';
+import React, { useState } from "react";
+import Header from "./components/Header";
+import MainContent from "./components/MainComponent";
 
-const App = () => (
-	<Locales>
-		<Routes />
-	</Locales>
-);
+const App: React.FC = () => {
+  const [isDarkMode, setIsDarkMode] = useState<boolean>(false);
+
+  return (
+    <div className={isDarkMode ? 'dark' : ''}>
+      <Header isDarkMode={isDarkMode} toggleDarkMode={() => setIsDarkMode((prev) => !prev)} />
+      <MainContent isDarkMode={isDarkMode} />
+    </div>
+  );
+};
 
 export default App;

frontend/src/assets/css/index.css

@@ -0,0 +1,180 @@
+/* Header.css */
+body {
+    transition: background-color 0.3s ease;
+  }
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px;
+    background-color: white; /* Light mode background */
+    transition: background-color 0.3s ease;
+  }
+
+  .header.dark {
+    background-color: #1a1a1a; /* Dark mode background */
+  }
+
+  .logo-nav {
+    font-size: 32px;
+    font-weight: bold;
+    color: #333; /* Light mode text color */
+  }
+
+  .header.dark .logo-nav {
+    color: white; /* Dark mode text color */
+  }
+
+  .nav-buttons {
+    display: flex;
+    gap: 16px;
+  }
+
+  .signup,
+  .login {
+    padding: 8px 16px;
+    border-radius: 8px;
+    transition: background-color 0.3s ease;
+  }
+
+  .signup {
+    background-color: #f44336; /* Sign up button color */
+    color: white;
+  }
+
+  .login {
+    border: 2px solid #f44336;
+    color: #f44336;
+    background-color: white;
+  }
+
+  .signup:hover {
+    background-color: #d32f2f; /* Darker red on hover */
+  }
+
+  .login:hover {
+    background-color: #f44336; /* Change background to red on hover */
+    color: white;
+  }
+
+  .dark-mode-toggle {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 56px;
+    height: 32px;
+    border-radius: 9999px;
+    background-color: #f9c74f; /* Toggle background color */
+    position: relative;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+
+  .dark-mode-toggle.dark {
+    background-color: #333; /* Dark mode toggle background color */
+  }
+
+  .toggle-circle {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    background-color: white;
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    transition: transform 0.3s ease;
+  }
+
+  .toggle-circle.move {
+    transform: translateX(24px); /* Move toggle circle when dark mode is active */
+  }
+
+  .icon {
+    width: 20px;
+    height: 20px;
+    color: #333; /* Light mode icon color */
+  }
+
+  .header.dark .icon {
+    color: white; /* Dark mode icon color */
+  }
+
+  .dropdown {
+    position: absolute;
+    left: 0;
+    top: 60px; /* Adjust based on header height */
+    width: 100%;
+    background-color: white; /* Dropdown background */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    padding: 16px;
+    z-index: 10;
+  }
+
+  .header.dark .dropdown {
+    background-color: #2c2c2c; /* Dark mode dropdown background */
+  }
+
+  .dropdown-button {
+    width: 100%;
+    padding: 8px 16px;
+    border-radius: 8px;
+    transition: background-color 0.3s ease;
+  }
+
+  .dropdown-button:hover {
+    background-color: #f44336; /* Change background to red on hover */
+    color: white;
+  }
+
+  .header.dark .dropdown-button:hover {
+    background-color: #d32f2f; /* Darker red on hover in dark mode */
+  }
+
+
+  /* Header.css */
+
+/* Add your existing styles above this comment */
+
+/* Hamburger Styles */
+.hamburger {
+    display: none; /* Hide by default */
+  }
+
+  /* Show hamburger on mobile */
+  @media (max-width: 768px) { /* Adjust this breakpoint based on your design */
+    .hamburger {
+      display: block; /* Show on small screens */
+    }
+  }
+
+  /* Navigation buttons */
+  .nav-buttons {
+    display: flex;
+    gap: 16px;
+  }
+
+  /* Hide navigation buttons on mobile */
+  @media (max-width: 768px) {
+    .nav-buttons {
+      display: none; /* Hide on mobile */
+    }
+  }
+
+  /* Show dropdown menu on mobile */
+  .dropdown {
+    display: none; /* Hide by default */
+  }
+
+  /* Show dropdown on mobile when menu is open */
+  @media (max-width: 768px) {
+    .dropdown {
+      display: block; /* Show dropdown on mobile */
+    }
+  }
+
+  body.dark {
+    background-color: #1a1a1a; /* Dark background */
+    color: #ffffff; /* Light text */
+  }