Resolved Conflicts

package.json

@@ -7,13 +7,17 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "antd": "^5.9.4",
+    "framer-motion": "^10.16.16",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.12.0",
     "react-router-dom": "^6.21.0",
     "react-scripts": "^5.0.1",
+    "react-slick": "^0.29.0",
+    "slick-carousel": "^1.8.1",
     "styled-components": "^6.1.1",
     "sweetalert2": "^11.10.1",
+    "tailwind": "^4.0.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -39,5 +43,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.0"
   }
 }

src/App.js

@@ -3,8 +3,12 @@ import Home from './Components/Home';
 import About from './Components/About';
 import Suggestion from './Components/Suggestion';
 import Navbar from './Components/Navbar';
+
+import "slick-carousel/slick/slick.css"; 
+import "slick-carousel/slick/slick-theme.css";
 import SuggestModal from "./Components/SuggestModal";
 
+
 import {
   BrowserRouter as Router,
 

src/Components/CardBanner.css

@@ -0,0 +1,69 @@
+
+.card-item {
+    width: 90% ; 
+    height: 350px; 
+    margin-right: 20px;
+    margin-top: 20px;
+    margin-bottom: 20px; 
+    position: relative;
+    border-radius: 20px; 
+    overflow: hidden;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    transition: transform 0.3s;
+
+  }
+  .card-item:hover {
+    transform: scale(1.1); 
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+  }
+  .title,
+  .description {
+    font-family: sans-serif; 
+  }
+  .card-image {
+    width: 100%;
+    height: 100%;
+    backdrop-filter: blur(10px);
+    object-fit: cover;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+  }
+
+  .title,
+  .description {
+    width: 100%;
+    text-align: center;
+    color: black;
+    font-size: 1.2rem;
+    opacity: 0.7;
+  }
+
+  .title {
+    top: 7%; 
+    text-align: left;
+    left: 10px;
+    font-size: 1rem;
+    font-weight: 200;
+  }
+
+  .description {
+    top: 22%; 
+    text-align: left;
+    left: 10px;
+    font-size: 1.5rem;
+    font-weight: 500; 
+
+  }
+  .title,
+  .description {
+    display: flex;
+    position: absolute; /* equivalent to absolute in Tailwind */
+    z-index: 10;
+    flex-direction: column;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    padding: 10px;
+    gap: 0.5rem; /* equivalent to space-y-2 in Tailwind */
+    backdrop-filter: blur(10px); /* equivalent to backdrop-blur-sm in Tailwind */
+    background-color: rgba(255, 255, 255, 0.7); /* equivalent to backdrop-opacity-70 in Tailwind */
+    border-radius: 1rem; /* equivalent to rounded-2xl in Tailwind */
+  }

src/Components/CardBanner.js

@@ -0,0 +1,56 @@
+import React, { Component } from "react";
+import Slider from "react-slick";
+import './CardBanner.css';
+
+class CardBanner extends Component {
+  render() {
+    const { data } = this.props;
+    const settings = {
+      className: "center",
+      infinite: true,
+      centerPadding: "60px",
+      slidesToShow: 3,
+      swipeToSlide: true,
+      afterChange: function(index) {
+        //eat five star do nothing 
+      },
+      responsive: [
+        {
+          breakpoint: 1190,
+          settings: {
+            slidesToShow: 2,
+            infinite: true,
+            dots: true
+          }
+        },
+        {
+          breakpoint: 600,
+          settings: {
+            slidesToShow: 1,
+          }
+        }
+      ]
+  };
+    return (
+      <div style={{marginTop:25}}>
+        <Slider {...settings}>
+          {data.map((item, index) => (
+            <div key={index} style={{marginTop:20}}>
+              <div className="card-item" style={{marginLeft:10}}>
+              <img
+                src={item.image}
+                alt={`Item ${index + 1}`}
+                className="card-image"
+                />             
+                <div className="title">{item.title}</div>
+                <div className="description">{item.description}</div>
+              </div>
+            </div>
+          ))}
+        </Slider>
+      </div>
+    );
+  }
+}
+
+export default CardBanner;

src/Components/Home.jsx

@@ -1,16 +1,62 @@
 import React from "react";
 import { Carousel } from "antd";
 import MyTabs from "./MyTabs";
-
+import { motion } from "framer-motion";
 import '../styles/styles.css';
-
+import CardBanner from "./CardBanner";
 import hollywood from '../images/hollywood.png';
 import bollywood from '../images/bollywood.webp';
 import tollywood from '../images/tollywood.webp';
+import img1 from '../images/b1.jpg';
+import img2 from '../images/b2.jpg';
+import img3 from '../images/b3.jpg';
+import img4 from '../images/b4.jpg';
+import img5 from '../images/b5.jpg';
+import img6 from '../images/b6.jpg';
+import img7 from '../images/b7.jpg';
+import img8 from '../images/b8.jpg';
+
+
+
 import SuggestModal from "./SuggestModal";
 
 
 const Home = ({modal,closeModal} ) => {
+ const bannerData=[
+    {
+      title:"Bollywood Blockbusters",
+      description:"Experience the magic of Indian cinema with our handpicked Bollywood hits.",
+      image:img1,
+    },{
+      title:"Hollywood Hits Extravaganza",
+      description:"Dive into the glitz and glamour of Hollywood with our blockbuster movie picks",
+      image:img2,
+    },{
+      title:"Action-packed Adventures",
+      description:"Witness adrenaline-pumping action in Tollywood's blockbuster hits.",
+      image:img3,
+    },{
+      title:"Chill & Thrill",
+      description:"Combine chilling tales and thrilling adventures for the perfect movie night.",
+      image:img4,
+    },{
+      title:"Cinematic Surprises",
+      description:"Discover the unexplored treasures of world cinema in these hidden gems.",
+      image:img5,
+    },{
+      title:"Childhood Chronicles",
+      description:"Revisit your youth with movies that made growing up a delightful adventure.",
+      image:img6,
+    },{
+      title:"Drama Unfolded",
+      description:"Explore intense and captivating dramas in Bollywood's web series",
+      image:img7,
+    },{
+      title:"Mystery Unleashed",
+      description:"Unlock the secrets of gripping mysteries in Hollywood's web series.",
+      image:img8,
+    },
+  ]
 
   const carouselContainerStyle = {
     position: 'relative',
@@ -64,11 +110,17 @@ const Home = ({modal,closeModal} ) => {
       </Carousel>
       <div style={overlayContainerStyle}></div>
       <div style={overlayTextStyle} className="carouseltext">MOVIES COLLECTION<div className="titletext">Watch Your Favourite movie Shows and Webseries here!!!</div> </div>
-
-
     </div>
-
-        <br />
+        <motion.div
+            initial={{ opacity: 0, scale: 0.5 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.3 }}
+          >
+      <div className="text-center">
+          <h1 className="text-black text-4xl font-bold mb-12 mt-10 font-mono">Find your Entertainment...</h1>
+      </div>
+      <CardBanner data={bannerData} />
+    </motion.div>
       <MyTabs/>
 
       </>