diff --git a/src/theme/Footer/Layout/enhanced-footer.css b/src/theme/Footer/Layout/enhanced-footer.css index 89635ac4..9d7dff22 100644 --- a/src/theme/Footer/Layout/enhanced-footer.css +++ b/src/theme/Footer/Layout/enhanced-footer.css @@ -1729,3 +1729,88 @@ html[data-theme='light'] .enhanced-footer { .stat-item:nth-child(2) { animation-delay: 0.2s; } .stat-item:nth-child(3) { animation-delay: 0.3s; } .stat-item:nth-child(4) { animation-delay: 0.4s; } + + +/* Toast Notification Styles */ +.newsletter-toast { + position: fixed; + bottom: 20px; + right: 20px; + z-index: 9999; + animation: slideIn 0.3s ease-out; + isolation: isolate; +} + +.toast-content { + display: flex; + align-items: center; + background: #ffffff !important; /* solid white */ + border-radius: 8px; + padding: 16px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); + border-left: 4px solid #4CAF50; + max-width: 350px; + opacity: 1 !important; +} + + +.toast-icon { + font-size: 24px; + margin-right: 12px; +} + +.toast-message h4 { + margin: 0 0 4px 0; + font-size: 16px; + color: #2c3e50; +} + +.toast-message p { + margin: 0; + font-size: 14px; + color: #7f8c8d; +} + +.toast-close { + background: none; + border: none; + font-size: 20px; + cursor: pointer; + margin-left: 16px; + color: #95a5a6; + padding: 0; + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; +} + +.toast-close:hover { + background: #f8f9fa; + color: #2c3e50; +} + +@keyframes slideIn { + from { + transform: translateX(100%); + opacity: 0; + } + to { + transform: translateX(0); + opacity: 1; + } +} + +@media (max-width: 768px) { + .newsletter-toast { + bottom: 10px; + right: 10px; + left: 10px; + } + + .toast-content { + max-width: none; + } +} \ No newline at end of file diff --git a/src/theme/Footer/Layout/index.tsx b/src/theme/Footer/Layout/index.tsx index e999a4d6..26c03dee 100644 --- a/src/theme/Footer/Layout/index.tsx +++ b/src/theme/Footer/Layout/index.tsx @@ -1,9 +1,10 @@ - import React, {type ReactNode, useState, useEffect} from 'react'; import Link from "@docusaurus/Link"; import type {Props} from '@theme/Footer/Layout'; import './enhanced-footer.css'; import Counter from './Counter'; +import { createPortal } from "react-dom"; + // Dynamic stats interface interface FooterStats { @@ -28,6 +29,7 @@ export default function FooterLayout({ }); const [email, setEmail] = useState(''); const [isSubscribed, setIsSubscribed] = useState(false); + const [showToast, setShowToast] = useState(false); useEffect(() => { // Simulate real-time stats updates @@ -59,14 +61,45 @@ export default function FooterLayout({ e.preventDefault(); if (email) { setIsSubscribed(true); + setShowToast(true); + + // Hide toast after 3 seconds + setTimeout(() => { + setShowToast(false); + }, 3000); + + // Reset form after 3 seconds setTimeout(() => { setIsSubscribed(false); setEmail(''); }, 3000); } }; + return ( ); -} +} \ No newline at end of file