Event page coding done

AbulFozolJumman · Mar 4, 2024 · 3adac26 · 3adac26
1 parent dbb3235
commit 3adac26
Show file tree

Hide file tree

Showing 5 changed files with 143 additions and 11 deletions.
diff --git a/src/app/blog/page.js b/src/app/blog/page.js
@@ -178,12 +178,12 @@ export default function BlogPage() {
         </div>
       </div>
 
-      <Link
+      {/* <Link
         href="/blog"
         className="bg-[#f5df4d] cursor-pointer font-semibold py-4 px-8 text-base hover:bg-black hover:text-white flex items-center mx-auto gap-2 w-[270px] md:w-[280px] mt-8 md:mt-0"
       >
-        MORE FROM THE BLOG <FaLongArrowAltRight />{" "}
-      </Link>
+        MORE FROM THE BLOG <FaLongArrowAltRight />
+      </Link> */}
     </section>
   );
 }
diff --git a/src/app/event/page.js b/src/app/event/page.js
@@ -1,3 +1,121 @@
+import Image from "next/image";
+import { FaLongArrowAltRight, FaRegLightbulb } from "react-icons/fa";
+
 export default function EventPage() {
-  return <h2>EventPage</h2>;
+  return (
+    <section className="md:mt-16 mt-8 mb-14 md:mb-52 md:px-12">
+      <h2 className="text-4xl font-bold mb-8 md:mb-12">Events</h2>
+
+      <div className="flex flex-col md:flex-row items-start gap-8 md:gap-[60px]">
+        <div className="md:w-[60%]">
+          <div className="flex flex-col md:flex-row gap-5 md:gap-8 items-start justify-between p-5 md:p-8 border">
+            <Image
+              className="rounded-full w-28"
+              src="/people-3.jpg"
+              width={250}
+              height={250}
+              alt=""
+            />
+            <div>
+              <p className="text-gray-600 text-sm">
+                <span className="text-black bg-[#f5df4d] hover:text-white hover:bg-black mr-4 p-1">
+                  Mar 07 - Mar 12
+                </span>
+                12:00 am
+              </p>
+              <p className="hover:text-red-500 cursor-pointer font-bold mt-3 mb-2 text-lg">
+                How to Build Confidence in Your Abilities
+              </p>
+              <p className="text-gray-600">
+                Overcome your limiting beliefs and achieve your goals.
+              </p>
+            </div>
+            <a className="px-8 py-4 bg-[#f5df4d] cursor-pointer font-bold hover:text-white hover:bg-black">
+              DETAILS
+            </a>
+          </div>
+
+          <div className="flex flex-col md:flex-row gap-5 md:gap-8 items-start justify-between p-5 md:p-8 border">
+            <Image
+              className="rounded-full w-28"
+              src="/reading-4.jpg"
+              width={250}
+              height={250}
+              alt=""
+            />
+            <div>
+              <p className="text-gray-600 text-sm">
+                <span className="text-black bg-[#f5df4d] hover:text-white hover:bg-black mr-4 p-1">
+                  Mar 14 - Mar 17
+                </span>
+                10:00 am
+              </p>
+              <p className="hover:text-red-500 cursor-pointer font-bold mt-3 mb-2 text-lg">
+                A Stress Management for Leaders
+              </p>
+              <p className="text-gray-600">
+                3 step framework for stress management, anxiety relief, and
+                improved emotional intelligence using applied meditation.
+              </p>
+            </div>
+            <a className="px-8 py-4 bg-[#f5df4d] cursor-pointer font-bold hover:text-white hover:bg-black">
+              DETAILS
+            </a>
+          </div>
+
+          <div className="flex flex-col md:flex-row gap-5 md:gap-8 items-start justify-between p-5 md:p-8 border">
+            <Image
+              className="rounded-full w-28"
+              src="/reading-3.jpg"
+              width={250}
+              height={250}
+              alt=""
+            />
+            <div>
+              <p className="text-gray-600 text-sm">
+                <span className="text-black bg-[#f5df4d] hover:text-white hover:bg-black mr-4 p-1">
+                  Mar 15 - Mar 18
+                </span>
+                12:00 am
+              </p>
+              <p className="hover:text-red-500 cursor-pointer font-bold mt-3 mb-2 text-lg">
+                Critical Thinking - An Upgrade For Your Mind
+              </p>
+              <p className="text-gray-600">
+                This course aims to make you a more rigorous, effective, and
+                creative thinker.
+              </p>
+            </div>
+            <a className="px-8 py-4 bg-[#f5df4d] cursor-pointer font-bold hover:text-white hover:bg-black">
+              DETAILS
+            </a>
+          </div>
+
+          {/* <a className="bg-[#f5df4d] font-bold py-4 px-8 text-base hover:bg-black hover:text-white flex items-center gap-2 w-[230px] mt-6 md:mt-12 ml-5 md:ml-0 cursor-pointer">
+            BROWSE EVENTS <FaLongArrowAltRight />{" "}
+          </a> */}
+        </div>
+
+        <div className="md:w-[40%] relative">
+          <p className="bg-[#f5df4d] p-5 md:p-9 text-6xl w-[100px] md:w-[140px] absolute top-0 md:top-14 left-0 md:left-20">
+            <FaRegLightbulb></FaRegLightbulb>
+          </p>
+          <Image
+            className="md:pl-[150px]"
+            src="/writing.jpg"
+            alt=""
+            width={500}
+            height={800}
+          />
+          <Image
+            width={300}
+            height={350}
+            alt=""
+            className="absolute bottom-[-250px] left-0 hidden md:block"
+            src="/car-2.jpg"
+          />
+        </div>
+      </div>
+    </section>
+  );
 }
diff --git a/src/app/page.js b/src/app/page.js
@@ -9,12 +9,19 @@ import Blogs from "@/components/HomeComponents/Blogs";
 import Events from "@/components/HomeComponents/Events";
 import Pricing from "@/components/HomeComponents/Pricing";
 import WhyChooseUs from "@/components/HomeComponents/WhyChooseUs";
+import { FaLongArrowAltUp } from "react-icons/fa";
+import Link from "next/link";
 
 export default function Home() {
   return (
     <main>
       <Banner img={img} text="We were born to be Limitless!" />
       <SignUp />
+      {/* <div>
+        <Link className="p-3 text-center bg-[#f5df4d] text-black w-10" href="/">
+          <FaLongArrowAltUp />
+        </Link>
+      </div> */}
       <Rules />
       <Achievement />
       <Visuality />

diff --git a/src/components/HomeComponents/Events.jsx b/src/components/HomeComponents/Events.jsx
@@ -1,4 +1,5 @@
 import Image from "next/image";
+import Link from "next/link";
 import React from "react";
 import { FaLongArrowAltRight, FaRegLightbulb } from "react-icons/fa";
 
@@ -95,9 +96,12 @@ const Events = () => {
             </a>
           </div>
 
-          <a className="bg-[#f5df4d] font-bold py-4 px-8 text-base hover:bg-black hover:text-white flex items-center gap-2 w-[230px] mt-6 md:mt-12 ml-5 md:ml-0 cursor-pointer">
+          <Link
+            href="/event"
+            className="bg-[#f5df4d] font-bold py-4 px-8 text-base hover:bg-black hover:text-white flex items-center gap-2 w-[230px] mt-6 md:mt-12 ml-5 md:ml-0 cursor-pointer"
+          >
             BROWSE EVENTS <FaLongArrowAltRight />{" "}
-          </a>
+          </Link>
         </div>
 
         <div className="md:w-[40%] relative">

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -32,17 +32,20 @@ const Navbar = () => {
               </label>
               <ul
                 tabIndex={0}
-                className="menu menu-sm dropdown-content mt-3 z-[1] p-3 shadow rounded-box bg-[#04043d] text-white"
+                className="menu menu-sm dropdown-content mt-1 z-[1] p-2 shadow rounded-md bg-gray-900"
               >
                 <li>
-                  <Link href="/" className="hover:text-gray-500 font-bold p-3">
+                  <Link
+                    href="/"
+                    className="font-bold p-3 mb-2 text-black hover:text-[#f5df4d] bg-[#f5df4d] hover:bg-black rounded-md"
+                  >
                     Home
                   </Link>
                 </li>
                 <li>
                   <Link
                     href="/blog"
-                    className="hover:text-gray-500 font-bold p-3"
+                    className="font-bold p-3 mb-2 text-black hover:text-[#f5df4d] bg-[#f5df4d] hover:bg-black rounded-md"
                   >
                     Blog
                   </Link>
@@ -74,15 +77,15 @@ const Navbar = () => {
                 <li>
                   <Link
                     href="/event"
-                    className="hover:text-gray-500 font-bold p-3"
+                    className="font-bold p-3 mb-2 text-black hover:text-[#f5df4d] bg-[#f5df4d] hover:bg-black rounded-md"
                   >
                     Event
                   </Link>
                 </li>
                 <li>
                   <Link
                     href="/about"
-                    className="hover:text-gray-500 font-bold p-3"
+                    className="font-bold p-3 mb-2 text-black hover:text-[#f5df4d] bg-[#f5df4d] hover:bg-black rounded-md"
                   >
                     About Us
                   </Link>