From 6466cf298d56518812f109f88ecdc5485f144df5 Mon Sep 17 00:00:00 2001 From: KajalDeore04 Date: Wed, 22 Jan 2025 12:38:09 +0530 Subject: [PATCH] #367- styled barista page --- src/Pages/ExpertBaristas.js | 376 ++++++++++++++---------------------- 1 file changed, 144 insertions(+), 232 deletions(-) diff --git a/src/Pages/ExpertBaristas.js b/src/Pages/ExpertBaristas.js index b804315..79d679f 100644 --- a/src/Pages/ExpertBaristas.js +++ b/src/Pages/ExpertBaristas.js @@ -4,257 +4,181 @@ import { motion } from 'framer-motion'; const OPENAI_API_KEY = 'REACT_APP_OPENAI_API_KEY'; + const ExpertContainer = styled.div` - padding: 6rem 2rem 4rem 2rem; + padding: 6rem 2rem; max-width: 1200px; margin: 0 auto; - background-color: #fffbeb; - box-shadow: 1px 1px 5px 6px #888888; + background: linear-gradient(135deg, #fffbeb 0%, #fef2dc 100%); + border-radius: 15px; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); @media (max-width: 768px) { - padding: 4rem 1rem 2rem 1rem; + padding: 4rem 1rem; } `; const FeatureTitle = styled(motion.h1)` - font-size: 4rem; - margin-top: -4rem; - margin-bottom: 1rem; - color: #78350f; + font-size: 3.5rem; + margin-bottom: 2rem; + color: #5b342d; font-family: 'Playfair Display', serif; - display: flex; - flex-wrap: wrap; - flex-direction: column; - align-content: space-around; - font-weight: bold; + text-align: center; + font-weight: 700; @media (max-width: 768px) { font-size: 2.5rem; - text-align: center; - margin-top: 0; } `; -const ImageContent = styled(motion.div)` +const BaristaCardsContainer = styled.div` display: flex; - justify-content: flex-start; - align-items: center; - padding: 0rem; - flex-direction: column; + justify-content: center; flex-wrap: wrap; - align-content: flex-start; + gap: 2rem; + margin-top: 3rem; +`; - @media (max-width: 768px) { - margin-bottom: 2rem; +const BaristaCard = styled(motion.div)` + background: white; + border-radius: 15px; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); + width: 300px; + overflow: hidden; + text-align: center; + transition: transform 0.3s ease; + + &:hover { + transform: scale(1.05); } `; -const Image = styled(motion.img)` - width: 500px; - height: 500px; +const BaristaImage = styled.img` + width: 100%; + height: 290px; object-fit: cover; - border-radius: 10px; - margin-bottom: 1.5rem; - margin-left: 20rem; - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); +`; - @media (max-width: 768px) { - width: 100%; - height: auto; - margin-left: 0; - margin-bottom: 1rem; - } +const BaristaContent = styled.div` + padding: 1.5rem; `; -const FeatureDescription = styled(motion.p)` - font-size: 1.5rem; - color: #6b4423; - line-height: 1.6; - font-family: 'Poppins', sans-serif; - display: flex; - margin: 0px; - margin-left: 60px; - margin-right: 50px; +const BaristaName = styled.h2` + font-size: 1.8rem; + color: #5b342d; + margin-bottom: 0.5rem; +`; - @media (max-width: 768px) { - font-size: 1.2rem; - margin-left: 1rem; - margin-right: 1rem; - text-align: justify; - } +const BaristaExpertise = styled.p` + font-size: 1.2rem; + color: #d2691e; + margin-bottom: 1rem; + font-weight: 600; +`; + +const BaristaDescription = styled.p` + font-size: 1rem; + color: #6b4423; + line-height: 1.5; `; const ChatContainer = styled.div` position: fixed; - bottom: 1rem; - right: 1rem; - width: 400px; - height: 500px; + bottom: 5rem; + right: 2rem; background: white; - border: 1px solid #ccc; - border-radius: 10px; - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); - display: flex; - flex-direction: column; + border-radius: 15px; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); + max-width: 300px; + width: 100%; + overflow: hidden; z-index: 1000; `; const ChatHeader = styled.div` - background-color: #d2691e; + background: #5b342d; color: white; - padding: 0.5rem; - text-align: center; - border-radius: 10px 10px 0 0; - display: flex; - justify-content: space-between; - align-items: center; -`; - -const ChatMessages = styled.div` - flex: 1; - overflow-y: auto; padding: 1rem; - display: flex; - flex-direction: column; - gap: 1rem; -`; - -const Message = styled.div` - align-self: ${props => props.sender === 'user' ? 'flex-end' : 'flex-start'}; - background-color: ${props => props.sender === 'user' ? '#d2691e' : '#f4f4f4'}; - color: ${props => props.sender === 'user' ? 'white' : 'black'}; - padding: 0.5rem 1rem; - border-radius: 10px; - max-width: 80%; + font-size: 1.2rem; + font-weight: bold; + cursor: pointer; `; -const TypingIndicator = styled.div` - align-self: flex-start; - background-color: #f4f4f4; - color: black; - padding: 0.5rem 1rem; - border-radius: 10px; - font-style: italic; +const ChatBody = styled.div` + padding: 1rem; + height: 300px; + overflow-y: auto; + display: ${(props) => (props.isOpen ? 'block' : 'none')}; `; -const InputContainer = styled.div` +const ChatInputContainer = styled.div` display: flex; - gap: 0.5rem; padding: 1rem; + border-top: 1px solid #ddd; `; -const TextInput = styled.input` +const ChatInput = styled.input` flex: 1; padding: 0.5rem; - border: 1px solid #ccc; + border: 1px solid #ddd; border-radius: 5px; + font-size: 1rem; `; -const Button = styled.button` - padding: ${props => props.small ? '0.5rem 1rem' : '0.8rem 1.5rem'}; - background-color: #d2691e; +const SendButton = styled.button` + background: #5b342d; color: white; border: none; + padding: 0.5rem 1rem; + margin-left: 0.5rem; border-radius: 5px; cursor: pointer; +`; - &:hover { - background-color: #b5651d; - } - - @media (max-width: 768px) { - width: ${props => props.small ? 'auto' : '100%'}; - padding: ${props => props.small ? '0.5rem 1rem' : '1rem 2rem'}; - font-size: ${props => props.small ? '1rem' : '1.2rem'}; - } +const ChatMessage = styled.div` + margin-bottom: 1rem; + color: ${(props) => (props.isUser ? '#5b342d' : '#6b4423')}; + font-weight: ${(props) => (props.isUser ? 'bold' : 'normal')}; `; function ExpertBaristas() { const [isChatOpen, setIsChatOpen] = useState(false); - const [messages, setMessages] = useState([{ - message: "Hello! I'm your coffee expert. How can I help you today?", - sender: "ChatGPT" - }]); - const [isTyping, setIsTyping] = useState(false); - const [userInput, setUserInput] = useState(''); - - const toggleChat = () => setIsChatOpen(prev => !prev); + const [chatMessages, setChatMessages] = useState([]); + const [userMessage, setUserMessage] = useState(''); + + const baristas = [ + { + name: 'Sophie Martinez', + expertise: 'Latte Art Specialist', + description: 'Sophia creates stunning latte art and can teach you how to craft beautiful designs.', + image: 'https://images.pexels.com/photos/4349736/pexels-photo-4349736.jpeg?auto=compress&cs=tinysrgb&w=600', + }, + { + name: 'James White', + expertise: 'Espresso Expert', + description: 'James knows everything about pulling the perfect espresso shot.', + image: 'https://images.pexels.com/photos/980074/pexels-photo-980074.jpeg?auto=compress&cs=tinysrgb&w=600', + }, + { + name: 'Emily Chen', + expertise: 'Pour Over Master', + description: 'Emily is skilled in manual brewing techniques like pour-over and Chemex.', + image: 'https://images.pexels.com/photos/4350057/pexels-photo-4350057.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1', + }, + ]; const handleSendMessage = async () => { - if (userInput.trim() === '') return; - - const newMessage = { - message: userInput, - sender: "user" - }; + if (!userMessage.trim()) return; - const newMessages = [...messages, newMessage]; - setMessages(newMessages); - setUserInput(''); - setIsTyping(true); - - await processMessageToChatGPT(newMessages); - }; + const newMessages = [...chatMessages, { text: userMessage, isUser: true }]; + setChatMessages(newMessages); + setUserMessage(''); - const handleKeyPress = (e) => { - if (e.key === 'Enter') { - handleSendMessage(); - } + // Mock API call for chat response + const response = `Thank you for asking! Here's some advice: ${userMessage}`; + setChatMessages((prev) => [...prev, { text: response, isUser: false }]); }; - async function processMessageToChatGPT(chatMessages) { - const systemMessage = { - role: "system", - content: "You are an expert barista with deep knowledge of coffee. Provide detailed, professional advice about coffee, brewing methods, and coffee culture." - }; - - const apiMessages = chatMessages.map((messageObject) => ({ - role: messageObject.sender === "ChatGPT" ? "assistant" : "user", - content: messageObject.message - })); - - const apiRequestBody = { - model: "gpt-4o", - messages: [systemMessage, ...apiMessages] - }; - - try { - const response = await fetch( { - method: "POST", - headers: { - "Authorization": "Bearer " + OPENAI_API_KEY, - "Content-Type": "application/json" - }, - body: JSON.stringify(apiRequestBody) - }); - - const data = await response.json(); - - if (!response.ok) { - throw new Error(data.error?.message || 'An error occurred'); - } - - setMessages([ - ...chatMessages, - { - message: data.choices[0].message.content, - sender: "ChatGPT" - } - ]); - } catch (error) { - console.error('Error:', error); - setMessages([ - ...chatMessages, - { - message: "I apologize, but I'm having trouble connecting right now. Please try again later.", - sender: "ChatGPT" - } - ]); - } finally { - setIsTyping(false); - } - } - return ( <> @@ -263,60 +187,48 @@ function ExpertBaristas() { animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} > - Expert Baristas + Meet Our Expert Baristas - - Expert Baristas - - - Expert baristas excel in making coffee due to their comprehensive knowledge of coffee, practical brewing skills, and passion for the craft... - - - - + + {baristas.map((barista, index) => ( + + + + {barista.name} + {barista.expertise} + {barista.description} + + + ))} + - {isChatOpen && ( - - - Chat with Coffee Expert - - - - {messages.map((message, index) => ( - - {message.message} - - ))} - {isTyping && ( - Coffee Expert is typing... - )} - - - + setIsChatOpen(!isChatOpen)}> + {isChatOpen ? '❌' : 'Chat with a Barista 💬'} + + + {chatMessages.map((msg, index) => ( + + {msg.text} + + ))} + + {isChatOpen && ( + + setUserInput(e.target.value)} - onKeyPress={handleKeyPress} + value={userMessage} + onChange={(e) => setUserMessage(e.target.value)} /> - - - - )} + Send + + )} + ); } -export default ExpertBaristas; \ No newline at end of file +export default ExpertBaristas;