Create puchase ticket section

jerin-arpa · Oct 8, 2023 · e4dea15 · e4dea15
1 parent 4f847b7
commit e4dea15
Show file tree

Hide file tree

Showing 14 changed files with 113 additions and 48 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -38,4 +38,4 @@
     "tailwindcss": "^3.3.3",
     "vite": "^4.4.5"
   }
-}
+}
diff --git a/src/Components/Banner/Banner.jsx b/src/Components/Banner/Banner.jsx
@@ -1,58 +1,60 @@
 const Banner = () => {
     return (
         <div>
-            <div className="carousel w-full">
-                <div id="slide1" className="carousel-item relative w-full">
-                    <div className="hero" style={{ backgroundImage: 'url(https://i.ibb.co/6rF2tbf/IMG-20231007-WA0003.jpg)' }}>
-                        <div className="hero-overlay bg-opacity-70 py-72"></div>
-                        <div className="hero-content text-center text-neutral-content">
-                            <div className="w-2/3 lg:w-2/4 text-white">
-                                <h1 className="mb-5 text-3xl lg:text-5xl font-bold">FestCon <span className="text-yellow-500">Management</span> at Your Service</h1>
-                                <p className="mb-5">From concept to applause, FestCon Management conducts remarkable festivals. Our team brings precision, passion, and expertise to every beat, ensuring your festival is a resounding success.</p>
-                                <button className="btn btn-warning text-white">Get Started</button>
+            <div className=" container mx-auto px-5">
+                <div className="carousel">
+                    <div id="slide1" className="carousel-item relative w-full">
+                        <div className="hero" style={{ backgroundImage: 'url(https://i.ibb.co/4PGFMkZ/background-2.png)' }}>
+                            <div className="hero-overlay bg-opacity-70 py-72"></div>
+                            <div className="hero-content text-center text-neutral-content">
+                                <div className="w-2/3 lg:w-2/4 text-white">
+                                    <h1 className="mb-5 text-3xl lg:text-5xl font-bold">FestCon <span className="text-yellow-500">Management</span> at Your Service</h1>
+                                    <p className="mb-5">From concept to applause, FestCon Management conducts remarkable festivals. Our team brings precision, passion, and expertise to every beat, ensuring your festival is a resounding success.</p>
+                                    <button className="btn btn-warning text-white">Get Started</button>
+                                </div>
                             </div>
                         </div>
+                        <div className="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
+                            <a href="#slide3" className="btn btn-circle bg-black text-white border-0">❮</a>
+                            <a href="#slide2" className="btn btn-circle bg-black text-white border-0">❯</a>
+                        </div>
                     </div>
-                    <div className="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
-                        <a href="#slide3" className="btn btn-circle bg-black text-white border-0">❮</a>
-                        <a href="#slide2" className="btn btn-circle bg-black text-white border-0">❯</a>
-                    </div>
-                </div>
 
 
-                <div id="slide2" className="carousel-item relative w-full">
-                    <div className="hero" style={{ backgroundImage: 'url(https://i.ibb.co/R3rphF5/IMG-20231007-WA0001.jpg)' }}>
-                        <div className="hero-overlay bg-opacity-80 py-72"></div>
-                        <div className="hero-content text-center text-neutral-content">
-                            <div className="w-2/3 lg:w-2/4 text-white">
-                                <h1 className="mb-5 text-3xl lg:text-5xl font-bold">FestCon <span className="text-yellow-500">Management</span> Takes the Spotlight</h1>
-                                <p className="mb-5">Experience the crescendo of success! FestCon Management orchestrates seamless festivals, finely tuned to perfection. Let us be the conductor of your musical event and make it a symphony of memories.</p>
-                                <button className="btn btn-warning text-white">Get Started</button>
+                    <div id="slide2" className="carousel-item relative w-full">
+                        <div className="hero" style={{ backgroundImage: 'url(https://i.ibb.co/N75LcWr/background-3.png)' }}>
+                            <div className="hero-overlay bg-opacity-80 py-72"></div>
+                            <div className="hero-content text-center text-neutral-content">
+                                <div className="w-2/3 lg:w-2/4 text-white">
+                                    <h1 className="mb-5 text-3xl lg:text-5xl font-bold">FestCon <span className="text-yellow-500">Management</span> Takes the Spotlight</h1>
+                                    <p className="mb-5">Experience the crescendo of success! FestCon Management orchestrates seamless festivals, finely tuned to perfection. Let us be the conductor of your musical event and make it a symphony of memories.</p>
+                                    <button className="btn btn-warning text-white">Get Started</button>
+                                </div>
                             </div>
                         </div>
+                        <div className="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
+                            <a href="#slide1" className="btn btn-circle bg-black text-white border-0">❮</a>
+                            <a href="#slide3" className="btn btn-circle bg-black text-white border-0">❯</a>
+                        </div>
                     </div>
-                    <div className="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
-                        <a href="#slide1" className="btn btn-circle bg-black text-white border-0">❮</a>
-                        <a href="#slide3" className="btn btn-circle bg-black text-white border-0">❯</a>
-                    </div>
-                </div>
 
 
-                <div id="slide3" className="carousel-item relative w-full">
+                    <div id="slide3" className="carousel-item relative w-full">
 
-                    <div className="hero" style={{ backgroundImage: 'url(https://i.ibb.co/MGzxKTF/IMG-20231007-WA0000.jpg)' }}>
-                        <div className="hero-overlay bg-opacity-80 py-72"></div>
-                        <div className="hero-content text-center text-neutral-content">
-                            <div className="w-2/3 lg:w-2/4 text-white">
-                                <h1 className="mb-5 text-3xl lg:text-5xl font-bold">Where <span className="text-yellow-500">Vision Meets</span> Vibrant</h1>
-                                <p className="mb-5">Bringing your festival dreams to life! FestCon Management offers expert event orchestration for music festivals that resonate and leave a lasting beat in the hearts of attendees.</p>
-                                <button className="btn btn-warning text-white">Get Started</button>
+                        <div className="hero" style={{ backgroundImage: 'url(https://i.ibb.co/Qvktjs7/background-1.png)' }}>
+                            <div className="hero-overlay bg-opacity-80 py-72"></div>
+                            <div className="hero-content text-center text-neutral-content">
+                                <div className="w-2/3 lg:w-2/4 text-white">
+                                    <h1 className="mb-5 text-3xl lg:text-5xl font-bold">Where <span className="text-yellow-500">Vision Meets</span> Vibrant</h1>
+                                    <p className="mb-5">Bringing your festival dreams to life! FestCon Management offers expert event orchestration for music festivals that resonate and leave a lasting beat in the hearts of attendees.</p>
+                                    <button className="btn btn-warning text-white">Get Started</button>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                    <div className="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
-                        <a href="#slide2" className="btn btn-circle bg-black text-white border-0">❮</a>
-                        <a href="#slide1" className="btn btn-circle bg-black text-white border-0">❯</a>
+                        <div className="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
+                            <a href="#slide2" className="btn btn-circle bg-black text-white border-0">❮</a>
+                            <a href="#slide1" className="btn btn-circle bg-black text-white border-0">❯</a>
+                        </div>
                     </div>
                 </div>
             </div>

diff --git a/src/Components/HomeEvent/HomeEvent.jsx b/src/Components/HomeEvent/HomeEvent.jsx
@@ -17,19 +17,19 @@ const HomeEvent = ({ event }) => {
                             <div className='flex items-center text-xl'>
                                 <FaMoneyCheck className='text-amber-600'></FaMoneyCheck>
                             </div>
-                            <p className='text-xl font-bold'>{price}</p>
+                            <p className='text-lg'>{price}</p>
                         </div>
                         <div className='flex gap-3'>
                             <div className='flex items-center text-xl'>
                                 <MdEventSeat className='text-amber-600'></MdEventSeat>
                             </div>
-                            <p className='text-xl font-bold'>{seat} seats</p>
+                            <p className='text-lg'>{seat} seats</p>
                         </div>
                     </div>
 
                     <div className='flex justify-center items-center my-3'>
                         <Link to={`/eventDetails/${id}`}>
-                            <button className='btn bg-amber-800 border-0 text-white hover:bg-cyan-950 hover:text-white'>Show Details</button>
+                            <button className='btn bg-amber-800 border-0 text-white hover:bg-cyan-800 hover:text-white'>Show Details</button>
                         </Link>
                     </div>
                 </div>

diff --git a/src/Components/Navbar/Navbar.jsx b/src/Components/Navbar/Navbar.jsx
@@ -25,6 +25,16 @@ const Navbar = () => {
                 isPending ? "pending" : isActive ? "font-bold text-amber-600 underline" : ""
             }>Home</NavLink>
         </li>
+        <li>
+            <NavLink to='/speakers' className={({ isActive, isPending }) =>
+                isPending ? "pending" : isActive ? "font-bold text-amber-600 underline" : ""
+            }>Speakers</NavLink>
+        </li>
+        <li>
+            <NavLink to='/gallery' className={({ isActive, isPending }) =>
+                isPending ? "pending" : isActive ? "font-bold text-amber-600 underline" : ""
+            }>Gallery</NavLink>
+        </li>
         <li>
             <NavLink to='/about' className={({ isActive, isPending }) =>
                 isPending ? "pending" : isActive ? "font-bold underline text-amber-600" : ""
@@ -111,9 +121,6 @@ const Navbar = () => {
                                 </>
                         }
                     </div>
-
-
-
                 </div>
             </div>
         </div >

diff --git a/src/Pages/Gallery/Gallery.jsx b/src/Pages/Gallery/Gallery.jsx
@@ -0,0 +1,11 @@
+const Gallery = () => {
+    return (
+        <div className="bg-slate-900">
+            <div className="container mx-auto px-5 py-14">
+                <h2>Gallery</h2>
+            </div>
+        </div>
+    );
+};
+
+export default Gallery;
diff --git a/src/Pages/Home/Home.jsx b/src/Pages/Home/Home.jsx
@@ -101,6 +101,29 @@ const Home = () => {
                     </div>
                 </div>
             </section>
+
+
+
+            {/* Book Seat */}
+            <section className="bg-slate-900 py-20">
+                <div className="container mx-auto px-5">
+                    <div className="hero py-48 rounded-3xl" style={{ backgroundImage: 'url(https://i.ibb.co/kSmVCC0/10.png)' }}>
+                        <div className="hero-overlay bg-opacity-70"></div>
+                        <div className="hero-content text-center">
+                            <div className="w-2/3 lg:w-full text-white">
+                                <div className="flex gap-3 justify-center">
+                                    <div>
+                                        <GiChemicalBolt className="text-2xl text-amber-500"></GiChemicalBolt>
+                                    </div>
+                                    <p className="mb-3 text-xl">About the Event</p>
+                                </div>
+                                <h1 className="mb-5 text-3xl lg:text-5xl">Have Not Booked Your Seat Yet <br /> Get Ticket Now</h1>
+                                <button className="btn bg-cyan-600 border-0 text-white p-1 px-8 rounded-3xl hover:bg-white hover:border-0 hover:text-amber-600 mt-6">Purchase Ticket</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
         </div>
     );
 };

diff --git a/src/Pages/Speakers/Speakers.jsx b/src/Pages/Speakers/Speakers.jsx
@@ -0,0 +1,11 @@
+const Speakers = () => {
+    return (
+        <div className="bg-slate-900">
+            <div className="container mx-auto px-5 py-14">
+                <h2>Speakers</h2>
+            </div>
+        </div>
+    );
+};
+
+export default Speakers;
diff --git a/src/Routes/Routes.jsx b/src/Routes/Routes.jsx
@@ -7,6 +7,8 @@ import Login from "../Pages/Login/Login";
 import SignUp from "../Pages/SignUp/SignUp";
 import About from "../Pages/About/About";
 import PrivateRoute from "./PrivateRoute";
+import Speakers from "../Pages/Speakers/Speakers";
+import Gallery from "../Pages/Gallery/Gallery";
 
 const router = createBrowserRouter([
     {
@@ -24,6 +26,14 @@ const router = createBrowserRouter([
                 element: <PrivateRoute><EventDetails></EventDetails></PrivateRoute>,
                 loader: () => fetch('/services.json'),
             },
+            {
+                path: "/speakers",
+                element: <PrivateRoute><Speakers></Speakers></PrivateRoute>,
+            },
+            {
+                path: "/gallery",
+                element: <PrivateRoute><Gallery></Gallery></PrivateRoute>,
+            },
             {
                 path: "/about",
                 element: <About></About>,

diff --git a/src/assets/images/1.png b/src/assets/images/1.png
diff --git a/src/assets/images/2.png b/src/assets/images/2.png
diff --git a/src/assets/images/background-1.png b/src/assets/images/background-1.png
diff --git a/src/assets/images/background-2.png b/src/assets/images/background-2.png
diff --git a/src/assets/images/background-3.png b/src/assets/images/background-3.png
-Original file line number
+Diff line change
@@ Expand Up / @@ -38,4 +38,4 @@ @@
         "tailwindcss": "^3.3.3",
         "vite": "^4.4.5"
       }
-    }
+    }