first

Author: EasyCodingTutorial

app/Components/OurBlogs/Box.tsx

@@ -6,24 +6,24 @@ interface BoxProps {
     ImgUrl: string,
     ImgAlt?: string,
     BlogTitle: string,
-    blogDesc: string,
+    BlogDesc: string,
 }
 
 export const Box = (
     {
         ImgUrl,
         ImgAlt,
         BlogTitle,
-        blogDesc
+        BlogDesc
     }: BoxProps
 ) => {
     return (
         <div className={styles.Box}>
             <img src={ImgUrl} alt={ImgAlt} />
-            <div className={styles.BoxContent}>
+            <div className={styles.Content}>
                 <h5>{BlogTitle}</h5>
                 <p>
-                    {blogDesc}
+                    {BlogDesc}
                 </p>
             </div>
         </div>

app/Components/OurBlogs/OurBlogs.module.css

@@ -1,52 +1,52 @@
+.Blogs {
+    margin-block: 10px;
+}
+
 .Blogs h6 {
-    font-size: 60px;
     font-weight: 800;
-    margin-block: 10px;
+    font-size: 80px;
 }
 
-.Blogs .Row {
+.Row {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
+    margin-block: 10px;
 }
 
 .Box {
     width: calc(25% - 10px);
     overflow: hidden;
-    height: 500px;
+    height: 450px;
     box-shadow: var(--boxShadow);
 }
 
 .Box img {
-    height: 300px;
+    height: 250px;
     width: 100%;
     object-fit: cover;
 }
 
-.BoxContent {
-    padding: 10px;
+.Box:hover {
+    box-shadow: rgba(15, 206, 223, 0.6) inset 0px 1px 4px;
+}
+
+.Content {
+    padding: 15px;
 }
 
-.BoxContent h5 {
+.Box h5 {
     font-weight: 800;
-    font-size: 18px;
-    width: 18ch;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    font-size: 20px;
 }
 
-.BoxContent p {
+.Box p {
     font-size: 12px;
     color: #ccc;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 6;
-    line-clamp: 6;
-    -webkit-box-orient: vertical;
+    margin-block: 10px;
 }
 
+
 @media(max-width:1500px) {
     .Box {
         width: calc(33.33% - 10px);
@@ -67,5 +67,4 @@
     }
 
 
-
 }

app/Components/OurBlogs/OurBlogs.tsx

@@ -1,12 +1,11 @@
 import React from 'react'
 
 import styles from './OurBlogs.module.css'
-
 import { Box } from './Box'
 
-// For Data
-import { BlogsData } from '@/Static/blogsData'
 
+// For Blogs Data
+import { BlogsData } from '@/Static/blogsData'
 
 export const OurBlogs = () => {
     return (
@@ -17,9 +16,10 @@ export const OurBlogs = () => {
                 {
                     BlogsData.map((I) => (
                         <Box
-                            blogDesc={I.blogDesc}
+                            BlogDesc={I.blogDesc}
                             BlogTitle={I.blogTitle}
                             ImgUrl={I.blogImgUrl}
+                            ImgAlt={I.blogTitle}
                             key={I.id}
                         />
                     ))

app/page.tsx

@@ -23,6 +23,7 @@ export default function Home() {
         {/* For Blogs */}
         <OurBlogs />
 
+
       </Wrapper>