Merge pull request #1328 from Tanmay-Mirgal/main

dash board and contact is done

Front-with-React/VigyBag/src/components/Aside(Dashboard)/Aside.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { FaHome, FaClipboardList, FaShoppingCart, FaHeart, FaBell, FaQuestionCircle, FaPhoneAlt } from 'react-icons/fa';
+import Logo from '../../assets/offical_logo.png';
+
+const Aside = () => {
+  return (
+    <aside className="w-64 bg-[#393d3cff] text-white flex flex-col sticky top-0 " style={{position:'sticky'}}>
+      <div className="flex items-center justify-center h-20  ">
+        <img className='mt-10' src={Logo} alt="Logo" style={{ width: '50px', height: '50px' }} />
+      </div>
+      <nav className="flex-1 px-4 py-8 space-y-2">
+        <a href="#" className="flex items-center space-x-2 p-2 hover:bg-gray-700 rounded-md">
+          <FaHome />
+          <span>Home</span>
+        </a>
+        <a href="#" className="flex items-center space-x-2 p-2 hover:bg-gray-700 rounded-md">
+          <FaClipboardList />
+          <span>My Order</span>
+        </a>
+        <a href="#" className="flex items-center space-x-2 p-2 hover:bg-gray-700 rounded-md relative">
+          <FaShoppingCart />
+          <span>My Cart</span>
+          <span className="absolute right-2 top-1 bg-red-500 text-xs text-white rounded-full w-5 h-5 flex items-center justify-center">5</span>
+        </a>
+        <a href="#" className="flex items-center space-x-2 p-2 hover:bg-gray-700 rounded-md">
+          <FaHeart />
+          <span>Wishlist</span>
+        </a>
+        <a href="#" className="flex items-center space-x-2 p-2 hover:bg-gray-700 rounded-md relative">
+          <FaBell />
+          <span>Notifications</span>
+          <span className="absolute right-2 top-1 bg-red-500 text-xs text-white rounded-full w-5 h-5 flex items-center justify-center">2</span>
+        </a>
+        <a href="#" className="flex items-center space-x-2 p-2 hover:bg-gray-700 rounded-md">
+          <FaQuestionCircle />
+          <span>Help</span>
+        </a>
+        <a href="#" className="flex items-center space-x-2 p-2 hover:bg-gray-700 rounded-md">
+          <FaPhoneAlt />
+          <span>Contact Us</span>
+        </a>
+        <a href="#" className="flex items-center space-x-2 p-2 relative justify-center">
+          <button className="mt-20 bg-green-500" style={{ padding: '13px 13px', borderRadius: '10px',border:'1px solid #98bf8cff' }}>Logout</button>
+        </a>
+      </nav>
+    </aside>
+  );
+};
+
+export default Aside;

Front-with-React/VigyBag/src/components/Aside/Aside.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { FaHome, FaClipboardList, FaShoppingCart, FaHeart, FaBell, FaQuestionCircle, FaPhoneAlt } from 'react-icons/fa';
+import Logo from '../../assets/offical_logo.png';
+
+const Aside = () => {
+  return (
+    <aside className="w-64 bg-[#393d3cff] text-white flex flex-col sticky top-0 " style={{position:'sticky'}}>
+      <div className="flex items-center justify-center h-20  ">
+        <img className='mt-10' src={Logo} alt="Logo" style={{ width: '50px', height: '50px' }} />
+      </div>
+      <nav className="flex-1 px-4 py-8 space-y-2">
+        <a href="#" className="flex items-center space-x-2 p-2 hover:bg-gray-700 rounded-md">
+          <FaHome />
+          <span>Home</span>
+        </a>
+        <a href="#" className="flex items-center space-x-2 p-2 hover:bg-gray-700 rounded-md">
+          <FaClipboardList />
+          <span>My Order</span>
+        </a>
+        <a href="#" className="flex items-center space-x-2 p-2 hover:bg-gray-700 rounded-md relative">
+          <FaShoppingCart />
+          <span>My Cart</span>
+          <span className="absolute right-2 top-1 bg-red-500 text-xs text-white rounded-full w-5 h-5 flex items-center justify-center mt-1">5</span>
+        </a>
+        <a href="#" className="flex items-center space-x-2 p-2 hover:bg-gray-700 rounded-md">
+          <FaHeart />
+          <span>Wishlist</span>
+        </a>
+        <a href="#" className="flex items-center space-x-2 p-2 hover:bg-gray-700 rounded-md relative">
+          <FaBell />
+          <span>Notifications</span>
+          <span className="absolute right-2 top-1 bg-red-500 text-xs text-white rounded-full w-5 h-5 flex items-center justify-center mt-1">2</span>
+        </a>
+        <a href="#" className="flex items-center space-x-2 p-2 hover:bg-gray-700 rounded-md">
+          <FaQuestionCircle />
+          <span>Help</span>
+        </a>
+        <a href="#" className="flex items-center space-x-2 p-2 hover:bg-gray-700 rounded-md">
+          <FaPhoneAlt />
+          <span>Contact Us</span>
+        </a>
+        <a href="#" className="flex items-center space-x-2 p-2 relative justify-center">
+          <button className="mt-20 bg-green-500" style={{ padding: '13px 13px', borderRadius: '10px',border:'1px solid #98bf8cff' }}>Logout</button>
+        </a>
+      </nav>
+    </aside>
+  );
+};
+
+export default Aside;

Front-with-React/VigyBag/src/components/ProductCard/ProductCard.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { FaStar } from 'react-icons/fa';
+import {FaShoppingCart} from'react-icons/fa';
+
+const ProductCard = ({ image, title, price, rating }) => {
+  return (
+    <div className="bg-white rounded-lg shadow-md p-4">
+      <img src={image} alt={title} className="w-full h-40 object-cover rounded-t-lg" />
+      <div className="mt-2 ">
+        <h3 className="text-lg font-semibold text-[#171616]">{title}</h3>
+
+        <div className="flex items-center mt-3"style={{display:'flex',
+        alignItems:'center',flexDirection:'row'}}>
+        <p className="text-[#1b1a1a]">₹{price}</p>
+          {[...Array(rating)].map((_, i) => (
+            <FaStar style={{position:'relative',left:'8vw'}} key={i} className="text-yellow-500" />
+          ))}
+        </div>
+        <button className="mt-4 w-full bg-green-500 text-white py-2 rounded-md hover:bg-green-600" style={{display:'flex',
+        justifyContent:'center',alignItems:'center',gap:'10px'}}>
+          Add to Cart
+          <FaShoppingCart className="ml-2 text-[black]" />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ProductCard;

Front-with-React/VigyBag/src/main.jsx

@@ -10,6 +10,7 @@ import DecorativeItems from './pages/Category/DecorativeItems';
 import AboutUs from './pages/AboutUs';
 import Gifts from './pages/gifts/Gifts';
 import Contact from './pages/Contact';
+import Dashboard from './pages/Dashboard';
 import Home from './pages/Home';
 import Layout from './Layout'
 import Team from './components/Team/Team';
@@ -37,6 +38,7 @@ const router = createBrowserRouter(
       <Route path="contact" element={<Contact/>}/>
       <Route path="team" element={<Team/>}/>
       <Route path="login" element={<Login/>}/>
+      <Route path="dashboard" element={<Dashboard/>}/>
     </Route>
   )
 )

Front-with-React/VigyBag/src/pages/Contact.jsx

@@ -1,9 +1,92 @@
-import React from 'react'
+import React from 'react';
+import { FaEnvelope, FaPhone } from 'react-icons/fa';
+import Logo from '../assets/offical_logo.png';
 
-function Contact() {
+const ContactForm = () => {
   return (
-    <div>This is Contact us page</div>
-  )
-}
+    <div className="bg-[#fff0e3ff] min-h-screen flex items-center justify-center mt-1">
+      <div className="bg-[#393d3cff] text-white py-8 px-12 rounded-lg  "style={{marginTop:'13vh',borderRadius:'20px',width:'45vw',marginBottom:'13vh'}} >
+        <div className="flex items-center justify-center mb-6">
+          <div className="absolute bg-[#393d3cff] rounded-full p-4 mb-3" style={{top:'12vh',boxShadow: 'rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px',
+          padding: '40px'}}>
+            <img src={Logo} alt="" width={"50px"} height={"50px"} />
+          </div>
+        </div>
+        <h2 className="text-3xl font-semibold text-center mb-4 mt-10">Contact Us</h2>
+        <p className="text-gray-400 text-center text-lg mb-8">Got something to say? Let us know!</p>
 
-export default Contact
+        <div className="grid grid-cols-2 gap-4 mb-4">
+          <div>
+            <input
+              className="appearance-none border border-gray-300 rounded-lg w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:border-green-500"
+              type="text"
+              placeholder="First Name *"
+              required
+            />
+          </div>
+          <div>
+            <input
+              className="appearance-none border border-gray-300 rounded-lg w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:border-green-500"
+              type="text"
+              placeholder="Last Name *"
+              required
+            />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4 mb-4">
+          <div>
+            <input
+              className="appearance-none border border-gray-300 rounded-lg w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:border-green-500"
+              type="email"
+              placeholder="Email Address *"
+              required
+            />
+          </div>
+          <div>
+            <input
+              className="appearance-none border border-gray-300 rounded-lg w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:border-green-500"
+              type="tel"
+              placeholder="Contact Number *"
+              required
+            />
+          </div>
+        </div>
+
+        <div className="mb-6">
+          <textarea
+            className="appearance-none border border-gray-300 rounded-lg w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:border-green-500"
+            rows={4}
+            placeholder="Tell us your thoughts..."
+            required
+          ></textarea>
+        </div>
+
+        <div className="flex flex-col items-center mb-3">
+          <button
+            className="bg-green-500 hover:bg-green-600 text-white font-semibold py-3 px-8 rounded-lg focus:outline-none focus:shadow-outline
+             mb-6 transition duration-300 w-full"
+            type="submit"
+          >
+            Get In Touch
+          </button>
+          <hr  style={{width:'100%',height:'1px',backgroundColor:'white',zIndex:'1',top:'20px',position:'relative'}} />
+          <p className="text-white text-sm mb-2 text-center"style={{padding:'10px',border:'1px solid white',borderRadius:'20px',
+          backgroundColor:'#1a1821ff',zIndex:'1',width:'15vw',position:'relative'}}>or contact us via</p>
+          <div className="flex flex-col items-center mb-1 mt-4">
+            <div className="flex items-center mb-2">
+              <FaEnvelope className="text-gray-400 mr-2" />
+              <span className="text-gray-400 text-sm">[email protected]</span>
+            </div>
+            <div className="flex items-center">
+              <FaPhone className="text-gray-400 mr-2" />
+              <span className="text-gray-400 text-sm">+91 9123456789</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ContactForm;