414 lines
17 KiB
React
414 lines
17 KiB
React
|
import React, { useEffect, useRef, useState } from 'react';
|
||
|
|
import './Blog.scss';
|
||
|
|
import Navbar from '../../PozoApp/Components/Navbar';
|
||
|
|
import IndustriesList from '../../PozoApp/Components/IndustriesList';
|
||
|
|
import CompanyList from '../../PozoApp/Components/companyList';
|
||
|
|
import Lenis from "@studio-freight/lenis";
|
||
|
|
import Loader from '../../PozoApp/Components/Loader/PozoLoader';
|
||
|
|
import { RiInstagramFill, RiTwitterXFill } from 'react-icons/ri';
|
||
|
|
import { FaFacebook, FaYoutube } from 'react-icons/fa';
|
||
|
|
import { message } from 'antd';
|
||
|
|
import { useDispatch } from 'react-redux';
|
||
|
|
import { useNavigate } from 'react-router-dom';
|
||
|
|
import { getBlog, getPublishedBlogs } from '../../features/Blog/Blog';
|
||
|
|
import { getAllApplicationData } from '../../features/publicHome/publicHome';
|
||
|
|
import { getSeo } from '../../features/SEO/seo';
|
||
|
|
import { getConfigNames } from '../../features/configmasterPage/configmasterPage';
|
||
|
|
import SEO from '../../Components/SEO/SEO';
|
||
|
|
import { PiInstagramLogoFill } from 'react-icons/pi';
|
||
|
|
import BookDemo from '../../PozoApp/Components/BookDemo';
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
const subDirectory = import.meta.env.ENV_BASE_URL;
|
||
|
|
const Blogs = () => {
|
||
|
|
const [isScrolled, setIsScrolled] = useState(false);
|
||
|
|
const [industries, setAppCategory] = useState([]);
|
||
|
|
const [closingIndustry, setClosingIndustry] = useState(false);
|
||
|
|
const [industry, setIndustry] = useState(false);
|
||
|
|
const [company, setCompany] = useState(false);
|
||
|
|
const companyRef = useRef(null);
|
||
|
|
const industryRef = useRef(null);
|
||
|
|
const [closingCompany, setClosingCompany] = useState(false);
|
||
|
|
const [loading, setLoading] = useState(true);
|
||
|
|
const [blogPosts, setBlogPosts] = useState([]);
|
||
|
|
const [seoData, setSeoData] = useState({});
|
||
|
|
const dispatch = useDispatch();
|
||
|
|
const navigate = useNavigate();
|
||
|
|
const [demoModal, setDemoModal] = useState(false);
|
||
|
|
|
||
|
|
|
||
|
|
const handleDemoModal = () => setDemoModal(true);
|
||
|
|
const handleDemoModalClose = () => setDemoModal(false);
|
||
|
|
|
||
|
|
const getAppData = async () => {
|
||
|
|
try {
|
||
|
|
const response = await dispatch(getAllApplicationData()).unwrap();
|
||
|
|
if (response?.data?.statusCode === 1) {
|
||
|
|
let finalsubCategory = response?.data?.data?.filter(
|
||
|
|
(value) => value.ActiveStatus === "A",
|
||
|
|
);
|
||
|
|
setAppCategory(finalsubCategory);
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Error fetching app data:', error);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const timer = setTimeout(() => {
|
||
|
|
setLoading(false);
|
||
|
|
}, 300);
|
||
|
|
getAppData();
|
||
|
|
return () => clearTimeout(timer);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
fetchBlogPosts();
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const fetchSEOData = async () => {
|
||
|
|
|
||
|
|
try {
|
||
|
|
const res = await dispatch(getConfigNames({ TypeName: "SEO" })).unwrap();
|
||
|
|
if (res?.data?.statusCode === 1) {
|
||
|
|
const seoId = res?.data?.data?.find(e => e.ConfigName === "blog")?.ConfigId;
|
||
|
|
if (!seoId) {
|
||
|
|
console.warn("Blog ConfigId not found");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const response = await dispatch(getSeo({ PageId: seoId })).unwrap();
|
||
|
|
if (response?.data?.statusCode === 1 && response?.data?.data?.length > 0) {
|
||
|
|
const data = response.data.data[0];
|
||
|
|
setSeoData({
|
||
|
|
metaTitle: data?.MetaTitle,
|
||
|
|
metaDescription: data?.MetaDesc,
|
||
|
|
keywords: data?.Keywords,
|
||
|
|
imageAltText: data?.ImgAltText
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.log('No SEO data found for blog page');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
fetchSEOData();
|
||
|
|
}, [dispatch]);
|
||
|
|
|
||
|
|
const fetchBlogPosts = async () => {
|
||
|
|
try {
|
||
|
|
const response = await dispatch(getPublishedBlogs()).unwrap();
|
||
|
|
if (response?.data.statusCode == 1) {
|
||
|
|
setBlogPosts(response?.data?.data?.map((blog) => ({
|
||
|
|
id: blog?.BlogId,
|
||
|
|
title: blog?.BlogTitle,
|
||
|
|
excerpt: blog?.BlogSubtitle,
|
||
|
|
author: blog?.BlogAuthor,
|
||
|
|
date: (() => {
|
||
|
|
if (!blog?.PublishDate) return '';
|
||
|
|
|
||
|
|
// --- Format date ---
|
||
|
|
const dateStr = blog.PublishDate.split('T')[0]; // "2025-10-24"
|
||
|
|
const [year, month, day] = dateStr.split('-');
|
||
|
|
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
||
|
|
const monthName = months[parseInt(month, 10) - 1];
|
||
|
|
const formattedDate = `${parseInt(day, 10)} ${monthName} ${year}`; // "24 Oct 2025"
|
||
|
|
|
||
|
|
// --- Format time ---
|
||
|
|
if (!blog?.PublishTime) return formattedDate; // If no time, return date only
|
||
|
|
|
||
|
|
const [hourStr, minuteStr] = blog.PublishTime.split(':'); // "17:25:00" → ["17","25","00"]
|
||
|
|
let hour = parseInt(hourStr, 10);
|
||
|
|
const minute = minuteStr;
|
||
|
|
const ampm = hour >= 12 ? "PM" : "AM";
|
||
|
|
hour = hour % 12 || 12; // Convert 0 → 12
|
||
|
|
const formattedTime = `${hour.toString().padStart(2, "0")}:${minute} ${ampm}`; // "05:25 PM"
|
||
|
|
|
||
|
|
return `${formattedDate} ${formattedTime}`; // "24 Oct 2025 05:25 PM"
|
||
|
|
})(),
|
||
|
|
readTime: '5 min read',
|
||
|
|
CreatedDate: (() => {
|
||
|
|
if (!blog?.CreatedDate) return '';
|
||
|
|
const dateStr = blog.CreatedDate.split('T')[0]; // Get date part
|
||
|
|
const [year, month, day] = dateStr.split('-');
|
||
|
|
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
||
|
|
const monthName = months[parseInt(month) - 1];
|
||
|
|
return `${parseInt(day)} ${monthName} ${year}`;
|
||
|
|
})(),
|
||
|
|
imageUrl: blog?.HeaderImage,
|
||
|
|
slug: blog?.Slug
|
||
|
|
})) || []);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
setBlogPosts([]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
catch (err) {
|
||
|
|
message.error('Failed to fetch blog posts. Please try again later.');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// const blogPosts = [
|
||
|
|
// {
|
||
|
|
// id: 1,
|
||
|
|
// title: "Modern Web Development Trends in 2024",
|
||
|
|
// excerpt: "Explore the latest technologies and frameworks shaping the future of web development with React, Next.js and modern CSS.",
|
||
|
|
// author: "John Doe",
|
||
|
|
// date: "Dec 15, 2024",
|
||
|
|
// readTime: "5 min read",
|
||
|
|
// imageUrl: "https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=400",
|
||
|
|
// },
|
||
|
|
// {
|
||
|
|
// id: 2,
|
||
|
|
// title: "Mastering React Hooks in 2024",
|
||
|
|
// excerpt: "Learn how to effectively use React Hooks to build modern, efficient React applications with best practices.",
|
||
|
|
// author: "Sarah Wilson",
|
||
|
|
// date: "Dec 12, 2024",
|
||
|
|
// readTime: "8 min read",
|
||
|
|
// imageUrl: "https://images.unsplash.com/photo-1633356122544-f134324a6cee?w=400",
|
||
|
|
// },
|
||
|
|
// {
|
||
|
|
// id: 3,
|
||
|
|
// title: "CSS Grid vs Flexbox: When to Use What",
|
||
|
|
// excerpt: "A comprehensive guide to understanding the differences between CSS Grid and Flexbox with practical examples.",
|
||
|
|
// author: "Mike Chen",
|
||
|
|
// date: "Dec 10, 2024",
|
||
|
|
// readTime: "6 min read",
|
||
|
|
// imageUrl: "https://images.unsplash.com/photo-1633356122544-f134324a6cee?w=400",
|
||
|
|
// }
|
||
|
|
// ];
|
||
|
|
|
||
|
|
|
||
|
|
const redirectApp = (AppName, AppId) => {
|
||
|
|
console.log('Redirect to app:', AppName, AppId);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleIndustry = () => {
|
||
|
|
if (industry) {
|
||
|
|
setClosingIndustry(true);
|
||
|
|
setTimeout(() => {
|
||
|
|
setIndustry(false);
|
||
|
|
setClosingIndustry(false);
|
||
|
|
}, 200);
|
||
|
|
} else {
|
||
|
|
setIndustry(true);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleCompanyList = () => {
|
||
|
|
if (company) {
|
||
|
|
setClosingCompany(true);
|
||
|
|
setTimeout(() => {
|
||
|
|
setCompany(false);
|
||
|
|
setClosingCompany(false);
|
||
|
|
}, 200);
|
||
|
|
} else {
|
||
|
|
setCompany(true);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const lenis = new Lenis({
|
||
|
|
duration: 1.2,
|
||
|
|
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
|
||
|
|
smoothWheel: true,
|
||
|
|
smoothTouch: true,
|
||
|
|
});
|
||
|
|
|
||
|
|
lenis.on("scroll", (e) => {
|
||
|
|
setIsScrolled(e.scroll > 50);
|
||
|
|
});
|
||
|
|
|
||
|
|
function raf(time) {
|
||
|
|
lenis.raf(time);
|
||
|
|
requestAnimationFrame(raf);
|
||
|
|
}
|
||
|
|
requestAnimationFrame(raf);
|
||
|
|
return () => lenis.destroy();
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (industry || company) {
|
||
|
|
document.body.style.overflow = "hidden";
|
||
|
|
} else {
|
||
|
|
document.body.style.overflow = "unset";
|
||
|
|
}
|
||
|
|
return () => {
|
||
|
|
document.body.style.overflow = "unset";
|
||
|
|
};
|
||
|
|
}, [industry, company]);
|
||
|
|
|
||
|
|
const BlogCard = ({ post }) => {
|
||
|
|
const handleClick = () => {
|
||
|
|
navigate(`${subDirectory}blog/${post.slug}`);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="pozo-blog-card" onClick={handleClick}>
|
||
|
|
<div className="pozo-blog-card-image">
|
||
|
|
<img src={post.imageUrl} alt={post.title} />
|
||
|
|
<div className="pozo-blog-card-overlay"></div>
|
||
|
|
</div>
|
||
|
|
<div className="pozo-blog-card-content">
|
||
|
|
<div className="pozo-blog-tags-container">Recent Updates & Blogs
|
||
|
|
Announcements
|
||
|
|
</div>
|
||
|
|
<p className="pozo-blog-card-excerpt">{post.excerpt}</p>
|
||
|
|
<div className="pozo-blog-card-meta">
|
||
|
|
{/* <span className="pozo-blog-date">{post.date}</span> */}
|
||
|
|
<div>
|
||
|
|
<span className="pozo-blog-date">{`Created Date ${post.CreatedDate}`}</span>
|
||
|
|
<div className="pozo-blog-date">{post.Author || "Admin"}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="pozo-blog-publish-time">
|
||
|
|
<span className="pozo-blog-read-time">{post.readTime}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
if (loading) {
|
||
|
|
return <Loader />;
|
||
|
|
}
|
||
|
|
|
||
|
|
const handlePrivacyPolicy = () => {
|
||
|
|
navigate(`${subDirectory}privacy-policy`);
|
||
|
|
}
|
||
|
|
const handleNavigateCookie = () => {
|
||
|
|
navigate(`${subDirectory}cookie-policy`);
|
||
|
|
}
|
||
|
|
const handleNavigateFaq = () => {
|
||
|
|
navigate(`${subDirectory}faq`);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<SEO
|
||
|
|
title={seoData.metaTitle || "Recent Updates & Blogs - PozoApp"}
|
||
|
|
description={seoData.metaDescription || "Stay updated with the latest news, announcements, and blog posts from PozoApp. Discover insights on business management, technology trends, and more."}
|
||
|
|
keywords={seoData.keywords || "blog, updates, announcements, PozoApp, business management, technology"}
|
||
|
|
url={`${subDirectory}blog`}
|
||
|
|
image={seoData.imageAltText || "/og/blog-og.jpg"}
|
||
|
|
type="website"
|
||
|
|
/>
|
||
|
|
<div className='pozo-blog-master-card'>
|
||
|
|
<Navbar
|
||
|
|
isScrolled={isScrolled}
|
||
|
|
forceTopZero={true}
|
||
|
|
AppCategory={industries}
|
||
|
|
closingIndustry={closingIndustry}
|
||
|
|
setClosingIndustry={setClosingIndustry}
|
||
|
|
industry={industry}
|
||
|
|
setIndustry={setIndustry}
|
||
|
|
companyRef={companyRef}
|
||
|
|
closingCompany={closingCompany}
|
||
|
|
setClosingCompany={setClosingCompany}
|
||
|
|
company={company}
|
||
|
|
setCompany={setCompany}
|
||
|
|
industryRef={industryRef}
|
||
|
|
handleIndustry={handleIndustry}
|
||
|
|
handleCompanyList={handleCompanyList}
|
||
|
|
handleDemoModal={handleDemoModal}
|
||
|
|
handleDemoModalClose={handleDemoModalClose}
|
||
|
|
|
||
|
|
demoModal={demoModal}
|
||
|
|
/>
|
||
|
|
<div className="pozo-blogs-page">
|
||
|
|
<h1 className="pozo-blog-page-title">Recent Updates & Blogs</h1>
|
||
|
|
<p className="pozo-blog-page-subtitle">Stay updated with the latest news, announcements, and blog posts from PozoApp. Discover insights on business management, technology trends, and more.</p>
|
||
|
|
<div className="pozo-blogs-grid">
|
||
|
|
{blogPosts.length > 0 ? (
|
||
|
|
blogPosts.map((post) => (
|
||
|
|
<BlogCard key={post.id} post={post} />
|
||
|
|
))
|
||
|
|
) : (
|
||
|
|
<div className="pozo-blog-empty-state">
|
||
|
|
<p>No blog posts available at the moment. Please check back later for updates.</p>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Navbar IndustriesList */}
|
||
|
|
{industry && (
|
||
|
|
<IndustriesList
|
||
|
|
closingIndustry={closingIndustry}
|
||
|
|
AppCategory={industries}
|
||
|
|
redirectApp={redirectApp}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
{company && (
|
||
|
|
<CompanyList
|
||
|
|
companyRef={companyRef}
|
||
|
|
closingCompany={closingCompany}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<div className="liveFooterMain" style={{ marginTop: "5rem" }}>
|
||
|
|
<div className="liveFooterLeft">
|
||
|
|
<p className="listTitle">Quick Links</p>
|
||
|
|
<div className="LiveFooterList">
|
||
|
|
<p>About Pozo</p>
|
||
|
|
<p>All Products </p>
|
||
|
|
<p>Pricing Plans </p>
|
||
|
|
<p>Contact Us </p>
|
||
|
|
<p onClick={handleNavigateFaq}>FAQs </p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="liveFooterRight">
|
||
|
|
<p className="listTitle">Support & Help</p>
|
||
|
|
<div className="LiveFooterList">
|
||
|
|
<p>info@pozo.app</p>
|
||
|
|
<a href="tel:7324000011">73 24 00 00 11</a>
|
||
|
|
<a href="tel:7324000012">73 24 00 00 12</a>
|
||
|
|
|
||
|
|
<span>
|
||
|
|
Let's get social
|
||
|
|
<a href="https://www.instagram.com/pozomind/" target="_blank" rel="noopener noreferrer">
|
||
|
|
<PiInstagramLogoFill size={18} />
|
||
|
|
</a>
|
||
|
|
<a href="https://www.facebook.com/pozomind/" target="_blank" rel="noopener noreferrer">
|
||
|
|
<FaFacebook />
|
||
|
|
</a>
|
||
|
|
<a href="https://x.com/pozomind" target="_blank" rel="noopener noreferrer">
|
||
|
|
<RiTwitterXFill />
|
||
|
|
</a>
|
||
|
|
<a href="https://www.youtube.com/@pozomind" target="_blank" rel="noopener noreferrer">
|
||
|
|
<FaYoutube />
|
||
|
|
</a>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="liveFooterRights">
|
||
|
|
<div>
|
||
|
|
© 2025 PozoApp
|
||
|
|
<div className='linktoPrivayCookie' onClick={handlePrivacyPolicy}>
|
||
|
|
Privacy Policy
|
||
|
|
</div>
|
||
|
|
<div className='linktoPrivayCookie' onClick={handleNavigateCookie}>
|
||
|
|
Cookie Policy
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<p>
|
||
|
|
For queries contact us: Manager, No 51 Step Colony, Dharga,Hosur,
|
||
|
|
Krishnagiri, Tamilnadu-635126, India
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{demoModal && (
|
||
|
|
<BookDemo onClose={handleDemoModalClose} />
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
export default Blogs;
|