Added a few new pages
This commit is contained in:
codebox283
parent
cab9182145
commit
e364d14efd
267
app/blogs/page.tsx
Normal file
267
app/blogs/page.tsx
Normal file
@ -0,0 +1,267 @@
|
||||
"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;
|
||||
201
app/demo/page.tsx
Normal file
201
app/demo/page.tsx
Normal file
@ -0,0 +1,201 @@
|
||||
"use client";
|
||||
|
||||
import React from 'react';
|
||||
import Navbar from '@/components/Navbar/navbar';
|
||||
import Footer from "@/components/footer";
|
||||
import { HoverEffect } from '@/components/ui/card-hover-effect';
|
||||
import { TextGenerateEffect } from "@/components/ui/text-generate-effect";
|
||||
import {
|
||||
FaVideo, FaRocket, FaLightbulb, FaChartLine,
|
||||
FaTasks, FaUsers, FaCog, FaCubes, FaNetworkWired
|
||||
} from 'react-icons/fa';
|
||||
import { FaListCheck } from 'react-icons/fa6';
|
||||
|
||||
const heading = "Discover Everyday";
|
||||
const description = "Experience the power of effortless AI creation and enterprise workflow optimization with Everyday. Our platform is designed to provide solutions that propel your business towards unprecedented efficiency and growth.";
|
||||
|
||||
const demoExpectations = [
|
||||
{
|
||||
title: "Drag-and-Drop AI Builder",
|
||||
description: "Experience the simplicity of our intuitive drag-and-drop AI builder that lets you create powerful workflows without writing a single line of code.",
|
||||
gradient: "from-sky-400 to-blue-600",
|
||||
icon: <FaCubes className="text-4xl text-white" />,
|
||||
},
|
||||
{
|
||||
title: "Interactive AI Forms",
|
||||
description: "Learn how to convert complex AI workflows into simple, interactive forms that anyone in your organization can use.",
|
||||
gradient: "from-purple-400 to-pink-500",
|
||||
icon: <FaListCheck className="text-4xl text-white" />,
|
||||
},
|
||||
{
|
||||
title: "Marketplace Solutions",
|
||||
description: "Discover ready-to-use workflows and tools for various business units in our comprehensive marketplace, saving you valuable time and resources.",
|
||||
gradient: "from-indigo-400 to-violet-600",
|
||||
icon: <FaRocket className="text-4xl text-white" />,
|
||||
},
|
||||
{
|
||||
title: "GoalGrid Integration",
|
||||
description: "Understand how to align your workflows with your organizational OKRs and KPIs using our powerful GoalGrid feature for measurable results.",
|
||||
gradient: "from-emerald-400 to-green-600",
|
||||
icon: <FaChartLine className="text-4xl text-white" />,
|
||||
},
|
||||
{
|
||||
title: "Seamless Connectivity",
|
||||
description: "Explore the potential of connecting Everyday with thousands of applications for effortless work processes across your entire tech stack.",
|
||||
gradient: "from-amber-400 to-orange-500",
|
||||
icon: <FaNetworkWired className="text-4xl text-white" />,
|
||||
},
|
||||
];
|
||||
|
||||
const testimonialWords = `"Everyday is here to redefine how your business works. Request a personalized demo today and begin your journey towards a smarter, more efficient enterprise."`;
|
||||
|
||||
export default function DemoPage() {
|
||||
return (
|
||||
<div className="bg-[#080E12] dark text-white">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<div className="min-h-screen flex flex-col justify-center p-6 md:p-12 lg:p-24 relative overflow-hidden">
|
||||
<div className="max-w-7xl mx-auto w-full z-10">
|
||||
<h1 className="text-5xl md:text-7xl lg:text-8xl mb-6 bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-400">
|
||||
{heading}
|
||||
</h1>
|
||||
<h2 className="text-2xl md:text-3xl lg:text-4xl max-w-4xl mb-12">
|
||||
{description}
|
||||
</h2>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<button className="px-8 py-3 bg-gradient-to-r from-sky-500 to-indigo-600 rounded-lg text-lg font-medium hover:from-sky-600 hover:to-indigo-700 transition-all shadow-lg hover:shadow-indigo-500/30">
|
||||
Request a Demo
|
||||
</button>
|
||||
<button className="px-8 py-3 bg-gray-800 rounded-lg text-lg font-medium hover:bg-gray-700 transition-all border border-gray-700 hover:border-gray-500">
|
||||
Learn More
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute right-0 bottom-0 w-full md:w-1/2 h-1/2 opacity-20 md:opacity-30">
|
||||
<div className="w-full h-full bg-gradient-to-tr from-indigo-500 via-purple-500 to-pink-500 rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Personalized Demo Section */}
|
||||
<div className="py-24 px-6 md:px-12 bg-gradient-to-b from-[#0A1218] to-[#080E12]">
|
||||
<div className="max-w-7xl mx-auto flex flex-col-reverse md:flex-row gap-12 items-center">
|
||||
<div className="flex flex-col w-full md:w-1/2 gap-6">
|
||||
<h2 className="text-4xl md:text-5xl lg:text-6xl font-medium tracking-wide">
|
||||
Personalized <span className="text-indigo-400">Demo</span>
|
||||
</h2>
|
||||
<p className="text-lg md:text-xl text-gray-300">
|
||||
Every organization is unique, and we appreciate that. Our experts are ready to provide a personalized demo that aligns with your business needs. Learn how you can implement and benefit from our range of features, including the drag-and-drop AI builder, input/output forms, GoalGrid, Marketplace, and expansive integrations.
|
||||
</p>
|
||||
<button className="px-6 py-3 bg-gradient-to-r from-sky-500 to-indigo-600 rounded-lg w-fit hover:from-sky-600 hover:to-indigo-700 transition-all mt-4 shadow-lg hover:shadow-indigo-500/30">
|
||||
Request a Demo
|
||||
</button>
|
||||
</div>
|
||||
<div className="relative flex h-[400px] w-full md:w-1/2 flex-col items-center justify-center overflow-hidden">
|
||||
<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 bg-gray-900/50 backdrop-blur-sm rounded-2xl border border-gray-700 shadow-xl hover:shadow-indigo-500/20 hover:border-indigo-400/50 transition-all duration-500 w-4/5 h-4/5 flex items-center justify-center">
|
||||
<FaVideo className="text-8xl text-indigo-400 animate-pulse" />
|
||||
</div>
|
||||
<div className="absolute -bottom-16 -right-16 w-64 h-64 bg-purple-500/20 rounded-full blur-3xl"></div>
|
||||
<div className="absolute -top-16 -left-16 w-64 h-64 bg-indigo-500/20 rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* What to Expect Section */}
|
||||
<div className="py-24 px-6 md:px-12">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<h2 className="text-4xl md:text-5xl mb-4 text-center">
|
||||
What <span className="text-sky-400">To Expect</span>
|
||||
</h2>
|
||||
<p className="text-xl text-gray-300 text-center mb-16 max-w-3xl mx-auto">
|
||||
In our demo, you will experience the full power of Everyday's platform with features designed to transform your enterprise workflows.
|
||||
</p>
|
||||
<div className="flex flex-col gap-8">
|
||||
{demoExpectations.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="relative w-full bg-gray-900/50 backdrop-blur-sm rounded-xl p-8 border border-gray-800 transition-all flex flex-col md:flex-row gap-6 group hover:border-transparent overflow-hidden"
|
||||
>
|
||||
{/* Icon with Gradient */}
|
||||
<div
|
||||
className={`flex-shrink-0 flex items-center justify-center w-16 h-16 rounded-lg transition-all bg-gray-800 group-hover:bg-opacity-80 bg-gradient-to-br ${item.gradient} text-transparent border bg-clip-text`}
|
||||
>
|
||||
{item.icon}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div>
|
||||
<h3
|
||||
className={`text-2xl mb-2 transition-colors bg-clip-text text-transparent bg-gradient-to-r
|
||||
${item.gradient} `}
|
||||
>
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-gray-300">{item.description}</p>
|
||||
</div>
|
||||
|
||||
{/* Soft Glow Effect */}
|
||||
<div
|
||||
className={`absolute inset-0 rounded-xl opacity-0 blur-3xl transition-opacity duration-500 group-hover:opacity-10 bg-gradient-to-br ${item.gradient}`}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA Middle Section */}
|
||||
<div className="py-24 px-6 md:px-12 bg-gradient-to-r from-indigo-900/20 to-purple-900/20">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h2 className="text-4xl md:text-5xl mb-6">
|
||||
Request <span className="text-sky-400">A Demo</span>
|
||||
</h2>
|
||||
<p className="text-xl text-gray-300 mb-10">
|
||||
Let Everyday revolutionize your business operations. Experience a demo tailored to your enterprise needs. Make AI an everyday part of your business.
|
||||
</p>
|
||||
<button className="px-8 py-4 bg-gradient-to-r from-sky-500 to-indigo-600 rounded-lg text-lg font-medium hover:from-sky-600 hover:to-indigo-700 transition-all shadow-lg hover:shadow-indigo-500/30">
|
||||
Schedule Your Demo Now
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Testimonial */}
|
||||
<div className="py-24 px-6 md:px-12">
|
||||
<div className="max-w-4xl mx-auto bg-gradient-to-r from-gray-900 to-gray-800 rounded-2xl shadow-xl p-10 md:p-16 border border-gray-700 hover:border-gray-600 transition-all hover:shadow-indigo-900/20">
|
||||
<div className="text-indigo-400 text-center text-2xl mb-10">
|
||||
★★★★★
|
||||
</div>
|
||||
<TextGenerateEffect words={testimonialWords} className="text-xl md:text-2xl font-medium italic text-center" />
|
||||
<p className="text-center mt-10 text-gray-400">— Enterprise Client</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Final CTA Section */}
|
||||
<div className="py-24 px-6 md:px-12 bg-gradient-to-b from-[#0A1218] to-[#080E12] relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-indigo-900/10 to-purple-900/10"></div>
|
||||
<div className="absolute -bottom-32 -right-32 w-96 h-96 bg-indigo-500/10 rounded-full blur-3xl"></div>
|
||||
<div className="absolute -top-32 -left-32 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl"></div>
|
||||
|
||||
<div className="max-w-4xl mx-auto text-center relative z-10">
|
||||
<h2 className="text-4xl md:text-5xl mb-6">
|
||||
Transform Your Enterprise Today
|
||||
</h2>
|
||||
<p className="text-xl text-gray-300 mb-10">
|
||||
Join forward-thinking organizations that have revolutionized their workflows with Everyday's AI-powered platform.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-6 justify-center">
|
||||
<button className="px-8 py-4 bg-gradient-to-r from-sky-500 to-indigo-600 rounded-lg text-lg font-medium hover:from-sky-600 hover:to-indigo-700 transition-all shadow-lg hover:shadow-indigo-500/30">
|
||||
Request Your Demo
|
||||
</button>
|
||||
<button className="px-8 py-4 bg-gray-800 rounded-lg text-lg font-medium hover:bg-gray-700 transition-all border border-gray-700 hover:border-gray-500">
|
||||
Explore Features
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -74,4 +74,15 @@ body {
|
||||
::selection {
|
||||
background-color: purple;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
261
app/pricing/page.tsx
Normal file
261
app/pricing/page.tsx
Normal file
@ -0,0 +1,261 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { ChevronDown, ChevronUp, Check, HelpCircle, ShieldCheck, Zap, Smartphone, Globe } from 'lucide-react';
|
||||
import Navbar from '@/components/Navbar/navbar';
|
||||
import Footer from '@/components/footer';
|
||||
|
||||
const PricingCard = ({ title, description, features }) => {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="group relative border border-gray-800 rounded-xl p-8 bg-gray-900/20 transition-all duration-500 overflow-hidden hover:scale-105"
|
||||
>
|
||||
<div className="relative z-10">
|
||||
<h3 className="text-2xl font-semibold text-white mb-4">{title}</h3>
|
||||
<p className="text-gray-400 mb-6">{description}</p>
|
||||
<div className="w-full h-[1px] bg-gray-800 my-4" /> {/* Separator Line */}
|
||||
<div className="space-y-4">
|
||||
{features.map((feature, index) => (
|
||||
<div key={index} className="flex items-center gap-5">
|
||||
<Check className="w-5 h-5 text-purple-500" />
|
||||
<span className="text-gray-300">{feature}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="w-full h-[1px] bg-gray-800 my-4" /> {/* Separator Line */}
|
||||
<div className="w-full py-4 flex items-center justify-between">
|
||||
<p className="text-gray-300">For Price : </p>
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
className="px-6 py-3 rounded-lg text-white font-medium bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 shadow-lg transition-all duration-500 w-fit"
|
||||
>
|
||||
Contact Us
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-2xl transition-opacity duration-500
|
||||
bg-gradient-to-br from-pink-500/50 to-purple-500/50
|
||||
opacity-0 blur-3xl scale-125
|
||||
group-hover:opacity-20"
|
||||
/>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
const FAQ = ({ question, answer }) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="border-b border-gray-800 py-4"
|
||||
initial={false}
|
||||
>
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="flex justify-between items-center w-full text-left"
|
||||
>
|
||||
<span className="text-white text-lg">{question}</span>
|
||||
{isOpen ? (
|
||||
<ChevronUp className="w-5 h-5 text-purple-500" />
|
||||
) : (
|
||||
<ChevronDown className="w-5 h-5 text-purple-500" />
|
||||
)}
|
||||
</button>
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: isOpen ? "auto" : 0, opacity: isOpen ? 1 : 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="overflow-hidden"
|
||||
>
|
||||
<p className="text-gray-400 pt-4">{answer}</p>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
const PricingPage = () => {
|
||||
const pricingPlans = [
|
||||
{
|
||||
title: "Basic",
|
||||
description: "We consider all the drivers of time & change gives the blocks.",
|
||||
features: [
|
||||
"Full Access to Copler",
|
||||
"100 GB Free Storage",
|
||||
"Unlimited Visitors",
|
||||
"10 Agents",
|
||||
"Live Chat Support"
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Premium",
|
||||
description: "We consider all the drivers of time & change gives the blocks.",
|
||||
features: [
|
||||
"Full Access to Copler",
|
||||
"100 GB Free Storage",
|
||||
"Unlimited Visitors",
|
||||
"10 Agents",
|
||||
"Live Chat Support"
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const faqs = [
|
||||
{
|
||||
question: "How many items are there in this list?",
|
||||
answer: "We consider all the drivers of change gives you the blocks & components you need to change to create a truly professional website."
|
||||
},
|
||||
{
|
||||
question: "Can you describe Newleaf in just one sentence?",
|
||||
answer: "We consider all the drivers of change gives you the blocks & components you need to change to create a truly professional website."
|
||||
},
|
||||
{
|
||||
question: "Can I use this template for my client?",
|
||||
answer: "We consider all the drivers of change gives you the blocks & components you need to change to create a truly professional website."
|
||||
},
|
||||
{
|
||||
question: "Do you offer templates in other categories?",
|
||||
answer: "We consider all the drivers of change gives you the blocks & components you need to change to create a truly professional website."
|
||||
},
|
||||
{
|
||||
question: "Do I need to credit you when I use this template?",
|
||||
answer: "We consider all the drivers of change gives you the blocks & components you need to change to create a truly professional website."
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="w-full p-6 bg-[#080E12] min-h-screen space-y-36">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<motion.section
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="max-w-6xl mx-auto text-center pt-20"
|
||||
>
|
||||
<motion.h1 className="text-7xl text-white mb-6">
|
||||
Pricing
|
||||
<span className="bg-gradient-to-r from-[#EC4899] to-[#A855F7] text-transparent bg-clip-text">
|
||||
{" "}Plans{" "}
|
||||
</span>
|
||||
</motion.h1>
|
||||
<motion.p className="text-gray-400 text-xl max-w-3xl mx-auto">
|
||||
Efficiently manage and resolve customer issues, improve satisfaction and boost your bottom line with our all-in-one customer support solution.
|
||||
</motion.p>
|
||||
</motion.section>
|
||||
|
||||
{/* Pricing Cards */}
|
||||
<motion.section className="max-w-6xl mx-auto">
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
{pricingPlans.map((plan, index) => (
|
||||
<PricingCard key={index} {...plan} />
|
||||
))}
|
||||
</div>
|
||||
</motion.section>
|
||||
|
||||
{/* Features Section */}
|
||||
<motion.section
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="max-w-6xl mx-auto"
|
||||
>
|
||||
<h2 className="text-4xl text-white mb-8">Features you don't want to miss</h2>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
{[
|
||||
{
|
||||
title: "Secure Payments",
|
||||
desc: "Ensure end-to-end security for all your transactions with industry-leading encryption.",
|
||||
icon: <ShieldCheck className="w-8 h-8 text-white" />,
|
||||
gradient: "from-blue-500 to-cyan-500",
|
||||
},
|
||||
{
|
||||
title: "Fast Transactions",
|
||||
desc: "Process payments in seconds, reducing wait times and improving efficiency.",
|
||||
icon: <Zap className="w-8 h-8 text-white" />,
|
||||
gradient: "from-pink-500 to-red-500",
|
||||
},
|
||||
{
|
||||
title: "User-Friendly Interface",
|
||||
desc: "Designed with simplicity in mind, making transactions seamless for everyone.",
|
||||
icon: <Smartphone className="w-8 h-8 text-white" />,
|
||||
gradient: "from-green-500 to-teal-500",
|
||||
},
|
||||
{
|
||||
title: "Global Accessibility",
|
||||
desc: "Access and send payments from anywhere in the world, instantly.",
|
||||
icon: <Globe className="w-8 h-8 text-white" />,
|
||||
gradient: "from-yellow-500 to-orange-500",
|
||||
},
|
||||
].map((feature, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="relative p-6 border border-gray-800 rounded-xl bg-gray-900/20 transition-all duration-500 group overflow-hidden flex items-start gap-4"
|
||||
>
|
||||
{/* Icon Container */}
|
||||
<div className={`p-3 bg-gray-900 rounded-lg ${feature.gradient}`}>{feature.icon}</div>
|
||||
|
||||
{/* Text Content */}
|
||||
<div>
|
||||
<h3 className={`text-xl font-medium text-transparent bg-clip-text bg-gradient-to-r ${feature.gradient}`}>
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="text-gray-400">{feature.desc}</p>
|
||||
</div>
|
||||
|
||||
{/* Soft Glow Effect */}
|
||||
<div
|
||||
className={`absolute inset-0 rounded-xl opacity-0 blur-3xl scale-125 transition-opacity duration-500 group-hover:opacity-20 bg-gradient-to-br ${feature.gradient}`}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</motion.section>
|
||||
|
||||
<motion.div>
|
||||
<p className="max-w-6xl mx-auto text-gray-400">
|
||||
Efficiently manage and resolve customer issues, improve satisfaction and boost your bottom line with our all-in-one customer support solution. Get the safest way of making online payment & save countless hours of losing money.
|
||||
</p>
|
||||
{/* <motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
className="px-6 py-3 rounded-lg text-white font-medium bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 shadow-lg transition-all duration-500 w-fit"
|
||||
>
|
||||
Contact Us
|
||||
</motion.button> */}
|
||||
</motion.div>
|
||||
|
||||
{/* FAQ Section */}
|
||||
<motion.section
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="max-w-6xl mx-auto"
|
||||
>
|
||||
<div className="grid md:grid-cols-2 gap-16">
|
||||
<div>
|
||||
<h2 className="text-4xl text-white mb-8 flex items-start gap-3">
|
||||
<HelpCircle className="w-8 h-8 text-purple-500" />
|
||||
Get answers to some common questions!
|
||||
</h2>
|
||||
<p className="text-gray-400">
|
||||
We've curated answers to some of our most frequently asked questions to help you find the information you need quickly and easily.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{faqs.map((faq, index) => (
|
||||
<FAQ key={index} {...faq} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.section>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PricingPage;
|
||||
253
app/webinars/page.tsx
Normal file
253
app/webinars/page.tsx
Normal file
@ -0,0 +1,253 @@
|
||||
"use client";
|
||||
|
||||
import React from 'react';
|
||||
import { motion } from "framer-motion";
|
||||
import { FaCalendarAlt, FaPlay, FaVideo, FaChalkboardTeacher, FaRocket, FaNewspaper } from 'react-icons/fa';
|
||||
import Navbar from '@/components/Navbar/navbar';
|
||||
import Footer from '@/components/footer';
|
||||
|
||||
const heading = "Everyday Webinars";
|
||||
const description = "Step into the world of AI-driven business optimization with our informative webinars. Our experts are here to guide you through the ins and outs of the Everyday platform, showcasing how you can leverage our tools to drive your business forward.";
|
||||
|
||||
const webinarLink = "https://everydayseries.com/podcasts/";
|
||||
|
||||
const featuredWebinars = [
|
||||
{
|
||||
title: "Mastering the Everyday Platform: A Comprehensive Tour",
|
||||
excerpt: "Join our AI specialists as they take you on a comprehensive journey through the Everyday platform. Discover how our drag-and-drop AI builder, diverse input/output forms, GoalGrid system, Marketplace, and expansive integrations can redefine your enterprise operations.",
|
||||
category: "Platform Overview",
|
||||
date: "Feb 26, 2025 • 2:00 PM EST",
|
||||
icon: <FaVideo className="text-indigo-400 text-2xl" />,
|
||||
image: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fHdlYmluYXJ8ZW58MHx8MHx8fDA%3D"
|
||||
},
|
||||
{
|
||||
title: "AI-Driven Business Intelligence: From Data to Decisions",
|
||||
excerpt: "Explore how to transform raw business data into actionable insights using Everyday's AI capabilities. Learn practical applications for various departments including sales, marketing, and operations.",
|
||||
category: "Business Intelligence",
|
||||
date: "Mar 5, 2025 • 1:00 PM EST",
|
||||
icon: <FaChalkboardTeacher className="text-sky-400 text-2xl" />,
|
||||
image: "https://images.unsplash.com/photo-1573164713988-8665fc963095?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8ZGF0YSUyMGFuYWx5c2lzfGVufDB8fDB8fHww"
|
||||
},
|
||||
{
|
||||
title: "Building Custom AI Workflows: Advanced Techniques",
|
||||
excerpt: "Take your AI workflow skills to the next level. This advanced session covers complex scenarios, custom integrations, and best practices for enterprise-grade workflow development.",
|
||||
category: "Advanced Training",
|
||||
date: "Mar 12, 2025 • 3:00 PM EST",
|
||||
icon: <FaRocket className="text-purple-400 text-2xl" />,
|
||||
image: "https://images.unsplash.com/photo-1581094794329-c8112a89af12?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8YWR2YW5jZWQlMjB0ZWNobm9sb2d5fGVufDB8fDB8fHww"
|
||||
}
|
||||
];
|
||||
|
||||
const webinarCategories = [
|
||||
{
|
||||
title: "Live Webinars",
|
||||
description: "Join interactive sessions with real-time Q&A and demonstrations",
|
||||
icon: <FaPlay className="text-4xl text-indigo-400" />
|
||||
},
|
||||
{
|
||||
title: "On-Demand",
|
||||
description: "Access our library of recorded webinars to learn at your own pace",
|
||||
icon: <FaVideo className="text-4xl text-sky-400" />
|
||||
},
|
||||
{
|
||||
title: "Getting Started",
|
||||
description: "Perfect for newcomers looking to quickly understand and implement our platform",
|
||||
icon: <FaChalkboardTeacher className="text-4xl text-amber-400" />
|
||||
},
|
||||
{
|
||||
title: "Advanced Training",
|
||||
description: "Deep dives into complex features and advanced use cases for power users",
|
||||
icon: <FaRocket className="text-4xl text-emerald-400" />
|
||||
}
|
||||
];
|
||||
|
||||
const WebinarSection = () => {
|
||||
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">
|
||||
<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">
|
||||
<FaCalendarAlt 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>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1, ease: "easeOut", delay: 0.4 }}
|
||||
className="mt-8"
|
||||
>
|
||||
<a
|
||||
href={webinarLink}
|
||||
className="px-8 py-4 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 text-lg"
|
||||
>
|
||||
Register For Upcoming Webinars
|
||||
</a>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Webinar Types Section */}
|
||||
<div className="h-screen flex flex-col justify-center text-center mb-16">
|
||||
<h3 className="text-4xl mb-6">
|
||||
Live and On-Demand <span className="text-indigo-400">Webinars</span>
|
||||
</h3>
|
||||
<p className="text-xl text-gray-300 max-w-3xl mx-auto">
|
||||
Whether you prefer live interaction or learning at your own pace, we've got you covered.
|
||||
Our webinars are available both live and on-demand, providing flexibility for your busy schedule.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-12">
|
||||
{webinarCategories.map((category, index) => (
|
||||
<a
|
||||
key={index}
|
||||
href={webinarLink}
|
||||
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>
|
||||
|
||||
{/* Featured Webinars */}
|
||||
<div className="h-screen flex flex-col justify-center">
|
||||
<h3 className="text-3xl font-medium mb-10 text-center">
|
||||
Featured <span className="text-sky-400">Webinars</span>
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{featuredWebinars.map((webinar, index) => (
|
||||
<a
|
||||
key={index}
|
||||
href={webinarLink}
|
||||
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={webinar.image}
|
||||
alt={webinar.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">
|
||||
{webinar.category}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
{webinar.icon}
|
||||
</div>
|
||||
<span className="text-gray-400 text-sm">{webinar.date}</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-medium mb-3 group-hover:text-indigo-300 transition-colors">
|
||||
{webinar.title}
|
||||
</h3>
|
||||
<p className="text-gray-300 mb-4 line-clamp-3">
|
||||
{webinar.excerpt}
|
||||
</p>
|
||||
<span className="inline-flex items-center text-indigo-400 group-hover:text-indigo-300">
|
||||
Register Now
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{/* CTA Section */}
|
||||
<div className="mb-20 text-center">
|
||||
<h3 className="text-3xl font-medium mb-6">
|
||||
Register For <span className="text-indigo-400">Upcoming Webinars</span>
|
||||
</h3>
|
||||
<p className="text-xl text-gray-300 max-w-3xl mx-auto mb-8">
|
||||
Looking to dive deeper into the world of AI-driven enterprise solutions? Register for our upcoming webinars and join the conversation.
|
||||
</p>
|
||||
<a
|
||||
href={webinarLink}
|
||||
className="px-8 py-4 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 text-lg inline-block"
|
||||
>
|
||||
View All Webinars
|
||||
</a>
|
||||
</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 ahead in the rapidly evolving world of business with Everyday webinars.
|
||||
</h3>
|
||||
<p className="text-gray-300 mb-6">
|
||||
Uncover the power of AI and transform your business intelligence today. Stay up to date with our latest tech updates.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Enter your email address"
|
||||
className="px-6 py-3 bg-gray-800/50 backdrop-blur-sm rounded-lg text-white border border-gray-700 focus:border-indigo-500 focus:outline-none flex-grow"
|
||||
/>
|
||||
<button
|
||||
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 whitespace-nowrap"
|
||||
>
|
||||
Subscribe to Newsletter
|
||||
</button>
|
||||
</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 WebinarSection;
|
||||
@ -110,7 +110,7 @@ const HeroCarousel = () => {
|
||||
</div>
|
||||
|
||||
{/* Navigation Buttons */}
|
||||
<button
|
||||
{/* <button
|
||||
onClick={prevSlide}
|
||||
className="absolute left-4 top-1/2 -translate-y-1/2 rounded-full bg-white/20 p-3 text-white backdrop-blur-sm transition-all hover:bg-white/30"
|
||||
>
|
||||
@ -121,7 +121,7 @@ const HeroCarousel = () => {
|
||||
className="absolute right-4 top-1/2 -translate-y-1/2 rounded-full bg-white/20 p-3 text-white backdrop-blur-sm transition-all hover:bg-white/30"
|
||||
>
|
||||
<ChevronRight size={28} />
|
||||
</button>
|
||||
</button> */}
|
||||
|
||||
{/* Slide Indicators */}
|
||||
<div className="absolute bottom-8 left-1/2 flex -translate-x-1/2 space-x-3">
|
||||
|
||||
@ -248,7 +248,7 @@ const solutionItems: SolutionItem[] = [
|
||||
icon: <MdAutoAwesome className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
|
||||
link: '/genai-readiness'
|
||||
}
|
||||
|
||||
|
||||
],
|
||||
},
|
||||
{
|
||||
@ -363,6 +363,140 @@ export const SolutionsDropdown: React.FC = () => {
|
||||
};
|
||||
|
||||
// Resources Dropdown Component
|
||||
interface ResourceItem {
|
||||
category: string;
|
||||
list: {
|
||||
name: string;
|
||||
description: string;
|
||||
icon?: React.ReactNode; // Making icon optional as some items don't have it
|
||||
link?: string;
|
||||
}[];
|
||||
}
|
||||
|
||||
const resourceItems: ResourceItem[] = [
|
||||
{
|
||||
category: 'Learn',
|
||||
list: [
|
||||
{
|
||||
name: 'Demo',
|
||||
description: 'Experience the power of automation-live now',
|
||||
icon: <IoMdAnalytics className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
|
||||
link: '/demo' // Add the correct link
|
||||
},
|
||||
{
|
||||
name: 'Blogs',
|
||||
description: 'Innovative insights to empower your next move',
|
||||
icon: <RiProductHuntFill className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
|
||||
link: '/blogs' // Add the correct link
|
||||
},
|
||||
{
|
||||
name: 'Webinars',
|
||||
description: 'Learn, connect, and grow with expert-led sessions',
|
||||
icon: <RiMoneyEuroBoxFill className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
|
||||
link: '/webinars' // Add the correct link
|
||||
},
|
||||
{
|
||||
name: 'Guides',
|
||||
description: 'Step-by-step tools to unlock your potential',
|
||||
icon: <FaMoneyBillAlt className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
|
||||
link: '/guides' // Add the correct link
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: 'Build',
|
||||
list: [
|
||||
{
|
||||
name: 'API Doc',
|
||||
description: 'Comprehensive API docs for seamless integrations',
|
||||
icon: <IoIosDocument className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
|
||||
link: '/api-doc' // Add the correct link
|
||||
},
|
||||
{
|
||||
name: 'Videos',
|
||||
description: 'Engage with interactive, on-demand video solutions',
|
||||
icon: <FaVideo className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
|
||||
link: '/videos' // Add the correct link
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: 'Services',
|
||||
list: [
|
||||
{
|
||||
name: 'Documentations',
|
||||
description: 'Explore detailed resources to optimize your workflows',
|
||||
icon: <IoIosDocument className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
|
||||
link: '/documentations' // Add the correct link
|
||||
},
|
||||
{
|
||||
name: 'Enterprise Contact',
|
||||
description: 'Partner with us to scale your enterprise',
|
||||
icon: undefined, // No Icon
|
||||
link: '/enterprise-contact' // Add the correct link
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: 'Resources',
|
||||
list: [
|
||||
{
|
||||
name: 'Books',
|
||||
description: 'Discover knowledge to inspire and empower action',
|
||||
icon: <FaBook className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
|
||||
link: '/books' // Add the correct link
|
||||
},
|
||||
{
|
||||
name: 'Agents',
|
||||
description: 'Your personalized support, every step of the way',
|
||||
icon: <GiArtificialIntelligence className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
|
||||
link: '/agents' // Add the correct link
|
||||
},
|
||||
{
|
||||
name: 'Podcasts',
|
||||
description: 'Tune in for fresh perspectives and expert advice',
|
||||
icon: <FaMicrophone className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
|
||||
link: '/podcasts' // Add the correct link
|
||||
},
|
||||
{
|
||||
name: 'Newsletters',
|
||||
description: 'Stay updated with the latest insights and tools',
|
||||
icon: <IoIosMail className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
|
||||
link: '/newsletters' // Add the correct link
|
||||
},
|
||||
{
|
||||
name: 'Bookmarks',
|
||||
description: 'Save and revisit your go-to resources anytime',
|
||||
icon: <FaBookmark className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
|
||||
link: '/bookmarks' // Add the correct link
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: 'Connect',
|
||||
list: [
|
||||
{
|
||||
name: 'Developer Connect',
|
||||
description: 'Empower developers to create and integrate seamlessly',
|
||||
icon: undefined, // No Icon
|
||||
link: '/developer-connect' // Add the correct link
|
||||
},
|
||||
{
|
||||
name: 'Community',
|
||||
description: 'Join a network of creators and innovators',
|
||||
icon: undefined, // No Icon
|
||||
link: '/community' // Add the correct link
|
||||
},
|
||||
{
|
||||
name: 'Meetups',
|
||||
description: 'Collaborate, learn, and grow at local events',
|
||||
icon: undefined, // No Icon
|
||||
link: '/meetups' // Add the correct link
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export const ResourcesDropdown: React.FC = () => {
|
||||
return (
|
||||
<div className="w-full text-white py-10 px-28">
|
||||
@ -373,142 +507,28 @@ export const ResourcesDropdown: React.FC = () => {
|
||||
<p className='text-gray-300 text-sm'>Documents, videos, communities and lot more.</p>
|
||||
</div>
|
||||
<div className='flex space-x-4'>
|
||||
<div className='w-1/4 space-y-2'>
|
||||
<h3 className='font-medium text-sm text-slate-300'>Learn</h3>
|
||||
<ul className='space-y-4'>
|
||||
<li className='flex items-center space-x-4'>
|
||||
<IoMdAnalytics className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
|
||||
<div className='group'>
|
||||
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Demo</h3>
|
||||
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Experience the power of automation-live now</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className='flex items-center space-x-4'>
|
||||
<RiProductHuntFill className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
|
||||
<div className='group'>
|
||||
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Blogs</h3>
|
||||
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Innovative insights to empower your next move</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className='flex items-center space-x-4'>
|
||||
<RiMoneyEuroBoxFill className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
|
||||
<div className='group'>
|
||||
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Webinars</h3>
|
||||
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Learn, connect, and grow with expert-led sessions</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className='flex items-center space-x-4'>
|
||||
<FaMoneyBillAlt className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
|
||||
<div className='group'>
|
||||
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Guides</h3>
|
||||
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Step-by-step tools to unlock your potential</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className='w-1/4 space-y-2'>
|
||||
<h3 className='font-medium text-sm text-slate-300'>Build</h3>
|
||||
<ul className='space-y-4'>
|
||||
<li className='flex items-center space-x-4'>
|
||||
<IoIosDocument className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
|
||||
<div className='group'>
|
||||
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>API Doc</h3>
|
||||
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Comprehensive API docs for seamless integrations</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className='flex items-center space-x-4'>
|
||||
<FaVideo className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
|
||||
<div className='group'>
|
||||
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Videos</h3>
|
||||
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Engage with interactive, on-demand video solutions</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<h3 className='font-medium text-sm text-slate-300'>Services</h3>
|
||||
<ul className='space-y-4'>
|
||||
<li className='flex items-center space-x-4'>
|
||||
<IoIosDocument className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
|
||||
<div className='group'>
|
||||
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Documentations</h3>
|
||||
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Explore detailed resources to optimize your workflows</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className='flex items-center space-x-4'>
|
||||
<FaUserPlus className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
|
||||
<div className='group'>
|
||||
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Enterprise Contact</h3>
|
||||
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Partner with us to scale your enterprise</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div className='w-1/4 space-y-2'>
|
||||
<h3 className='font-medium text-sm text-slate-300'>Resources</h3>
|
||||
<ul className='space-y-4'>
|
||||
<li className='flex items-center space-x-4'>
|
||||
<FaBook className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
|
||||
<div className='group'>
|
||||
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Books</h3>
|
||||
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Discover knowledge to inspire and empower action</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className='flex items-center space-x-4'>
|
||||
<GiArtificialIntelligence className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
|
||||
<div className='group'>
|
||||
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Agents</h3>
|
||||
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Your personalized support, every step of the way</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className='flex items-center space-x-4'>
|
||||
<FaMicrophone className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
|
||||
<div className='group'>
|
||||
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Podcasts</h3>
|
||||
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Tune in for fresh perspectives and expert advice</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className='flex items-center space-x-4'>
|
||||
<IoIosMail className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
|
||||
<div className='group'>
|
||||
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Newsletters</h3>
|
||||
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Stay updated with the latest insights and tools</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className='flex items-center space-x-4'>
|
||||
<FaBookmark className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />
|
||||
<div className='group'>
|
||||
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Bookmarks</h3>
|
||||
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Save and revisit your go-to resources anytime</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className='w-1/4 space-y-2'>
|
||||
<h3 className='font-medium text-sm text-slate-300'>Connect</h3>
|
||||
<ul className='space-y-4'>
|
||||
<li className='flex items-center space-x-4'>
|
||||
<div className='group'>
|
||||
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Developer Connect</h3>
|
||||
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Empower developers to create and integrate seamlessly</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className='flex items-center space-x-4'>
|
||||
<div className='group'>
|
||||
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Community</h3>
|
||||
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Join a network of creators and innovators</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className='flex items-center space-x-4'>
|
||||
<div className='group'>
|
||||
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Meetups</h3>
|
||||
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Collaborate, learn, and grow at local events</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
{resourceItems.map((item) => (
|
||||
<div key={item.category} className='w-1/4 space-y-2'>
|
||||
<h3 className='font-medium text-sm text-slate-300'>{item.category}</h3>
|
||||
<ul className='space-y-4'>
|
||||
{item.list.map((listItem) => (
|
||||
<li key={listItem.name} className='flex items-center space-x-4'>
|
||||
{listItem.icon && listItem.icon} {/* Only render icon if it exists */}
|
||||
<div className='group'>
|
||||
<a href={listItem.link} >
|
||||
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>
|
||||
{listItem.name}
|
||||
</h3>
|
||||
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>
|
||||
{listItem.description}
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -71,7 +71,7 @@ const Navbar: React.FC = () => {
|
||||
</li>
|
||||
|
||||
{/* Pricing */}
|
||||
<li className='flex items-center cursor-pointer'>Pricing</li>
|
||||
<a href="/pricing"><li className='flex items-center cursor-pointer'>Pricing</li></a>
|
||||
|
||||
{/* Resources Menu */}
|
||||
<li className={`flex items-center cursor-pointer relative ${activeTab === 'resources' ? 'text-violet-500' : ''}`} onClick={toggleResources}>
|
||||
|
||||
158
components/magicui/dot-pattern.tsx
Normal file
158
components/magicui/dot-pattern.tsx
Normal file
@ -0,0 +1,158 @@
|
||||
"use client";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { motion } from "motion/react";
|
||||
import React, { useEffect, useId, useRef, useState } from "react";
|
||||
|
||||
/**
|
||||
* DotPattern Component Props
|
||||
*
|
||||
* @param {number} [width=16] - The horizontal spacing between dots
|
||||
* @param {number} [height=16] - The vertical spacing between dots
|
||||
* @param {number} [x=0] - The x-offset of the entire pattern
|
||||
* @param {number} [y=0] - The y-offset of the entire pattern
|
||||
* @param {number} [cx=1] - The x-offset of individual dots
|
||||
* @param {number} [cy=1] - The y-offset of individual dots
|
||||
* @param {number} [cr=1] - The radius of each dot
|
||||
* @param {string} [className] - Additional CSS classes to apply to the SVG container
|
||||
* @param {boolean} [glow=false] - Whether dots should have a glowing animation effect
|
||||
*/
|
||||
interface DotPatternProps extends React.SVGProps<SVGSVGElement> {
|
||||
width?: number;
|
||||
height?: number;
|
||||
x?: number;
|
||||
y?: number;
|
||||
cx?: number;
|
||||
cy?: number;
|
||||
cr?: number;
|
||||
className?: string;
|
||||
glow?: boolean;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
/**
|
||||
* DotPattern Component
|
||||
*
|
||||
* A React component that creates an animated or static dot pattern background using SVG.
|
||||
* The pattern automatically adjusts to fill its container and can optionally display glowing dots.
|
||||
*
|
||||
* @component
|
||||
*
|
||||
* @see DotPatternProps for the props interface.
|
||||
*
|
||||
* @example
|
||||
* // Basic usage
|
||||
* <DotPattern />
|
||||
*
|
||||
* // With glowing effect and custom spacing
|
||||
* <DotPattern
|
||||
* width={20}
|
||||
* height={20}
|
||||
* glow={true}
|
||||
* className="opacity-50"
|
||||
* />
|
||||
*
|
||||
* @notes
|
||||
* - The component is client-side only ("use client")
|
||||
* - Automatically responds to container size changes
|
||||
* - When glow is enabled, dots will animate with random delays and durations
|
||||
* - Uses Motion for animations
|
||||
* - Dots color can be controlled via the text color utility classes
|
||||
*/
|
||||
|
||||
export function DotPattern({
|
||||
width = 16,
|
||||
height = 16,
|
||||
x = 0,
|
||||
y = 0,
|
||||
cx = 1,
|
||||
cy = 1,
|
||||
cr = 1,
|
||||
className,
|
||||
glow = false,
|
||||
...props
|
||||
}: DotPatternProps) {
|
||||
const id = useId();
|
||||
const containerRef = useRef<SVGSVGElement>(null);
|
||||
const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
|
||||
|
||||
useEffect(() => {
|
||||
const updateDimensions = () => {
|
||||
if (containerRef.current) {
|
||||
const { width, height } = containerRef.current.getBoundingClientRect();
|
||||
setDimensions({ width, height });
|
||||
}
|
||||
};
|
||||
|
||||
updateDimensions();
|
||||
window.addEventListener("resize", updateDimensions);
|
||||
return () => window.removeEventListener("resize", updateDimensions);
|
||||
}, []);
|
||||
|
||||
const dots = Array.from(
|
||||
{
|
||||
length:
|
||||
Math.ceil(dimensions.width / width) *
|
||||
Math.ceil(dimensions.height / height),
|
||||
},
|
||||
(_, i) => {
|
||||
const col = i % Math.ceil(dimensions.width / width);
|
||||
const row = Math.floor(i / Math.ceil(dimensions.width / width));
|
||||
return {
|
||||
x: col * width + cx,
|
||||
y: row * height + cy,
|
||||
delay: Math.random() * 5,
|
||||
duration: Math.random() * 3 + 2,
|
||||
};
|
||||
},
|
||||
);
|
||||
|
||||
return (
|
||||
<svg
|
||||
ref={containerRef}
|
||||
aria-hidden="true"
|
||||
className={cn(
|
||||
"pointer-events-none absolute inset-0 h-full w-full",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<defs>
|
||||
<radialGradient id={`${id}-gradient`}>
|
||||
<stop offset="0%" stopColor="currentColor" stopOpacity="1" />
|
||||
<stop offset="100%" stopColor="currentColor" stopOpacity="0" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
{dots.map((dot, index) => (
|
||||
<motion.circle
|
||||
key={`${dot.x}-${dot.y}`}
|
||||
cx={dot.x}
|
||||
cy={dot.y}
|
||||
r={cr}
|
||||
fill={glow ? `url(#${id}-gradient)` : "currentColor"}
|
||||
className="text-neutral-400/80"
|
||||
initial={glow ? { opacity: 0.4, scale: 1 } : {}}
|
||||
animate={
|
||||
glow
|
||||
? {
|
||||
opacity: [0.4, 1, 0.4],
|
||||
scale: [1, 1.5, 1],
|
||||
}
|
||||
: {}
|
||||
}
|
||||
transition={
|
||||
glow
|
||||
? {
|
||||
duration: dot.duration,
|
||||
repeat: Infinity,
|
||||
repeatType: "reverse",
|
||||
delay: dot.delay,
|
||||
ease: "easeInOut",
|
||||
}
|
||||
: {}
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user