Skip to content

Commit 24d374b

Browse files
ken1000minus7ken1000minus7
authored
Merge pull request #66 from VaibhavGagneja/HomePage
Home page
2 parents 071908d + c027a81 commit 24d374b

File tree

12 files changed

+1550
-17
lines changed

12 files changed

+1550
-17
lines changed

‎package-lock.json‎

Lines changed: 1133 additions & 12 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,10 @@
77
"@testing-library/react": "^13.4.0",
88
"@testing-library/user-event": "^13.5.0",
99
"axios": "^1.5.1",
10+
"bootstrap": "^4.6.0",
1011
"react": "^18.2.0",
1112
"react-dom": "^18.2.0",
13+
"react-ionicons": "^4.2.1",
1214
"react-lottie-player": "^1.5.5",
1315
"react-router": "^6.17.0",
1416
"react-router-dom": "^6.17.0",

‎src/App.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import './App.css';
22
import {Route, Routes} from "react-router-dom";
33
import {Home} from "./pages/Home";
4-
import {Navbar} from "./components/common/Navbar";
54
import {Games} from "./pages/Games";
65
import {Activities} from "./pages/Activities";
76
import {activities, games} from "./data/content";
7+
import {Navbar} from './components/common/Navbar';
88

99
function App() {
1010
return (
1111
<div className="App">
12-
<Navbar />
12+
<Navbar/>
1313
<Routes>
1414
<Route index element={<Home />} />
1515
<Route exact path="/games" element={<Games />} />

‎src/assets/videos/anime.mp4‎

10.8 MB
Binary file not shown.

‎src/components/Home/CardItem.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React from 'react';
2+
import { Link } from 'react-router-dom';
3+
import '../../styles/pages/Home/CardItem.css'
4+
const CardItem = (props) => {
5+
6+
7+
const imageStyle = {
8+
objectFit: 'cover',
9+
width: '100%',
10+
height: '100%',
11+
};
12+
13+
return (
14+
<div className="col-md-4 col-sm-6 mb-4">
15+
<div class="card container-fluid">
16+
<div className="card-image">
17+
<img
18+
className="card-img-top"
19+
src={props.src}
20+
alt="Card"
21+
style={imageStyle}
22+
/>
23+
</div>
24+
<div class="card-body">
25+
<h5 class="card-title">{props.title}</h5>
26+
<p class="card-text">{props.text}</p>
27+
<Link to={props.path} class="btn btn-primary">
28+
Play
29+
</Link>
30+
</div>
31+
</div>
32+
</div>
33+
);
34+
};
35+
36+
export default CardItem;

‎src/components/Home/HeroSection.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react'
2+
import video from '../../assets/videos/anime.mp4'
3+
import "../../styles/components/common/HeroSection.css"
4+
import { Link } from 'react-router-dom'
5+
const HeroSection = () => {
6+
return (
7+
<div className='hero-container'>
8+
<video src={video} autoPlay muted loop />
9+
<h1>Welcome to <span className="text-primary">Pec</span> Acm</h1>
10+
<p>Lets have some Fun!!</p>
11+
<div className='hero-btns'>
12+
<Link to='/games'> {/* Link to the '/games' route */}
13+
<button type="button" className="btn btn-primary">Games</button>
14+
</Link>
15+
<Link to='/activities'> {/* Link to the '/activities' route */}
16+
<button type="button" className="btn btn-light">Activities</button>
17+
</Link> </div>
18+
</div>
19+
)
20+
}
21+
22+
export default HeroSection

‎src/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import './index.css';
44
import App from './App';
55
import reportWebVitals from './reportWebVitals';
66
import {BrowserRouter} from "react-router-dom";
7+
import "bootstrap/dist/js/bootstrap.bundle.min";
8+
import "bootstrap/dist/css/bootstrap.min.css";
79

810
const root = ReactDOM.createRoot(document.getElementById('root'));
911
root.render(

‎src/pages/Home.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
1+
import HeroSection from "../components/Home/HeroSection"
2+
import Cards from "./home/Cards"
3+
14
export const Home = () => {
25
return (
3-
<div>
4-
Home
5-
</div>
6+
<>
7+
<HeroSection/>
8+
<Cards/>
9+
</>
610
)
711
}

‎src/pages/home/Cards.js‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import React from 'react'
2+
import CardItem from '../../components/Home/CardItem'
3+
// import "../../styles/pages/Home/Cards.css"
4+
import Wordle from "../../assets/games/Wordle/wordlejpg.png"
5+
import flagGame from "../../assets/games/flag guess/flagger.png"
6+
import magicSquare from "../../assets/numberblocks.png"
7+
8+
const Cards = () => {
9+
return (
10+
11+
<div className='container'>
12+
<div className='row justify-content-center'>
13+
14+
<CardItem
15+
src={Wordle}
16+
text="Wordle Game"
17+
label="Puzzle"
18+
path='/games/Wordle'
19+
title='Wordle' />
20+
<CardItem
21+
src={"https://img.freepik.com/free-vector/detailed-click-collect-sign_52683-53160.jpg?size=626&ext=jpg"}
22+
text="Jitter Click Game"
23+
label="Puzzle"
24+
path='/games/jitter-game'
25+
title='Jitter' />
26+
<CardItem
27+
src={magicSquare}
28+
text="The Magic Squares Game"
29+
label="Puzzle"
30+
path='/games/magicsquares'
31+
title='MagicSquare' />
32+
<CardItem
33+
src={"https://cdn-icons-png.flaticon.com/512/2076/2076261.png"}
34+
text="TicTacToe with a twist"
35+
label="Puzzle"
36+
path='/games/tic-tac-toe'
37+
title='tic-tac-toe' />
38+
<CardItem
39+
src={flagGame}
40+
text="Learn Geography Fun Way"
41+
label="Guess The Flag"
42+
path='/games/GuessTheFlag'
43+
title='Guess The Flag' />
44+
<CardItem
45+
src={"https://cdn-icons-png.flaticon.com/512/2541/2541991.png"}
46+
text="Get random quotes"
47+
label="Random Quotes"
48+
path='/activities/random-quotes'
49+
title='Random Quotes' />
50+
<CardItem
51+
src={"https://aws.astrotalk.com/assets/images/wheel_of_fortune.webp"}
52+
text="Know your fortune"
53+
label="Fortune Cards"
54+
path='/activities/get-your-fortune'
55+
title='Fortune Cards' />
56+
<CardItem
57+
src={"https://img.freepik.com/free-photo/marketing-research-concept-with-magnifying-glass-wooden-cubes-red-table-flat-lay_176474-9480.jpg?w=826&t=st=1698234200~exp=1698234800~hmac=06d4ff5d91bc832f3c7a656d2b3a1a792a66a1eab8161ae9086e29a67599154f"}
58+
text="Get any Definition"
59+
label="Search Words"
60+
path='/activities/search-any-word'
61+
title='Search Words' />
62+
63+
</div>
64+
</div>
65+
)
66+
}
67+
68+
export default Cards

‎src/styles/components/common/HeroSection.css‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
video {
2+
object-fit: cover;
3+
width: 100%;
4+
height: 100%;
5+
position: fixed;
6+
z-index: -1;
7+
}
8+
9+
.hero-container {
10+
/* background: url('../../../assets/numberblocks.png') center center/cover no-repeat; */
11+
height: 100vh;
12+
width: 100%;
13+
display: flex;
14+
flex-direction: column;
15+
justify-content: center;
16+
align-items: center;
17+
box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.2);
18+
object-fit: contain;
19+
}
20+
21+
.hero-container > h1 {
22+
color: #fff;
23+
font-size: 5em;
24+
margin-top: -50px;
25+
}
26+
27+
.hero-container > p {
28+
margin-top: 8px;
29+
color: #fff;
30+
font-size: 2rem;
31+
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
32+
}
33+
34+
.hero-btns{
35+
margin-top: 2rem;
36+
}
37+
38+
.hero-btns .btn{
39+
margin: 0.5rem;
40+
}
41+
42+
@media screen and (max-width: 960px){
43+
.hero-container > h1 {
44+
font-size: 3em;
45+
margin-top: -100px;
46+
}
47+
}
48+
@media screen and (max-width: 768px){
49+
.hero-container > h1 {
50+
font-size: 2.2rem;
51+
margin-top: 10px;
52+
}
53+
54+
.hero-container > p{
55+
font-size: 1.7rem;
56+
}
57+
.btn-mobile{
58+
display: block;
59+
text-decoration: none;
60+
}
61+
.btn{
62+
width: 100%;
63+
}
64+
}
65+
@media screen and (max-width: 376px){
66+
.hero-container > h1 {
67+
font-size: 2rem;
68+
margin-top: 10px;
69+
}
70+
71+
.hero-container > p{
72+
font-size: 1.7rem;
73+
}
74+
.btn-mobile{
75+
display: block;
76+
}
77+
.btn{
78+
width: 100%;
79+
}
80+
}
81+
82+
@media screen and (max-width: 767px) and (min-width: 425px) {
83+
.hero-container > h1 {
84+
font-size: 3em;
85+
margin-top: -100px;
86+
}
87+
88+
.hero-container > p {
89+
font-size: 2rem;
90+
}
91+
92+
.btn-mobile {
93+
display: block;
94+
text-decoration: none;
95+
}
96+
97+
.btn {
98+
width: 100%;
99+
}
100+
}

0 commit comments

Comments
 (0)