267 lines
14 KiB
TypeScript
267 lines
14 KiB
TypeScript
"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; |