diff --git a/package-lock.json b/package-lock.json index f8ee67a..fcc2e77 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,6 +26,7 @@ "react": "^18.3.1", "react-chartjs-2": "^5.2.0", "react-dom": "^18.3.1", + "react-icons": "^5.3.0", "react-router-dom": "^6.27.0", "twind": "^0.16.19" }, @@ -5599,6 +5600,15 @@ "react": "^18.3.1" } }, + "node_modules/react-icons": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz", + "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index 576714d..b0c5b29 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "react": "^18.3.1", "react-chartjs-2": "^5.2.0", "react-dom": "^18.3.1", + "react-icons": "^5.3.0", "react-router-dom": "^6.27.0", "twind": "^0.16.19" }, diff --git a/src/App.jsx b/src/App.jsx index c34129b..44d106e 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -16,6 +16,7 @@ import LandingPage from "./pages/LandingPage"; // Ensure this path is correct import Signup from "./pages/SignUp"; import Login from "./pages/Login"; +import Newsletter from "./pages/Newsletter"; function App() { return ( @@ -31,6 +32,7 @@ function App() { } /> } /> } /> + } /> diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 13ff083..e851d5e 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,5 +1,5 @@ -import React, { useState, useEffect } from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import React, { useState, useEffect } from "react"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faChevronDown, faThLarge, @@ -10,7 +10,8 @@ import { faMoon, faFileAlt, faLightbulb, -} from '@fortawesome/free-solid-svg-icons'; +} from "@fortawesome/free-solid-svg-icons"; +import { FaNewspaper } from "react-icons/fa"; import { faFacebookF, faInstagram, @@ -18,8 +19,8 @@ import { faLinkedinIn, faYoutube, faTiktok, -} from '@fortawesome/free-brands-svg-icons'; -import { Link } from 'react-router-dom'; +} from "@fortawesome/free-brands-svg-icons"; +import { Link } from "react-router-dom"; // Dropdown item component const DropdownItem = ({ icon, title, description }) => ( @@ -27,7 +28,11 @@ const DropdownItem = ({ icon, title, description }) => (
{title}
- {description &&
{description}
} + {description && ( +
+ {description} +
+ )}
); @@ -35,8 +40,10 @@ const DropdownItem = ({ icon, title, description }) => ( const Navbar = () => { const [isToolsDropdownOpen, setIsToolsDropdownOpen] = useState(false); const [isChannelsDropdownOpen, setIsChannelsDropdownOpen] = useState(false); - const [isDarkMode, setIsDarkMode] = useState(localStorage.getItem("theme") === "dark"); - const [searchTerm, setSearchTerm] = useState(''); + const [isDarkMode, setIsDarkMode] = useState( + localStorage.getItem("theme") === "dark" + ); + const [searchTerm, setSearchTerm] = useState(""); const toggleToolsDropdown = () => { setIsToolsDropdownOpen(!isToolsDropdownOpen); @@ -57,14 +64,18 @@ const Navbar = () => { useEffect(() => { const theme = localStorage.getItem("theme") || "light"; if (theme === "dark") { - document.body.classList.add('dark'); + document.body.classList.add("dark"); } else { - document.body.classList.remove('dark'); + document.body.classList.remove("dark"); } }, [isDarkMode]); return ( -
+
{/* Logo Section */} {/* Navbar Section */} diff --git a/src/pages/Newsletter.css b/src/pages/Newsletter.css new file mode 100644 index 0000000..c544b17 --- /dev/null +++ b/src/pages/Newsletter.css @@ -0,0 +1,104 @@ +.news-main{ + padding-top: 70px; +} + +.newsletter-wrapper { + background-color: rgb(94, 94, 94); + border-radius: 8px; + padding: 1rem; + max-width: 768px; + margin: 0 auto; + backdrop-filter: blur(10px); + min-height: 30vh; + height: auto; +} + +.newsletter-section { + color: white; + padding: 40px 0; +} + +.newsletter-content { + max-width: 600px; + margin: 0 auto; + text-align: center; +} + +.newsletter-content h2 { + font-size: 24px; + margin-bottom: 10px; + color: white; +} + +.newsletter-content p { + font-size: 16px; + margin-bottom: 20px; +} + +.email-input { + color: black; + width: 100%; + border-radius: 10px; + padding: 10px; + margin-bottom: 10px; + border: 1px solid #ccc; +} + +@media (max-width: 780px) { + .email-input { + width: 80%; + } +} + +.subscribe-button { + /* background-color: #e3a9d7; */ + /* background-color: #f58bee; + color: rgb(78, 78, 78); + background-color: white; + color: #4a90e2; */ + padding: 10px 20px; + border: none; + background-color: #2563eb !important; + color: white; + border-radius: 5px; + cursor: pointer; +} + +.subscribe-button:hover { + background-color: #45a049; +} + + +@media (prefers-color-scheme: dark) { + .newsletter-wrapper { + background-color: #333; + color: #e5e5e5; + } + + .newsletter-section { + color: #e5e5e5; + } + + .newsletter-content h2 { + color: #e5e5e5; + } + + .newsletter-content p { + color: #e5e5e5; + } + + .email-input { + background-color: #444; + color: #e5e5e5; + border: 1px solid #666; + } + + .subscribe-button { + background-color: #4a90e2; + color: #e5e5e5; + } + + .subscribe-button:hover { + background-color: #357ae8; + } +} diff --git a/src/pages/Newsletter.jsx b/src/pages/Newsletter.jsx new file mode 100644 index 0000000..0eab884 --- /dev/null +++ b/src/pages/Newsletter.jsx @@ -0,0 +1,39 @@ +import React from "react"; +import "./Newsletter.css"; +import Navbar from "../components/Navbar"; + +const Newsletter = () => { + return ( + <> + {/* */} +
+
+
+
+
+

Stay Updated with Our Latest News

+

+ Subscribe to our newsletter to receive exclusive updates, + promotions, and tips. +

+
+ + +
+
+
+
+
+
+ + ); +}; + +export default Newsletter;