Skip to content

Commit 963602d

Browse files
EasyCodingTutorialEasyCodingTutorial
committed
first commit
1 parent be1a429 commit 963602d

23 files changed

Lines changed: 1099 additions & 418 deletions

‎Static/ShootingTrainingData.ts‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
export const TrainingData = [
2+
{
3+
id: 1,
4+
TrainingName: "Foundations of Shooting",
5+
TrainingDesc: "Learn the essentials, from proper stance and grip to basic safety protocols. This course is perfect for those new to firearms or those looking to build a strong foundation.",
6+
TrainingHighLight: [
7+
{ id: 1, text: "Basic firearm safety" },
8+
{ id: 2, text: "Handling and maintenance" },
9+
{ id: 3, text: "Stance, grip, and sight alignment" }
10+
]
11+
},
12+
{
13+
id: 2,
14+
TrainingName: "Sharpen Your Aim",
15+
TrainingDesc: "Hone your skills with advanced techniques to improve your accuracy and consistency. Our instructors will guide you on how to hit the target every time with confidence.",
16+
TrainingHighLight: [
17+
{ id: 1, text: "Breathing and trigger control" },
18+
{ id: 2, text: "Accuracy drills" },
19+
{ id: 3, text: "Recoil management techniques" }
20+
]
21+
},
22+
{
23+
id: 3,
24+
TrainingName: "React with Confidence",
25+
TrainingDesc: "Learn defensive shooting tactics for real-life situations. This course is designed to teach you how to stay calm under pressure and make quick, accurate shots when it matters most.",
26+
TrainingHighLight: [
27+
{ id: 1, text: "Tactical movement and positioning" },
28+
{ id: 2, text: "Fast target acquisition" },
29+
{ id: 3, text: "Defensive mindset and strategy" }
30+
]
31+
},
32+
{
33+
id: 4,
34+
TrainingName: "Master the Art of Shooting",
35+
TrainingDesc: "Take your skills to the next level with our advanced course. We focus on dynamic shooting, rapid-fire techniques, and mastering multiple targets.",
36+
TrainingHighLight: [
37+
{ id: 1, text: "Rapid-fire drills" },
38+
{ id: 2, text: "Shooting from different positions" },
39+
{ id: 3, text: "Multiple target engagement" }
40+
]
41+
}
42+
];

‎app/Components/MainBg/MainBg.module.css‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
.MainBg {
2+
position: relative;
3+
}
4+
5+
.MainBg img {
6+
height: 70vh;
7+
width: 100%;
8+
object-fit: cover;
9+
}
10+
11+
.MainBg .Overlay {
12+
position: absolute;
13+
top: 0;
14+
left: 0;
15+
height: 100%;
16+
width: 100%;
17+
background: linear-gradient(-160deg, rgba(0, 0, 0, 0.3), rgba(247, 247, 247, 0.5));
18+
}
19+
20+
.Content {
21+
position: absolute;
22+
top: 50%;
23+
left: 50%;
24+
transform: translate(-50%, -50%);
25+
text-align: center;
26+
}
27+
28+
.Content h6 {
29+
font-weight: 800;
30+
font-size: 40px;
31+
text-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
32+
}
33+
34+
.Content h5 {
35+
font-weight: 800;
36+
font-size: 25px;
37+
}
38+
39+
/* For Control Buttons */
40+
.Buttons {
41+
position: absolute;
42+
top: 50%;
43+
width: 100%;
44+
display: flex;
45+
justify-content: space-between;
46+
padding: 0 20px;
47+
z-index: 33333;
48+
}
49+
50+
.PrevButton,
51+
.NextButton {
52+
background: rgba(240, 3, 3, 0.5);
53+
color: #fff;
54+
padding: 10px;
55+
font-size: 20px;
56+
cursor: pointer;
57+
border-radius: 5px;
58+
}
59+
60+
.PrevButton:hover,
61+
.NextButton:hover {
62+
background: rgba(240, 3, 3, 0.9);
63+
}
64+
65+
.PrevButton {
66+
border-radius: 5px 0 0 5px;
67+
}
68+
69+
.NextButton {
70+
border-radius: 0 5px 5px 0;
71+
}
72+
73+
@media(max-width: 1400px) {
74+
.Content h6 {
75+
font-size: 30px;
76+
}
77+
}
78+
79+
@media(max-width: 1200px) {
80+
.Content h6 {
81+
font-size: 25px;
82+
}
83+
}
84+
85+
@media(max-width: 950px) {
86+
.MainBg img {
87+
height: 60vh;
88+
}
89+
90+
.Content h6 {
91+
font-size: 20px;
92+
}
93+
}
94+
95+
@media(max-width: 650px) {
96+
97+
.Content h6 {
98+
font-size: 20px;
99+
}
100+
101+
.Content h5 {
102+
font-size: 16px;
103+
}
104+
}

‎app/Components/MainBg/MainBg.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
"use client"
2+
import React, { useEffect, useState } from 'react'
3+
4+
import styles from './MainBg.module.css'
5+
6+
export const MainBg = () => {
7+
8+
const images = [
9+
'/assets/mainBg1.png',
10+
'/assets/mainBg2.png',
11+
'/assets/mainBg3.png',
12+
];
13+
14+
const [currentImageIndex, setCurrentImageIndex] = useState(0)
15+
16+
17+
// Function To Go To The Next Img
18+
const nextImg = () => {
19+
setCurrentImageIndex((prevIndex) => (prevIndex + 1) % images.length)
20+
}
21+
22+
// Function To Go To The Prev Img
23+
const prevImg = () => {
24+
setCurrentImageIndex((prevIndex) => (prevIndex - 1 + images.length) % images.length)
25+
}
26+
27+
// Automatically Change The Img in Every 10 sec
28+
useEffect(() => {
29+
30+
const intervalId = setInterval(() => {
31+
nextImg()
32+
}, 10000); //10000ms = 10sec
33+
34+
return () => clearInterval(intervalId)
35+
36+
}, [])
37+
38+
39+
40+
41+
return (
42+
<div className={styles.MainBg}>
43+
<div className={styles.ImgContainer}>
44+
<img src={images[currentImageIndex]} alt="" />
45+
{/* <img src="/assets/mainBg1.png" alt="" /> */}
46+
<div className={styles.Overlay}></div>
47+
</div>
48+
<div className={styles.Content}>
49+
<h5>Straight Shot Academy</h5>
50+
<h6>Sharpen Your Aim, Secure Your Shot!</h6>
51+
</div>
52+
53+
{/* For Control Buttons */}
54+
<div className={styles.Buttons}>
55+
<button onClick={prevImg} className={styles.PrevButton}>⬅</button>
56+
<button onClick={nextImg} className={styles.NextButton}>➡</button>
57+
</div>
58+
59+
60+
</div>
61+
)
62+
}

‎app/Components/ShootingTraining/ShootingBox.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react';
2+
import styles from './ShootingTraining.module.css';
3+
4+
interface ShootingBoxProps {
5+
h5Text: string;
6+
pText: string;
7+
liText: { id: number; text: string }[]; // Updated to accept an array of highlights
8+
}
9+
10+
export const ShootingBox = ({
11+
h5Text,
12+
pText,
13+
liText
14+
}: ShootingBoxProps) => {
15+
return (
16+
<div className={styles.Box}>
17+
<div>
18+
<h5>{h5Text}</h5>
19+
<p>{pText}</p>
20+
21+
<ul>
22+
{liText.map((item) => (
23+
<li key={item.id}>╰┈➤ {item.text}</li> // Maps each item to a separate row
24+
))}
25+
</ul>
26+
</div>
27+
</div>
28+
);
29+
};

‎app/Components/ShootingTraining/ShootingTraining.module.css‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
.ShootingTraining h6 {
2+
font-weight: 800;
3+
font-size: 80px;
4+
text-shadow: -1px 0 #ae9c9c, 0 1px #b3a4a4, 1px 0 #d0c6c6, 0 -1px #b1a6a6;
5+
}
6+
7+
8+
.Row {
9+
display: flex;
10+
flex-wrap: wrap;
11+
gap: 10px;
12+
}
13+
14+
.Box {
15+
width: calc(25% - 10px);
16+
overflow: hidden;
17+
height: 350px;
18+
display: flex;
19+
align-items: center;
20+
box-shadow: var(--boxShadow);
21+
padding: 10px;
22+
}
23+
24+
.Box:hover {
25+
box-shadow: rgba(15, 206, 223, 0.6) inset 0px 1px 4px;
26+
}
27+
28+
.Box h5 {
29+
font-weight: 800;
30+
font-size: 20px;
31+
}
32+
33+
.Box p {
34+
font-size: 12px;
35+
color: #ccc;
36+
margin-block: 10px;
37+
}
38+
39+
.Box ul li {
40+
padding: 5px;
41+
margin-block: 3px;
42+
}
43+
44+
@media(max-width:1500px) {
45+
.Box {
46+
width: calc(33.33% - 10px);
47+
}
48+
49+
}
50+
51+
@media(max-width:1050px) {
52+
.Box {
53+
width: calc(50% - 10px);
54+
}
55+
56+
}
57+
58+
@media(max-width:850px) {
59+
.Box {
60+
width: calc(100%);
61+
}
62+
63+
.ShootingTraining h6 {
64+
font-weight: 800;
65+
font-size: 40px;
66+
}
67+
68+
}

‎app/Components/ShootingTraining/ShootingTraining.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react'
2+
3+
import styles from './ShootingTraining.module.css'
4+
5+
6+
import { ShootingBox } from './ShootingBox'
7+
8+
// For Data
9+
import { TrainingData } from '@/Static/ShootingTrainingData'
10+
11+
export const ShootingTraining = () => {
12+
return (
13+
<div className={styles.ShootingTraining}>
14+
<h6>Shooting Training</h6>
15+
16+
<div className={styles.Row}>
17+
{
18+
TrainingData.map((I) => (
19+
<ShootingBox
20+
key={I.id}
21+
h5Text={I.TrainingName}
22+
pText={I.TrainingDesc}
23+
liText={I.TrainingHighLight}
24+
/>
25+
))
26+
}
27+
</div>
28+
29+
</div>
30+
)
31+
}

‎app/Components/Wrapper/Wrapper.module.css‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
.Wrapper {
2+
padding-inline: 200px;
3+
padding-block: 20px;
4+
margin-block: 20px;
5+
}
6+
7+
@media(max-width:1200px) {
8+
.Wrapper {
9+
padding-inline: 100px;
10+
padding-block: 10px;
11+
margin-block: 10px;
12+
}
13+
14+
}
15+
16+
@media(max-width:768px) {
17+
.Wrapper {
18+
padding-inline: 80px;
19+
padding-block: 5px;
20+
}
21+
22+
}
23+
24+
@media(max-width:468px) {
25+
.Wrapper {
26+
padding-inline: 30px;
27+
padding-block: 0px;
28+
}
29+
30+
}

‎app/Components/Wrapper/Wrapper.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react'
2+
3+
import styles from './Wrapper.module.css'
4+
5+
const Wrapper = (
6+
{ children }: { children: React.ReactNode }
7+
) => {
8+
return (
9+
<div className={styles.Wrapper}>
10+
{children}
11+
</div>
12+
)
13+
}
14+
15+
export default Wrapper

0 commit comments

Comments
 (0)