From 932a35f78729544712f658ec1d25562c72e70cfd Mon Sep 17 00:00:00 2001 From: RidhamRj Date: Tue, 24 Dec 2024 10:31:57 +0530 Subject: [PATCH 1/2] made some ui adjustments on homepage --- Frontend/src/App.jsx | 4 +-- Frontend/src/components/homepage/GameCard.jsx | 5 +++ Frontend/src/components/homepage/Hero.jsx | 28 ++++++++++----- Frontend/src/components/homepage/Homepage.jsx | 8 ++--- .../src/components/homepage/NoticeCard.jsx | 34 +++++++++---------- .../ui/GradientElements/GradientText.jsx | 19 ++++++++--- .../src/components/ui/Sidebar/Sidebar.jsx | 6 ++-- Frontend/src/components/ui/nav/NavConsole.jsx | 2 +- Frontend/src/components/ui/nav/UpperNav.jsx | 10 +++--- Frontend/src/components/ui/svg/HomeChar.jsx | 2 +- Frontend/src/components/ui/svg/Logo.jsx | 4 +-- Frontend/src/index.css | 3 ++ 12 files changed, 79 insertions(+), 46 deletions(-) create mode 100644 Frontend/src/components/homepage/GameCard.jsx diff --git a/Frontend/src/App.jsx b/Frontend/src/App.jsx index 109a015..7db4f0f 100644 --- a/Frontend/src/App.jsx +++ b/Frontend/src/App.jsx @@ -17,12 +17,12 @@ import AccountCenter from "./components/AccountCenter" import Homepage from "./components/homepage/Homepage"; const App = () => { return ( - <> +
{/* */} {/* */} - +
); }; diff --git a/Frontend/src/components/homepage/GameCard.jsx b/Frontend/src/components/homepage/GameCard.jsx new file mode 100644 index 0000000..68a1535 --- /dev/null +++ b/Frontend/src/components/homepage/GameCard.jsx @@ -0,0 +1,5 @@ +export const GameCard = (props) => { + return
+ +
+} \ No newline at end of file diff --git a/Frontend/src/components/homepage/Hero.jsx b/Frontend/src/components/homepage/Hero.jsx index 9079c81..d9f65e5 100644 --- a/Frontend/src/components/homepage/Hero.jsx +++ b/Frontend/src/components/homepage/Hero.jsx @@ -1,34 +1,35 @@ +import { GameCard } from "./GameCard"; import { NoticeCard } from "./NoticeCard"; export default function Hero(props) { return ( -
+
{/* greet */}
-

+

Welcome,

-

+

{props.name}

{/* board */} -
+

Top Rated Series

-
-
+
+
-

+

Night Hunter

@@ -42,7 +43,7 @@ export default function Hero(props) { choose your best match of series, among all games.

-
+
@@ -50,6 +51,17 @@ export default function Hero(props) {
+ {/* card */} +
+
+ + + + + +
+ +
); } diff --git a/Frontend/src/components/homepage/Homepage.jsx b/Frontend/src/components/homepage/Homepage.jsx index eb13702..d633d82 100644 --- a/Frontend/src/components/homepage/Homepage.jsx +++ b/Frontend/src/components/homepage/Homepage.jsx @@ -7,8 +7,8 @@ import Hero from "./Hero"; const Homepage = () => { return ( -
-
+
+
{
-
+
-
+
diff --git a/Frontend/src/components/homepage/NoticeCard.jsx b/Frontend/src/components/homepage/NoticeCard.jsx index 1256d22..dd0a033 100644 --- a/Frontend/src/components/homepage/NoticeCard.jsx +++ b/Frontend/src/components/homepage/NoticeCard.jsx @@ -2,61 +2,61 @@ import { GradientText } from "../ui/GradientElements/GradientText"; export const NoticeCard = (props) => { return ( -
-
+
+

{props.name}

-
+
-
+
-
+

Entry price

{props.fee}

@@ -66,7 +66,7 @@ export const NoticeCard = (props) => { }; function Text(props) { return ( -

+

{props.text}

); diff --git a/Frontend/src/components/ui/GradientElements/GradientText.jsx b/Frontend/src/components/ui/GradientElements/GradientText.jsx index 350f82e..1183dd6 100644 --- a/Frontend/src/components/ui/GradientElements/GradientText.jsx +++ b/Frontend/src/components/ui/GradientElements/GradientText.jsx @@ -1,5 +1,14 @@ -export const GradientText = (props) => { - return

- {props.text} -

-} \ No newline at end of file +export const GradientText = (props) => { + return ( + //

+ // {props.text} + //

+

+ {props.text} +

+ ); +}; diff --git a/Frontend/src/components/ui/Sidebar/Sidebar.jsx b/Frontend/src/components/ui/Sidebar/Sidebar.jsx index 4afe27b..920501d 100644 --- a/Frontend/src/components/ui/Sidebar/Sidebar.jsx +++ b/Frontend/src/components/ui/Sidebar/Sidebar.jsx @@ -6,11 +6,12 @@ import { YoutubeIcon } from "../svg/YoutubeIcon"; export function Sidebar() { return ( -
+
+
} />
-
+
} /> } /> } /> @@ -20,5 +21,6 @@ export function Sidebar() { } />
+
); } diff --git a/Frontend/src/components/ui/nav/NavConsole.jsx b/Frontend/src/components/ui/nav/NavConsole.jsx index fa8c575..a0ef9c8 100644 --- a/Frontend/src/components/ui/nav/NavConsole.jsx +++ b/Frontend/src/components/ui/nav/NavConsole.jsx @@ -2,7 +2,7 @@ import navConsole from "../../../assets/navConsole.svg"; import { TeamLogo } from "../svg/TeamLogo"; const NavConsole = () => { return ( -
+
diff --git a/Frontend/src/components/ui/nav/UpperNav.jsx b/Frontend/src/components/ui/nav/UpperNav.jsx index e4710d5..1122ed3 100644 --- a/Frontend/src/components/ui/nav/UpperNav.jsx +++ b/Frontend/src/components/ui/nav/UpperNav.jsx @@ -7,19 +7,21 @@ import NavConsole from "./NavConsole"; const UpperNav = () => { return ( -
-
+
+
+
-
+
-
+
} /> }/>
+
); }; export default UpperNav; diff --git a/Frontend/src/components/ui/svg/HomeChar.jsx b/Frontend/src/components/ui/svg/HomeChar.jsx index f5aca3a..d480f4d 100644 --- a/Frontend/src/components/ui/svg/HomeChar.jsx +++ b/Frontend/src/components/ui/svg/HomeChar.jsx @@ -1,6 +1,6 @@ import SVGChar from "../../../assets/HomeChar.svg" export const HomeChar=()=>{ - return
+ return
diff --git a/Frontend/src/components/ui/svg/Logo.jsx b/Frontend/src/components/ui/svg/Logo.jsx index 64bb855..2acf060 100644 --- a/Frontend/src/components/ui/svg/Logo.jsx +++ b/Frontend/src/components/ui/svg/Logo.jsx @@ -2,8 +2,8 @@ export default function Logo() { return (
Date: Tue, 7 Jan 2025 22:15:28 +0530 Subject: [PATCH 2/2] tried smthing with responsiveness --- Frontend/src/components/homepage/GameCard.jsx | 6 +- Frontend/src/components/homepage/Hero.jsx | 29 +- Frontend/src/components/homepage/Homepage.jsx | 6 +- .../src/components/homepage/NoticeCard.jsx | 14 +- Frontend/src/components/ui/Cards/Ashpalt.jsx | 64 ++ Frontend/src/components/ui/Cards/Bgmi.jsx | 580 ++++++++++++++++++ Frontend/src/components/ui/Cards/Codm.jsx | 549 +++++++++++++++++ Frontend/src/components/ui/Cards/Freefire.jsx | 569 +++++++++++++++++ Frontend/src/components/ui/Cards/Valo.jsx | 506 +++++++++++++++ .../src/components/ui/Sidebar/Sidebar.jsx | 4 +- Frontend/src/components/ui/nav/NavConsole.jsx | 4 +- Frontend/src/components/ui/nav/UpperNav.jsx | 10 +- 12 files changed, 2308 insertions(+), 33 deletions(-) create mode 100644 Frontend/src/components/ui/Cards/Ashpalt.jsx create mode 100644 Frontend/src/components/ui/Cards/Bgmi.jsx create mode 100644 Frontend/src/components/ui/Cards/Codm.jsx create mode 100644 Frontend/src/components/ui/Cards/Freefire.jsx create mode 100644 Frontend/src/components/ui/Cards/Valo.jsx diff --git a/Frontend/src/components/homepage/GameCard.jsx b/Frontend/src/components/homepage/GameCard.jsx index 68a1535..0957437 100644 --- a/Frontend/src/components/homepage/GameCard.jsx +++ b/Frontend/src/components/homepage/GameCard.jsx @@ -1,5 +1,7 @@ -export const GameCard = (props) => { - return
+import { Bgmi } from "../ui/Cards/Bgmi" +export const GameCard = (props) => { + return
+ {props.card}
} \ No newline at end of file diff --git a/Frontend/src/components/homepage/Hero.jsx b/Frontend/src/components/homepage/Hero.jsx index d9f65e5..cb89afb 100644 --- a/Frontend/src/components/homepage/Hero.jsx +++ b/Frontend/src/components/homepage/Hero.jsx @@ -1,9 +1,14 @@ +import { Ashpalt } from "../ui/Cards/Ashpalt"; +import { Bgmi } from "../ui/Cards/Bgmi"; +import { Codm } from "../ui/Cards/Codm"; +import { Freefire } from "../ui/Cards/Freefire"; +import { Valo } from "../ui/Cards/Valo"; import { GameCard } from "./GameCard"; import { NoticeCard } from "./NoticeCard"; export default function Hero(props) { return ( -
+
{/* greet */}
@@ -16,13 +21,13 @@ export default function Hero(props) {
{/* board */} -
-
+
+

Top Rated Series

-
+
-
+

choose your best match of series, among all games.

-
+
@@ -53,12 +58,12 @@ export default function Hero(props) {
{/* card */}
-
- - - - - +
+ }/> + }/> + } /> + } /> + } />
diff --git a/Frontend/src/components/homepage/Homepage.jsx b/Frontend/src/components/homepage/Homepage.jsx index d633d82..5448935 100644 --- a/Frontend/src/components/homepage/Homepage.jsx +++ b/Frontend/src/components/homepage/Homepage.jsx @@ -21,11 +21,11 @@ const Homepage = () => {
-
-
+
+
-
+
diff --git a/Frontend/src/components/homepage/NoticeCard.jsx b/Frontend/src/components/homepage/NoticeCard.jsx index dd0a033..73fe90c 100644 --- a/Frontend/src/components/homepage/NoticeCard.jsx +++ b/Frontend/src/components/homepage/NoticeCard.jsx @@ -2,8 +2,8 @@ import { GradientText } from "../ui/GradientElements/GradientText"; export const NoticeCard = (props) => { return ( -
-
+
+
{ size={"sm"} />

{props.name}

-
+
{ />
-
+
{ />
-
+
{

{ + return ( + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/Frontend/src/components/ui/Cards/Bgmi.jsx b/Frontend/src/components/ui/Cards/Bgmi.jsx new file mode 100644 index 0000000..9237051 --- /dev/null +++ b/Frontend/src/components/ui/Cards/Bgmi.jsx @@ -0,0 +1,580 @@ +export const Bgmi = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/Frontend/src/components/ui/Cards/Codm.jsx b/Frontend/src/components/ui/Cards/Codm.jsx new file mode 100644 index 0000000..d0b1f34 --- /dev/null +++ b/Frontend/src/components/ui/Cards/Codm.jsx @@ -0,0 +1,549 @@ +export const Codm = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/Frontend/src/components/ui/Cards/Freefire.jsx b/Frontend/src/components/ui/Cards/Freefire.jsx new file mode 100644 index 0000000..b1a7a9c --- /dev/null +++ b/Frontend/src/components/ui/Cards/Freefire.jsx @@ -0,0 +1,569 @@ +export const Freefire = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/Frontend/src/components/ui/Cards/Valo.jsx b/Frontend/src/components/ui/Cards/Valo.jsx new file mode 100644 index 0000000..cd696ab --- /dev/null +++ b/Frontend/src/components/ui/Cards/Valo.jsx @@ -0,0 +1,506 @@ +export const Valo = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/Frontend/src/components/ui/Sidebar/Sidebar.jsx b/Frontend/src/components/ui/Sidebar/Sidebar.jsx index 920501d..c21e7ae 100644 --- a/Frontend/src/components/ui/Sidebar/Sidebar.jsx +++ b/Frontend/src/components/ui/Sidebar/Sidebar.jsx @@ -6,8 +6,8 @@ import { YoutubeIcon } from "../svg/YoutubeIcon"; export function Sidebar() { return ( -
-
+
+
} />
diff --git a/Frontend/src/components/ui/nav/NavConsole.jsx b/Frontend/src/components/ui/nav/NavConsole.jsx index a0ef9c8..e71dc03 100644 --- a/Frontend/src/components/ui/nav/NavConsole.jsx +++ b/Frontend/src/components/ui/nav/NavConsole.jsx @@ -2,7 +2,7 @@ import navConsole from "../../../assets/navConsole.svg"; import { TeamLogo } from "../svg/TeamLogo"; const NavConsole = () => { return ( -
+
@@ -10,7 +10,7 @@ const NavConsole = () => {

Homepage

-
+
diff --git a/Frontend/src/components/ui/nav/UpperNav.jsx b/Frontend/src/components/ui/nav/UpperNav.jsx index 1122ed3..a443956 100644 --- a/Frontend/src/components/ui/nav/UpperNav.jsx +++ b/Frontend/src/components/ui/nav/UpperNav.jsx @@ -7,15 +7,15 @@ import NavConsole from "./NavConsole"; const UpperNav = () => { return ( -
-
-
+
+
+
-
+
-
+
} /> }/>