Skip to content

Tried making it responsive #161

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

Merged
RidhamRj merged 3 commits into from
Jan 8, 2025
Merged

Tried making it responsive #161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
932a35f
made some ui adjustments on homepage
RidhamRj Dec 24, 2024
e91146a
tried smthing with responsiveness
RidhamRj Jan 7, 2025
80715d1
fixed merge conflicts
RidhamRj Jan 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions Frontend/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@ import NavConsole from "./components/ui/nav/NavConsole";
const App = () => {
return (
<div className="overflow-hidden no-scrollbar">
<Body/>
{/* <Body/> */}
{/* <DashBoard/> */}
{/* <Homepage/> */}
<Homepage/>
{/* <AccountCenter /> */}
{/* <NavConsole/> */}

Expand Down
6 changes: 4 additions & 2 deletions Frontend/src/components/homepage/GameCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
export const GameCard = (props) => {
return <div className="bg-black w-[260px] border-[#d8d7d795] border-[0.5px] border-solid h-[300px] rounded-3xl ">
import { Bgmi } from "../ui/Cards/Bgmi"

export const GameCard = (props) => {
return <div className=" w-[20%] h-[80%] ">
{props.card}
</div>
}
29 changes: 17 additions & 12 deletions Frontend/src/components/homepage/Hero.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<div className="no-scrollbar">
<div className="no-scrollbar h-[90%] w-[90%] ">
{/* greet */}
<section>
<div className="">
Expand All @@ -16,13 +21,13 @@ export default function Hero(props) {
</div>
</section>
{/* board */}
<section className="bg-[#151313e2] flex justify-between gap-4 px-1 pb-1 rounded-xl text-white font-bebas w-max ">
<div className="flex flex-col items-center justify-start">
<section className="bg-[#151313e2] flex justify-between gap-4 px-1 pb-1 rounded-xl text-white font-bebas w-[70%] h-[38%] ">
<div className="flex flex-col h-[100%] w-[30%] items-center justify-start">
<h1 className="uppercase font-bebas font-semibold tracking-wider text-xl py-2 text-white">
Top Rated Series
</h1>
<div className=" flex flex-col items-center cursor-pointer">
<div className="w-[295px] h-[130px] overflow-hidden rounded-lg hover:h-[160px] ease-in-out transition-all z-0">
<div className="w-[100%] h-[40%] overflow-hidden rounded-lg hover:h-[55%] ease-in-out transition-all z-0">
<img
className="-translate-y-12"
src="../../../public/svgviewer-png-output.png"
Expand All @@ -37,13 +42,13 @@ export default function Hero(props) {
</h3>
</div>
</div>
<div className="flex flex-col items-center ">
<div className="flex flex-col h-[100%] w-[70%] items-center ">
<div>
<h1 className="uppercase py-2 font-bebas font-semibold tracking-wider text-xl text-white">
choose your best match of series, among all games.
</h1>
</div>
<div className="h-[190px] no-scrollbar overflow-y-scroll">
<div className="h-[80%] w-[100%] no-scrollbar overflow-y-scroll">
<NoticeCard initialColor={"#00AF60"} viaColor={"#B1E9D5"} finalColor={"#00FFA3"} name={"night hunter - r7"} date="06 oct" time="7:00 PM" pool="1650INR" fee="29inr" />
<NoticeCard initialColor={"#00AF60"} viaColor={"#B1E9D5"} finalColor={"#00FFA3"} name={"smth pls work"} date="06 oct" time="8:00 PM" pool="3000INR" fee="40inr"/>
<NoticeCard initialColor={"#00AF60"} viaColor={"#B1E9D5"} finalColor={"#00FFA3"} name={"night hunter - r7"} date="07 oct" time="9:00 PM" pool="1650INR" fee="29inr"/>
Expand All @@ -53,12 +58,12 @@ export default function Hero(props) {
</section>
{/* card */}
<section className="mt-4 w-[90vw] no-scrollbar overflow-x-scroll ">
<div className="flex justify-between w-[98vw] overflow-hidden">
<GameCard/>
<GameCard/>
<GameCard/>
<GameCard/>
<GameCard/>
<div className="flex h-[49vh] justify-between w-[98vw] overflow-hidden">
<GameCard card={<Bgmi/>}/>
<GameCard card={<Codm/>}/>
<GameCard card={<Valo/>} />
<GameCard card={<Freefire/>} />
<GameCard card={<Bgmi/>} />
</div>

</section>
Expand Down
6 changes: 3 additions & 3 deletions Frontend/src/components/homepage/Homepage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,11 @@ const Homepage = () => {
<div className="z-0 ">
<HomeChar />
</div>
<div className="relative flex mt-2 justify-start no-scrollbar">
<div className="relative h-[75vh] w-[8vw]">
<div className="relative flex mt-2 h-[90%] w-[100%] justify-start no-scrollbar">
<div className="relative h-[75%] w-[8%]">
<Sidebar />
</div>
<div className="mt-2 no-scrollbar ">
<div className="mt-2 h-[90%] w-[90%] no-scrollbar ">
<Hero name={'Ghostrider69'} />
</div>
</div>
Expand Down
14 changes: 7 additions & 7 deletions Frontend/src/components/homepage/NoticeCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import { GradientText } from "../ui/GradientElements/GradientText";

export const NoticeCard = (props) => {
return (
<div className="bg-black rounded-2xl mb-2 w-[580px] h-[75px] flex justify-evenly items-center font-bebas px-3 gap-1 cursor-pointer ">
<div className=" w-[101px] h-fit flex flex-col ">
<div className="bg-black rounded-2xl mb-2 w-[100%] h-[40%] flex justify-evenly items-center px-2 font-bebas gap-1 cursor-pointer ">
<div className=" w-[17%] h-fit flex flex-col ">
<GradientText
text={"name"}
initialColor={props.initialColor}
Expand All @@ -12,12 +12,12 @@ export const NoticeCard = (props) => {
size={"sm"}
/>
<h1
className={`font-semibold -mt-1 leading-6 w-[90px] tracking-wide text-[1.4rem]`}
className={`font-semibold -mt-1 leading-6 w-[100%] tracking-wide text-[1.4rem]`}
>
{props.name}
</h1>
</div>
<div className=" w-[90px] flex flex-col justify-center items-center ">
<div className=" w-[18%] flex flex-col justify-center items-center ">
<GradientText
text={"Match Date"}
initialColor={props.initialColor}
Expand All @@ -27,7 +27,7 @@ export const NoticeCard = (props) => {
/>
<Text width="100px" text={props.date} />
</div>
<div className=" w-[90px] flex flex-col justify-center items-center ">
<div className=" w-[18%] flex flex-col justify-center items-center ">
<GradientText
text={"Start Time"}
initialColor={props.initialColor}
Expand All @@ -37,7 +37,7 @@ export const NoticeCard = (props) => {
/>
<Text width="100px" text={props.time} />
</div>
<div className=" w-[90px] flex flex-col justify-center items-center ">
<div className=" w-[18%] flex flex-col justify-center items-center ">
<GradientText
text={"Prize pool"}
initialColor={"#00AF60"}
Expand All @@ -48,7 +48,7 @@ export const NoticeCard = (props) => {
<Text width="100px" text={props.pool} />
</div>
<div
className={` w-[90px] flex flex-col justify-center items-center bg-gradient-to-r from-[${props.initialColor}] via-[${props.viaColor}] to-[${props.finalColor}] rounded-xl h-[60px] `}
className={` w-[18%] flex flex-col justify-center items-center bg-gradient-to-r from-[${props.initialColor}] via-[${props.viaColor}] to-[${props.finalColor}] rounded-xl h-[60px] `}
>
<h1
class={`text-black font-bebas uppercase font-semibold text-sm tracking-wide`}
Expand Down
64 changes: 64 additions & 0 deletions Frontend/src/components/ui/Cards/Ashpalt.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
export const Ashpalt = () => {
return (
<svg
width=""
height=""
viewBox="0 0 39 380"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g filter="url(#filter0_b_566_1636)">
<g clip-path="url(#clip0_566_1636)">
<rect
width="320"
height="380"
rx="30"
fill="black"
fill-opacity="0.75"
/>
<path
d="M-30.96 190.097C-30.96 184.977 -29.52 181.073 -26.64 178.385C-23.696 175.697 -19.504 174.353 -14.064 174.353H-12.816V184.337H-14.736C-19.152 184.337 -21.36 186.161 -21.36 189.809C-21.36 191.793 -20.752 193.265 -19.536 194.225C-18.32 195.185 -16.176 195.665 -13.104 195.665H-0.24V195.473C-4.144 193.617 -6.096 190.417 -6.096 185.873C-6.096 182.033 -4.784 179.121 -2.16 177.137C0.464003 175.153 4.272 174.161 9.264 174.161H21.264C26.64 174.161 30.8 175.537 33.744 178.289C36.688 181.041 38.16 185.009 38.16 190.193C38.16 195.377 36.688 199.345 33.744 202.097C30.8 204.849 26.64 206.225 21.264 206.225H-13.488C-25.136 206.225 -30.96 200.849 -30.96 190.097ZM3.504 190.193C3.504 193.841 5.712 195.665 10.128 195.665H22.032C26.384 195.665 28.56 193.841 28.56 190.193C28.56 186.545 26.384 184.721 22.032 184.721H10.128C5.712 184.721 3.504 186.545 3.504 190.193Z"
fill="white"
/>
</g>
<rect
x="0.5"
y="0.5"
width="319"
height="379"
rx="29.5"
stroke="white"
stroke-opacity="0.75"
/>
</g>
<defs>
<filter
id="filter0_b_566_1636"
x="-33"
y="-33"
width="386"
height="446"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feGaussianBlur in="BackgroundImageFix" stdDeviation="16.5" />
<feComposite
in2="SourceAlpha"
operator="in"
result="effect1_backgroundBlur_566_1636"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_backgroundBlur_566_1636"
result="shape"
/>
</filter>
<clipPath id="clip0_566_1636">
<rect width="320" height="380" rx="30" fill="white" />
</clipPath>
</defs>
</svg>
);
};
Loading