Created the News Section #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

UditaVed wants to merge 2 commits into DevMatrix1:main from UditaVed:feature/News

package-lock.json

Large diffs are not rendered by default.

package.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -15,6 +15,7 @@ @@
         "@mantine/form": "^5.10.1",
         "@mantine/hooks": "^5.10.1",
         "better-react-carousel": "^1.1.1",
+        "daisyui": "^2.51.1",
         "framer-motion": "^9.0.4",
         "pure-react-carousel": "^1.30.1",
         "react": "^18.2.0",
@@ Expand Down @@

public/story/Screenshot 2023-02-17 194245.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

public/story/eight.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

public/story/five.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

public/story/foosball.jpeg

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

public/story/four.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

public/story/one.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

public/story/players.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

public/story/seven.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

public/story/three.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

public/story/two.png

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

src/App.jsx

-Original file line number
+Diff line change
@@ -1,6 +1,7 @@
     import { useState } from "react";
     import "./App.css";
+    import News from "./components/News/News";
     import { Maintenance } from "./pages/Maintenance/Maintenance";
     import { Navbar } from "./components/Navbar/Navbar";
     import { Gallery } from "./components/Gallery/Gallery";
@@ Expand Down @@

src/components/News/BigCard.jsx

-Original file line number
+Diff line change
@@ -0,0 +1,17 @@
+    import React from "react";
+    export default function BigCard() {
+        return(
+            <div className="p-12">
+            <div className="hero md:min-h-[52vh] md:w-[70%] mx-auto rounded-md" style={{ backgroundImage: `url("story/players.png")` }}>
+            <div className="hero-overlay bg-opacity-60 rounded-md hover:bg-opacity-40"></div>
+            <div className="hero-content text-center text-neutral-content hover:font-bold">
+              <div className="max-w-md">
+                <h1 className="mb-5 text-3xl font-bold">Jamshedpur FC Mohun Bagan for their finals</h1>
+                <div className="mb-5">After putting up another dominant performance to churn out their second away win of the season, Jamshedpur FC head coach Aidy Boothroyd is optimistic.</div>
+                <button className=" btn btn-primary bg-gradient-to-r from-blue-500 to-blue-700 hover:bg-blue-900">View More</button>
+              </div>
+            </div>
+          </div>
+          </div>
+        )
+    }

src/components/News/Cards.jsx

-Original file line number
+Diff line change
@@ -0,0 +1,32 @@
+    import React from "react"
+    export default function Card(props)
+    {
+        return (
+            <div className="card card-compact bg-base-100 shadow-xl w-[80%] sm:w-[40%] lg:w-[20%] h-[20%] hover:opacity-80  hover:skew-x-2 bg-gradient-to-r from-red-400 via-red-500 to-red-700 text-white font-semibold rounded-xl">
+            <figure><img src={props.img} className="rounded-t-md m-0" /></figure>
+            <div className="card-body">
+            <div className="text-sm">{props.para}</div>
+            <div className="card-actions justify-end">
+            </div>
+            </div>
+            </div>
+            )
+    }
+    /* <div className="card card-compact w-96 bg-base-100 shadow-xl">
+    <figure><img src="{props.img}" alt="Shoes" /></figure>
+    <div className="card-body">
+      <p>{props.para}</p>
+      <div className="card-actions justify-end">
+      </div>
+    </div>
+    </div> */
+    /*      <div className="card p-0">
+                <div className="card w-96  p-0 rounded-none border-black shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)]">
+                <figure><img src={props.img} alt="Shoes" /></figure>
+                <div className="card-body bg-white">
+                    <p className="card-title">{props.para}</p>
+                </div>
+                </div>
+             </div> */

src/components/News/Head.jsx

-Original file line number
+Diff line change
@@ -0,0 +1,16 @@
+    import React from "react";
+    export default function Head()
+    {
+        return (
+            <div className="head_top flex gap-6 flex-col font-serif">
+                <div className="bg-gradient-to-r from-red-500 via-red-600 to-red-700 w-[99vw] text-5xl text-white p-5">
+                    <div>NEWS</div>
+                </div>
+                <div className="p-5">
+                    <div className="text-4xl text-black">Real Stories</div>
+                    <div className="text-lg text-black">Most recent news of our association</div>
+                </div>
+                <div className="bg-gradient-to-r from-blue-800 via-blue-500 to-blue-50 w-[90vw] h-[4px] ml-5"></div>
+            </div>
+        )
+    }

src/components/News/News.jsx

-Original file line number
+Diff line change
@@ -0,0 +1,26 @@
+    import React from 'react'
+    import Head from "./Head";
+    import BigCard from "./BigCard";
+    import data from "./data";
+    import Card from "./Cards";
+    const News = () => {
+        const cards = data.map(i => {
+            return (
+              <Card
+                img= {i.coverImg}
+                para={i.title}
+              />
+            )
+          })
+      return (
+        <>
+        <Head/>
+          <BigCard/>
+          <section className="flex flex-wrap gap-8 mt-5 align-middle self-center justify-center text-black">
+            {cards}
+          </section>
+        </>
+      )
+    }
+    export default News

src/components/News/data.js

-Original file line number
+Diff line change
@@ -0,0 +1,42 @@
+    export default [
+        {
+            id:1,
+            title: "Jamshedpur: With the aim of finishing the Hero Indian Super League season 2022-23 with positives, the Men of Steel will.",
+            coverImg: "story/two.png",
+        },
+        {
+            id:2,
+            title: "Jamshedpur: With the aim of finishing the Hero Indian Super League season 2022-23 with positives, the Men of Steel will.",
+            coverImg: "story/two.png",
+        },
+        {
+            id:3,
+            title: "Jamshedpur: With the aim of finishing the Hero Indian Super League season 2022-23 with positives, the Men of Steel will.",
+            coverImg: "story/three.png",
+        },
+        {
+            id:4,
+            title: "Jamshedpur: With the aim of finishing the Hero Indian Super League season 2022-23 with positives, the Men of Steel will.",
+            coverImg: "story/four.png",
+        },
+        {
+            id:5,
+            title: "Jamshedpur: With the aim of finishing the Hero Indian Super League season 2022-23 with positives, the Men of Steel will.",
+            coverImg: "story/two.png",
+        },
+        {
+            id:6,
+            title: "Jamshedpur: With the aim of finishing the Hero Indian Super League season 2022-23 with positives, the Men of Steel will.",
+            coverImg: "story/seven.png",
+        },
+        {
+            id:5,
+            title: "Jamshedpur: With the aim of finishing the Hero Indian Super League season 2022-23 with positives, the Men of Steel will.",
+            coverImg: "story/one.png",
+        },
+        {
+            id:6,
+            title: "Jamshedpur: With the aim of finishing the Hero Indian Super League season 2022-23 with positives, the Men of Steel will.",
+            coverImg: "story/seven.png",
+        }
+    ]

src/index.css

-Original file line number
+Diff line change
@@ -1,5 +1,3 @@
     @tailwind base;
     @tailwind components;
-    @tailwind utilities;
+    @tailwind utilities;

tailwind.config.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -5,6 +5,7 @@ module.exports = { @@
         extend: {},
       },
       plugins: [require("@tailwindcss/forms")],
+      plugins: [require("daisyui")],
     };
@@ Expand Down @@