Repository: NexaDew/Blog-figma
Pull request #4: Full Figma Page
Author: login: AkshayReddy60
Created: 2025-05-07T09:09:40Z | Merged: 2025-05-08T11:51:29Z



Diff:
diff --git a/src/Assets/blogblog.png b/src/Assets/blogblog.png
new file mode 100644
index 0000000..91375e8
Binary files /dev/null and b/src/Assets/blogblog.png differ
diff --git a/src/Assets/blogblog1.png b/src/Assets/blogblog1.png
new file mode 100644
index 0000000..d4b7b0e
Binary files /dev/null and b/src/Assets/blogblog1.png differ
diff --git a/src/Assets/blogblog2.png b/src/Assets/blogblog2.png
new file mode 100644
index 0000000..f3ab632
Binary files /dev/null and b/src/Assets/blogblog2.png differ
diff --git a/src/Assets/blogblog3.png b/src/Assets/blogblog3.png
new file mode 100644
index 0000000..1a7cff8
Binary files /dev/null and b/src/Assets/blogblog3.png differ
diff --git a/src/Assets/blogblog4.png b/src/Assets/blogblog4.png
new file mode 100644
index 0000000..2f373b9
Binary files /dev/null and b/src/Assets/blogblog4.png differ
diff --git a/src/Assets/blogblog5.png b/src/Assets/blogblog5.png
new file mode 100644
index 0000000..bdae80d
Binary files /dev/null and b/src/Assets/blogblog5.png differ
diff --git a/src/Assets/blogblog6.png b/src/Assets/blogblog6.png
new file mode 100644
index 0000000..821d1bd
Binary files /dev/null and b/src/Assets/blogblog6.png differ
diff --git a/src/Assets/bloghome1.png b/src/Assets/bloghome1.png
new file mode 100644
index 0000000..93e5224
Binary files /dev/null and b/src/Assets/bloghome1.png differ
diff --git a/src/Assets/bloghome2.png b/src/Assets/bloghome2.png
new file mode 100644
index 0000000..8f1862f
Binary files /dev/null and b/src/Assets/bloghome2.png differ
diff --git a/src/Assets/bloghome3.png b/src/Assets/bloghome3.png
new file mode 100644
index 0000000..ef73455
Binary files /dev/null and b/src/Assets/bloghome3.png differ
diff --git a/src/Assets/rec4.png b/src/Assets/rec4.png
new file mode 100644
index 0000000..6c4c780
Binary files /dev/null and b/src/Assets/rec4.png differ
diff --git a/src/Assets/reg5.png b/src/Assets/reg5.png
new file mode 100644
index 0000000..7bff9e9
Binary files /dev/null and b/src/Assets/reg5.png differ
diff --git a/src/components/BlogCard.js b/src/components/BlogCard.js
new file mode 100644
index 0000000..0a84c0c
--- /dev/null
+++ b/src/components/BlogCard.js
@@ -0,0 +1,17 @@
+import React from "react";
+import "./blogCard.css"; 
+
+const BlogCard = ({ image, title, description }) => {
+  return (
+    <div className="article-card">
+      <img src={image} alt="Blog" className="article-image" />
+      <div className="article-content">
+        <h3 className="article-heading">{title}</h3>
+        <p className="article-text">{description}</p>
+        <button className="article-button">Read More</button>
+      </div>
+    </div>
+  );
+};
+
+export default BlogCard;
diff --git a/src/components/CatagoryTabs.js b/src/components/CatagoryTabs.js
new file mode 100644
index 0000000..cf52281
--- /dev/null
+++ b/src/components/CatagoryTabs.js
@@ -0,0 +1,37 @@
+
+import React, { useState } from "react";
+import "./blog.css";
+
+const tabs = [
+  "Latest Blog",
+  "Urban Planning",
+  "Graphics Design",
+  "Web Design",
+  "UX/UI Design",
+  "Technology"
+];
+
+function CategoryTabs({ onTabChange }) {
+  const [activeTab, setActiveTab] = useState("Latest Blog");
+
+  const handleTabClick = (tab) => {
+    setActiveTab(tab);
+    onTabChange(tab); 
+  };
+
+  return (
+    <div className="category-tabs">
+      {tabs.map((tab) => (
+        <span
+          key={tab}
+          className={tab === activeTab ? "tab tab-active" : "tab"}
+          onClick={() => handleTabClick(tab)}
+        >
+          {tab}
+        </span>
+      ))}
+    </div>
+  );
+}
+
+export default CategoryTabs;
diff --git a/src/components/Footer.js b/src/components/Footer.js
new file mode 100644
index 0000000..208e864
--- /dev/null
+++ b/src/components/Footer.js
@@ -0,0 +1,21 @@
+// src/components/Footer.js
+import React from "react";
+import "./blog.css";
+
+function Footer({ title, description }) {
+  return (
+    <div className="last-con">
+      <h3 className="hei">{title}</h3>
+      <p className="last">
+        {description.split("\n").map((line, index) => (
+          <React.Fragment key={index}>
+            {line}
+            <br />
+          </React.Fragment>
+        ))}
+      </p>
+    </div>
+  );
+}
+
+export default Footer;
diff --git a/src/components/Header.js b/src/components/Header.js
new file mode 100644
index 0000000..97db24b
--- /dev/null
+++ b/src/components/Header.js
@@ -0,0 +1,20 @@
+// src/components/Header.js
+import React from "react";
+import { Link } from "react-router-dom";
+import "./home.css";
+
+function Header({ links }) {
+  return (
+    <header className="navbar">
+      <nav>
+        {links.map((linkObj, index) => (
+          <Link key={index} to={linkObj.path}>
+            {linkObj.name}
+          </Link>
+        ))}
+      </nav>
+    </header>
+  );
+}
+
+export default Header;
diff --git a/src/components/IconImage.js b/src/components/IconImage.js
new file mode 100644
index 0000000..5bc8b10
--- /dev/null
+++ b/src/components/IconImage.js
@@ -0,0 +1,8 @@
+// src/components/IconImage.js
+import React from 'react';
+
+function IconImage({ src, alt }) {
+  return <img src={src} alt={alt} className="icons" />;
+}
+
+export default IconImage;
diff --git a/src/components/ImageSection.js b/src/components/ImageSection.js
new file mode 100644
index 0000000..ded29b5
--- /dev/null
+++ b/src/components/ImageSection.js
@@ -0,0 +1,20 @@
+// src/components/ImageSection.js
+import React from 'react';
+import './home.css';
+
+const ImageSection = ({ imageUrl, text, textBottom = '20px' }) => {
+  return (
+    <div className="image-section-container">
+      <div
+        className="image-section-hero"
+        style={{ backgroundImage: `url(${imageUrl})` }}
+      >
+        <div className="image-section-text" style={{ bottom: textBottom }}>
+          {text}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ImageSection;
diff --git a/src/components/blog.css b/src/components/blog.css
new file mode 100644
index 0000000..e028451
--- /dev/null
+++ b/src/components/blog.css
@@ -0,0 +1,147 @@
+/* Reset and base styles */
+body {
+    margin: 0;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background-color: #111;
+    color: #ffffff;
+  }
+  
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
+  
+  /* Top Navigation Bar */
+  .header-nav {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 2rem;
+    padding: 1rem 2rem;
+    border-bottom: 1px solid #2a2a2a;
+  }
+  
+  .header-nav a {
+    color: white;
+    font-size: 1rem;
+    font-weight: 500;
+  }
+  
+  .header-nav a:hover {
+    text-decoration: underline;
+  }
+  
+  
+  
+  /* Category Tabs */
+  .category-tabs {
+    display: flex;
+    gap: 4rem;
+    padding: 4rem 2rem;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .tab {
+    padding: 10px 16px;
+    margin-right: 8px;
+    cursor: pointer;
+    color: #777;
+    border-bottom: 2px solid transparent;
+  }
+  
+  .tab-active {
+    padding: 10px 16px;
+    margin-right: 8px;
+    cursor: pointer;
+    color: #1a842a;
+    font-weight: bold;
+    border-bottom: 2px solid #26c245;
+  }
+  
+  
+  .tab:hover {
+    background-color: #333;
+  }
+  
+  /* Blog Main */
+  .blog-main {
+    padding: 2rem;
+  }
+  
+  .blog-image-wrapper {
+    position: relative;
+    border-radius: 20px;
+    overflow: hidden;
+    max-width: 100%;
+  }
+  
+  .blog-image {
+    width: 75%;
+    height: auto;
+    display: block;
+  }
+  
+  /* Overlay on the image */
+  .blog-overlay {
+    position: absolute;
+    right: 5rem;
+    bottom: 6rem;
+    
+    background-color: rgba(45, 165, 95, 0.9);
+    padding: 2rem;
+    border-radius: 20px;
+    max-width: 400px;
+    color: white;
+  }
+  
+  .overlay-category {
+    font-size: 1.1rem;
+    color: #d1f8db;
+    margin-bottom: 0.5rem;
+  }
+  
+  .overlay-title {
+    font-size: 1.3rem;
+    font-weight: bold;
+    margin-bottom: 1rem;
+    color: white;
+  }
+  
+  .overlay-desc {
+    font-size: 0.95rem;
+    line-height: 1.6;
+    color: #f1f1f1;
+    margin-bottom: 1.5rem;
+  }
+  
+  .overlay-button {
+    background-color: #f0f0f0;
+    color: #222;
+    border: none;
+    padding: 0.5rem 1.5rem;
+    border-radius: 999px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.3s;
+  }
+  
+  .overlay-button:hover {
+    background-color: #e0e0e0;
+  }
+  
+
+  
+.last-con{
+    text-align: center;
+    padding: 20px;
+}   
+
+.hei{
+    font-size: 24px;
+}
+
+.last{
+    font-size: 18px;
+  
+}
diff --git a/src/components/blog.js b/src/components/blog.js
index 0bc7aad..96e9722 100644
--- a/src/components/blog.js
+++ b/src/components/blog.js
@@ -1,8 +1,74 @@
-import React from "react";
-function Blog(){
-    return (
-        <h1>bye</h1>
-    )
-    
+import React, { useState } from "react";
+import "./blog.css";
+import blogblog from "../Assets/blogblog.png";
+import BlogCard from "../components/BlogCard";
+import blogData from "../components/blogData";
+import CategoryTabs from "./CatagoryTabs";
+import Header from "../components/Header";
+import Footer from "./Footer";
+
+const footerContent = {
+  title: "daily blog",
+  description: `Lörem ipsum patt kar i renyst robotfälla. Tregyktig sana, nuktigt i mandatpingis tes.
+Analigt anede. Arat lagen. Lörem ipsum patt kar i renyst robotfälla. Tregyktig sana,
+nuktigt i mandatpingis tes. Analigt anede.`
+};
+
+const navLinks = [
+  { name: "Blog", path: "/blog" },
+  { name: "About", path: "/about" },
+  { name: "Contact", path: "/Contact" },
+  
+];
+function Blog() {
+  const [activeTab, setActiveTab] = useState("Latest Blog");
+
+  return (
+    <div className="blog-container">
+      <Header links={navLinks} />
+
+      {/* Category Tabs */}
+      <CategoryTabs activeTab={activeTab} onTabChange={setActiveTab} />
+
+      {/* Main Blog Section */}
+      <div className="blog-main">
+        <div className="blog-image-wrapper">
+          <img src={blogblog} alt="City" className="blog-image" />
+          <div className="blog-overlay">
+            <p className="overlay-category">Urban Planning</p>
+            <h2 className="overlay-title">
+              Lörem ipsum europlande krohiskap panstik, förväntis.
+            </h2>
+            <p className="overlay-desc">
+              Lörem ipsum europlande krohiskap panstik, förväntis. Klicktivism plada.
+              Ekrofilling hedår, medan al, monoktig härgjord. Supranylingar kask. Geologi byligt dikapobelt.
+            </p>
+            <button className="overlay-button">Read More</button>
+          </div>
+        </div>
+      </div>
+
+      {/* Recent Blog Cards */}
+      <div className="article-section">
+        <h2 className="article-title">Recent Posts</h2>
+        <div className="article-grid">
+          {blogData.slice(3).map((blog, index) => (
+            <BlogCard
+              key={index}
+              image={blog.image}
+              title={blog.title}
+              description={blog.description}
+            />
+          ))}
+        </div>
+      </div>
+
+      {/* Footer */}
+      
+      <Footer title={footerContent.title} description={footerContent.description} />
+      
+    </div>
+  );
 }
-export default Blog
\ No newline at end of file
+
+export default Blog;
diff --git a/src/components/blogCard.css b/src/components/blogCard.css
new file mode 100644
index 0000000..3ac74de
--- /dev/null
+++ b/src/components/blogCard.css
@@ -0,0 +1,60 @@
+.article-card {
+    background-color: #256d3b;
+    border-radius: 16px;
+    overflow: hidden;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    transition: transform 0.3s ease;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+  
+  .article-card:hover {
+    transform: translateY(-5px);
+  }
+  
+  .article-image {
+    width: 90%;
+    height: 400px;
+    padding: 20px;
+  }
+  
+  .article-content {
+    padding: 16px;
+    text-align: left;
+  }
+  
+  .article-heading {
+    font-size: 1.1rem;
+    font-weight: bold;
+    margin-bottom: 8px;
+  }
+  
+  .article-text {
+    font-size: 0.9rem;
+    line-height: 1.4;
+    margin-bottom: 16px;
+  }
+  
+  .article-button {
+    background-color: #f2f2f2;
+    color: #000;
+    padding: 8px 16px;
+    border-radius: 20px;
+    border: none;
+    cursor: pointer;
+    font-weight: 500;
+    transition: background-color 0.2s;
+  }
+  
+  .article-button:hover {
+    background-color: #ddd;
+  }
+
+  .article-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr); /* Exactly 3 per row */
+    gap: 20px;
+    padding: 20px;
+  }
+  
\ No newline at end of file
diff --git a/src/components/blogData.js b/src/components/blogData.js
new file mode 100644
index 0000000..21e907a
--- /dev/null
+++ b/src/components/blogData.js
@@ -0,0 +1,27 @@
+import bloghome1 from "../Assets/bloghome1.png";
+import bloghome2 from "../Assets/bloghome2.png";
+import bloghome3 from "../Assets/bloghome3.png";
+import blogblog1 from "../Assets/blogblog1.png";
+import blogblog2 from "../Assets/blogblog2.png";
+import blogblog3 from "../Assets/blogblog3.png";
+import blogblog4 from "../Assets/blogblog4.png";
+import blogblog5 from "../Assets/blogblog5.png";
+import blogblog6 from "../Assets/blogblog6.png";
+
+const defaultTitle = "Lörem ipsum patt kar i renyst";
+const defaultDescription =
+  "Lörem ipsum patt kar i renyst robotfälla. Tregyktig sana, nuktigt i mandatpingis tes. Analigt anede. Arat lagen";
+
+const blogData = [
+  { image: bloghome1, title: defaultTitle, description: defaultDescription },
+  { image: bloghome2, title: defaultTitle, description: defaultDescription },
+  { image: bloghome3, title: defaultTitle, description: defaultDescription },
+  { image: blogblog1, title: defaultTitle, description: defaultDescription },
+  { image: blogblog2, title: defaultTitle, description: defaultDescription },
+  { image: blogblog3, title: defaultTitle, description: defaultDescription },
+  { image: blogblog4, title: defaultTitle, description: defaultDescription },
+  { image: blogblog5, title: defaultTitle, description: defaultDescription },
+  { image: blogblog6, title: defaultTitle, description: defaultDescription },
+];
+
+export default blogData;
diff --git a/src/components/home.css b/src/components/home.css
index b43e59d..ddb2eeb 100644
--- a/src/components/home.css
+++ b/src/components/home.css
@@ -1,158 +1,224 @@
 .home-container{
-    background: linear-gradient(to top, #071917, #071917);
-    margin: 0px;
+  background: linear-gradient(to top, #071917, #071917);
+  margin: 0px;
 }
 .hero {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    padding: 0 250px;
-    height: 100vh;
-    background-image: url('../Assets/earth.png'); 
-    background-size: 1510px 730px;
-    background-position: center;
-    background-repeat: no-repeat;
-    position: relative;
-    color: white;
-  }
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 250px;
+  height: 100vh;
+  background-image: url('../Assets/earth.png'); 
+  background-size: 1510px 730px;
+  background-position: center;
+  background-repeat: no-repeat;
+  position: relative;
+  color: white;
+}
 
-  
-  /* Overlay (optional for better contrast) */
-  .hero::before {
-    content: '';
-    position: absolute;
-    top: 0; left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.4); /* adjust darkness */
-    z-index: 0;
-  }
-  
-  /* Text over image */
-  .text-content {
-    position: relative;
-    z-index: 1;
-    max-width: 600px;
-  }
-  .name {
-    font-size: 1.2rem;
-    color: #ffffff;
-    margin-bottom: -20px;
+
+/* Overlay (optional for better contrast) */
+.hero::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.4); /* adjust darkness */
+  z-index: 0;
+}
+
+/* Text over image */
+.text-content {
+  position: relative;
+  z-index: 1;
+  max-width: 600px;
+}
+.name {
+  font-size: 1.2rem;
+  color: #ffffff;
+  margin-bottom: -20px;
+}
+h1 {
+  font-size: 3.5rem;
+  line-height: 1.2;
+  margin-bottom: 20px;
+}
+.description {
+  font-size: 1rem;
+  line-height: 1.6;
+  color: #ddd;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .hero {
+    padding: 40px 20px;
+    text-align: center;
+    justify-content: center;
   }
   h1 {
-    font-size: 3.5rem;
-    line-height: 1.2;
-    margin-bottom: 20px;
-  }
-  .description {
-    font-size: 1rem;
-    line-height: 1.6;
-    color: #ddd;
+    font-size: 2.2rem;
   }
-  
-  /* Responsive */
-  @media (max-width: 768px) {
-    .hero {
-      padding: 40px 20px;
-      text-align: center;
-      justify-content: center;
-    }
-    h1 {
-      font-size: 2.2rem;
+  .navbar {
+      top: 10px;
+      right: 20px;
     }
-    .navbar {
-        top: 10px;
-        right: 20px;
-      }
-    
-      .navbar nav {
-        flex-direction: column;
-        align-items: flex-end;
-        gap: 10px;
-      }
-  }
   
+    .navbar nav {
+      flex-direction: column;
+      align-items: flex-end;
+      gap: 10px;
+    }
+}
 
 
 
-  body, html, .home-container {
-    margin: 0;
-    padding: 0;
-    height: 100%;
-  }
-  
-  /* Navbar styles */
-  .navbar {
-    position: absolute;
-    top: 20px;
-    right: 40px;
-    z-index: 10;
-    padding-right: 100px;
-  }
-  
-  .navbar nav {
-    display: flex;
-    gap: 80px;
-  }
-  
-  .navbar a {
-    color: white;
-    text-decoration: none;
-    font-size: 1rem;
-    font-weight: 500;
-    transition: color 0.3s;
-  }
-  
-  .navbar a:hover {
-    color: #a0f0e0;
-  }
 
+body, html, .home-container {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
 
+/* Navbar styles */
+.navbar {
+  position: absolute;
+  top: 20px;
+  right: 40px;
+  z-index: 10;
+  padding-right: 100px;
+}
 
+.navbar nav {
+  display: flex;
+  gap: 80px;
+}
+
+.navbar a {
+  color: white;
+  text-decoration: none;
+  font-size: 1rem;
+  font-weight: 500;
+  transition: color 0.3s;
+}
+
+.navbar a:hover {
+  color: #a0f0e0;
+}
 
 .iconspics{
-    padding: 20px;
-    align-items: center;
-    justify-content: center;
-    display: flex;
-    gap:100px;
-   
+  padding: 20px;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  gap:100px;
+ 
 }  
 .icons{
-    height: 50px;
+  height: 50px;
 }
 
+.image-section-container {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 
+.image-section-hero {
+  width: 100%;
+  max-width: 1460px;
+  height: 720px;
+  background-size: cover;
+  background-position: center;
+  border-radius: 12px;
+  position: relative;
+  overflow: hidden;
+}
 
+.image-section-text {
+  position: absolute;
+  left: 20px;
+  color: white;
+  font-size: 1.5rem;
+  font-weight: bold;
+  font-family: sans-serif;
+}
 
-
-.urban-container {
-    width: 100%;
-    height: 100vh;
-    
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  
-  .urban-hero {
-    width: 100%;
-    max-width: 1460px;
-    height: 720px;
-    background-image: url('../Assets/third.png'); /* Replace with your actual image path */
-    background-size: cover;
-    background-position: center;
-    border-radius: 12px;
-    position: relative;
-    overflow: hidden;
-  }
+.blog-section {
+  background-color: #0f1f1e;
+  padding: 40px;
+  color: white;
+  font-family: sans-serif;
   
-  .urban-text {
-    position: absolute;
-    bottom: 20px;
-    left: 20px;
-    color: white;
-    font-size: 1.5rem;
-    font-weight: bold;
-    font-family: sans-serif;
-  }
+}
+
+.section-title {
+  font-size: 2rem;
+  margin-bottom: 24px;
+}
+
+.card-container {
+  display: flex;
+  overflow-x: auto;
+  gap: 100px;
+  scroll-snap-type: x mandatory;
+  padding-bottom: 16px;
+  justify-content: center;
+  align-items: center;
+}
+
+.blog-card {
+  background-color: #256d3b;
+  border-radius: 20px;
+  width: 280px;
+  flex-shrink: 0;
+  scroll-snap-align: start;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+  transition: transform 0.3s ease;
+  padding: 20px;
+}
+
+
+
+.card-image {
+  width: 100%;
+  height: 180px;
+  object-fit: cover;
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
+}
+
+.card-content {
+  padding: 16px;
+}
+
+.card-title {
+  font-size: 1.2rem;
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+
+.card-description {
+  font-size: 0.9rem;
+  line-height: 1.4;
+  margin-bottom: 16px;
+}
+
+.read-more {
+  background-color: #f2f2f2;
+  color: #000;
+  padding: 8px 16px;
+  border-radius: 20px;
+  border: none;
+  cursor: pointer;
+  font-weight: 500;
+  transition: background-color 0.2s;
+}
+
+.read-more:hover {
+  background-color: #ddd;
+}
+
diff --git a/src/components/home.js b/src/components/home.js
index 6b58822..3d49989 100644
--- a/src/components/home.js
+++ b/src/components/home.js
@@ -1,5 +1,4 @@
 import React from "react";
-import { Link } from "react-router-dom";
 import "./home.css";
 import image1 from "../Assets/image1.png";
 import image2 from "../Assets/image2.png";
@@ -7,55 +6,53 @@ import image3 from "../Assets/image3.png";
 import image4 from "../Assets/image4.png";
 import image5 from "../Assets/image5.png";
 import image6 from "../Assets/image6.png";
-
+import HomeSection from "../components/homeSection";
+import blogData from "../components/blogData";
+import Header from "./Header";
+import ImageSection from "./ImageSection";
+import third from "../Assets/third.png";
+import rec4 from "../Assets/rec4.png";
+import reg5 from "../Assets/reg5.png";
+import IconImage from "./IconImage";
+
+const navLinks = [
+  { name: "Work", path: "/work" },
+  { name: "About", path: "/about" },
+  { name: "Blog", path: "/blog" }
+];
+const iconImages = [image1, image2, image3, image4, image5, image6];
 
 function Home() {
   return (
     <div className="home-container">
-      
-
       <section className="hero">
-      <header className="navbar">
-        
-        <nav>
-          <Link to="/work">Work</Link>
-          <Link to="/about">About</Link>
-          <Link to="/blog">Blog</Link>
-        </nav>
-      </header>
+      <Header links={navLinks} />
         <div className="text-content">
           <p className="name">Linus Kigai</p>
           <h1>Bringing<br />Concept to Life</h1>
           <p className="description">
-            Lörem ipsum ditijybel beras fassade.<br></br> Prel munira. Transperson bere
-            då <br></br>heterovalens. Kiling intraktig. Plasm äng refunde krøbäling.
+            Lörem ipsum ditijybel beras fassade.<br />
+            Prel munira. Transperson bere då <br />
+            heterovalens. Kiling intraktig. Plasm äng refunde krøbäling.
           </p>
         </div>
       </section>
+      
       <div className="iconspics">
-        <img src={image1} alt="iconss" className="icons"/>
-        <img src={image2} alt="iconss" className="icons"/>
-        <img src={image3} alt="iconss" className="icons"/>
-        <img src={image4} alt="iconss" className="icons"/>
-        <img src={image5} alt="iconss" className="icons"/>
-        <img src={image6} alt="iconss" className="icons"/>
-
-
-      </div>
-      <div className="urban-container">
-      <div className="urban-hero">
-        <div className="urban-text">URBAN PLANNING</div>
-      </div>
-    
-
+        {iconImages.map((src, index) => (
+          <IconImage key={index} src={src} alt={`icon-${index + 1}`} />
+        ))}
       </div>
 
-           
-
-
       
+      <ImageSection imageUrl={third} text="URBAN PLANNING" />
+      <ImageSection imageUrl={rec4} text="GRAPHICS DESIGN" />
+      <ImageSection imageUrl={reg5} text="Arts" textBottom="40px" />
+
+      {/* Show only first 3 blogs */}
+      <HomeSection blogData={blogData.slice(0, 3)} />
     </div>
   );
 }
 
-export default Home;
\ No newline at end of file
+export default Home;
diff --git a/src/components/homeSection.js b/src/components/homeSection.js
new file mode 100644
index 0000000..3519c14
--- /dev/null
+++ b/src/components/homeSection.js
@@ -0,0 +1,25 @@
+
+import React from "react";
+import "./home.css"
+
+const HomeSection = ({ blogData }) => {
+  return (
+    <div className="blog-section">
+      <h2 className="section-title">Latest Blog</h2>
+      <div className="card-container">
+        {blogData.map((blog, index) => (
+          <div className="blog-card" key={index}>
+            <img src={blog.image} alt="Blog" className="card-image" />
+            <div className="card-content">
+              <h3 className="card-title">{blog.title}</h3>
+              <p className="card-description">{blog.description}</p>
+              <button className="read-more">Read More</button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default HomeSection;


Reviews:
state: CHANGES_REQUESTED
author_association: COLLABORATOR
submitted_at: 2025-05-08T06:54:43Z
state: CHANGES_REQUESTED
author_association: COLLABORATOR
submitted_at: 2025-05-08T08:51:31Z
user: login: adityaujalambkar
state: APPROVED
author_association: NONE
submitted_at: 2025-05-08T11:44:23Z

Review comments:
diff_hunk: @@ -1,8 +1,74 @@
 import React from "react";
-function Blog(){
-    return (
-        <h1>bye</h1>
-    )
-    
+import "./blog.css";
+import blogblog from "../Assets/blogblog.png";
+import BlogCard from "../components/BlogCard"; 
+import blogData from "../components/blogData";
+
+function Blog() {
+  return (
+    <div className="blog-container">
+      {/* Navigation */}
+      <nav className="header-nav">
+        <a href="/blog">Blog</a>
+        <a href="/about">About</a>
+        <a href="/contact">Contact</a>
+      </nav>
+      <div className="hiii"></div>
+
+      {/* Category Tabs */}
+      <div className="category-tabs">
+        <span className="tab-active">Latest Blog</span>
+        <span className="tab">Urban Planning</span>
path: src/components/blog.js
user: login: NexaDew
body: Only first Tab is Active, whenever I move from one tab to other they also needs to be active on click
created_at: 2025-05-08T06:44:21Z
author_association: COLLABORATOR
diff_hunk: @@ -1,8 +1,74 @@
 import React from "react";
-function Blog(){
-    return (
-        <h1>bye</h1>
-    )
-    
+import "./blog.css";
+import blogblog from "../Assets/blogblog.png";
+import BlogCard from "../components/BlogCard"; 
+import blogData from "../components/blogData";
+
+function Blog() {
+  return (
+    <div className="blog-container">
+      {/* Navigation */}
+      <nav className="header-nav">
+        <a href="/blog">Blog</a>
+        <a href="/about">About</a>
+        <a href="/contact">Contact</a>
+      </nav>
+      <div className="hiii"></div>
path: src/components/blog.js
user: login: NexaDew
body: Why this div is for and what is the meaning of hiii className should be meaningful after reading it, change class name so that It should be understood, why we are using it
created_at: 2025-05-08T06:45:34Z
author_association: COLLABORATOR
diff_hunk: @@ -1,8 +1,74 @@
 import React from "react";
-function Blog(){
-    return (
-        <h1>bye</h1>
-    )
-    
+import "./blog.css";
+import blogblog from "../Assets/blogblog.png";
+import BlogCard from "../components/BlogCard"; 
+import blogData from "../components/blogData";
+
+function Blog() {
+  return (
+    <div className="blog-container">
+      {/* Navigation */}
+      <nav className="header-nav">
+        <a href="/blog">Blog</a>
+        <a href="/about">About</a>
+        <a href="/contact">Contact</a>
+      </nav>
+      <div className="hiii"></div>
+
+      {/* Category Tabs */}
+      <div className="category-tabs">
+        <span className="tab-active">Latest Blog</span>
+        <span className="tab">Urban Planning</span>
+        <span className="tab">Graphics Design</span>
+        <span className="tab">Web Design</span>
+        <span className="tab">UX/UI Design</span>
+        <span className="tab">Technology</span>
+      </div>
+
+      {/* Main Blog Section */}
+      <div className="blog-main">
+        <div className="blog-image-wrapper">
+          <img src={blogblog} alt="City" className="blog-image" />
+          <div className="blog-overlay">
+            <p className="overlay-category">Urban Planning</p>
+            <h2 className="overlay-title">
+              Lörem ipsum europlande krohiskap panstik, förväntis.
path: src/components/blog.js
user: login: NexaDew
body: This urban planning also be the component, whenever we want scale it, it will help us, 
![Uploading Screenshot 2025-05-08 at 12.19.16 PM.png…]()

created_at: 2025-05-08T06:49:24Z
author_association: COLLABORATOR
diff_hunk: @@ -1,8 +1,74 @@
 import React from "react";
-function Blog(){
-    return (
-        <h1>bye</h1>
-    )
-    
+import "./blog.css";
+import blogblog from "../Assets/blogblog.png";
+import BlogCard from "../components/BlogCard"; 
+import blogData from "../components/blogData";
+
+function Blog() {
+  return (
+    <div className="blog-container">
+      {/* Navigation */}
+      <nav className="header-nav">
+        <a href="/blog">Blog</a>
path: src/components/blog.js
user: login: NexaDew
body: Please use this navbar as component as given instruction for another nav-bar
created_at: 2025-05-08T06:52:44Z
author_association: COLLABORATOR
diff_hunk: @@ -7,55 +7,61 @@ import image3 from "../Assets/image3.png";
 import image4 from "../Assets/image4.png";
 import image5 from "../Assets/image5.png";
 import image6 from "../Assets/image6.png";
-
+import HomeSection from "../components/homeSection";
+import blogData from "../components/blogData";
 
 function Home() {
   return (
     <div className="home-container">
-      
-
       <section className="hero">
-      <header className="navbar">
-        
-        <nav>
-          <Link to="/work">Work</Link>
-          <Link to="/about">About</Link>
-          <Link to="/blog">Blog</Link>
-        </nav>
-      </header>
+        <header className="navbar">
+          <nav>
+            <Link to="/work">Work</Link>
+            <Link to="/about">About</Link>
+            <Link to="/blog">Blog</Link>
+          </nav>
path: src/components/home.js
user: login: NexaDew
body: Actually there are 2 nav bars please create a component for nav bar also and reuse it on both pages.
created_at: 2025-05-08T06:52:54Z
author_association: COLLABORATOR
diff_hunk: @@ -7,55 +7,61 @@ import image3 from "../Assets/image3.png";
 import image4 from "../Assets/image4.png";
 import image5 from "../Assets/image5.png";
 import image6 from "../Assets/image6.png";
-
+import HomeSection from "../components/homeSection";
+import blogData from "../components/blogData";
 
 function Home() {
   return (
     <div className="home-container">
-      
-
       <section className="hero">
-      <header className="navbar">
-        
-        <nav>
-          <Link to="/work">Work</Link>
-          <Link to="/about">About</Link>
-          <Link to="/blog">Blog</Link>
-        </nav>
-      </header>
+        <header className="navbar">
+          <nav>
+            <Link to="/work">Work</Link>
+            <Link to="/about">About</Link>
+            <Link to="/blog">Blog</Link>
+          </nav>
path: src/components/home.js
user: login: NexaDew
body: Instead of creating for NavBar, create component for complete HEADER
created_at: 2025-05-08T06:53:30Z
author_association: COLLABORATOR
diff_hunk: @@ -1,8 +1,74 @@
 import React from "react";
-function Blog(){
-    return (
-        <h1>bye</h1>
-    )
-    
+import "./blog.css";
+import blogblog from "../Assets/blogblog.png";
+import BlogCard from "../components/BlogCard"; 
+import blogData from "../components/blogData";
+
+function Blog() {
+  return (
+    <div className="blog-container">
+      {/* Navigation */}
+      <nav className="header-nav">
+        <a href="/blog">Blog</a>
+        <a href="/about">About</a>
+        <a href="/contact">Contact</a>
+      </nav>
+      <div className="hiii"></div>
+
+      {/* Category Tabs */}
+      <div className="category-tabs">
+        <span className="tab-active">Latest Blog</span>
+        <span className="tab">Urban Planning</span>
+        <span className="tab">Graphics Design</span>
+        <span className="tab">Web Design</span>
+        <span className="tab">UX/UI Design</span>
+        <span className="tab">Technology</span>
+      </div>
+
+      {/* Main Blog Section */}
+      <div className="blog-main">
+        <div className="blog-image-wrapper">
+          <img src={blogblog} alt="City" className="blog-image" />
+          <div className="blog-overlay">
+            <p className="overlay-category">Urban Planning</p>
+            <h2 className="overlay-title">
+              Lörem ipsum europlande krohiskap panstik, förväntis.
+            </h2>
+            <p className="overlay-desc">
+              Lörem ipsum europlande krohiskap panstik, förväntis. Klicktivism plada.
+              Ekrofilling hedår, medan al, monoktig härgjord. Supranylingar kask. Geologi byligt dikapobelt.
+            </p>
+            <button className="overlay-button">Read More</button>
+          </div>
+        </div>
+      </div>
+
+      {/* Show only the last 6 blogs */}
+      <div className="article-section">
+        <h2 className="article-title">Recent Posts</h2>
+        <div className="article-grid">
+          {blogData.slice(3).map((blog, index) => (
+            <BlogCard
+              key={index}
+              image={blog.image}
+              title={blog.title}
+              description={blog.description}
+            />
+          ))}
+        </div>
+      </div>
+
+      {/* Footer */}
+      <div className="last-con">
path: src/components/blog.js
user: login: NexaDew
body: Footer is also going to be component so that It can be reused further for other pages if we decided to build it.
created_at: 2025-05-08T06:54:30Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,18 @@
+// src/components/Navbar.js
+import React from "react";
+import { Link } from "react-router-dom";
+import "./home.css";
+
+function Navbar() {
+  return (
+    <header className="navbar">
+      <nav>
+        <Link to="/work">Work</Link>
path: src/components/Header.js
user: login: NexaDew
body: can you pass these links as a array of links in props and map through each link so that you can pass this array as links, you have to create array of objects which contain link address and link naem
created_at: 2025-05-08T08:38:46Z
author_association: COLLABORATOR
diff_hunk: @@ -1,29 +1,20 @@
-import React from "react";
+import React, { useState } from "react";
 import "./blog.css";
 import blogblog from "../Assets/blogblog.png";
-import BlogCard from "../components/BlogCard"; 
+import BlogCard from "../components/BlogCard";
 import blogData from "../components/blogData";
-
+import CategoryTabs from "./CatagoryTabs";
+import Navbar from "./Header";
+import Footer from "./Footer";
 function Blog() {
+  const [activeTab, setActiveTab] = useState("Latest Blog");
+
   return (
     <div className="blog-container">
-      {/* Navigation */}
-      <nav className="header-nav">
-        <a href="/blog">Blog</a>
-        <a href="/about">About</a>
path: src/components/blog.js
user: login: NexaDew
body: this is Blog, about and contact so pass it as props in navbar component
created_at: 2025-05-08T08:39:40Z
author_association: COLLABORATOR
diff_hunk: @@ -9,18 +9,13 @@ import image5 from "../Assets/image5.png";
 import image6 from "../Assets/image6.png";
 import HomeSection from "../components/homeSection";
 import blogData from "../components/blogData";
+import Navbar from "./Header"; // ✅ Import Navbar
 
 function Home() {
   return (
     <div className="home-container">
       <section className="hero">
-        <header className="navbar">
-          <nav>
-            <Link to="/work">Work</Link>
-            <Link to="/about">About</Link>
path: src/components/home.js
user: login: NexaDew
body: this is also need to pass as a props in navbar
created_at: 2025-05-08T08:41:28Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,20 @@
+// src/components/Footer.js
+import React from "react";
+import "./blog.css";
+
+function Footer() {
+  return (
+    <div className="last-con">
+      <h3 className="hei">daily blog</h3>
+      <p className="last">
+        Lörem ipsum patt kar i renyst robotfälla. Tregyktig sana, nuktigt i mandatpingis tes.
+        <br />
+        Analigt anede. Arat lagen. Lörem ipsum patt kar i renyst robotfälla. Tregyktig sana,
path: src/components/Footer.js
user: login: NexaDew
body: can you pass this data in footer as a props and pass it from where you called footer
created_at: 2025-05-08T08:43:00Z
author_association: COLLABORATOR
diff_hunk: @@ -1,61 +1,62 @@
 import React from "react";
-import { Link } from "react-router-dom";
+
 import "./home.css";
 import image1 from "../Assets/image1.png";
 import image2 from "../Assets/image2.png";
 import image3 from "../Assets/image3.png";
 import image4 from "../Assets/image4.png";
 import image5 from "../Assets/image5.png";
 import image6 from "../Assets/image6.png";
-
+import HomeSection from "../components/homeSection";
+import blogData from "../components/blogData";
+import Navbar from "./Header"; // ✅ Import Navbar
 
 function Home() {
   return (
     <div className="home-container">
-      
-
       <section className="hero">
-      <header className="navbar">
-        
-        <nav>
-          <Link to="/work">Work</Link>
-          <Link to="/about">About</Link>
-          <Link to="/blog">Blog</Link>
-        </nav>
-      </header>
+        <Navbar /> 
         <div className="text-content">
           <p className="name">Linus Kigai</p>
           <h1>Bringing<br />Concept to Life</h1>
           <p className="description">
-            Lörem ipsum ditijybel beras fassade.<br></br> Prel munira. Transperson bere
-            då <br></br>heterovalens. Kiling intraktig. Plasm äng refunde krøbäling.
+            Lörem ipsum ditijybel beras fassade.<br />
+            Prel munira. Transperson bere då <br />
+            heterovalens. Kiling intraktig. Plasm äng refunde krøbäling.
           </p>
         </div>
       </section>
-      <div className="iconspics">
-        <img src={image1} alt="iconss" className="icons"/>
-        <img src={image2} alt="iconss" className="icons"/>
-        <img src={image3} alt="iconss" className="icons"/>
-        <img src={image4} alt="iconss" className="icons"/>
-        <img src={image5} alt="iconss" className="icons"/>
-        <img src={image6} alt="iconss" className="icons"/>
-
 
+      <div className="iconspics">
+        <img src={image1} alt="iconss" className="icons" />
+        <img src={image2} alt="iconss" className="icons" />
+        <img src={image3} alt="iconss" className="icons" />
+        <img src={image4} alt="iconss" className="icons" />
+        <img src={image5} alt="iconss" className="icons" />
+        <img src={image6} alt="iconss" className="icons" />
       </div>
+
       <div className="urban-container">
-      <div className="urban-hero">
-        <div className="urban-text">URBAN PLANNING</div>
+        <div className="urban-hero">
+          <div className="urban-text">URBAN PLANNING</div>
+        </div>
       </div>
-    
-
+      <div className="graphics-container">
+        <div className="graphics-hero">
+          <div className="graphics-text">GRAPHICS DESIGN</div>
+        </div>
       </div>
 
-           
-
+      <div className="arts-container">
+        <div className="arts-hero">
+          <div className="arts-text">Arts</div>
+        </div>
+      </div>
 
path: src/components/home.js
user: login: NexaDew
body: can you check css of all three containers urban-container, graphics container and arts container is same there is no differance, create a component and remove unnecessary css and use it once in the component and repeate here
created_at: 2025-05-08T08:49:26Z
author_association: COLLABORATOR
diff_hunk: @@ -1,61 +1,62 @@
 import React from "react";
-import { Link } from "react-router-dom";
+
 import "./home.css";
 import image1 from "../Assets/image1.png";
 import image2 from "../Assets/image2.png";
 import image3 from "../Assets/image3.png";
 import image4 from "../Assets/image4.png";
 import image5 from "../Assets/image5.png";
 import image6 from "../Assets/image6.png";
-
+import HomeSection from "../components/homeSection";
+import blogData from "../components/blogData";
+import Navbar from "./Header"; // ✅ Import Navbar
 
 function Home() {
   return (
     <div className="home-container">
-      
-
       <section className="hero">
-      <header className="navbar">
-        
-        <nav>
-          <Link to="/work">Work</Link>
-          <Link to="/about">About</Link>
-          <Link to="/blog">Blog</Link>
-        </nav>
-      </header>
+        <Navbar /> 
         <div className="text-content">
           <p className="name">Linus Kigai</p>
           <h1>Bringing<br />Concept to Life</h1>
           <p className="description">
-            Lörem ipsum ditijybel beras fassade.<br></br> Prel munira. Transperson bere
-            då <br></br>heterovalens. Kiling intraktig. Plasm äng refunde krøbäling.
+            Lörem ipsum ditijybel beras fassade.<br />
+            Prel munira. Transperson bere då <br />
+            heterovalens. Kiling intraktig. Plasm äng refunde krøbäling.
           </p>
         </div>
       </section>
-      <div className="iconspics">
-        <img src={image1} alt="iconss" className="icons"/>
-        <img src={image2} alt="iconss" className="icons"/>
-        <img src={image3} alt="iconss" className="icons"/>
-        <img src={image4} alt="iconss" className="icons"/>
-        <img src={image5} alt="iconss" className="icons"/>
-        <img src={image6} alt="iconss" className="icons"/>
-
 
+      <div className="iconspics">
+        <img src={image1} alt="iconss" className="icons" />
+        <img src={image2} alt="iconss" className="icons" />
path: src/components/home.js
user: login: NexaDew
body: here also can you create component for 1 image and repeate it here
created_at: 2025-05-08T08:51:01Z
author_association: COLLABORATOR

PR comments:
user: login: vercel[bot]
created_at: 2025-05-07T09:09:54Z
body: @AkshayReddy60 is attempting to deploy a commit to the **gitrunner-aju's projects** Team on [Vercel](https://vercel.com).

A member of the Team first needs to [authorize it](https://vercel.com/git/authorize?team=gitrunner-aju's%20projects&type=github&job=%7B%22headInfo%22%3A%7B%22sha%22%3A%22fcafe70e407490a47809e5aef04893dca2385ddd%22%7D%2C%22id%22%3A%22QmeySn6HAU7JwqJ5bGw3HmktZi1oK2UGT5tZVQ6XjPnf6b%22%2C%22org%22%3A%22NexaDew%22%2C%22prId%22%3A4%2C%22repo%22%3A%22Blog-figma%22%7D).


author_association: NONE
user: login: vercel[bot]
created_at: 2025-05-07T09:39:17Z
body: [vc]: #NHjEzAPHF1iBhPiGQ0/BZpxpEwTdlaBJbCD4C6qV29c=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJibG9nLWZpZ21hLXk2NWoiLCJyb290RGlyZWN0b3J5IjpudWxsLCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vZ2l0cnVubmVyLWFqdXMtcHJvamVjdHMvYmxvZy1maWdtYS15NjVqLzJxQ2RIV0NjVktjZkZQaDdGUzRETVI5bktTUkUiLCJwcmV2aWV3VXJsIjoiYmxvZy1maWdtYS15NjVqLWdpdC1mb3JrLWFrc2hheXItZjEwMWFkLWdpdHJ1bm5lci1hanVzLXByb2plY3RzLnZlcmNlbC5hcHAiLCJuZXh0Q29tbWl0U3RhdHVzIjoiREVQTE9ZRUQiLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoiYmxvZy1maWdtYS15NjVqLWdpdC1mb3JrLWFrc2hheXItZjEwMWFkLWdpdHJ1bm5lci1hanVzLXByb2plY3RzLnZlcmNlbC5hcHAifX1dfQ==
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **blog-figma-y65j** | ✅ Ready ([Inspect](https://vercel.com/gitrunner-ajus-projects/blog-figma-y65j/2qCdHWCcVKcfFPh7FS4DMR9nKSRE)) | [Visit Preview](https://blog-figma-y65j-git-fork-akshayr-f101ad-gitrunner-ajus-projects.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/blog-figma-y65j-git-fork-akshayr-f101ad-gitrunner-ajus-projects.vercel.app?via=pr-comment-feedback-link) | May 8, 2025 11:46am |


author_association: NONE
user: login: NexaDew
created_at: 2025-05-07T09:43:37Z
body: Hi @AkshayReddy60 , you can remove your data from home.jsx and move into another folder named /data and create  file there as a blogData.jsx
author_association: COLLABORATOR
user: login: NexaDew
created_at: 2025-05-07T09:44:58Z
body: Also Create component for blogs in components like Blog.jsx and pass data as props in it
author_association: COLLABORATOR