<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Inscipe Blogs: Tips, Trends & Community Stories</title>
  <meta name="description" content="Explore Inscipe Blogs for tips, trends, and community stories. Discover insights on shopping, lifestyle, and more. Read now!">
  <meta name="keywords" content="Inscipe blogs, shopping tips, lifestyle trends, community stories, online shopping India">
  <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
  <meta name="author" content="INSCIPE Team">
  <meta name="language" content="en">
  <meta name="msvalidate.01" content="CCD922E6FA6B707345E4B83CEF6BB813">
  <link rel="canonical" href="https://www.inscipe.shop/blog">

  
  <meta property="og:title" content="Inscipe Blogs: Tips, Trends & Stories">
  <meta property="og:description" content="Discover tips, trends, and community stories on Inscipe Blogs. Stay inspired with insights on shopping and lifestyle!">
  <meta property="og:url" content="https://www.inscipe.shop/blog">
  <meta property="og:image" content="https://www.inscipe.shop/images/blog-og-image.jpg">
  <meta property="og:image:secure_url" content="https://www.inscipe.shop/images/blog-og-image.jpg">
  <meta property="og:image:alt" content="Inscipe Blogs">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="INSCIPE">

  
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Inscipe Blogs: Tips, Trends & Stories">
  <meta name="twitter:description" content="Explore Inscipe Blogs for shopping tips, lifestyle trends, and community stories. Read now!">
  <meta name="twitter:image" content="https://www.inscipe.shop/images/blog-og-image.jpg">
  <meta name="twitter:image:alt" content="Inscipe Blogs">
  <meta name="twitter:site" content="@INSCIPE_03">

  
  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
  <link rel="icon" href="/favicon.ico" type="image/png">
  <link rel="apple-touch-icon" href="/favicon.ico">

  
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebPage",
    "name": "Inscipe Blogs",
    "url": "https://www.inscipe.shop/blog",
    "description": "Explore Inscipe Blogs for tips, trends, and community stories on shopping, lifestyle, and more.",
    "publisher": {
      "@type": "Organization",
      "name": "INSCIPE",
      "logo": {
        "@type": "ImageObject",
        "url": "https://iili.io/FCZy8DG.jpg"
      }
    },
    "breadcrumb": {
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "position": 1,
          "name": "Home",
          "item": "https://www.inscipe.shop"
        }
      ]
    }
  }
  </script>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Blog",
    "name": "Inscipe Blogs",
    "url": "https://www.inscipe.shop/blog",
    "description": "A collection of blog posts offering tips, trends, and community stories from Inscipe.",
    "publisher": {
      "@type": "Organization",
      "name": "INSCIPE"
    }
  }
  </script>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<style>
  :root {
    --primary-color: #ff5722;
    --secondary-color: #3f51b5;
    --accent-color: #2196f3;
    --text-color: #333;
    --light-text: #757575;
    --background-color: #fff;
    --light-gray: #f5f5f5;
    --medium-gray: #e0e0e0;
    --dark-gray: #9e9e9e;
    --success-color: #4caf50;
    --error-color: #f44336;
    --border-radius: 8px;
    --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
    --header-height: 70px;
    --footer-bg: #2d2d2d;
  }

  /* Bottom Navigation */
  .bottom-navigation {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: var(--background-color);
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
  }

  .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--light-text);
    text-decoration: none;
    font-size: 12px;
    width: 20%;
    position: relative;
    transition: var(--transition);
  }

  .nav-item i {
    font-size: 22px;
    margin-bottom: 4px;
  }

  .nav-item:hover {
    color: var(--accent-color);
  }

  .nav-item.active {
    color: var(--secondary-color);
  }

  /* Blog Card */
  .blog-card {
    transition: var(--transition);
    background-color: var(--background-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
  }

  .blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  }

  /* Search Bar */
  .search-bar {
    border: 1px solid var(--medium-gray);
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    width: 100%;
    max-width: 400px;
    outline: none;
    transition: var(--transition);
  }

  .search-bar:focus {
    border-color: var(--accent-color);
  }

  /* Pagination */
  .pagination-button {
    padding: 0.5rem 1rem;
    border: 1px solid var(--medium-gray);
    border-radius: var(--border-radius);
    transition: var(--transition);
  }

  .pagination-button:hover {
    background-color: var(--secondary-color);
    color: white;
  }

  .pagination-button:disabled {
    background-color: var(--light-gray);
    color: var(--dark-gray);
    cursor: not-allowed;
  }

  /* Back to Top Button */
  #back-to-top {
    position: fixed;
    bottom: 80px;
    right: 20px;
    background-color: var(--secondary-color);
    color: white;
    width: 40px;
    height: 40px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    z-index: 1000;
  }

  #back-to-top:hover {
    background-color: var(--primary-color);
  }

  /* Loading Animation */
  .loading-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--secondary-color);
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
    margin-left: 8px;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  body {
    padding-bottom: 60px; /* Match the height of the bottom navigation bar */
    background-color: var(--light-gray);
    color: var(--text-color);
  }

  .header-logo {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
  }

  .In {
    color: var(--primary-color);
  }

  .scipe {
    color: var(--secondary-color);
  }

  .blogs {
    color: var(--text-color);
    margin-left: 0.3rem;
  }

  /* Category tags */
  .category-tag {
    background-color: var(--accent-color);
    color: white;
  }

  /* Footer */
  footer {
    background-color: var(--footer-bg);
  }

  /* Error message */
  #error {
    color: var(--error-color);
  }
</style>
<body class="min-h-screen flex flex-col">
  
  <header class="bg-white shadow">
    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row sm:items-center sm:justify-between">
      <div>
        <div class="header-logo">
          <span class="In">Ins</span>
          <span class="scipe">cipe</span>
          <span class="blogs"> Blogs</span>
        </div>
        <p class="mt-2" style="color: var(--light-text)">Discover tips, trends, and stories from our community.</p>
      </div>
      <div class="mt-4 sm:mt-0">
        <input type="text" id="search-bar" class="search-bar" placeholder="Search blogs..." aria-label="Search blogs" onkeyup="searchBlogs()">
      </div>
    </div>
  </header>

  
  <section class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8 flex-grow">
    <div id="blog-container" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
      
    </div>
    <p id="loading" class="text-center" style="color: var(--light-text)">
      Loading
      <span class="loading-spinner"></span>
    </p>
    <p id="error" class="text-center hidden">Failed to load blogs. Please try again later.</p>
    <p id="no-blogs" class="text-center hidden" style="color: var(--light-text)">No blogs found.</p>
    <div class="mt-8 flex justify-center space-x-4">
      <button id="prev-page" class="pagination-button" onclick="changePage(-1)" disabled aria-label="Previous Page">Previous</button>
      <span id="page-info" style="color: var(--light-text)">Page 1</span>
      <button id="next-page" class="pagination-button" onclick="changePage(1)" disabled aria-label="Next Page">Next</button>
    </div>
  </section>

  
  <footer class="py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <p>© 2025 Inscipe. All rights reserved.</p>
      <div class="mt-4">
        <a href="blog" style="color: var(--dark-gray)" class="hover:text-white mx-2">Blog Home</a>
        <a href="/" style="color: var(--dark-gray)" class="hover:text-white mx-2">Shop</a>
        <a href="aboutus" style="color: var(--dark-gray)" class="hover:text-white mx-2">Contact</a>
        <a href="Privacy-Policy" style="color: var(--dark-gray)" class="hover:text-white mx-2">Privacy Policy</a>
        <a href="TandC" style="color: var(--dark-gray)" class="hover:text-white mx-2">Terms of Service</a>
      </div>
    </div>
  </footer>

  
  <div class="bottom-navigation">
    <a href="/" class="nav-item" aria-label="Home">
      <i class="fas fa-home"></i>
      <span>Home</span>
    </a>
    <a href="account" class="nav-item" aria-label="Your Account">
      <i class="fas fa-user"></i>
      <span>You</span>
    </a>
    <a href="MY-order.html" class="nav-item" aria-label="My Orders">
      <i class="fas fa-shopping-bag"></i>
      <span>My Orders</span>
    </a>
    <a href="inscipecoins" class="nav-item" aria-label="Redeem">
      <i class="fas fa-gift"></i>
      <span>Redeem</span>
    </a>
    <a href="bot" class="nav-item active" aria-label="Nova">
      <i class="fas fa-headset"></i>
      <span>Nova</span>
    </a>
  </div>

  
  <button id="back-to-top" aria-label="Back to Top">
    <i class="fas fa-chevron-up"></i>
  </button>

  <script>
    let allBlogs = [];
    let filteredBlogs = [];
    let currentPage = 1;
    const blogsPerPage = 6;

    async function fetchBlogs() {
      const loadingEl = document.getElementById('loading');
      const errorEl = document.getElementById('error');
      const noBlogsEl = document.getElementById('no-blogs');

      try {
        const response = await fetch('/api/blog');
        if (!response.ok) throw new Error('Network response was not ok');
        allBlogs = await response.json();
        filteredBlogs = [...allBlogs];

        loadingEl.classList.add('hidden');
        renderBlogs();
      } catch (error) {
        console.error('Error fetching blogs:', error);
        loadingEl.classList.add('hidden');
        errorEl.classList.remove('hidden');
      }
    }

    function renderBlogs() {
      const blogContainer = document.getElementById('blog-container');
      const noBlogsEl = document.getElementById('no-blogs');
      blogContainer.innerHTML = '';

      if (filteredBlogs.length === 0) {
        noBlogsEl.classList.remove('hidden');
        updatePagination();
        return;
      }

      noBlogsEl.classList.add('hidden');

      const start = (currentPage - 1) * blogsPerPage;
      const end = start + blogsPerPage;
      const paginatedBlogs = filteredBlogs.slice(start, end);

      paginatedBlogs.forEach(blog => {
        const blogCard = document.createElement('div');
        blogCard.className = 'blog-card';
        blogCard.innerHTML = `
          ${blog.banner.type === 'image' ? `
            <img src="${blog.banner.url}" alt="${blog.title}" class="w-full h-48 object-cover">
          ` : `
            <video class="w-full h-48 object-cover" autoplay muted loop>
              <source src="${blog.banner.url}" type="video/mp4">
              Your browser does not support the video tag.
            </video>
          `}
          <div class="p-6">
            <span class="inline-block category-tag text-xs px-2 py-1 rounded">${blog.category}</span>
            <h2 class="text-xl font-semibold mt-2 hover:text-blue-600 transition-colors">
              <a href="blog-post?blogId=${blog.blogId}" aria-label="Read blog: ${blog.title}">${blog.title}</a>
            </h2>
            <p class="mt-2 text-sm" style="color: var(--light-text)">By ${blog.writer} | Published on ${blog.date}</p>
            <p class="mt-2 line-clamp-3" style="color: var(--light-text)">${blog.excerpt}</p>
            <div class="mt-4 flex items-center space-x-3">
              <a href="blog-post?blogId=${blog.blogId}" class="inline-block font-medium" style="color: var(--accent-color)">Read More</a>
              <button class="transition-colors" style="color: var(--dark-gray)" onclick="shareBlog('${blog.blogId}')" aria-label="Share blog: ${blog.title}">
                <i class="fas fa-share-alt"></i>
              </button>
            </div>
          </div>
        `;
        blogContainer.appendChild(blogCard);
      });

      updatePagination();
    }

    function searchBlogs() {
      const searchTerm = document.getElementById('search-bar').value.toLowerCase();
      filteredBlogs = allBlogs.filter(blog =>
        blog.title.toLowerCase().includes(searchTerm) ||
        blog.excerpt.toLowerCase().includes(searchTerm) ||
        blog.category.toLowerCase().includes(searchTerm)
      );
      currentPage = 1;
      renderBlogs();
    }

    function changePage(direction) {
      currentPage += direction;
      renderBlogs();
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }

    function updatePagination() {
      const totalPages = Math.ceil(filteredBlogs.length / blogsPerPage);
      const prevButton = document.getElementById('prev-page');
      const nextButton = document.getElementById('next-page');
      const pageInfo = document.getElementById('page-info');

      pageInfo.textContent = `Page ${currentPage} of ${totalPages || 1}`;
      prevButton.disabled = currentPage === 1;
      nextButton.disabled = currentPage === totalPages || totalPages === 0;
    }

    function shareBlog(blogId) {
      const blog = allBlogs.find(b => b.blogId === blogId);
      const shareUrl = `${window.location.origin}/blog-post?blogId=${blogId}`;
      const shareData = {
        title: blog.title,
        text: blog.excerpt,
        url: shareUrl
      };

      if (navigator.share) {
        navigator.share(shareData).catch(err => console.error('Error sharing:', err));
      } else {
        navigator.clipboard.writeText(shareUrl).then(() => {
          alert('Blog link copied to clipboard: ' + shareUrl);
        }).catch(err => {
          console.error('Error copying to clipboard:', err);
          alert('Share this blog: ' + shareUrl);
        });
      }
    }

    // Back to Top Button Logic
    window.addEventListener('scroll', () => {
      const backToTopButton = document.getElementById('back-to-top');
      backToTopButton.style.display = window.scrollY > 300 ? 'flex' : 'none';
    });

    document.getElementById('back-to-top').addEventListener('click', () => {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    });

    document.addEventListener('DOMContentLoaded', fetchBlogs);
  </script>
</body>
</html>
    <script>
      console.clear();
    </script>