improved ui of home, about, navbar, shop and footer to match cafe theme

public/index.html

@@ -10,6 +10,7 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@400;500;600&display=swap" rel="stylesheet" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/Pages/About.js

@@ -4,42 +4,56 @@ import { motion } from 'framer-motion';
 import Button from '../componets/Button';
 
 const AboutContainer = styled.div`
-  padding: 4rem 2rem;
+  padding: 6rem 2rem 4rem 2rem;
   max-width: 1200px;
   margin: 0 auto;
+  background-color: #fffbeb;
 `;
 
 const Title = styled(motion.h1)`
   font-size: 2.5rem;
-  margin-bottom: 2rem;
+  margin-bottom: 3rem;
   text-align: center;
+  color: #78350f;
+  font-weight: bold;
 `;
 
 const Content = styled(motion.div)`
   display: flex;
   flex-direction: column;
-  gap: 2rem;
-
+  gap: 3rem;
+  max-width: 1100px;
+  margin: 0 auto;
+  
   @media (min-width: 768px) {
     flex-direction: row;
+    align-items: center;
   }
 `;
 
 const TextContent = styled(motion.div)`
   flex: 1;
+  p {
+    color: #92400e;
+    font-size: 1.1rem;
+    line-height: 1.8;
+    margin-bottom: 1.5rem;
+  }
 `;
 
 const ImageContent = styled(motion.div)`
   flex: 1;
   display: flex;
   justify-content: center;
   align-items: center;
+  padding: 1rem;
 `;
 
 const Image = styled(motion.img)`
   max-width: 100%;
   height: auto;
-  border-radius: 8px;
+  border-radius: 12px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 `;
 
 function About() {
@@ -50,7 +64,7 @@ function About() {
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.5 }}
       >
-        About  MsCafe
+        About MsCafe
       </Title>
       <Content>
         <TextContent
@@ -71,7 +85,10 @@ function About() {
           animate={{ opacity: 1, x: 0 }}
           transition={{ duration: 0.5, delay: 0.4 }}
         >
-          <Image src="https://img.freepik.com/free-photo/digital-lavender-style-interior-design_23-2151561226.jpg?t=st=1727763316~exp=1727766916~hmac=621a2fad85c2229414cc73a6d1c40e4525802c326c6494db624ca97d2fda6bc2&w=1380" alt="Zumar Cafe Interior" />
+          <Image 
+            src="https://img.freepik.com/free-photo/digital-lavender-style-interior-design_23-2151561226.jpg?t=st=1727763316~exp=1727766916~hmac=621a2fad85c2229414cc73a6d1c40e4525802c326c6494db624ca97d2fda6bc2&w=1380" 
+            alt="Zumar Cafe Interior" 
+          />
         </ImageContent>
       </Content>
     </AboutContainer>