Skip to content

Commit 736b0d3

Browse files
EasyCodingTutorialEasyCodingTutorial
committed
first
1 parent 963602d commit 736b0d3

16 files changed

Lines changed: 423 additions & 9 deletions

File tree

‎Static/blogsData.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
export const BlogsData = [
2+
{
3+
id: 1,
4+
blogTitle: "The Basics of Firearm Safety",
5+
blogImgUrl: "/assets/blog1.jpg",
6+
blogDesc: "Understanding firearm safety is crucial for all shooters. This blog covers essential safety rules, how to handle firearms responsibly, and tips for creating a safe shooting environment."
7+
},
8+
{
9+
id: 2,
10+
blogTitle: "Improving Your Accuracy: Tips and Techniques",
11+
blogImgUrl: "/assets/blog2.jpg",
12+
blogDesc: "Discover effective methods to enhance your shooting accuracy. We discuss stance, grip, breathing techniques, and practice drills that can help you hit your target consistently."
13+
},
14+
{
15+
id: 3,
16+
blogTitle: "Choosing the Right Firearm for Beginners",
17+
blogImgUrl: "/assets/blog3.jpg",
18+
blogDesc: "With so many options available, selecting the right firearm can be overwhelming. This blog provides guidance on what to consider when choosing your first gun."
19+
},
20+
{
21+
id: 4,
22+
blogTitle: "Defensive Shooting: What You Need to Know",
23+
blogImgUrl: "/assets/blog4.jpg",
24+
blogDesc: "Learn the principles of defensive shooting, including mindset, techniques, and legal considerations. This blog aims to prepare you for real-life self-defense situations."
25+
}
26+
];

‎app/Components/OurBlogs/Box.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 './OurBlogs.module.css'
4+
5+
interface BoxProps {
6+
ImgUrl: string,
7+
ImgAlt?: string,
8+
BlogTitle: string,
9+
blogDesc: string,
10+
}
11+
12+
export const Box = (
13+
{
14+
ImgUrl,
15+
ImgAlt,
16+
BlogTitle,
17+
blogDesc
18+
}: BoxProps
19+
) => {
20+
return (
21+
<div className={styles.Box}>
22+
<img src={ImgUrl} alt={ImgAlt} />
23+
<div className={styles.BoxContent}>
24+
<h5>{BlogTitle}</h5>
25+
<p>
26+
{blogDesc}
27+
</p>
28+
</div>
29+
</div>
30+
)
31+
}

‎app/Components/OurBlogs/OurBlogs.module.css‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
.Blogs h6 {
2+
font-size: 60px;
3+
font-weight: 800;
4+
margin-block: 10px;
5+
}
6+
7+
.Blogs .Row {
8+
display: flex;
9+
flex-wrap: wrap;
10+
gap: 10px;
11+
}
12+
13+
.Box {
14+
width: calc(25% - 10px);
15+
overflow: hidden;
16+
height: 500px;
17+
box-shadow: var(--boxShadow);
18+
}
19+
20+
.Box img {
21+
height: 300px;
22+
width: 100%;
23+
object-fit: cover;
24+
}
25+
26+
.BoxContent {
27+
padding: 10px;
28+
}
29+
30+
.BoxContent h5 {
31+
font-weight: 800;
32+
font-size: 18px;
33+
width: 18ch;
34+
overflow: hidden;
35+
text-overflow: ellipsis;
36+
white-space: nowrap;
37+
}
38+
39+
.BoxContent p {
40+
font-size: 12px;
41+
color: #ccc;
42+
overflow: hidden;
43+
text-overflow: ellipsis;
44+
display: -webkit-box;
45+
-webkit-line-clamp: 6;
46+
line-clamp: 6;
47+
-webkit-box-orient: vertical;
48+
}
49+
50+
@media(max-width:1500px) {
51+
.Box {
52+
width: calc(33.33% - 10px);
53+
}
54+
55+
}
56+
57+
@media(max-width:1050px) {
58+
.Box {
59+
width: calc(50% - 10px);
60+
}
61+
62+
}
63+
64+
@media(max-width:850px) {
65+
.Box {
66+
width: calc(100%);
67+
}
68+
69+
70+
71+
}

‎app/Components/OurBlogs/OurBlogs.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 './OurBlogs.module.css'
4+
5+
import { Box } from './Box'
6+
7+
// For Data
8+
import { BlogsData } from '@/Static/blogsData'
9+
10+
11+
export const OurBlogs = () => {
12+
return (
13+
<div className={styles.Blogs}>
14+
<h6>Our Blogs</h6>
15+
16+
<div className={styles.Row}>
17+
{
18+
BlogsData.map((I) => (
19+
<Box
20+
blogDesc={I.blogDesc}
21+
BlogTitle={I.blogTitle}
22+
ImgUrl={I.blogImgUrl}
23+
key={I.id}
24+
/>
25+
))
26+
}
27+
</div>
28+
29+
</div>
30+
)
31+
}

‎app/Components/newModel/newModel.module.css‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,48 @@
11
.NewModel {
22
display: flex;
3-
justify-content: center;
3+
flex-direction: column;
4+
align-items: center;
45
margin-block: 10px;
6+
perspective: 1000px;
7+
/* Adds depth to the 3D effect */
58
}
69

710
.NewModel h6 {
811
font-weight: 800;
912
font-size: 80px;
13+
color: #c5baba;
14+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
15+
margin-bottom: 20px;
1016
}
1117

1218
.NewModel img {
1319
height: 100%;
1420
width: 100%;
21+
/* Control size on large screens */
22+
animation: rotate360 5s linear infinite;
23+
/* 360-degree rotation */
24+
transform-style: preserve-3d;
25+
/* Preserves 3D rotation */
26+
box-shadow: 8px 8px 20px rgba(188, 183, 183, 0.5);
27+
/* Shadow for depth */
1528
}
1629

17-
@media(max-width:700px) {
30+
@keyframes rotate360 {
31+
from {
32+
transform: rotateY(0deg);
33+
}
34+
35+
to {
36+
transform: rotateY(360deg);
37+
}
38+
}
39+
40+
@media(max-width: 700px) {
1841
.NewModel h6 {
1942
font-size: 30px;
2043
}
44+
45+
.NewModel img {
46+
max-width: 100%;
47+
}
2148
}

‎app/Components/newModel/newModel.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,7 @@ export const NewModel = () => {
1212
<div className={styles.NewModel}>
1313
<div>
1414
<h6>New Launch</h6>
15-
<StlViewer
16-
orbitControls
17-
shadows
18-
url={'/assets/newmodel.jpg'}
19-
/>
15+
<img src="/assets/newModel.jpg" alt="" />
2016
</div>
2117
</div>
2218
)

‎app/layout.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import "./globals.css";
44

55
// For Layout Components
66
import { Navbar } from "./layout/Navbar/Navbar";
7+
import { Footer } from "./layout/Footer/Footer";
78

89
const inter = Inter({ subsets: ["latin"] });
910

@@ -22,6 +23,7 @@ export default function RootLayout({
2223
<body className={inter.className}>
2324
<Navbar />
2425
{children}
26+
<Footer />
2527
</body>
2628
</html>
2729
);

‎app/layout/Footer/Footer.module.css‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
.Footer {
2+
background: #000;
3+
padding-inline: 200px;
4+
padding-block: 40px;
5+
}
6+
7+
.Footer .FooterRow {
8+
display: grid;
9+
grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
10+
gap: 10px;
11+
}
12+
13+
.Footer div img {
14+
height: 150px;
15+
width: 150px;
16+
object-fit: cover;
17+
border-radius: 999px;
18+
margin-top: 20px;
19+
}
20+
21+
.Footer div {
22+
color: #fff;
23+
}
24+
25+
.Footer div h6 {
26+
font-weight: 700;
27+
font-size: 25px;
28+
margin-top: 20px;
29+
}
30+
31+
.Footer .LinkText {
32+
margin-top: 10px;
33+
}
34+
35+
.Footer .LinkText a {
36+
color: #fff;
37+
}
38+
39+
.Footer .LinkText a:hover {
40+
text-decoration: underline;
41+
width: max-content;
42+
}
43+
44+
.FooterRow1 {
45+
margin-top: 20px;
46+
text-align: center;
47+
padding: 20px;
48+
border-top: 0.3px dashed #ccc;
49+
}
50+
51+
/* Responsive Design */
52+
@media (max-width: 1200px) {
53+
.Footer {
54+
padding-inline: 100px;
55+
}
56+
}
57+
58+
@media (max-width: 991px) {
59+
.Footer {
60+
padding-inline: 50px;
61+
}
62+
63+
.Footer .FooterRow {
64+
grid-template-columns: 1fr 1fr;
65+
}
66+
67+
.Footer div img {
68+
height: 100px;
69+
width: 100px;
70+
margin-top: 10px;
71+
}
72+
73+
.Footer div h6 {
74+
font-size: 20px;
75+
margin-top: 15px;
76+
}
77+
}
78+
79+
@media (max-width: 480px) {
80+
.Footer {
81+
padding-inline: 20px;
82+
padding-block: 20px;
83+
}
84+
85+
.Footer .FooterRow {
86+
grid-template-columns: 1fr;
87+
gap: 20px;
88+
}
89+
90+
.Footer div img {
91+
height: 80px;
92+
width: 80px;
93+
}
94+
95+
.Footer div h6 {
96+
font-size: 18px;
97+
margin-top: 10px;
98+
}
99+
100+
.Footer .LinkText {
101+
margin-top: 8px;
102+
}
103+
104+
.FooterRow1 {
105+
margin-top: 10px;
106+
padding: 10px;
107+
font-size: 14px;
108+
}
109+
}

0 commit comments

Comments
 (0)