diff --git a/app/blogs/page.tsx b/app/blogs/page.tsx new file mode 100644 index 0000000..3b29e92 --- /dev/null +++ b/app/blogs/page.tsx @@ -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: , + 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: , + 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: , + 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: + }, + { + title: "Tech Trends", + description: "Stay ahead with analysis of emerging technologies and digital transformation strategies", + icon: + }, + { + title: "Tutorials & Guides", + description: "Practical how-to articles and step-by-step guides for leveraging AI in your workflows", + icon: + }, + { + title: "Internet Culture", + description: "Exploring how technology is shaping online communities, digital experiences, and society", + icon: + } +]; + +const BlogSection = () => { + return ( +
+ + {/* Background glow effects */} + {/*
+
*/} + + + +
+ {/* Header Section */} + +
+ {/*
+ {floatingWords.map((word, index) => ( + + {word} + + ))} +
*/} + +
+ +
+ + + + {heading} + + + + {description} + +
+ + {/* Featured Posts */} + + + {/* Blog Categories */} +
+

+ Explore Topics That Matter +

+
+ {blogCategories.map((category, index) => ( + +
+ {category.icon} +
+

+ {category.title} +

+

+ {category.description} +

+ + ))} +
+
+ + {/* Newsletter Signup / CTA */} +
+
+
+

+ Stay Updated with the Latest in AI & Tech +

+

+ 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. +

+ +
+
+
+
+ +
+
+
+
+
+
+
+ ); +}; + +export default BlogSection; \ No newline at end of file diff --git a/app/demo/page.tsx b/app/demo/page.tsx new file mode 100644 index 0000000..95ab085 --- /dev/null +++ b/app/demo/page.tsx @@ -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: , + }, + { + 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: , + }, + { + 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: , + }, + { + 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: , + }, + { + 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: , + }, +]; + +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 ( +
+ + + {/* Hero Section */} +
+
+

+ {heading} +

+

+ {description} +

+
+ + +
+
+
+
+
+
+ + {/* Personalized Demo Section */} +
+
+
+

+ Personalized Demo +

+

+ 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. +

+ +
+
+
+
+ +
+
+
+
+
+
+ + {/* What to Expect Section */} +
+
+

+ What To Expect +

+

+ In our demo, you will experience the full power of Everyday's platform with features designed to transform your enterprise workflows. +

+
+ {demoExpectations.map((item, index) => ( +
+ {/* Icon with Gradient */} +
+ {item.icon} +
+ + {/* Content */} +
+

+ {item.title} +

+

{item.description}

+
+ + {/* Soft Glow Effect */} +
+
+ ))} +
+
+
+ + {/* CTA Middle Section */} +
+
+

+ Request A Demo +

+

+ Let Everyday revolutionize your business operations. Experience a demo tailored to your enterprise needs. Make AI an everyday part of your business. +

+ +
+
+ + {/* Testimonial */} +
+
+
+ ★★★★★ +
+ +

— Enterprise Client

+
+
+ + {/* Final CTA Section */} +
+
+
+
+ +
+

+ Transform Your Enterprise Today +

+

+ Join forward-thinking organizations that have revolutionized their workflows with Everyday's AI-powered platform. +

+
+ + +
+
+
+ +
+
+ ); +} \ No newline at end of file diff --git a/app/globals.css b/app/globals.css index 18b62bc..47d132c 100644 --- a/app/globals.css +++ b/app/globals.css @@ -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; + } } \ No newline at end of file diff --git a/app/pricing/page.tsx b/app/pricing/page.tsx new file mode 100644 index 0000000..8a4fa4d --- /dev/null +++ b/app/pricing/page.tsx @@ -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 ( + +
+

{title}

+

{description}

+
{/* Separator Line */} +
+ {features.map((feature, index) => ( +
+ + {feature} +
+ ))} +
+
{/* Separator Line */} +
+

For Price :

+ + Contact Us + +
+
+ + + + ); +}; + +const FAQ = ({ question, answer }) => { + const [isOpen, setIsOpen] = useState(false); + + return ( + + + +

{answer}

+ + + ); +}; + +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 ( +
+ + + {/* Hero Section */} + + + Pricing + + {" "}Plans{" "} + + + + Efficiently manage and resolve customer issues, improve satisfaction and boost your bottom line with our all-in-one customer support solution. + + + + {/* Pricing Cards */} + +
+ {pricingPlans.map((plan, index) => ( + + ))} +
+ + + {/* Features Section */} + +

Features you don't want to miss

+
+ {[ + { + title: "Secure Payments", + desc: "Ensure end-to-end security for all your transactions with industry-leading encryption.", + icon: , + gradient: "from-blue-500 to-cyan-500", + }, + { + title: "Fast Transactions", + desc: "Process payments in seconds, reducing wait times and improving efficiency.", + icon: , + gradient: "from-pink-500 to-red-500", + }, + { + title: "User-Friendly Interface", + desc: "Designed with simplicity in mind, making transactions seamless for everyone.", + icon: , + gradient: "from-green-500 to-teal-500", + }, + { + title: "Global Accessibility", + desc: "Access and send payments from anywhere in the world, instantly.", + icon: , + gradient: "from-yellow-500 to-orange-500", + }, + ].map((feature, index) => ( +
+ {/* Icon Container */} +
{feature.icon}
+ + {/* Text Content */} +
+

+ {feature.title} +

+

{feature.desc}

+
+ + {/* Soft Glow Effect */} +
+
+ ))} +
+ + + +

+ 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. +

+ {/* + Contact Us + */} + + + {/* FAQ Section */} + +
+
+

+ + Get answers to some common questions! +

+

+ We've curated answers to some of our most frequently asked questions to help you find the information you need quickly and easily. +

+
+
+ {faqs.map((faq, index) => ( + + ))} +
+
+ + +
+
+ ); +}; + +export default PricingPage; \ No newline at end of file diff --git a/app/webinars/page.tsx b/app/webinars/page.tsx new file mode 100644 index 0000000..d121b33 --- /dev/null +++ b/app/webinars/page.tsx @@ -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: , + 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: , + 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: , + 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: + }, + { + title: "On-Demand", + description: "Access our library of recorded webinars to learn at your own pace", + icon: + }, + { + title: "Getting Started", + description: "Perfect for newcomers looking to quickly understand and implement our platform", + icon: + }, + { + title: "Advanced Training", + description: "Deep dives into complex features and advanced use cases for power users", + icon: + } +]; + +const WebinarSection = () => { + return ( +
+ + {/* Background glow effects */} +
+
+ +
+ {/* Header Section */} +
+ +
+ +
+ + + + {heading} + + + + {description} + + + + + Register For Upcoming Webinars + + +
+ + {/* Webinar Types Section */} +
+

+ Live and On-Demand Webinars +

+

+ 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. +

+ +
+ {webinarCategories.map((category, index) => ( + +
+ {category.icon} +
+

+ {category.title} +

+

+ {category.description} +

+ + ))} +
+
+ + {/* Featured Webinars */} + + + {/* CTA Section */} +
+

+ Register For Upcoming Webinars +

+

+ Looking to dive deeper into the world of AI-driven enterprise solutions? Register for our upcoming webinars and join the conversation. +

+ + View All Webinars + +
+ + {/* Newsletter Signup / CTA */} +
+
+
+

+ Stay ahead in the rapidly evolving world of business with Everyday webinars. +

+

+ Uncover the power of AI and transform your business intelligence today. Stay up to date with our latest tech updates. +

+
+ + +
+
+
+
+
+ +
+
+
+
+
+
+
+ ); +}; + +export default WebinarSection; \ No newline at end of file diff --git a/components/Hero/hero2.tsx b/components/Hero/hero2.tsx index 64020b6..f744b60 100644 --- a/components/Hero/hero2.tsx +++ b/components/Hero/hero2.tsx @@ -110,7 +110,7 @@ const HeroCarousel = () => {
{/* Navigation Buttons */} - + */} {/* Slide Indicators */}
diff --git a/components/Navbar/dropdowns.tsx b/components/Navbar/dropdowns.tsx index 9e8dab4..a1d1c5d 100644 --- a/components/Navbar/dropdowns.tsx +++ b/components/Navbar/dropdowns.tsx @@ -248,7 +248,7 @@ const solutionItems: SolutionItem[] = [ icon: , 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: , + link: '/demo' // Add the correct link + }, + { + name: 'Blogs', + description: 'Innovative insights to empower your next move', + icon: , + link: '/blogs' // Add the correct link + }, + { + name: 'Webinars', + description: 'Learn, connect, and grow with expert-led sessions', + icon: , + link: '/webinars' // Add the correct link + }, + { + name: 'Guides', + description: 'Step-by-step tools to unlock your potential', + icon: , + link: '/guides' // Add the correct link + }, + ], + }, + { + category: 'Build', + list: [ + { + name: 'API Doc', + description: 'Comprehensive API docs for seamless integrations', + icon: , + link: '/api-doc' // Add the correct link + }, + { + name: 'Videos', + description: 'Engage with interactive, on-demand video solutions', + icon: , + link: '/videos' // Add the correct link + }, + ], + }, + { + category: 'Services', + list: [ + { + name: 'Documentations', + description: 'Explore detailed resources to optimize your workflows', + icon: , + 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: , + link: '/books' // Add the correct link + }, + { + name: 'Agents', + description: 'Your personalized support, every step of the way', + icon: , + link: '/agents' // Add the correct link + }, + { + name: 'Podcasts', + description: 'Tune in for fresh perspectives and expert advice', + icon: , + link: '/podcasts' // Add the correct link + }, + { + name: 'Newsletters', + description: 'Stay updated with the latest insights and tools', + icon: , + link: '/newsletters' // Add the correct link + }, + { + name: 'Bookmarks', + description: 'Save and revisit your go-to resources anytime', + icon: , + 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 (
@@ -373,142 +507,28 @@ export const ResourcesDropdown: React.FC = () => {

Documents, videos, communities and lot more.

-
-

Learn

-
    -
  • - -
    -

    Demo

    -

    Experience the power of automation-live now

    -
    -
    • -
  • - -
    -

    Blogs

    -

    Innovative insights to empower your next move

    -
    -
    • -
  • - -
    -

    Webinars

    -

    Learn, connect, and grow with expert-led sessions

    -
    -
    • -
  • - -
    -

    Guides

    -

    Step-by-step tools to unlock your potential

    -
    -
    • - -
-
- -
-

Build

-
    -
  • - -
    -

    API Doc

    -

    Comprehensive API docs for seamless integrations

    -
    -
    • -
  • - -
    -

    Videos

    -

    Engage with interactive, on-demand video solutions

    -
    -
    • -
-

Services

-
    -
  • - -
    -

    Documentations

    -

    Explore detailed resources to optimize your workflows

    -
    -
    • -
  • - -
    -

    Enterprise Contact

    -

    Partner with us to scale your enterprise

    -
    -
    • - -
-
-
-

Resources

-
    -
  • - -
    -

    Books

    -

    Discover knowledge to inspire and empower action

    -
    -
    • -
  • - -
    -

    Agents

    -

    Your personalized support, every step of the way

    -
    -
    • -
  • - -
    -

    Podcasts

    -

    Tune in for fresh perspectives and expert advice

    -
    -
    • -
  • - -
    -

    Newsletters

    -

    Stay updated with the latest insights and tools

    -
    -
    • -
  • - -
    -

    Bookmarks

    -

    Save and revisit your go-to resources anytime

    -
    -
    • -
-
-
-

Connect

-
    -
  • -
    -

    Developer Connect

    -

    Empower developers to create and integrate seamlessly

    -
    -
    • -
  • -
    -

    Community

    -

    Join a network of creators and innovators

    -
    -
    • -
  • -
    -

    Meetups

    -

    Collaborate, learn, and grow at local events

    -
    -
    • - -
-
+ {resourceItems.map((item) => ( +
+

{item.category}

+ +
+ ))}
diff --git a/components/Navbar/navbar.tsx b/components/Navbar/navbar.tsx index bdbf703..54b13f7 100644 --- a/components/Navbar/navbar.tsx +++ b/components/Navbar/navbar.tsx @@ -71,7 +71,7 @@ const Navbar: React.FC = () => { {/* Pricing */} -
  • Pricing
    • +
  • Pricing
    •  {/* Resources Menu */}
  • diff --git a/components/magicui/dot-pattern.tsx b/components/magicui/dot-pattern.tsx new file mode 100644 index 0000000..f115a13 --- /dev/null +++ b/components/magicui/dot-pattern.tsx @@ -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 { + 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 + * + * + * // With glowing effect and custom spacing + * + * + * @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(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 ( + + ); +}