landing and footer

src/App.jsx

@@ -2,9 +2,13 @@ import { Route, Routes } from 'react-router-dom'
 import './App.css'
 import Header from './components/Header'
 import Watchlist from './pages/Watchlist'
-import Landing from './pages/Landing'
+
 import Watchhistory from './pages/Watchhistory'
 
+import Footer from './components/Footer'
+
+import Landing from './pages/Landing'
+
 function App() {
 
 
@@ -21,6 +25,7 @@ function App() {
         <Route path='/watchlist' element={<Watchlist/>}/>
         <Route path='/watchhistory' element={<Watchhistory/>} />
       </Routes>
+      <Footer/>
 
     </>
   )

src/components/Footer.jsx

@@ -0,0 +1,72 @@
+import React from 'react'
+// import { faFacebook, faInstagram, faLinkedin, faXTwitter } from "@fortawesome/free-brands-svg-icons"
+// import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+
+
+function Footer() {
+  return (
+    <>
+    {/* Footer */}
+    <footer className="bg-black text-gray-300">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+          <div className="mb-8 md:mb-0">
+            <h2 className="text-2xl font-bold text-white mb-4">AudioBird</h2>
+            <p className="text-sm">Discover the world through your ears.</p>
+          </div>
+          <div>
+            <h3 className="text-lg font-semibold text-white mb-4">Explore</h3>
+            <ul className="space-y-2">
+              <li><a href="#" className="hover:text-white transition-colors">Categories</a></li>
+
+              <li><a href="#" className="hover:text-white transition-colors">New Releases</a></li>
+              <li><a href="#" className="hover:text-white transition-colors">Best Sellers</a></li>
+            </ul>
+          </div>
+          <div>
+            <h3 className="text-lg font-semibold text-white mb-4">Company</h3>
+            <ul className="space-y-2">
+              <li><a href="#" className="hover:text-white transition-colors">About Us</a></li>
+
+              <li><a href="#" className="hover:text-white transition-colors">Contact</a></li>
+              <li><a href="#" className="hover:text-white transition-colors">Privacy Policy</a></li>
+            </ul>
+          </div>
+          <div>
+            <h3 className="text-lg font-semibold text-white mb-4">Newsletter</h3>
+            <p className="text-sm mb-4">Stay updated with our latest releases and offers.</p>
+            <form class=" p-6 rounded-lg shadow-lg">
+      <div class="flex flex-col space-y-4">
+        <input
+          type="email"
+          placeholder="Enter your email"
+          class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+        <button
+          type="submit"
+          class="w-full px-6 py-2 bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-600 transition duration-300"
+        >
+          Subscribe
+        </button>
+      </div>
+    </form>
+          </div>
+        </div>
+        <div className="mt-8 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
+          <p className="text-sm">&copy; 2024 AudioBird. All rights reserved.</p>
+          <div className="flex space-x-4 mt-4 md:mt-0">
+
+      {/* <FontAwesomeIcon icon={faXTwitter} />
+      <FontAwesomeIcon icon={faLinkedin} />
+      <FontAwesomeIcon icon={faFacebook} />
+      <FontAwesomeIcon icon={faInstagram} /> */}
+
+          </div>
+        </div>
+      </div>
+    </footer>
+    </>
+  )
+}
+
+export default Footer

src/pages/Landing.jsx

@@ -1,9 +1,143 @@
-import React from 'react'
+import React, { useState } from 'react'
+import { Link } from 'react-router-dom'
+
+
+export default function Landing() {
+  const [isMenuClicked, setIsMenuClicked] = useState(false);
+
+
 
-const Landing = () => {
   return (
-    <div>Landing</div>
+    <div className="min-h-screen bg-gray-100">
+      <main>
+        {/* Hero section */}
+        <div className="relative bg-white overflow-hidden">
+          <div className="max-w-7xl mx-auto">
+            <div className="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
+              <main className="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
+                <div className="sm:text-center lg:text-left">
+                  <h1 className="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
+                    <span className="block xl:inline">Discover new worlds</span>{' '}
+                    <span className="block text-blue-600 xl:inline">through audiobooks</span>
+                  </h1>
+                  <p className="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
+                    Immerse yourself in captivating stories narrated by world-class voice actors. Start your audio journey today.
+                  </p>
+                  <p className='mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0'>Dive into a new world—no pages required! 📖🎧 #Audiobird</p>
+                  <div className="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
+                    <div className="rounded-md shadow">
+
+
+                      <Link to={"/watchlist"}>
+          <a
+            href=""
+            className={`${
+              isMenuClicked ? "mb-3" : ""
+            } w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10`}
+          >
+            Get started
+          </a>
+        </Link>{" "}
+
+
+                    </div>
+                    <div className="mt-3 sm:mt-0 sm:ml-3">
+
+                    </div>
+                  </div>
+                </div>
+              </main>
+            </div>
+          </div>
+          <div class="flex items-center justify-center min-h-screen bg-gray-100 flex-col">
+    <img src="https://static.voices.com/wp-content/uploads/History-of-Audiobooks.jpg" alt="description" class="w-full sm:w-64 md:w-80 lg:w-96 xl:w-[40rem] h-auto object-cover rounded-lg shadow-lg" />
+    <h3 class="mt-4 text-lg font-semibold text-gray-800">Play your audio book seamlessly</h3>
+</div>
+
+
+
+
+        </div>
+
+        {/* Featured Audiobooks */}
+        <div id='land' className="max-w-2xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8">
+        <h2 className="text-2xl font-extrabold tracking-tight text-gray-900">Featured Audiobooks</h2><br /> <br />
+
+<div className="flex flex-wrap items-start gap-6 p-6">
+
+<a href="https://youtu.be/48L6B0fays4?si=be6qHBFJ_cYvPOwF" className="block max-w-xs w-full md:w-1/4">
+    <div className="bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden">
+        <img className="w-full h-80 object-cover" src="https://m.media-amazon.com/images/I/71YsOJ728FL._AC_UF1000,1000_QL80_.jpg" alt="Product Image" />
+        <div className="p-4">
+            <h5 className="text-md font-semibold text-gray-800">GreenLights</h5>
+            <div className="mt-4 text-xl font-bold text-gray-900">$25.99</div>
+        </div>
+        <div className="flex justify-between p-4">
+            <button className="text-white bg-blue-600 hover:bg-blue-700 font-bold py-2 px-3 rounded-lg">Play Now</button>
+
+        </div>
+    </div>
+</a>
+
+
+<a href="#" className="block max-w-xs w-full md:w-1/4">
+    <div className="bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden">
+        <img className="w-full h-80 object-cover" src="https://m.media-amazon.com/images/M/MV5BYzM2NGMzNGQtZjNhMi00MTVkLTg2ZGQtN2M4OTllYzU1Y2Y0XkEyXkFqcGc@._V1_QL75_UX190_CR0,0,190,281_.jpg" alt="Product Image" />
+        <div className="p-4">
+            <h5 className="text-md font-semibold text-gray-800">It ends with us</h5>
+            <div className="mt-4 text-xl font-bold text-gray-900">$29.99</div>
+        </div>
+        <div className="flex justify-between p-4">
+            <button className="text-white bg-blue-600 hover:bg-blue-700 font-bold py-2 px-3 rounded-lg">Play Now</button>
+
+        </div>
+    </div>
+</a>
+
+
+
+
+<a href="https://youtu.be/hh_rNTdx9t0?si=doq5qb6qVpNxlm_2" className="block max-w-xs w-full md:w-1/4">
+    <div className="bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden">
+        <img className="w-full h-80 object-cover" src="https://m.media-amazon.com/images/I/81F90H7hnML._AC_UF1000,1000_QL80_.jpg" alt="Product Image" />
+        <div className="p-4">
+            <h5 className="text-md font-semibold text-gray-800">Atomic Habits</h5>
+            <div className="mt-4 text-xl font-bold text-gray-900">$29.99</div>
+        </div>
+        <div className="flex justify-between p-4">
+            <button className="text-white bg-blue-600 hover:bg-blue-700 font-bold py-2 px-3 rounded-lg">Play Now</button>
+
+        </div>
+    </div>
+</a>
+</div>
+
+
+
+        </div>
+
+
+        {/* Call to Action */}
+        <div className="bg-blue-700">
+          <div className="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
+            <h2 className="text-3xl font-extrabold text-white sm:text-4xl">
+              <span className="block">Start your audio journey today.</span>
+
+            </h2>
+            <p className="mt-4 text-lg leading-6 text-blue-200">
+              Get unlimited access to audiobooks. No commitment required.
+            </p>
+            <a
+              href="#"
+              className="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-white hover:bg-blue-50 sm:w-auto"
+            >
+              Start now
+            </a>
+          </div>
+        </div>
+      </main>
+
+
+    </div>
   )
 }
-
-export default Landing