"use client";
import React from 'react';
import { motion } from "framer-motion";
import { HoverEffect } from '@/components/ui/card-hover-effect';
import { TextGenerateEffect } from "@/components/ui/text-generate-effect";
import {
FaBlog, FaRobot, FaCode, FaLightbulb, FaGlobe,
FaBrain, FaRss, FaMicrochip, FaNewspaper
} from 'react-icons/fa';
import Navbar from '@/components/Navbar/navbar';
import Footer from '@/components/footer';
import { DotPattern } from '@/components/magicui/dot-pattern';
import { cn } from '@/lib/utils';
const floatingWords = [
"C", "f", "t", "n", "x", "g",
"a", "s", "h/", "4", "g.js",
"g", "e", "Code", "v", "b", "5",
"e", "e", "UI/UX", "6", "js",
"2", "e", "Code", "d", "j", "Design",
"t", "w", "UI/UX", "t", "t",
];
const generateRandomPosition = () => ({
x: Math.random() * 100 - 50 + "vw", // Random X position
y: Math.random() * 100 - 50 + "vh", // Random Y position
opacity: Math.random() * 0.5 + 0.3, // Random opacity (faded effect)
scale: Math.random() * 0.7 + 0.5, // Random scale for variation
});
const heading = "Explore Our Blogs";
const description = "Stay informed with the latest insights on AI agents, enterprise technology, and digital transformation. Our blog features expert articles, practical guides, and thought leadership pieces.";
const blogLink = "https://everydayseries.com/?__hstc=131524315.44ca9acfdfb12f3a6754faae18ec617e.1736862124713.1740446338560.1740449080633.32&__hssc=131524315.2.1740449080633&__hsfp=2021807260";
const featuredPosts = [
{
title: "The Evolution of AI Agents in Enterprise Workflows",
excerpt: "Discover how AI agents are transforming business processes and creating unprecedented efficiency across organizations.",
category: "AI Trends",
date: "Feb 18, 2025",
icon: <FaRobot className="text-indigo-400 text-2xl" />,
image: "https://images.unsplash.com/photo-1677756119517-756a188d2d94?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8YWl8ZW58MHx8MHx8fDA%3D"
},
{
title: "Building Your First AI Workflow with Everyday",
excerpt: "A step-by-step guide to creating powerful, automated workflows using our drag-and-drop AI builder with zero coding required.",
category: "Tutorials",
date: "Feb 12, 2025",
icon: <FaCode className="text-sky-400 text-2xl" />,
image: "https://images.unsplash.com/photo-1634476229749-a2e480a919d0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fHdvcmtmbG93fGVufDB8fDB8fHww"
},
{
title: "The Future of Work: How AI is Reshaping Enterprise Collaboration",
excerpt: "Explore how artificial intelligence is fundamentally changing how teams work together and make decisions.",
category: "Future of Work",
date: "Feb 5, 2025",
icon: <FaBrain className="text-purple-400 text-2xl" />,
image: "https://images.unsplash.com/photo-1568992687947-868a62a9f521?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8b2ZmaWNlfGVufDB8fDB8fHww"
}
];
const blogCategories = [
{
title: "AI Agents",
description: "Deep dives into how AI agents work, their capabilities, and real-world applications",
icon: <FaRobot className="text-4xl text-indigo-400" />
},
{
title: "Tech Trends",
description: "Stay ahead with analysis of emerging technologies and digital transformation strategies",
icon: <FaMicrochip className="text-4xl text-sky-400" />
},
{
title: "Tutorials & Guides",
description: "Practical how-to articles and step-by-step guides for leveraging AI in your workflows",
icon: <FaLightbulb className="text-4xl text-amber-400" />
},
{
title: "Internet Culture",
description: "Exploring how technology is shaping online communities, digital experiences, and society",
icon: <FaGlobe className="text-4xl text-emerald-400" />
}
];
const BlogSection = () => {
return (
<div className="bg-[#080E12] dark text-white relative overflow-hidden">
<Navbar />
{/* Background glow effects */}
{/* <div className="absolute -top-10 -right-10 w-96 h-96 bg-indigo-500/10 rounded-full blur-3xl"></div>
<div className="absolute -bottom-40 -left-40 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl"></div> */}
<div className="max-w-7xl mx-auto relative z-10">
{/* Header Section */}
<div className="relative h-screen flex flex-col items-center justify-center text-center px-4">
{/* <div className="absolute inset-0 pointer-events-none">
{floatingWords.map((word, index) => (
<motion.span
key={index}
initial={generateRandomPosition()}
animate={{
y: ["-5vh", "5vh", "-5vh"], // Floating effect
opacity: [0.3, 0.5, 0.3],
}}
transition={{
duration: Math.random() * 5 + 5, // Random speed
repeat: Infinity,
ease: "easeInOut",
}}
className="absolute text-gray-500 text-4xl font-semibold opacity-30 select-none"
style={{
left: Math.random() * 100 + "vw", // Random left position
top: Math.random() * 100 + "vh", // Random top position
transform: `rotate(${Math.random() * 360}deg)`, // Random rotation
filter: "blur(2px)", // Soft blur effect
}}
>
{word}
</motion.span>
))}
</div> */}
<motion.div
initial={{ scale: 0.8, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{ duration: 0.6, ease: "easeOut" }}
className="mb-6"
>
<div className="inline-flex items-center justify-center h-20 w-20 rounded-full bg-gray-800 text-indigo-400 shadow-lg shadow-indigo-500/20">
<FaBlog className="text-4xl animate-pulse" />
</div>
</motion.div>
<motion.h2
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, ease: "easeOut" }}
className="h-28 text-5xl md:text-6xl lg:text-6xl my-6 bg-clip-text text-transparent bg-gradient-to-r from-white to-purple-400 drop-shadow-lg"
>
{heading}
</motion.h2>
<motion.p
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 1, ease: "easeOut", delay: 0.2 }}
className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed"
>
{description}
</motion.p>
</div>
{/* Featured Posts */}
<div className="h-screen grid grid-cols-1 md:grid-cols-3 gap-8">
{featuredPosts.map((post, index) => (
<a
key={index}
href={blogLink}
className="h-[500px] group bg-gray-900/50 backdrop-blur-sm rounded-xl overflow-hidden border border-gray-800 hover:border-gray-600 transition-all hover:shadow-lg hover:shadow-indigo-900/20"
>
<div className="relative h-48 overflow-hidden">
<img
src={post.image}
alt={post.title}
className="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500"
/>
<div className="absolute inset-0 bg-gradient-to-t from-[#080E12] to-transparent opacity-70"></div>
<div className="absolute bottom-4 left-4 flex items-center gap-2">
<span className="bg-gray-800/80 backdrop-blur-sm text-white px-3 py-1 rounded-full text-sm">
{post.category}
</span>
</div>
</div>
<div className="p-6">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2">
{post.icon}
</div>
<span className="text-gray-400 text-sm">{post.date}</span>
</div>
<h3 className="text-xl font-medium mb-3 group-hover:text-indigo-300 transition-colors">
{post.title}
</h3>
<p className="text-gray-300 mb-4 line-clamp-3">
{post.excerpt}
</p>
<span className="inline-flex items-center text-indigo-400 group-hover:text-indigo-300">
Read more
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 ml-1 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</span>
</div>
</a>
))}
</div>
{/* Blog Categories */}
<div className="mb-20">
<h3 className="text-4xl mb-10 text-center">
Explore <span className="text-sky-400">Topics</span> That Matter
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{blogCategories.map((category, index) => (
<a
key={index}
href={blogLink}
className="p-6 bg-gray-900/50 backdrop-blur-sm rounded-xl border border-gray-800 hover:border-gray-600 transition-all flex flex-col items-center text-center group hover:bg-gray-800/50"
>
<div className="mb-4 transform group-hover:scale-110 transition-transform">
{category.icon}
</div>
<h4 className="text-xl mb-2 group-hover:text-indigo-300 transition-colors">
{category.title}
</h4>
<p className="text-gray-300 text-sm">
{category.description}
</p>
</a>
))}
</div>
</div>
{/* Newsletter Signup / CTA */}
<div className="bg-gradient-to-r from-indigo-900/30 to-purple-900/30 rounded-2xl mb-40 p-10 md:p-16 backdrop-blur-sm border border-gray-700 hover:border-gray-600 transition-all hover:shadow-lg hover:shadow-indigo-900/20">
<div className="grid grid-cols-1 md:grid-cols-2 gap-10 items-center">
<div>
<h3 className="text-3xl md:text-4xl mb-4">
Stay Updated with the Latest in AI & Tech
</h3>
<p className="text-gray-300 mb-6">
Our blog covers everything from AI agents and how they work to the coolest internet and technology trends. Join our community of forward-thinking innovators.
</p>
<div className="flex flex-wrap gap-4">
<a
href={blogLink}
className="px-6 py-3 bg-gradient-to-r from-sky-500 to-indigo-600 rounded-lg text-white font-medium hover:from-sky-600 hover:to-indigo-700 transition-all shadow-lg hover:shadow-indigo-500/30"
>
Visit Our Blog
</a>
<a
href={blogLink}
className="px-6 py-3 bg-gray-800 rounded-lg text-white font-medium hover:bg-gray-700 transition-all border border-gray-700 hover:border-gray-500"
>
Subscribe to Newsletter
</a>
</div>
</div>
<div className="relative">
<div className="absolute inset-0 bg-gradient-to-r from-indigo-500/10 to-purple-500/10 rounded-2xl"></div>
<div className="relative z-10 p-8 flex items-center justify-center">
<FaNewspaper className="text-8xl text-indigo-400 opacity-80" />
</div>
</div>
</div>
</div>
</div>
<Footer />
</div>
);
};
export default BlogSection;