first commit

components/blog/BlogSidebar.jsx

@@ -0,0 +1,87 @@
+import React from "react";
+import Link from "next/link";
+import BlogSidebarForm from "../form/BlogSidebarForm";
+import { recentNews } from "@/data/blogs";
+
+const categroies = [
+  {
+    catName: "Web Design",
+    numberOfPOst: "09",
+  },
+  {
+    catName: "Graphics",
+    numberOfPOst: "13",
+  },
+  {
+    catName: "Web Development",
+    numberOfPOst: "05",
+  },
+  {
+    catName: "IOS/Android Development",
+    numberOfPOst: "24",
+  },
+  {
+    catName: "Others",
+    numberOfPOst: "08",
+  },
+];
+
+
+const blogKeyword = ["Ideas", "Education", "Design", "Development", "Branding"];
+
+const BlogSidebar = () => {
+  return (
+    <>
+      <div className="blog-sidebar-one">
+        <div className="sidebar-search-form mb-85 sm-mb-60">
+          <BlogSidebarForm />
+        </div>
+        {/* /.sidebar-search-form */}
+
+        <div className="sidebar-categories mb-85 sm-mb-60">
+          <h4 className="sidebar-title">Categories</h4>
+          <ul>
+            {categroies.map((cat, i) => (
+              <li key={i}>
+                <Link     href="/blogs/1">
+                  {cat.catName} <span>({cat.numberOfPOst})</span>
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+        {/* /.sidebar-categories */}
+
+        <div className="sidebar-recent-news mb-85 sm-mb-60">
+          <h4 className="sidebar-title">Recent News</h4>
+          <ul>
+            {recentNews.map((news, i) => (
+              <li key={i}>
+                <Link     href={`/blogs/${news.id}`}>
+                  <span className="title">{news.title}</span>
+                  <span className="date">{news.date}</span>
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+        {/* /.sidebar-recent-news */}
+
+        <div className="sidebar-keyword">
+          <h4 className="sidebar-title">Keywords</h4>
+          <ul className="cleafix">
+            {blogKeyword.map((val, i) => (
+              <li key={i}>
+                <Link     href="/blogs/1"> {val}</Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+        {/* /.sidebar-keyword */}
+      </div>
+      {/* /.blog-sidebar-one  */}
+    </>
+  );
+};
+
+export default BlogSidebar;

components/blog/BlogSidebarClassic.jsx

@@ -0,0 +1,87 @@
+import React from "react";
+import Link from "next/link";
+import BlogSidebarForm from "../form/BlogSidebarForm2";
+import { recentNews } from "@/data/blogs";
+
+const categroies = [
+  {
+    catName: "Web Design",
+    numberOfPOst: "09",
+  },
+  {
+    catName: "Graphics",
+    numberOfPOst: "13",
+  },
+  {
+    catName: "Web Development",
+    numberOfPOst: "05",
+  },
+  {
+    catName: "IOS/Android Development",
+    numberOfPOst: "24",
+  },
+  {
+    catName: "Others",
+    numberOfPOst: "08",
+  },
+];
+
+
+const blogKeyword = ["Ideas", "Education", "Design", "Development", "Branding"];
+
+const BlogSidebarClassic = () => {
+  return (
+    <>
+      <div className="blog-sidebar-one">
+        <div className="sidebar-search-form mb-85 sm-mb-60">
+          <BlogSidebarForm />
+        </div>
+        {/* /.sidebar-search-form */}
+
+        <div className="sidebar-categories mb-85 sm-mb-60">
+          <h4 className="sidebar-title">Categories</h4>
+          <ul>
+            {categroies.map((cat, i) => (
+              <li key={i}>
+                <Link     href="/blogs/1">
+                  {cat.catName} <span>({cat.numberOfPOst})</span>
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+        {/* /.sidebar-categories */}
+
+        <div className="sidebar-recent-news mb-85 sm-mb-60">
+          <h4 className="sidebar-title">Recent News</h4>
+          <ul>
+            {recentNews.map((news, i) => (
+              <li key={i}>
+                <Link     href={`/blogs/${news.id}`}>
+                  <span className="title">{news.title}</span>
+                  <span className="date">{news.date}</span>
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+        {/* /.sidebar-recent-news */}
+
+        <div className="sidebar-keyword">
+          <h4 className="sidebar-title">Keywords</h4>
+          <ul className="cleafix">
+            {blogKeyword.map((val, i) => (
+              <li key={i}>
+                <Link     href="/blogs/1"> {val}</Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+        {/* /.sidebar-keyword */}
+      </div>
+      {/* /.blog-sidebar-one  */}
+    </>
+  );
+};
+
+export default BlogSidebarClassic;

components/blog/BlogStyle1.jsx

@@ -0,0 +1,45 @@
+import React from "react";
+import Link from "next/link";
+import { BlogContent } from "@/data/blogs";
+import Image from "next/image";
+
+
+const BlogStyle1 = () => {
+  return (
+    <>
+      {BlogContent.map((item, i) => (
+        <div
+          className="col-lg-4 col-md-6"
+          data-aos="fade-up"
+          data-aos-duration="1200"
+          key={i}
+          data-aos-delay={item.dealyAnimation}
+        >
+          <div className="post-meta">
+            <Image width={321} height={241} style={{width:'100%',height:'fit-content'}}    
+              src={`/images/blog/${item.img}`}
+              alt="media"
+              className="image-meta"
+            />
+            <div className="tag">{item.tag}</div>
+            <h3>
+              <Link     href={`/blogs/${item.id}`} className="title">
+                {item.title}
+              </Link>
+            </h3>
+            <Link
+                  href={`/blogs/${item.id}`}
+              className="read-more d-flex justify-content-between align-items-center"
+            >
+              <span>Read More</span>
+              <i className="flaticon-right-arrow"></i>
+            </Link>
+          </div>
+          {/* /.post-meta */}
+        </div>
+      ))}
+    </>
+  );
+};
+
+export default BlogStyle1;

components/blog/BlogStyle2.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import Link from "next/link";
+import { BlogContentTwo } from "@/data/blogs";
+import Image from "next/image";
+
+
+const BlogStyle2 = () => {
+  return (
+    <>
+      {BlogContentTwo.map((item, i) => (
+        <div className="post-meta" key={i}>
+          <Image width={681} height={336} style={{height:'fit-content'}}    
+            src={`/images/blog/${item.img}`}
+            alt="media"
+            className="image-meta"
+          />
+          <div className="tag">{item.tag}</div>
+          <h3>
+            <Link     href={`/blogs/${item.id}`} className="title">
+              {item.title}
+            </Link>
+          </h3>
+          <p>{item.desc}</p>
+          <Link
+               href={`/blogs/${item.id}`}
+            className="read-more d-flex justify-content-between align-items-center"
+          >
+            <span>Read More</span>
+            <i className="flaticon-right-arrow"></i>
+          </Link>
+        </div>
+        // /.post-meta
+      ))}
+    </>
+  );
+};
+
+export default BlogStyle2;

components/blog/BlogStyle3.jsx

@@ -0,0 +1,41 @@
+import React from "react";
+import Link from "next/link";
+import { BlogContentThree } from "@/data/blogs";
+import Image from "next/image";
+
+
+const BlogStyle3 = () => {
+  return (
+    <>
+      {BlogContentThree.map((item, i) => (
+        <div className="post-meta" key={i}>
+          <Image width={990} height={890} style={{width:'100%',height:'fit-content'}}    
+            src={`/images/blog/${item.img}`}
+            alt="media"
+            className="image-meta"
+          />
+          <div className="post">
+            <div className="date">{item.date}</div>
+            <h3>
+              <Link     href={`/blogs/${item.id}`} className="title">
+                {item.title}
+              </Link>
+            </h3>
+            <p>{item.desc}</p>
+            <Link
+                 href={`/blogs/${item.id}`}
+              className="read-more d-flex justify-content-between align-items-center"
+            >
+              <span>Continue Reading</span>
+              <i className="flaticon-right-arrow"></i>
+            </Link>
+          </div>
+          {/* End post */}
+        </div>
+        // /.post-meta
+      ))}
+    </>
+  );
+};
+
+export default BlogStyle3;

components/blog/BlogStyle4.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+import Link from "next/link";
+import { BlogContentFour } from "@/data/blogs";
+import Image from "next/image";
+
+
+const BlogStyle4 = () => {
+  return (
+    <>
+      {BlogContentFour.map((item, i) => (
+        <div
+          className="col-lg-4 col-md-6"
+          data-aos="fade-up"
+          data-aos-duration="1200"
+          key={i}
+          data-aos-delay={item.dealyAnimation}
+        >
+          <div className="post-meta">
+            <Image width={990} height={890} style={{width:'100%',height:'fit-content'}}    
+              src={`/images/blog/${item.img}`}
+              alt="media"
+              className="image-meta"
+            />
+            <h3>
+              <Link     href={`/blogs/${item.id}`} className="title">
+                {item.title}
+              </Link>
+            </h3>
+            <Link
+                  href={`/blogs/${item.id}`}
+              className="read-more d-flex justify-content-between align-items-center"
+            >
+              <span>Read More</span>
+              <i className="flaticon-right-arrow"></i>
+            </Link>
+          </div>
+          {/* /.post-meta */}
+        </div>
+      ))}
+    </>
+  );
+};
+
+export default BlogStyle4;

components/blog/BlogStyle5.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import Link from "next/link";
+import { BlogContentSix } from "@/data/blogs";
+import Image from "next/image";
+
+
+const BlogStyle5 = () => {
+  return (
+    <>
+      {BlogContentSix.map((val, i) => (
+        <div
+          className="col-lg-4"
+          data-aos="fade-up"
+          data-aos-duration="1200"
+          data-aos-delay={val.animationDealy}
+          key={i}
+        >
+          <div className="feature-article-meta">
+            <div className="img-meta">
+              <Image width={990} height={890} style={{width:'100%',height:'fit-content'}}     src={`/images/blog/${val.img}`} alt="media" />
+            </div>
+            <div className="post-meta">
+              <h3>
+                <Link     href={`/blogs/${val.id}`}>{val.title}</Link>
+              </h3>
+              <div className="author_info">
+                {val.author}. <span>{val.designation}</span>
+              </div>
+            </div>
+          </div>
+          {/* /.feature-article-meta */}
+        </div>
+      ))}
+    </>
+  );
+};
+
+export default BlogStyle5;

components/blog/BlogStyle6.jsx

@@ -0,0 +1,45 @@
+import React from "react";
+import Link from "next/link";
+import { BlogContentFive } from "@/data/blogs";
+import Image from "next/image";
+
+
+const BlogStyle6 = () => {
+  return (
+    <>
+      {BlogContentFive.map((item, i) => (
+        <div
+          className="col-lg-4 col-md-6"
+          data-aos="fade-up"
+          data-aos-duration="1200"
+          key={i}
+          data-aos-delay={item.dealyAnimation}
+        >
+          <div className="post-meta">
+            <Image width={990} height={890} style={{width:'100%',height:'fit-content'}}    
+              src={`/images/blog/${item.img}`}
+              alt="media"
+              className="image-meta"
+            />
+            <div className="tag">{item.tag}</div>
+            <h3>
+              <Link     href={`/blogs/${item.id}`} className="title">
+                {item.title}
+              </Link>
+            </h3>
+            <Link
+                  href={`/blogs/${item.id}`}
+              className="read-more d-flex justify-content-between align-items-center"
+            >
+              <span>Read More</span>
+              <i className="flaticon-right-arrow"></i>
+            </Link>
+          </div>
+          {/* /.post-meta */}
+        </div>
+      ))}
+    </>
+  );
+};
+
+export default BlogStyle6;