corrected mistakes

src/App.jsx

@@ -1,13 +1,14 @@
 import Navbar from "./components/Navbar";
 import Footer from "./components/Footer";
+import Bento_placement from "./components/Bento_placement";  
 
 function App() {
   return (
     <>
       <Navbar />
       <section className="hero min-h-screen bg-red-300"></section>
       <section className="bento min-h-screen bg-green-300"></section>
-      <section className="placements min-h-screen bg-amber-300"></section>
+      <Bento_placement />
       <section className="contact min-h-screen bg-blue-300"></section>
       <Footer />
     </>

src/components/Bento_placement.jsx

@@ -0,0 +1,68 @@
+import star from "../assets/Frame.png"
+import google from "../assets/companies/google.png"
+import microsoft from "../assets/companies/microsoft.png"
+import amazon from "../assets/companies/amazon.png"
+import zomato from "../assets/companies/zomato.png"
+import juspay from "../assets/companies/juspay.png"
+import groww from "../assets/companies/groww.png"
+import routemagic from "../assets/companies/routemagic.png"
+import flipkart from "../assets/companies/flipkart.png"
+import coinswitch from "../assets/companies/coinswitch.png"
+import agoda from "../assets/companies/agoda.png"
+import tokopedia from "../assets/companies/tokopedia.png"
+import zuddle from "../assets/companies/zuddle.png"
+import myntra from "../assets/companies/myntra.png"
+import ion from "../assets/companies/ion.png"
+import zeta from "../assets/companies/zeta.png"
+import zs from "../assets/companies/zs.png"
+import deliotte from "../assets/companies/deliotte.png"
+import trinity from "../assets/companies/trinity.png"
+import rtds from "../assets/companies/rtds.png"
+import cvent from "../assets/companies/cvent.png"
+
+function Bento_placement() {
+    const companies = [
+        {logo : google, name : "google"},
+        {logo : microsoft, name : "microsoft"},
+        {logo : amazon, name : "amazon"},
+        {logo : zomato, name : "zomato"},
+        {logo : juspay, name : "juspay"},
+        {logo : groww, name : "groww"},
+        {logo : routemagic, name : "routemagic"},
+        {logo : flipkart, name : "flipkart"},
+        {logo : coinswitch, name : "coinswitch"},
+        {logo : agoda, name : "agoda"},
+        {logo : tokopedia, name : "tokopedia"},
+        {logo : zuddle, name : "zuddle"},
+        {logo : myntra, name : "myntra"},
+        {logo : ion, name : "ion"},
+        {logo : zeta, name : "zeta"},
+        {logo : zs, name : "zs"},
+        {logo : deliotte, name : "deliotte"},
+        {logo : trinity, name : "trinity"},
+        {logo : rtds, name : "rtds"},
+        {logo : cvent, name : "cvent"}
+    ]
+
+    return (
+        <div className="bg-black text-white p-12 flex flex-col items-center min-h-screen">
+            <div>
+                <div className="flex gap-2 mb-6 justify-start">
+                    <img src={star} alt="star" className="w-6 h-6" />
+                    <h2 className="text-xl font-semibold">Our Alumni At</h2>
+                </div>
+
+                <div className="grid grid-cols-4 grid-rows-5 w-full container">
+                    {companies.map((company, index) => (
+                        <div key={index} className="bg-black p-8 text-center border border-white h-40 flex items-center justify-center">
+                            <img src={company.logo} alt={company.name} className="" />
+                        </div>
+                    ))}
+                </div>
+            </div>
+
+        </div>
+    );
+}
+
+export default Bento_placement;

src/components/Footer.jsx

@@ -1,29 +1,45 @@
+import discordIcon from "../assets/discord.png";
+import twitterIcon from "../assets/twitter.png";
+import linkedinIcon from "../assets/linkedin.png";
+import instagramIcon from "../assets/instagram.png";
+import logo from "../assets/LOGO.png";
+
 function Footer() {
+  const socialIcons = [
+    { src: instagramIcon, alt: "Instagram", name: "Instagram" },
+    { src: twitterIcon, alt: "Twitter", name: "Twitter" },
+    { src: linkedinIcon, alt: "LinkedIn", name: "LinkedIn" },
+    { src: discordIcon, alt: "Discord", name: "Discord" },
+  ];
+
   return (
-    <footer className="w-full">
-      <div className="flex items-center justify-between px-12 py-8">
+    <footer className="w-full h-52">
+      <div className="flex items-center justify-between px-12 py-8 h-52">
         {/* Logo */}
-        <div className="text-xl font-bold">LOGO HERE</div>
+        <div className="w-32 h-16 flex justify-center items-center">
+          <img src={logo} alt="define_logo" />
+        </div>
 
         {/* Social Media Icons */}
         <div className="grid grid-cols-2 gap-3">
-          {["Logo 1", "Logo 2", "Logo 3", "Logo 4"].map((logo, index) => (
+          {socialIcons.map((logo, index) => (
             <div
               key={index}
-              className="flex items-center justify-center h-20 w-20 bg-gray-300 rounded-lg"
+              className="flex flex-col items-center justify-center h-12 w-12 rounded-lg"
             >
-              <p className="text-sm font-medium">{logo}</p>
+              <img src={logo.src} alt={logo.alt} className="h-12 w-12" />
+              {/* <p className="text-sm font-medium mt-1">{logo.name}</p> */}
             </div>
           ))}
         </div>
       </div>
 
       {/* Footer Text */}
-      <div className="w-full h-20 flex items-center justify-center text-lg font-semibold">
-        <p>"May the code be with you."</p>
+      <div className="w-full flex items-center justify-center text-lg font-medium">
+        <p className="italic">"May the code be with you."</p>
       </div>
     </footer>
   );
 }
 
-export default Footer;
+export default Footer;

src/components/Navbar.jsx

@@ -1,13 +1,17 @@
+import logo from "../assets/LOGO.png";
+
 function Navbar() {
   return (
     <nav className="navbar flex justify-between py-10 px-12">
-      <div className="logo items-center flex">Hash Define</div>
-      <ul className="links flex gap-12 font-bold text-lg">
-        <li>Events</li>
-        <li>About</li>
-        <li>Our Team</li>
+      <div className="logo items-center flex h-8 w-28">
+        <img src={logo} alt="define_logo" />
+      </div>
+      <ul className="links flex gap-12 font-semibold text-lg">
+        <li><a href="#">Events</a></li>
+        <li><a href="#">About</a></li>
+        <li><a href="#">Our Team</a></li>
       </ul>
-      <button className="bg-slate-200/20 border-2 rounded-[50px] px-6 text-lg font-light">
+      <button className="bg-slate-300/30 border-1 rounded-[30px] px-6 text-lg font-light text-opacity-50">
         Contact Us
       </button>
     </nav>