-
For Better Experience Download
Foodie App
-
-
-
-
+
+
+ For Better Experience Download
Foodie App
+
+
+
+
+
- )
-}
+ );
+};
-export default AppDownload
+export default AppDownload;
diff --git a/frontend/src/components/CartSummaryBar/CartSummaryBar.css b/frontend/src/components/CartSummaryBar/CartSummaryBar.css
new file mode 100644
index 00000000..b15024fc
--- /dev/null
+++ b/frontend/src/components/CartSummaryBar/CartSummaryBar.css
@@ -0,0 +1,347 @@
+.cart-summary-bar {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: linear-gradient(135deg, #fc4b32 0%, #ff6b4a 100%);
+ color: white;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 16px 24px;
+ z-index: 1000;
+ font-weight: bold;
+ box-shadow: 0 -4px 20px rgba(252, 75, 50, 0.3);
+ border-radius: 24px 24px 0 0;
+ transform: translateY(100%);
+ transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+ pointer-events: none;
+ backdrop-filter: blur(10px);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.cart-summary-bar.slide-in {
+ transform: translateY(0);
+ pointer-events: auto;
+}
+
+.cart-summary-bar.slide-out {
+ transform: translateY(100%);
+ pointer-events: none;
+}
+
+.view-cart-btn {
+ background-color: white;
+ color: #fc4b32;
+ border: none;
+ padding: 12px 20px;
+ border-radius: 16px;
+ cursor: pointer;
+ font-weight: bold;
+ transition: all 0.3s ease;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ position: relative;
+ overflow: hidden;
+}
+
+.view-cart-btn:hover {
+ background-color: #ffe6e6;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.view-cart-btn:active {
+ transform: translateY(0);
+}
+
+/* Mini Cart Dropdown Styles */
+.mini-cart-dropdown {
+ position: absolute;
+ bottom: 70px;
+ right: 24px;
+ background: white;
+ color: #222;
+ border-radius: 24px;
+ box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+ min-width: 280px;
+ padding: 20px;
+ z-index: 1100;
+ animation: slideInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ border: 1px solid #f0f0f0;
+ backdrop-filter: blur(10px);
+}
+
+@keyframes slideInUp {
+ from {
+ opacity: 0;
+ transform: translateY(30px) scale(0.95);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0) scale(1);
+ }
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.mini-cart-dropdown ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.mini-cart-item {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ margin-bottom: 16px;
+ font-size: 14px;
+ padding: 12px 0;
+ border-bottom: 1px solid #f5f5f5;
+ transition: background-color 0.2s ease;
+}
+
+.mini-cart-item:hover {
+ background-color: #fafafa;
+ border-radius: 12px;
+ padding: 12px 8px;
+ margin: 0 -8px 16px -8px;
+}
+
+.mini-cart-item:last-child {
+ border-bottom: none;
+ margin-bottom: 0;
+}
+
+.mini-cart-thumb {
+ width: 40px;
+ height: 40px;
+ border-radius: 14px;
+ object-fit: cover;
+ border: 2px solid #f0f0f0;
+ flex-shrink: 0;
+ transition: transform 0.2s ease;
+}
+
+.mini-cart-item:hover .mini-cart-thumb {
+ transform: scale(1.05);
+}
+
+.mini-cart-item span:nth-child(2) {
+ flex: 1;
+ font-weight: 600;
+ color: #333;
+}
+
+.mini-cart-item span:nth-child(3) {
+ color: #666;
+ font-size: 12px;
+ background: #f0f0f0;
+ padding: 2px 8px;
+ border-radius: 12px;
+}
+
+.mini-cart-item span:nth-child(4) {
+ font-weight: 700;
+ color: #fc4b32;
+ font-size: 16px;
+}
+
+.mini-cart-empty {
+ text-align: center;
+ color: #888;
+ padding: 30px 0;
+ font-style: italic;
+}
+
+/* Mini Cart Footer Styles */
+.mini-cart-footer {
+ margin-top: 20px;
+ padding-top: 16px;
+ border-top: 2px solid #f0f0f0;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+.mini-cart-total {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-weight: 700;
+ font-size: 18px;
+ color: #333;
+ padding: 8px 0;
+}
+
+.proceed-checkout-btn {
+ background: linear-gradient(135deg, #fc4b32 0%, #ff6b4a 100%);
+ color: white;
+ border: none;
+ padding: 14px 20px;
+ border-radius: 16px;
+ cursor: pointer;
+ font-weight: 700;
+ font-size: 16px;
+ transition: all 0.3s ease;
+ box-shadow: 0 4px 12px rgba(252, 75, 50, 0.3);
+ position: relative;
+ overflow: hidden;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.proceed-checkout-btn:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 6px 20px rgba(252, 75, 50, 0.4);
+ background: linear-gradient(135deg, #e53935 0%, #f44336 100%);
+}
+
+.proceed-checkout-btn:active {
+ transform: translateY(0);
+}
+
+.proceed-checkout-btn::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: -100%;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(
+ 90deg,
+ transparent,
+ rgba(255, 255, 255, 0.2),
+ transparent
+ );
+ transition: left 0.5s;
+}
+
+.proceed-checkout-btn:hover::before {
+ left: 100%;
+}
+
+/* Enhanced cart summary info */
+.cart-summary-info {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ font-size: 16px;
+ animation: pulse 2s infinite;
+}
+
+.cart-info-item {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ color: white;
+}
+
+.cart-info-divider {
+ width: 1px;
+ height: 24px;
+ background-color: rgba(255, 255, 255, 0.3);
+}
+
+.cart-text {
+ color: white;
+ font-weight: 600;
+ font-size: 16px;
+}
+
+.cart-icon,
+.price-icon {
+ color: white;
+}
+
+@keyframes pulse {
+ 0%,
+ 100% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0.8;
+ }
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+ .cart-summary-bar {
+ padding: 14px 16px;
+ border-radius: 24px 24px 0 0;
+ }
+
+ .view-cart-btn {
+ padding: 10px 16px;
+ font-size: 14px;
+ }
+
+ .cart-summary-info {
+ font-size: 14px;
+ }
+
+ .mini-cart-dropdown {
+ right: 16px;
+ left: 16px;
+ min-width: auto;
+ }
+}
+
+/* Free Delivery Progress Bar Styles */
+.free-delivery-progress-container {
+ flex: 1 1 100%;
+ max-width: 340px;
+ margin: 0 24px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: center;
+ gap: 6px;
+}
+
+.free-delivery-progress-bar-bg {
+ width: 100%;
+ height: 10px;
+ background: rgba(255, 255, 255, 0.25);
+ border-radius: 8px;
+ overflow: hidden;
+ margin-bottom: 2px;
+}
+
+.free-delivery-progress-bar-fill {
+ height: 100%;
+ /* background: linear-gradient(90deg, #ffe6e6 0%, #fc4b32 100%); */
+ background: linear-gradient(90deg, #eebc8b 0%, #ffffff 100%);
+ border-radius: 8px;
+ transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.free-delivery-progress-text {
+ font-size: 14px;
+ color: #fff;
+ font-weight: 500;
+ text-shadow: 0 1px 4px rgba(252, 75, 50, 0.12);
+}
+
+@media (max-width: 768px) {
+ .free-delivery-progress-container {
+ max-width: 100%;
+ margin: 8px 0 0 0;
+ align-items: stretch;
+ }
+ .free-delivery-progress-bar-bg {
+ height: 8px;
+ }
+ .free-delivery-progress-text {
+ font-size: 12px;
+ }
+}
diff --git a/frontend/src/components/CartSummaryBar/CartSummaryBar.jsx b/frontend/src/components/CartSummaryBar/CartSummaryBar.jsx
new file mode 100644
index 00000000..0115d580
--- /dev/null
+++ b/frontend/src/components/CartSummaryBar/CartSummaryBar.jsx
@@ -0,0 +1,125 @@
+import React, { useContext, useState, useEffect } from "react";
+import "./CartSummaryBar.css";
+import { StoreContext } from "../context/StoreContext";
+import { useNavigate, useLocation } from "react-router-dom"; // import useLocation
+import { food_list } from "../../assets/frontend_assets/assets";
+import { ShoppingCart, DollarSign } from "lucide-react"; // Add Lucide icons
+
+const FREE_DELIVERY_THRESHOLD = 150; // You can adjust this value as needed
+
+const CartSummaryBar = () => {
+ const { cartItems, getTotalCartAmount } = useContext(StoreContext);
+ const navigate = useNavigate();
+ const location = useLocation();
+ const [isHovered, setIsHovered] = useState(false); // to show the preview cart dropdown
+ const [isVisible, setIsVisible] = useState(false); // to show the cart summary bar
+
+ const totalItems = Object.values(cartItems).reduce(
+ (sum, item) => sum + item,
+ 0
+ );
+ const totalAmount = getTotalCartAmount();
+ const deliveryProgress = Math.min(totalAmount / FREE_DELIVERY_THRESHOLD, 1);
+ const amountLeft = Math.max(FREE_DELIVERY_THRESHOLD - totalAmount, 0);
+
+ // Handle slide-in and slide-out animations
+ useEffect(() => {
+ if (totalItems > 0 && location.pathname !== "/cart") {
+ setIsVisible(true);
+ } else {
+ setIsVisible(false);
+ }
+ }, [totalItems, location.pathname]);
+
+ // Get cart item details
+ const cartDetails = Object.entries(cartItems)
+ .filter(([id, qty]) => qty > 0)
+ .map(([id, qty]) => {
+ const item = food_list.find((f) => f._id === id);
+ return item ? { ...item, qty } : null;
+ })
+ .filter(Boolean);
+
+ return (
+
setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ >
+
+
+
+
+ {totalItems} {totalItems === 1 ? "item" : "items"} in cart
+
+
+
+
+
+ Total: ${totalAmount.toFixed(2)}
+
+
+ {/* Free Delivery Progress Bar */}
+
+
+
+ {deliveryProgress < 1 ? (
+
+ Add ${amountLeft.toFixed(2)} more for Free Delivery!
+
+ ) : (
+
+ π Congratulations! You have unlocked Free Delivery!
+
+ )}
+
+
+ {/* View Cart Button */}
+
+ {isHovered && (
+
+ {cartDetails.length === 0 ? (
+
Your cart is empty.
+ ) : (
+ <>
+
+ {cartDetails.map((item) => (
+ -
+
+ {item.name}
+ x{item.qty}
+ ${item.price * item.qty}
+
+ ))}
+
+
+
+ Total: ${totalAmount}
+
+
+
+
+ )}
+
+ )}
+
+ );
+};
+
+export default CartSummaryBar;
diff --git a/frontend/src/components/Chatbot/Chatbot.css b/frontend/src/components/Chatbot/Chatbot.css
new file mode 100644
index 00000000..af249877
--- /dev/null
+++ b/frontend/src/components/Chatbot/Chatbot.css
@@ -0,0 +1,400 @@
+.chatbot-toggle {
+ position: fixed;
+ bottom: 80px;
+ right: 30px;
+ width: 60px;
+ height: 60px;
+ background: linear-gradient(135deg, #ff6347, #ff8c69);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ box-shadow: 0 4px 20px rgba(255, 99, 71, 0.3);
+ transition: all 0.3s ease;
+ z-index: 1001;
+ color: white;
+}
+
+/* Adjust position when cart summary bar is visible */
+.chatbot-toggle.with-cart {
+ bottom: 100px;
+}
+
+.chatbot-toggle:hover {
+ transform: scale(1.1);
+ box-shadow: 0 6px 25px rgba(255, 99, 71, 0.4);
+}
+
+.chatbot-container {
+ position: fixed;
+ bottom: 80px;
+ right: 20px;
+ width: 380px;
+ height: 500px;
+ background: var(--chatbot-bg, #ffffff);
+ border-radius: 20px;
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ z-index: 1001;
+ border: 1px solid var(--chatbot-border, #e0e0e0);
+ transition: bottom 0.3s ease;
+}
+
+/* Adjust container position when cart summary bar is visible */
+.chatbot-container.with-cart {
+ bottom: 180px;
+}
+
+.chatbot-header {
+ background: linear-gradient(135deg, #ff6347, #ff8c69);
+ color: white;
+ padding: 15px 20px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ border-radius: 20px 20px 0 0;
+}
+
+.chatbot-title {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-weight: 600;
+ font-size: 16px;
+ color: white;
+}
+
+.chatbot-close {
+ background: none;
+ border: none;
+ color: white;
+ cursor: pointer;
+ padding: 5px;
+ border-radius: 50%;
+ transition: background-color 0.3s ease;
+}
+
+.chatbot-close:hover {
+ background-color: rgba(255, 255, 255, 0.2);
+}
+
+.chatbot-messages {
+ flex: 1;
+ padding: 20px;
+ overflow-y: auto;
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+ background: var(--chatbot-bg, #ffffff);
+}
+
+.message {
+ display: flex;
+ margin-bottom: 10px;
+}
+
+.message.user {
+ justify-content: flex-end;
+}
+
+.message.bot {
+ justify-content: flex-start;
+}
+
+.message-content {
+ max-width: 80%;
+ padding: 12px 16px;
+ border-radius: 18px;
+ font-size: 14px;
+ line-height: 1.4;
+}
+
+.message.user .message-content {
+ background: linear-gradient(135deg, #ff6347, #ff8c69);
+ color: white;
+ border-bottom-right-radius: 6px;
+}
+
+.message.bot .message-content {
+ background: var(--bot-message-bg, #f8f9fa);
+ color: var(--bot-message-text, #2c3e50);
+ border-bottom-left-radius: 6px;
+ border: 1px solid var(--bot-message-border, #e9ecef);
+}
+
+.message-content p {
+ margin: 0 0 8px 0;
+ color: inherit;
+}
+
+.message-content p:last-child {
+ margin-bottom: 0;
+}
+
+/* Bot message formatting styles */
+.message.bot .message-content strong {
+ font-weight: 700;
+ color: var(--bot-message-text, #2c3e50);
+}
+
+.message.bot .message-content em {
+ font-style: italic;
+ color: var(--bot-message-text, #2c3e50);
+}
+
+.message.bot .message-content .list-item {
+ display: flex;
+ align-items: flex-start;
+ gap: 8px;
+ margin-bottom: 4px;
+}
+
+.message.bot .message-content .list-number {
+ font-weight: 600;
+ color: #ff6347;
+ min-width: 20px;
+}
+
+.message.bot .message-content .list-bullet {
+ color: #ff6347;
+ font-weight: 600;
+ min-width: 12px;
+}
+
+.message.bot .message-content .emoji {
+ font-size: 1.2em;
+ margin: 0 2px;
+}
+
+/* Dark mode support for formatted elements */
+[data-theme="dark"] .message.bot .message-content strong {
+ color: var(--bot-message-text, #e0e0e0);
+}
+
+[data-theme="dark"] .message.bot .message-content em {
+ color: var(--bot-message-text, #e0e0e0);
+}
+
+.chatbot-input {
+ padding: 20px;
+ border-top: 1px solid var(--chatbot-border, #e0e0e0);
+ display: flex;
+ gap: 10px;
+ align-items: center;
+ background: var(--chatbot-bg, #ffffff);
+}
+
+.chatbot-input input {
+ flex: 1;
+ padding: 12px 16px;
+ border: 2px solid var(--input-border, #e0e0e0);
+ border-radius: 25px;
+ font-size: 14px;
+ outline: none;
+ transition: border-color 0.3s ease;
+ background: var(--input-bg, #ffffff);
+ color: var(--input-text, #2c3e50);
+}
+
+.chatbot-input input:focus {
+ border-color: #ff6347;
+}
+
+.chatbot-input input:disabled {
+ background-color: var(--input-disabled-bg, #f5f5f5);
+ cursor: not-allowed;
+ color: var(--input-disabled-text, #6c757d);
+}
+
+.chatbot-input input::placeholder {
+ color: var(--placeholder-text, #6c757d);
+}
+
+.send-button {
+ width: 40px;
+ height: 40px;
+ background: linear-gradient(135deg, #ff6347, #ff8c69);
+ border: none;
+ border-radius: 50%;
+ color: white;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.3s ease;
+}
+
+.send-button:hover:not(:disabled) {
+ transform: scale(1.1);
+ box-shadow: 0 4px 12px rgba(255, 99, 71, 0.3);
+}
+
+.send-button:disabled {
+ background: var(--button-disabled-bg, #6c757d);
+ cursor: not-allowed;
+ transform: none;
+}
+
+.typing-indicator {
+ display: flex;
+ gap: 4px;
+ padding: 8px 0;
+}
+
+.typing-indicator span {
+ width: 8px;
+ height: 8px;
+ background: #ff6347;
+ border-radius: 50%;
+ animation: typing 1.4s infinite ease-in-out;
+}
+
+.typing-indicator span:nth-child(1) {
+ animation-delay: -0.32s;
+}
+
+.typing-indicator span:nth-child(2) {
+ animation-delay: -0.16s;
+}
+
+@keyframes typing {
+ 0%, 80%, 100% {
+ transform: scale(0.8);
+ opacity: 0.5;
+ }
+ 40% {
+ transform: scale(1);
+ opacity: 1;
+ }
+}
+
+/* Scrollbar styling */
+.chatbot-messages::-webkit-scrollbar {
+ width: 6px;
+}
+
+.chatbot-messages::-webkit-scrollbar-track {
+ background: var(--scrollbar-track, #f1f1f1);
+ border-radius: 3px;
+}
+
+.chatbot-messages::-webkit-scrollbar-thumb {
+ background: #ff6347;
+ border-radius: 3px;
+}
+
+.chatbot-messages::-webkit-scrollbar-thumb:hover {
+ background: #e5533d;
+}
+
+/* Light mode variables */
+:root {
+ --chatbot-bg: #ffffff;
+ --chatbot-border: #e0e0e0;
+ --bot-message-bg: #f8f9fa;
+ --bot-message-text: #2c3e50;
+ --bot-message-border: #e9ecef;
+ --input-border: #e0e0e0;
+ --input-bg: #ffffff;
+ --input-text: #2c3e50;
+ --input-disabled-bg: #f5f5f5;
+ --input-disabled-text: #6c757d;
+ --placeholder-text: #6c757d;
+ --button-disabled-bg: #6c757d;
+ --scrollbar-track: #f1f1f1;
+}
+
+/* Dark mode variables */
+[data-theme="dark"] {
+ --chatbot-bg: #1a1a1a;
+ --chatbot-border: #333333;
+ --bot-message-bg: #2d2d2d;
+ --bot-message-text: #e0e0e0;
+ --bot-message-border: #404040;
+ --input-border: #404040;
+ --input-bg: #2d2d2d;
+ --input-text: #e0e0e0;
+ --input-disabled-bg: #1a1a1a;
+ --input-disabled-text: #888888;
+ --placeholder-text: #888888;
+ --button-disabled-bg: #404040;
+ --scrollbar-track: #2d2d2d;
+}
+
+/* Responsive design */
+@media (max-width: 480px) {
+ .chatbot-container {
+ width: calc(100vw - 40px);
+ height: 60vh;
+ bottom: 100px;
+ right: 20px;
+ }
+
+ .chatbot-container.with-cart {
+ bottom: 180px;
+ }
+
+ .chatbot-toggle {
+ bottom: 80px;
+ right: 20px;
+ }
+
+ .chatbot-toggle.with-cart {
+ bottom: 100px;
+ }
+}
+.chatbot-tooltip-wrapper {
+ position: relative;
+ display: inline-block;
+}
+
+.chatbot-toggle::before {
+ content: attr(data-tooltip);
+ position: absolute;
+ bottom: 120%;
+ left: 50%;
+ transform: translateX(-50%);
+ background-color: #ff8c69;
+ color: white;
+ padding: 6px 12px;
+ border-radius: 8px;
+ font-size: 13px;
+ white-space: nowrap;
+ opacity: 0;
+ visibility: hidden;
+ transition: opacity 0.3s ease, visibility 0.3s ease;
+ z-index: 1000;
+ pointer-events: none;
+ max-width: 200px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
+}
+
+
+@media (max-width: 300px) {
+ .chatbot-toggle::before {
+ left: auto;
+ right: 0;
+ transform: none;
+ }
+}
+
+.chatbot-toggle::after {
+ display: none !important;
+}
+
+
+.chatbot-toggle:hover::before,
+.chatbot-toggle:focus::before {
+ opacity: 1;
+ visibility: visible;
+}
+
+.chatbot-toggle:focus {
+ outline: 2px solid #ff6347;
+ outline-offset: 2px;
+}
diff --git a/frontend/src/components/Chatbot/Chatbot.jsx b/frontend/src/components/Chatbot/Chatbot.jsx
new file mode 100644
index 00000000..6a24496d
--- /dev/null
+++ b/frontend/src/components/Chatbot/Chatbot.jsx
@@ -0,0 +1,293 @@
+import React, { useState, useRef, useEffect, useContext } from 'react';
+import { Send, X, MessageCircle, ChefHat } from 'lucide-react';
+import { StoreContext } from '../context/StoreContext';
+import './Chatbot.css';
+
+
+const Chatbot = () => {
+ const { cartItems } = useContext(StoreContext);
+ const [isOpen, setIsOpen] = useState(false);
+ const [messages, setMessages] = useState([]);
+ const [inputValue, setInputValue] = useState('');
+ const [isLoading, setIsLoading] = useState(false);
+ const [currentStep, setCurrentStep] = useState(0);
+ const [userPreferences, setUserPreferences] = useState({
+ taste: '',
+ timeOfDay: '',
+ mood: '',
+ dietaryPreferences: '',
+ specificIngredients: ''
+ });
+
+ // Check if cart has items to adjust chatbot positioning
+ const hasCartItems = Object.values(cartItems).reduce((sum, item) => sum + item, 0) > 0;
+
+ const messagesEndRef = useRef(null);
+ const inputRef = useRef(null);
+
+ const API_KEY = 'YOUR_API_KEY';
+ const API_URL = 'https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash-exp:generateContent';
+
+ const questions = [
+ { key: 'taste', question: "What taste profile do you prefer? (e.g., spicy, sweet, savory, tangy, mild)" },
+ { key: 'timeOfDay', question: "What time of day is it? (breakfast, lunch, dinner, snack)" },
+ { key: 'mood', question: "How are you feeling today? (energetic, tired, happy, stressed, cozy)" },
+ { key: 'dietaryPreferences', question: "Any dietary preferences? (vegetarian, vegan, gluten-free, none)" },
+ { key: 'specificIngredients', question: "Any specific ingredients you'd like to include? (e.g., paneer, mushrooms, spinach, chicken, tofu, etc.)" }
+ ];
+
+ // Function to format bot messages with markdown-like formatting
+ const formatBotMessage = (text) => {
+ if (!text) return '';
+
+ // Split by lines to handle line breaks
+ const lines = text.split('\n');
+
+ return lines.map((line, lineIndex) => {
+ // Format bold text (**text**)
+ let formattedLine = line.replace(/\*\*(.*?)\*\*/g, '
$1');
+
+ // Format italic text (*text*)
+ formattedLine = formattedLine.replace(/\*(.*?)\*/g, '
$1');
+
+ // Format numbered lists (1. text)
+ formattedLine = formattedLine.replace(/^(\d+)\.\s+(.+)$/, '
$1. $2');
+
+ // Format bullet points (- text or β’ text)
+ formattedLine = formattedLine.replace(/^[-β’]\s+(.+)$/, '
β’ $1');
+
+ // Add emoji formatting
+ formattedLine = formattedLine.replace(/π½οΈ|π|π|π₯|π|π/g, '
$&');
+
+ return (
+
+ );
+ });
+ };
+
+ const scrollToBottom = () => {
+ messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+ };
+
+ useEffect(() => {
+ scrollToBottom();
+ }, [messages]);
+
+ useEffect(() => {
+ if (isOpen && currentStep === 0) {
+ setMessages([
+ {
+ type: 'bot',
+ content: "π Hi! I'm your **Foodie AI assistant**! I'll help you discover the perfect food based on your preferences. Let's start with a few questions..."
+ }
+ ]);
+ }
+ }, [isOpen]);
+
+ const generateFoodSuggestions = async () => {
+ setIsLoading(true);
+
+ const prompt = `Based on the following preferences, suggest 5 specific food items with brief descriptions:
+
+Taste: ${userPreferences.taste}
+Time of Day: ${userPreferences.timeOfDay}
+Mood: ${userPreferences.mood}
+Dietary Preferences: ${userPreferences.dietaryPreferences}
+Specific Ingredients: ${userPreferences.specificIngredients}
+
+Please provide exactly 5 food suggestions in this format:
+1. **[Food Name]** - [Brief description of why it matches their preferences]
+2. **[Food Name]** - [Brief description of why it matches their preferences]
+3. **[Food Name]** - [Brief description of why it matches their preferences]
+4. **[Food Name]** - [Brief description of why it matches their preferences]
+5. **[Food Name]** - [Brief description of why it matches their preferences]
+
+Make the suggestions specific, appetizing, and relevant to their preferences. Use **bold** for food names and make the descriptions engaging.`;
+
+ try {
+ const response = await fetch(`${API_URL}?key=${API_KEY}`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ contents: [{
+ parts: [{
+ text: prompt
+ }]
+ }]
+ })
+ });
+
+ const data = await response.json();
+
+ if (data.candidates && data.candidates[0] && data.candidates[0].content) {
+ const suggestions = data.candidates[0].content.parts[0].text;
+ setMessages(prev => [...prev, {
+ type: 'bot',
+ content: suggestions
+ }]);
+ } else {
+ throw new Error('Invalid response format');
+ }
+ } catch (error) {
+ console.error('Error generating suggestions:', error);
+ setMessages(prev => [...prev, {
+ type: 'bot',
+ content: "Sorry, I'm having trouble generating suggestions right now. Please try again!"
+ }]);
+ } finally {
+ setIsLoading(false);
+ setCurrentStep(0);
+ setUserPreferences({
+ taste: '',
+ timeOfDay: '',
+ mood: '',
+ dietaryPreferences: '',
+ specificIngredients: ''
+ });
+ }
+ };
+
+ const handleSendMessage = () => {
+ if (!inputValue.trim() || isLoading) return;
+
+ const userMessage = inputValue.trim();
+ setInputValue('');
+
+ setMessages(prev => [...prev, {
+ type: 'user',
+ content: userMessage
+ }]);
+
+ if (currentStep < questions.length) {
+ // Store user's answer
+ const currentQuestion = questions[currentStep];
+ setUserPreferences(prev => ({
+ ...prev,
+ [currentQuestion.key]: userMessage
+ }));
+
+ // Move to next question or generate suggestions
+ if (currentStep === questions.length - 1) {
+ setMessages(prev => [...prev, {
+ type: 'bot',
+ content: "Perfect! Let me analyze your preferences and suggest some **delicious options** for you... π½οΈ"
+ }]);
+ setTimeout(generateFoodSuggestions, 1000);
+ } else {
+ const nextQuestion = questions[currentStep + 1];
+ setMessages(prev => [...prev, {
+ type: 'bot',
+ content: nextQuestion.question
+ }]);
+ setCurrentStep(currentStep + 1);
+ }
+ }
+ };
+
+ const handleKeyPress = (e) => {
+ if (e.key === 'Enter') {
+ handleSendMessage();
+ }
+ };
+
+ const resetChat = () => {
+ setMessages([]);
+ setCurrentStep(0);
+ setUserPreferences({
+ taste: '',
+ timeOfDay: '',
+ mood: '',
+ dietaryPreferences: '',
+ specificIngredients: ''
+ });
+ };
+
+ const toggleChat = () => {
+ setIsOpen(!isOpen);
+ if (!isOpen) {
+ resetChat();
+ }
+ };
+
+ return (
+ <>
+ {/* Chatbot Toggle Button with tooltip and accessibility*/}
+
+
+
+
+ {/* Chatbot Window */}
+ {isOpen && (
+
+
+
+
+ Foodie AI Assistant
+
+
+
+
+
+ {messages.map((message, index) => (
+
+
+ {message.type === 'bot' ? formatBotMessage(message.content) : (
+ message.content.split('\n').map((line, lineIndex) => (
+
{line}
+ ))
+ )}
+
+
+ ))}
+ {isLoading && (
+
+ )}
+
+
+
+
+ setInputValue(e.target.value)}
+ onKeyPress={handleKeyPress}
+ placeholder={currentStep < questions.length ? "Type your answer..." : "Ask me anything about food..."}
+ disabled={isLoading}
+ />
+
+
+
+ )}
+
+ );
+};
+
+export default Chatbot;
\ No newline at end of file
diff --git a/frontend/src/components/ContactForm/ContactForm.css b/frontend/src/components/ContactForm/ContactForm.css
new file mode 100644
index 00000000..5bd2884b
--- /dev/null
+++ b/frontend/src/components/ContactForm/ContactForm.css
@@ -0,0 +1,214 @@
+html, body {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ background: #fff; /* or your desired background */
+}
+
+
+
+.contact-container {
+ max-width: 900px;
+ margin: 3rem auto;
+ padding: 3rem 2rem;
+ background: #fff3e0;
+ border-radius: 20px;
+ box-shadow: 0 8px 25px rgba(255, 140, 0, 0.3);
+ font-family: 'Poppins', sans-serif;
+ color: #bf5700;
+ display: flex;
+ gap: 3rem;
+ justify-content: center;
+ align-items: flex-start;
+ text-align: left;
+ flex-wrap: nowrap;
+ transition: all 0.3s ease;
+}
+
+.contact-details {
+ flex: 1;
+ max-width: 400px;
+ min-width: 280px;
+}
+
+.subtitle {
+ color: #ff6f00;
+ font-weight: 700;
+ letter-spacing: 3px;
+ text-transform: uppercase;
+ margin-bottom: 0.25rem;
+ font-size: 1.1rem;
+}
+
+.title {
+ font-size: 2.75rem;
+ font-weight: 900;
+ margin-bottom: 0.5rem;
+ color: #e65100;
+}
+
+.description {
+ font-size: 1.1rem;
+ margin-bottom: 2rem;
+ line-height: 1.6;
+ color: #bf5700;
+}
+
+.contact-info-list {
+ list-style: none;
+ padding: 0;
+ margin-bottom: 2rem;
+}
+
+.contact-info-list li {
+ display: flex;
+ align-items: center;
+ gap: 0.8rem;
+ margin-bottom: 1rem;
+ font-weight: 600;
+ color: #d84315;
+}
+
+.icon {
+ color: #ff6f00;
+ min-width: 22px;
+ font-size: 1.2rem;
+}
+
+.social-icons {
+ display: flex;
+ gap: 2rem;
+}
+
+.social-icons a {
+ transition: transform 0.25s ease;
+}
+
+.social-icons a:hover {
+ transform: scale(1.2);
+}
+
+.contact-form {
+ flex: 1;
+ max-width: 450px;
+ min-width: 280px;
+ display: flex;
+ flex-direction: column;
+ gap: 1.25rem;
+}
+
+.form-title {
+ font-size: 2rem;
+ font-weight: 900;
+ color: #e65100;
+ margin-bottom: 1rem;
+}
+
+.contact-form input,
+.contact-form textarea {
+ padding: 0.85rem 1.2rem;
+ border: 2.5px solid #ff8f00;
+ border-radius: 15px;
+ font-size: 1.1rem;
+ font-family: 'Poppins', sans-serif;
+ color: #bf5700;
+ transition: border-color 0.3s ease;
+ resize: vertical;
+ width: 100%;
+ box-sizing: border-box;
+}
+
+.contact-form input::placeholder,
+.contact-form textarea::placeholder {
+ color: #ffb74d;
+ font-style: italic;
+}
+
+.contact-form input:focus,
+.contact-form textarea:focus {
+ border-color: #ff6f00;
+ outline: none;
+ box-shadow: 0 0 8px #ff6f0033;
+}
+
+.submit-button {
+ background: linear-gradient(45deg, #ff6f00, #ff8f00);
+ color: white;
+ font-weight: 900;
+ padding: 1rem 0;
+ border: none;
+ border-radius: 25px;
+ cursor: pointer;
+ letter-spacing: 1.5px;
+ font-size: 1.3rem;
+ transition: background 0.3s ease;
+ width: 100%;
+ max-width: 300px;
+ align-self: center;
+}
+
+.submit-button:hover {
+ background: linear-gradient(45deg, #ff8f00, #ff6f00);
+}
+
+/* Responsive Breakpoints */
+
+/* Medium tablets and below */
+@media (max-width: 900px) {
+ .contact-container {
+ max-width: 100%;
+ padding: 2rem 1.5rem;
+ gap: 2rem;
+ }
+ .contact-details,
+ .contact-form {
+ min-width: auto;
+ max-width: 100%;
+ }
+}
+
+/* Tablets and small laptops */
+@media (max-width: 768px) {
+ .contact-container {
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+ .contact-details,
+ .contact-form {
+ width: 100%;
+ max-width: 480px;
+ text-align: center;
+ }
+ .contact-info-list {
+ justify-content: center;
+ }
+ .contact-info-list li {
+ justify-content: center;
+ }
+ .social-icons {
+ justify-content: center;
+ }
+}
+
+/* Mobile phones */
+@media (max-width: 480px) {
+ .contact-container {
+ padding: 1.5rem 1rem;
+ gap: 1.5rem;
+ }
+ .title {
+ font-size: 2rem;
+ }
+ .form-title {
+ font-size: 1.5rem;
+ }
+ .contact-form input,
+ .contact-form textarea {
+ font-size: 1rem;
+ padding: 0.75rem 1rem;
+ }
+ .submit-button {
+ font-size: 1.1rem;
+ max-width: 100%;
+ }
+}
diff --git a/frontend/src/components/ContactForm/ContactForm.jsx b/frontend/src/components/ContactForm/ContactForm.jsx
new file mode 100644
index 00000000..82de8662
--- /dev/null
+++ b/frontend/src/components/ContactForm/ContactForm.jsx
@@ -0,0 +1,114 @@
+import React, { useState, useEffect } from "react";
+import "./ContactForm.css";
+import { FaWhatsapp, FaInstagram, FaTwitter, FaMapMarkerAlt, FaPhoneAlt, FaEnvelope, FaClock } from "react-icons/fa";
+
+const ContactForm = () => {
+ const [formData, setFormData] = useState({
+ name: "",
+ email: "",
+ subject: "",
+ message: "",
+ });
+
+ useEffect(() => {
+ const savedFormData = JSON.parse(localStorage.getItem("contactForm"));
+ if (savedFormData) {
+ setFormData(savedFormData);
+ }
+ }, []);
+
+ useEffect(() => {
+ localStorage.setItem("contactForm", JSON.stringify(formData));
+ }, [formData]);
+
+ const handleChange = (e) => {
+ const { name, value } = e.target;
+ setFormData((prev) => ({
+ ...prev,
+ [name]: value,
+ }));
+ };
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ alert("Thank you for reaching out! We will get back to you soon.");
+ console.log("Form submitted:", formData);
+ setFormData({
+ name: "",
+ email: "",
+ subject: "",
+ message: "",
+ });
+ localStorage.removeItem("contactForm");
+ };
+
+ return (
+
+
+
Let's Talk Food!
+
We'd Love to Hear From You
+
+ Whether youβre craving a delicious meal, planning a special event, or just want to say hi β weβre all ears!
+ Reach out with any questions or feedback and letβs make your foodie dreams come true.
+
+
+ - Address: ABC Restaurant, Haryana
+ - Phone: +262 697 570 970
+ - Email: Contact@foodie.com
+ - Hours: Open 08:00 AM to 10:00 PM
+
+
+
+
+
+
+ );
+};
+
+export default ContactForm;
diff --git a/frontend/src/components/ExploreMenu/ExploreMenu.css b/frontend/src/components/ExploreMenu/ExploreMenu.css
index f9a3c218..b77f2726 100644
--- a/frontend/src/components/ExploreMenu/ExploreMenu.css
+++ b/frontend/src/components/ExploreMenu/ExploreMenu.css
@@ -1,66 +1,402 @@
-.explore-menu{
- margin-top: 3vh;
- display: flex;
- flex-direction: column;
- gap: 20px;
- /* width: 90%; */
+/* Enhanced ExploreMenu.css */
+.explore-menu {
+ margin-top: 5vh;
+ display: flex;
+ flex-direction: column;
+ gap: 30px;
+ padding: 0 20px;
+ margin: 50px;
+ position: relative;
+ /* background-color: ; */
+}
+
+@media (max-width: 768px) {
+ .explore-menu {
+ margin: 0;
+ }
+}
+
+
+.explore-menu h1 {
+ color: var(--text-color, #262626);
+ font-weight: 700;
+ font-size: clamp(2rem, 4vw, 3.5rem);
+ text-align: center;
+ margin-bottom: 10px;
+ background: linear-gradient(135deg, var(--accent-color, #ff6347), #ff8c69);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ position: relative;
+}
+
+.explore-menu h1::after {
+ content: '';
+ position: absolute;
+ bottom: -10px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 80px;
+ height: 4px;
+ background: linear-gradient(90deg, var(--accent-color, #ff6347), #ff8c69);
+ border-radius: 2px;
+}
+
+.explore-menu-text {
+ position: relative;
+ max-width: 70%;
+ margin: 0 auto; /* center horizontally */
+ color: var(--text-secondary, #808080);
+ font-size: clamp(14px, 1.2vw, 18px);
+ line-height: 1.6;
+ text-align: center;
+ font-weight: 400;
+}
+
+
+.explore-menu-wrapper {
+ border-radius: 25px;
+ overflow: hidden;
+ position: relative;
+ width: 100%;
+ background: var(--glass-bg, rgba(255, 255, 255, 0.1));
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
+ border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.2));
+ box-shadow:
+ 0 8px 32px rgba(0, 0, 0, 0.1),
+ inset 0 1px 0 rgba(255, 255, 255, 0.2);
+ transition: all 0.3s ease;
+}
+
+.explore-menu-wrapper:hover {
+ transform: translateY(-2px);
+ box-shadow:
+ 0 12px 40px rgba(0, 0, 0, 0.15),
+ inset 0 1px 0 rgba(255, 255, 255, 0.3);
+}
+
+.explore-menu-list {
+ display: flex;
+ align-items: center;
+ gap: 40px;
+ text-align: center;
+ margin: 0;
+ overflow-x: hidden;
+ scroll-behavior: smooth;
+ padding: 30px 80px;
+ position: relative;
+ background: linear-gradient(90deg,
+ transparent 0%,
+ var(--menu-gradient, rgba(255, 99, 71, 0.02)) 20%,
+ var(--menu-gradient, rgba(255, 99, 71, 0.02)) 80%,
+ transparent 100%
+ );
+}
+
+.explore-menu-list::-webkit-scrollbar {
+ display: none;
+}
+
+.explore-menu-list-item {
+ flex-shrink: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 15px;
+ padding: 20px;
+ border-radius: 20px;
+ transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+ cursor: pointer;
+ position: relative;
+ background: var(--item-bg, rgba(255, 255, 255, 0.05));
+ -webkit-backdrop-filter: blur(10px);
+ backdrop-filter: blur(10px);
+ border: 1px solid var(--item-border, rgba(255, 255, 255, 0.1));
+}
+
+.explore-menu-list-item::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: linear-gradient(135deg,
+ rgba(255, 99, 71, 0.1) 0%,
+ rgba(255, 140, 105, 0.05) 100%
+ );
+ border-radius: 20px;
+ opacity: 0;
+ transition: opacity 0.3s ease;
+ z-index: 0;
+}
+
+.explore-menu-list-item:hover::before {
+ opacity: 1;
+}
+
+.explore-menu-list-item:hover {
+ transform: translateY(-8px) scale(1.05);
+ box-shadow:
+ 0 15px 35px rgba(255, 99, 71, 0.2),
+ 0 5px 15px rgba(0, 0, 0, 0.1);
+ background: var(--item-hover-bg, rgba(255, 255, 255, 0.1));
+}
+
+.explore-menu-list-item img {
+ width: clamp(70px, 7vw, 100px);
+ height: clamp(70px, 7vw, 100px);
+ border-radius: 50%;
+ object-fit: cover;
+ transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+ border: 3px solid transparent;
+ background: linear-gradient(white, white) padding-box,
+ linear-gradient(135deg, var(--accent-color, #ff6347), #ff8c69) border-box;
+ position: relative;
+ z-index: 1;
+}
+
+.explore-menu-list-item img.active {
+ border: 4px solid var(--accent-color, #ff6347);
+ box-shadow:
+ 0 0 0 4px rgba(255, 99, 71, 0.2),
+ 0 8px 25px rgba(255, 99, 71, 0.3);
+ transform: scale(1.1);
+}
+
+.explore-menu-list-item img:hover {
+ transform: scale(1.1) rotate(5deg);
+ box-shadow: 0 10px 30px rgba(255, 99, 71, 0.3);
+}
+
+.explore-menu-list-item p {
+ margin: 0;
+ font-size: clamp(14px, 1.2vw, 16px);
+ color: var(--text-color, #747474);
+ font-weight: 600;
+ text-transform: capitalize;
+ letter-spacing: 0.5px;
+ position: relative;
+ z-index: 1;
+ transition: all 0.3s ease;
+}
+
+.explore-menu-list-item:hover p {
+ color: var(--accent-color, #ff6347);
+ transform: translateY(-2px);
+}
+
+/* Enhanced Arrow Styling */
+.arrow {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ background: var(--arrow-bg, rgba(255, 255, 255, 0.9));
+ backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
+ border: 2px solid var(--arrow-border, rgba(255, 99, 71, 0.2));
+ border-radius: 50%;
+ width: 55px;
+ height: 55px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ z-index: 20;
+ transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+ font-size: 20px;
+ font-weight: bold;
+ color: var(--accent-color, #ff6347);
+ box-shadow:
+ 0 4px 15px rgba(0, 0, 0, 0.1),
+ inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
-.explore-menu h1{
- color: #262626;
- font-weight: 500;
+.arrow:hover {
+ background: var(--accent-color, #ff6347);
+ color: white;
+ transform: translateY(-50%) scale(1.1);
+ box-shadow:
+ 0 8px 25px rgba(255, 99, 71, 0.3),
+ inset 0 1px 0 rgba(255, 255, 255, 0.2);
+ border-color: var(--accent-color, #ff6347);
}
-.explore-menu-text{
- max-width: 60%;
- color: #808080;
+.arrow:active {
+ transform: translateY(-50%) scale(0.95);
}
-.explore-menu-list{
- display: flex;
- justify-content: space-between;
- align-items: center;
- gap: 58px;
- text-align: center;
- margin: 20px 0px;
- overflow-x: scroll;
+.arrow.left {
+ left: 15px;
+}
+
+.arrow.right {
+ right: 15px;
+}
+/* HR Styling */
+.explore-menu hr {
+ margin: 40px auto 20px;
+ height: 1px;
+ width: 80%;
+ background: linear-gradient(90deg,
+ transparent 0%,
+ var(--accent-color, #ff6347) 20%,
+ var(--accent-color, #ff6347) 80%,
+ transparent 100%
+ );
+ border: none;
+ opacity: 0.3;
}
-.explore-menu-list::-webkit-scrollbar{
- display: none;
+/* Animation for continuous scroll */
+.explore-menu-list.scrolling {
+ animation: none;
}
-.explore-menu-list-item img{
- width: 7.5vw;
- min-width: 80px;
- cursor: pointer;
- border-radius: 50%;
- transition: 0.7s;
+/* Responsive Design */
+@media (max-width: 1200px) {
+ .explore-menu-list {
+ gap: 30px;
+ padding: 25px 70px;
+ }
+
+ .arrow {
+ width: 50px;
+ height: 50px;
+ font-size: 18px;
+ }
}
-.explore-menu-list-item p{
- margin-top: 10px;
- font-size: max(1.4vw,16px);
- color: #747474;
- cursor: pointer;
+@media (max-width: 1050px) {
+ .explore-menu-text {
+ max-width: 85%;
+ font-size: 16px;
+ }
+
+ .explore-menu-list {
+ gap: 25px;
+ padding: 20px 60px;
+ }
+
+ .explore-menu-list-item {
+ padding: 15px;
+ }
}
-.explore-menu hr{
- margin: 10px 0px;
- height: 2px;
- background-color: #e2e2e2;
- border: none;
+@media (max-width: 768px) {
+ .explore-menu {
+ padding: 0 15px;
+ gap: 25px;
+ }
+
+ .explore-menu-text {
+ max-width: 95%;
+ }
+
+ .explore-menu-wrapper {
+ border-radius: 20px;
+ }
+
+ .explore-menu-list {
+ gap: 20px;
+ padding: 20px 50px;
+ }
+
+ .explore-menu-list-item {
+ padding: 12px;
+ gap: 10px;
+ }
+
+ .arrow {
+ width: 45px;
+ height: 45px;
+ font-size: 16px;
+ }
+
+ .arrow.left {
+ left: 10px;
+ }
+
+ .arrow.right {
+ right: 10px;
+ }
+}
+
+@media (max-width: 480px) {
+ .explore-menu-list {
+ padding: 15px 40px;
+ gap: 15px;
+ }
+
+ .explore-menu-list-item {
+ padding: 10px;
+ gap: 8px;
+ }
+
+ .arrow {
+ width: 40px;
+ height: 40px;
+ font-size: 14px;
+ }
+}
+
+/* Dark Theme Variables */
+[data-theme="dark"] {
+ --glass-bg: rgba(45, 55, 72, 0.3);
+ --glass-border: rgba(255, 255, 255, 0.1);
+ --menu-gradient: rgba(255, 99, 71, 0.05);
+ --item-bg: rgba(255, 255, 255, 0.02);
+ --item-border: rgba(255, 255, 255, 0.05);
+ --item-hover-bg: rgba(255, 255, 255, 0.05);
+ --arrow-bg: rgba(45, 55, 72, 0.9);
+ --arrow-border: rgba(255, 99, 71, 0.3);
+ --text-secondary: #a0aec0;
+}
+
+/* Loading animation for items */
+.explore-menu-list-item {
+ animation: fadeInUp 0.6s ease-out forwards;
+ opacity: 0;
+ transform: translateY(20px);
+}
+
+.explore-menu-list-item:nth-child(1) { animation-delay: 0.1s; }
+.explore-menu-list-item:nth-child(2) { animation-delay: 0.2s; }
+.explore-menu-list-item:nth-child(3) { animation-delay: 0.3s; }
+.explore-menu-list-item:nth-child(4) { animation-delay: 0.4s; }
+.explore-menu-list-item:nth-child(5) { animation-delay: 0.5s; }
+.explore-menu-list-item:nth-child(6) { animation-delay: 0.6s; }
+.explore-menu-list-item:nth-child(7) { animation-delay: 0.7s; }
+.explore-menu-list-item:nth-child(8) { animation-delay: 0.8s; }
+
+@keyframes fadeInUp {
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
}
-.explore-menu-list-item .active{
- border: 4px solid tomato;
- padding: 2px;
+/* Pulse effect for active items */
+.explore-menu-list-item img.active {
+ animation: pulse 2s infinite;
}
-@media (max-width:1050px){
- .explore-menu-text{
- max-width: 100%;
- font-size: 14px;
- }
+@keyframes pulse {
+ 0% {
+ box-shadow:
+ 0 0 0 4px rgba(255, 99, 71, 0.2),
+ 0 8px 25px rgba(255, 99, 71, 0.3);
+ }
+ 50% {
+ box-shadow:
+ 0 0 0 8px rgba(255, 99, 71, 0.1),
+ 0 12px 35px rgba(255, 99, 71, 0.4);
+ }
+ 100% {
+ box-shadow:
+ 0 0 0 4px rgba(255, 99, 71, 0.2),
+ 0 8px 25px rgba(255, 99, 71, 0.3);
+ }
}
\ No newline at end of file
diff --git a/frontend/src/components/ExploreMenu/ExploreMenu.jsx b/frontend/src/components/ExploreMenu/ExploreMenu.jsx
index 5b4441de..f7feedc0 100644
--- a/frontend/src/components/ExploreMenu/ExploreMenu.jsx
+++ b/frontend/src/components/ExploreMenu/ExploreMenu.jsx
@@ -1,25 +1,246 @@
-import React from 'react'
-import './ExploreMenu.css'
-import { menu_list } from '../../assets/frontend_assets/assets'
+import React, { useRef, useEffect, useState, useCallback } from "react";
+import "./ExploreMenu.css";
+import { menu_list } from "../../assets/frontend_assets/assets";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+const ExploreMenu = ({ category, setCategory }) => {
+ const scrollRef = useRef(null);
+ const animationRef = useRef(null);
+ const [isPaused, setIsPaused] = useState(false);
+ const [isHovered, setIsHovered] = useState(false);
+ const pauseTimeoutRef = useRef(null);
+
+ // Auto-scroll function using requestAnimationFrame for smooth animation
+ const autoScroll = () => {
+ if (isPaused || isHovered || !scrollRef.current) {
+ return; // Stop animation completely while hovered/paused
+ }
+
+ const container = scrollRef.current;
+ const scrollSpeed = 0.5; // Pixels per frame
+
+ // Move forward
+ container.scrollLeft += scrollSpeed;
+
+ // Calculate when to reset with better precision
+ const scrollWidth = container.scrollWidth;
+ const halfWidth = scrollWidth / 2;
+ const resetBuffer = 20; // Small buffer to ensure clean reset
+
+ // Reset when we've scrolled past the first set (with buffer)
+ if (container.scrollLeft >= halfWidth - resetBuffer) {
+ container.scrollLeft = 0;
+ console.log("Auto-scroll reset triggered"); // Debug log
+ }
+
+ // Continue the animation
+ animationRef.current = requestAnimationFrame(autoScroll);
+ };
+
+ // Manual scroll with arrows
+ const handleManualScroll = (direction) => {
+ console.log(`Button clicked: ${direction}`); // Debug log
+
+ if (!scrollRef.current) {
+ console.log("No scrollRef available"); // Debug log
+ return;
+ }
+
+ const container = scrollRef.current;
+ const scrollAmount = 300;
+
+ // Calculate safe boundaries to avoid reset issues
+ const scrollWidth = container.scrollWidth;
+ const halfWidth = scrollWidth / 2;
+ const safeZone = 100; // Buffer to stay away from reset boundary
+
+ console.log(`Current scroll position: ${container.scrollLeft}`); // Debug log
+ console.log(`Half width (reset point): ${halfWidth}`); // Debug log
+
+ // Stop auto-scroll first
+ setIsPaused(true);
+ if (animationRef.current) {
+ cancelAnimationFrame(animationRef.current);
+ }
+
+ // Calculate new position
+ let newPosition;
+ if (direction === "left") {
+ newPosition = container.scrollLeft - scrollAmount;
+ // If going too far left, wrap to safe position before reset point
+ if (newPosition < 0) {
+ newPosition = halfWidth - safeZone - scrollAmount;
+ }
+ } else {
+ newPosition = container.scrollLeft + scrollAmount;
+ // If getting too close to reset point, wrap to beginning
+ if (newPosition >= halfWidth - safeZone) {
+ newPosition = 0;
+ }
+ }
+
+ // Apply the safe scroll position
+ container.scrollLeft = newPosition;
+
+ console.log(`New scroll position: ${container.scrollLeft}`); // Debug log
+
+ // Clear existing timeout
+ if (pauseTimeoutRef.current) {
+ clearTimeout(pauseTimeoutRef.current);
+ }
+
+ // Resume after 1 second
+ pauseTimeoutRef.current = setTimeout(() => {
+ console.log("Resuming auto-scroll"); // Debug log
+ // Normalize position before resuming to ensure we're in a safe zone
+ if (scrollRef.current) {
+ const currentPos = scrollRef.current.scrollLeft;
+ const resetPoint = scrollRef.current.scrollWidth / 2;
+ if (currentPos >= resetPoint - 50) {
+ scrollRef.current.scrollLeft = 0;
+ console.log("Normalized position before resuming"); // Debug log
+ }
+ }
+ setIsPaused(false);
+ }, 900);
+ };
+
+ // Hover handlers
+ const handleMouseEnter = () => {
+ console.log("Mouse entered - pausing scroll");
+ setIsHovered(true);
+ if (animationRef.current) {
+ cancelAnimationFrame(animationRef.current); // Stop animation on hover
+ }
+ };
+
+ const handleMouseLeave = () => {
+ console.log("Mouse left - resuming scroll");
+ setIsHovered(false);
+ if (!isPaused) {
+ animationRef.current = requestAnimationFrame(autoScroll); // Resume animation after hover
+ }
+ };
+
+ // Start auto-scroll on mount
+ useEffect(() => {
+ animationRef.current = requestAnimationFrame(autoScroll);
+
+ return () => {
+ if (animationRef.current) {
+ cancelAnimationFrame(animationRef.current);
+ }
+ if (pauseTimeoutRef.current) {
+ clearTimeout(pauseTimeoutRef.current);
+ }
+ };
+ }, []);
+
+ // Restart animation when pause state changes
+ useEffect(() => {
+ if (!isPaused && !isHovered) {
+ animationRef.current = requestAnimationFrame(autoScroll);
+ }
+
+ return () => {
+ if (animationRef.current) {
+ cancelAnimationFrame(animationRef.current);
+ }
+ };
+ }, [isPaused, isHovered]);
+
-const ExploreMenu = ({category,setCategory}) => {
return (
-
+ 
+ 
+ 
+