nakshatra/everydayserieswebsite
1
0
Fork 1
mirror of https://github.com/codebox283/everydayserieswebsite.git synced 2025-06-19 20:10:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
codebox283 2025-02-16 19:49:16 +05:30
parent 08e6361c98
commit 4fa54670a9
46 changed files with 5302 additions and 228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
app/click-video/layout.tsx Normal file
View File

@ -0,0 +1,45 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import { Poppins, Arimo, Outfit, Roboto } from 'next/font/google';
import "../globals.css";
const poppins = Poppins({
weight: ['300', '400', '500', '600', '700'],
subsets: ['latin'],
});
const arimo = Arimo({
weight: ['400', '500', '600', '700'],
subsets: ['latin'],
});
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={`${poppins.className} antialiased`}
>
{children}
</body>
</html>
);
}

171
app/click-video/page.tsx Normal file
View File

@ -0,0 +1,171 @@
"use client";
import React from 'react';
import Navbar from '@/components/Navbar/navbar';
import Features from "@/components/Features/features";
import Footer from "@/components/footer";
import { HoverEffect } from '@/components/ui/card-hover-effect';
import { Marquee } from '@/components/ui/marquee';
import { TextGenerateEffect } from "@/components/ui/text-generate-effect";
import { FaListUl, FaSearch, FaArrowsAlt, FaPlug, FaPaste, FaRegFileAlt } from 'react-icons/fa';
const heading = "Click Video - Interactive Videos with Built-in Q&A functionality for increased engagement";
const description = "Create engaging videos for any task, enhanced with integrated question-and-answer elements for increased interaction, ensuring synchronization between roadmaps, customer feedback, and sprint schedules for smooth delivery.";
const image = "https://res.cloudinary.com/zapier-media/video/upload/q_auto:best/f_auto/v1726860625/Homepage%20%E2%80%94%20Sept%202024/sc03_HP_240917_Power-with-AI_v02_supxar.mp4"
const features = [
{
head: "Connect the apps you already love",
desc: "Everyday supports over 100 apps, so you can tame the chaos and turn your tools into processes all in one place.",
button: "Explore all apps",
link: "#"
},
{
head: "Start quickly with these pre-built templates from other Everyday users",
desc: "Automate your tasks in just a few minutes to reclaim countless hours of your time.",
button: "Explore more",
link: "#"
}
]
const images = [
"https://www.zarla.com/images/starbucks-logo-2400x2400-20220513.png?crop=1:1,smart&width=150&dpr=2",
"https://www.zarla.com/images/apple-logo-2400x2400-20220512-3.png?crop=1:1,smart&width=150&dpr=2",
"https://www.zarla.com/images/google-logo-2400x2400-20220519.png?crop=1:1,smart&width=150&dpr=2",
"https://www.zarla.com/images/mercedes-benz-logo-2400x2400-20220513-2.png?crop=1:1,smart&width=150&dpr=2",
"https://www.zarla.com/images/walmart-logo-2400x2400-20223105.png?crop=1:1,smart&width=150&dpr=2",
"https://www.zarla.com/images/pepsi-logo-2400x2400-20220513-1.png?crop=1:1,smart&width=150&dpr=2",
];
const contents = [
{
title: "Create engaging content",
description:
"Within Everyday, your roadmaps, customer feedback, and sprint schedules interconnect, ensuring seamless synchrony. With relevant data at their fingertips, teams can focus on delivering products that customers adore, faster.",
link: "https://stripe.com",
icon: FaListUl, // Add icon here
},
{
title: "Questions and Answers",
description:
"Embedded Q&A related to your video at any time frame. Just pause and add a question be it a multiple choice question to keep viewers engaged or a feedback form - it's totally upto you.",
link: "https://netflix.com",
icon: FaSearch, // Add icon here
},
{
title: "Embedded Code",
description:
"An embedded code is generated with the question so users can add it in any web page or application. Get your answers from any platform of your liking and play anywhere.",
link: "https://enterprise.everydayseries.com/",
icon: FaArrowsAlt, // Add icon here
},
];
const featuresData = [
{
title: "Create Series using Drag and Drop",
description: "Organize, connect, and track your goals using the GoalGrid. Stay aligned and in sync with your strategic objectives.",
imgSrc: "https://res.cloudinary.com/dezd109fz/image/upload/v1737595526/Screenshot_2025-01-23_065418_xo3ezn.png",
},
{
title: "Built for Enterprises",
description: "Everyday platform ensures enterprise-grade deployment, security, and data governance, all with the simplicity of one centrally managed platform.",
imgSrc: "https://res.cloudinary.com/dezd109fz/image/upload/v1737595526/Screenshot_2025-01-23_065356_gbkov8.png",
},
{
title: "Integrate your Workflows",
description: "Connect Everyday to your existing tools, integrate important business processes, and build more powerful applications.",
imgSrc: "https://res.cloudinary.com/dezd109fz/image/upload/v1737595526/Screenshot_2025-01-23_065455_whfipm.png",
},
];
const words = `“In the new era of technology we are looking to the future with a certain pride for our company and business. We consider all the drivers of two of main financial change.”`
export default function Series() {
return (
<div className="p-6 bg-[#080E12] dark text-white">
<Navbar />
<div className='h-screen py-10 px-24 flex flex-col items-start justify-end'>
<h1 className="text-8xl mb-10">{heading}</h1>
<h2 className='text-4xl'>{description}</h2>
</div>
<div className='p-40'><video src={image} autoPlay className="w-ful border rounded-2xl object" /></div>
<div className="flex flex-col text-white h-fit py-20 space-y-20">
{features.map((item, index) => (
<div key={index} className="p-6 text-center space-y-10 h-fit">
{/* Feature Heading and Description */}
<h2 className="text-5xl mb-2 w-2/3 mx-auto">{item.head}</h2>
<p className="w-2/3 mx-auto -mt-3">{item.desc}</p>
<a
href={item.link}
className="bg-violet-500 hover:bg-violet-300 font-medium px-4 py-2 rounded-lg mt-4 inline-block"
>
{item.button}
</a>
{/* Conditional Rendering for Marquee After First Feature */}
{index === 0 && (
<>
<Marquee className="[--duration:60s] w-[90%] mx-auto mt-20">
<div className="flex space-x-10">
{images.map((img, index) => (
<img
key={index}
src={img}
alt={`Avatar ${index + 1}`}
className="h-24 w-24 border rounded-lg object-cover"
/>
))}
</div>
</Marquee>
<Marquee reverse className="[--duration:60s] w-[90%] mx-auto">
<div className="flex space-x-10">
{images.map((img, index) => (
<img
key={index}
src={img}
alt={`Avatar ${index + 1}`}
className="h-24 w-24 border rounded-lg object-cover"
/>
))}
</div>
</Marquee>
{/* Add gradient effects for marquee */}
<div className="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-l from-transparent to-[#080E12]"></div>
<div className="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-r from-transparent to-[#080E12]"></div>
</>
)}
{/* Conditional Rendering for GIF After Second Feature */}
{index === 1 && (
<div className="mt-20 flex justify-center">
<img
src="https://cdn.dribbble.com/users/695342/screenshots/3782293/dashboard-gif-ok.gif"
alt="Workflow GIF"
className="rounded-lg shadow-lg w-[60%] h-1/2 mx-auto"
/>
</div>
)}
</div>
))}
</div>
<div className="max-w-7xl mx-auto px-8">
<HoverEffect items={contents} />
</div>
<Features featuresData={featuresData} />
<div className="bg-white rounded-lg shadow-md px-10 py-20 mx-10 my-20">
<div className="text-yellow-500 text-center text-2xl mb-10">
★★★★★
</div>
{/* <p className="text-gray-700 leading-relaxed text-4xl">
<strong className="font-semibold">Magic Button:</strong> Simply press the magic button to instantly generate your series automatically.
</p> */}
<TextGenerateEffect words={words} />
</div>
<Footer />
</div>
);
}

76
app/globals.css
View File

@ -2,20 +2,76 @@
@tailwind components;
@tailwind utilities;
:root {
--background: #ffffff;
--foreground: #171717;
body {
font-family: Arial, Helvetica, sans-serif;
}
@media (prefers-color-scheme: dark) {
@layer base {
:root {
--background: #0a0a0a;
--foreground: #ededed;
--background: 0 0% 100%;
--foreground: 0 0% 3.9%;
--card: 0 0% 100%;
--card-foreground: 0 0% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 3.9%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96.1%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 96.1%;
--muted-foreground: 0 0% 45.1%;
--accent: 0 0% 96.1%;
--accent-foreground: 0 0% 9%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 89.8%;
--input: 0 0% 89.8%;
--ring: 0 0% 3.9%;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.5rem;
}
.dark {
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;
--card: 0 0% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 0 0% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 0 0% 9%;
--secondary: 0 0% 14.9%;
--secondary-foreground: 0 0% 98%;
--muted: 0 0% 14.9%;
--muted-foreground: 0 0% 63.9%;
--accent: 0 0% 14.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 14.9%;
--input: 0 0% 14.9%;
--ring: 0 0% 83.1%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
}
}
body {
color: var(--foreground);
background: var(--background);
font-family: Arial, Helvetica, sans-serif;
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
::selection {
background-color: purple;
color: white;
}

45
app/integrations/layout.tsx Normal file
View File

@ -0,0 +1,45 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import { Poppins, Arimo, Outfit, Roboto } from 'next/font/google';
import "../globals.css";
const poppins = Poppins({
weight: ['300', '400', '500', '600', '700'],
subsets: ['latin'],
});
const arimo = Arimo({
weight: ['400', '500', '600', '700'],
subsets: ['latin'],
});
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={`${poppins.className} antialiased`}
>
{children}
</body>
</html>
);
}

327
app/integrations/page.tsx Normal file
View File

@ -0,0 +1,327 @@
"use client";
import React from 'react';
import Navbar from '@/components/Navbar/navbar';
import Hero from '@/components/Hero/hero';
import Features from "@/components/Features/features";
import Footer from "@/components/footer";
import { HoverEffect } from '@/components/ui/card-hover-effect';
import { Marquee } from '@/components/ui/marquee';
import { TextGenerateEffect } from "@/components/ui/text-generate-effect";
import { FaListUl, FaSearch, FaArrowsAlt, FaPlug, FaPaste, FaRegFileAlt } from 'react-icons/fa';
import { OrbitingCircles } from '@/components/magicui/orbiting-circles';
const heading = "Integrations - Connect Your Workflows with Everyday Integrations";
const description = "Seamlessly unite all your tools and applications with Everyday. Our robust integration capabilities empower you to create an interconnected ecosystem, streamlining your workflows and improving productivity.";
const image = "https://res.cloudinary.com/zapier-media/video/upload/q_auto:best/f_auto/v1726860625/Homepage%20%E2%80%94%20Sept%202024/sc03_HP_240917_Power-with-AI_v02_supxar.mp4"
const features = [
{
head: "Connect the apps you already love",
desc: "Everyday supports over 100 apps, so you can tame the chaos and turn your tools into processes all in one place.",
button: "Explore all apps",
link: "#"
},
{
head: "Start quickly with these pre-built templates from other Everyday users",
desc: "Automate your tasks in just a few minutes to reclaim countless hours of your time.",
button: "Explore more",
link: "#"
}
]
const images = [
"https://www.zarla.com/images/starbucks-logo-2400x2400-20220513.png?crop=1:1,smart&width=150&dpr=2",
"https://www.zarla.com/images/apple-logo-2400x2400-20220512-3.png?crop=1:1,smart&width=150&dpr=2",
"https://www.zarla.com/images/google-logo-2400x2400-20220519.png?crop=1:1,smart&width=150&dpr=2",
"https://www.zarla.com/images/mercedes-benz-logo-2400x2400-20220513-2.png?crop=1:1,smart&width=150&dpr=2",
"https://www.zarla.com/images/walmart-logo-2400x2400-20223105.png?crop=1:1,smart&width=150&dpr=2",
"https://www.zarla.com/images/pepsi-logo-2400x2400-20220513-1.png?crop=1:1,smart&width=150&dpr=2",
];
const contents = [
{
title: "Centralize Your Data",
description:
"No more switching between apps. Gather all your data in one place, simplifying your processes and ensuring you have a single, reliable source of truth.",
link: "https://stripe.com",
icon: FaListUl, // Add icon here
},
{
title: "Automate Your Processes",
description:
"Maximize efficiency by automating actions between your integrated apps. Transfer data, trigger actions, and manage notifications effortlessly, allowing you to focus on what matters most.",
link: "https://netflix.com",
icon: FaSearch, // Add icon here
},
{
title: "Improve Collaboration",
description:
"By integrating your favorite communication tools, you can enhance teamwork and foster a more collaborative environment. Share updates, delegate tasks, and keep everyone in the loop, all within Everyday.",
link: "https://enterprise.everydayseries.com/",
icon: FaArrowsAlt, // Add icon here
},
];
const featuresData = [
{
title: "Create Series using Drag and Drop",
description: "Organize, connect, and track your goals using the GoalGrid. Stay aligned and in sync with your strategic objectives.",
imgSrc: "https://res.cloudinary.com/dezd109fz/image/upload/v1737595526/Screenshot_2025-01-23_065418_xo3ezn.png",
},
{
title: "Built for Enterprises",
description: "Everyday platform ensures enterprise-grade deployment, security, and data governance, all with the simplicity of one centrally managed platform.",
imgSrc: "https://res.cloudinary.com/dezd109fz/image/upload/v1737595526/Screenshot_2025-01-23_065356_gbkov8.png",
},
{
title: "Integrate your Workflows",
description: "Connect Everyday to your existing tools, integrate important business processes, and build more powerful applications.",
imgSrc: "https://res.cloudinary.com/dezd109fz/image/upload/v1737595526/Screenshot_2025-01-23_065455_whfipm.png",
},
];
const words = `“Need more? Our integration capabilities are constantly expanding, with new additions regularly introduced to our platform.”`
export default function Integrations() {
return (
<div className="p-6 bg-[#080E12] dark text-white">
<Navbar />
<Hero />
<div className='h-screen py-10 px-24 flex flex-col items-start justify-end'>
<h1 className="text-8xl mb-10">{heading}</h1>
<h2 className='text-4xl'>{description}</h2>
</div>
<div className='flex w-full my-40'>
<div className="relative flex h-[550px] w-1/2 flex-col items-center justify-center overflow-hidden">
<OrbitingCircles iconSize={50} radius={240}>
<Icons.whatsapp />
<Icons.notion />
<Icons.openai />
<Icons.googleDrive />
<Icons.whatsapp />
</OrbitingCircles>
<OrbitingCircles iconSize={40} radius={160} reverse speed={2}>
<Icons.whatsapp />
<Icons.notion />
<Icons.openai />
<Icons.googleDrive />
</OrbitingCircles>
</div>
<div className='flex flex-col w-1/2 justify-center space-y-10'>
<h1 className='text-7xl font-medium tracking-wide'>Bring Your Tools Together</h1>
<p className='text-xl'>With Everyday, you can easily connect and synchronize data from thousands of applications, creating a comprehensive and efficient workflow tailored to your business needs.</p>
</div>
</div>
<div className="flex flex-col text-white h-fit py-20 space-y-40">
{features.map((item, index) => (
<div key={index} className="p-6 text-center space-y-10 h-fit">
{/* Feature Heading and Description */}
<h2 className="text-5xl mb-2 w-2/3 mx-auto">{item.head}</h2>
<p className="w-2/3 mx-auto -mt-3">{item.desc}</p>
<a
href={item.link}
className="bg-violet-500 hover:bg-violet-300 font-medium px-4 py-2 rounded-lg mt-4 inline-block"
>
{item.button}
</a>
{/* Conditional Rendering for Marquee After First Feature */}
{index === 0 && (
<>
<Marquee className="[--duration:60s] w-[90%] mx-auto mt-20">
<div className="flex space-x-10">
{images.map((img, index) => (
<img
key={index}
src={img}
alt={`Avatar ${index + 1}`}
className="h-24 w-24 border rounded-lg object-cover"
/>
))}
</div>
</Marquee>
<Marquee reverse className="[--duration:60s] w-[90%] mx-auto">
<div className="flex space-x-10">
{images.map((img, index) => (
<img
key={index}
src={img}
alt={`Avatar ${index + 1}`}
className="h-24 w-24 border rounded-lg object-cover"
/>
))}
</div>
</Marquee>
{/* Add gradient effects for marquee */}
<div className="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-l from-transparent to-[#080E12]"></div>
<div className="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-r from-transparent to-[#080E12]"></div>
</>
)}
{/* Conditional Rendering for GIF After Second Feature */}
{index === 1 && (
<div className="mt-20 flex justify-center">
<img
src="https://cdn.dribbble.com/users/695342/screenshots/3782293/dashboard-gif-ok.gif"
alt="Workflow GIF"
className="rounded-lg shadow-lg w-[60%] h-1/2 mx-auto"
/>
</div>
)}
</div>
))}
</div>
<div className="max-w-7xl mx-auto px-8 my-20">
<HoverEffect items={contents} />
</div>
<Features featuresData={featuresData} />
<div className="bg-white rounded-lg shadow-md px-10 py-20 mx-10 my-20">
<div className="text-yellow-500 text-center text-2xl mb-10">
★★★★★
</div>
{/* <p className="text-gray-700 leading-relaxed text-4xl">
<strong className="font-semibold">Magic Button:</strong> Simply press the magic button to instantly generate your series automatically.
</p> */}
<TextGenerateEffect words={words} />
</div>
<Footer />
</div>
);
}
const Icons = {
gitHub: () => (
<svg width="100" height="100" viewBox="0 0 438.549 438.549">
<path
fill="currentColor"
d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
/>
</svg>
),
notion: () => (
<svg
width="100"
height="100"
viewBox="0 0 100 100"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z"
fill="#ffffff"
/>
<path
d="M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z"
fill="#000000"
fillRule="evenodd"
clipRule="evenodd"
/>
</svg>
),
openai: () => (
<svg
width="100"
height="100"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
className="fill-black dark:fill-white"
>
<path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
</svg>
),
googleDrive: () => (
<svg
width="100"
height="100"
viewBox="0 0 87.3 78"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"
fill="#0066da"
/>
<path
d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z"
fill="#00ac47"
/>
<path
d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
fill="#ea4335"
/>
<path
d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"
fill="#00832d"
/>
<path
d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"
fill="#2684fc"
/>
<path
d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
fill="#ffba00"
/>
</svg>
),
whatsapp: () => (
<svg
width="100"
height="100"
viewBox="0 0 175.216 175.552"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<linearGradient
id="b"
x1="85.915"
x2="86.535"
y1="32.567"
y2="137.092"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stopColor="#57d163" />
<stop offset="1" stopColor="#23b33a" />
</linearGradient>
<filter
id="a"
width="1.115"
height="1.114"
x="-.057"
y="-.057"
colorInterpolationFilters="sRGB"
>
<feGaussianBlur stdDeviation="3.531" />
</filter>
</defs>
<path
d="m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0"
fill="#b3b3b3"
filter="url(#a)"
/>
<path
d="m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z"
fill="#ffffff"
/>
<path
d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z"
fill="url(#linearGradient1780)"
/>
<path
d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z"
fill="url(#b)"
/>
<path
d="M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647"
fill="#ffffff"
fillRule="evenodd"
/>
</svg>
),
};

13
app/layout.tsx
View File

@ -1,7 +1,18 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import { Poppins, Arimo, Outfit, Roboto } from 'next/font/google';
import "./globals.css";
const poppins = Poppins({
weight: ['300', '400', '500', '600', '700'],
subsets: ['latin'],
});
const arimo = Arimo({
weight: ['400', '500', '600', '700'],
subsets: ['latin'],
});
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
@ -25,7 +36,7 @@ export default function RootLayout({
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
className={`${poppins.className} antialiased`}
>
{children}
</body>

123
app/page.tsx
View File

@ -1,101 +1,36 @@
import { Partners } from "@/components/Companies/partners";
import DashboardView from "@/components/dashboard-view";
import Features from "@/components/Features/features";
import { BentoFeatures } from "@/components/Features/features-bento";
import ClickableFeatures from "@/components/Features/features-clickable";
import Footer from "@/components/footer";
import Hero from "@/components/Hero/hero";
import HeroCarousal from "@/components/Hero/hero2";
import Navbar from "@/components/Navbar/navbar";
import HowItWorks from "@/components/How/how";
import WhyChooseUs from "@/components/why";
import SampleAgents from "@/components/Agents/sample-agents";
import BusinessVerticals from "@/components/Agents/business-verticals";
import { Newsletter } from "@/components/Newsletter/newsletter";
import Image from "next/image";
export default function Home() {
return (
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
<main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
<Image
className="dark:invert"
src="/next.svg"
alt="Next.js logo"
width={180}
height={38}
priority
/>
<ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
<li className="mb-2">
Get started by editing{" "}
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
app/page.tsx
</code>
.
</li>
<li>Save and see your changes instantly.</li>
</ol>
<div className="flex gap-4 items-center flex-col sm:flex-row">
<a
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
className="dark:invert"
src="/vercel.svg"
alt="Vercel logomark"
width={20}
height={20}
/>
Deploy now
</a>
<a
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Read our docs
</a>
</div>
</main>
<footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/file.svg"
alt="File icon"
width={16}
height={16}
/>
Learn
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/window.svg"
alt="Window icon"
width={16}
height={16}
/>
Examples
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/globe.svg"
alt="Globe icon"
width={16}
height={16}
/>
Go to nextjs.org →
</a>
</footer>
<div className="bg-[#080E12] dark">
<Navbar />
<HeroCarousal />
{/* <Hero />
<DashboardView /> */}
<BentoFeatures />
<Features />
<HowItWorks />
<ClickableFeatures />
<WhyChooseUs />
<SampleAgents />
<BusinessVerticals />
<Partners />
<Newsletter />
<Footer />
</div>
);
}

45
app/series/layout.tsx Normal file
View File

@ -0,0 +1,45 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import { Poppins, Arimo, Outfit, Roboto } from 'next/font/google';
import "../globals.css";
const poppins = Poppins({
weight: ['300', '400', '500', '600', '700'],
subsets: ['latin'],
});
const arimo = Arimo({
weight: ['400', '500', '600', '700'],
subsets: ['latin'],
});
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={`${poppins.className} antialiased`}
>
{children}
</body>
</html>
);
}

193
app/series/page.tsx Normal file
View File

@ -0,0 +1,193 @@
"use client";
import React from 'react';
import Navbar from '@/components/Navbar/navbar';
import Features from "@/components/Features/features";
import Footer from "@/components/footer";
import { HoverEffect } from '@/components/ui/card-hover-effect';
import { Marquee } from '@/components/ui/marquee';
import { TextGenerateEffect } from "@/components/ui/text-generate-effect";
import { FaListUl, FaSearch, FaArrowsAlt, FaPlug, FaPaste, FaRegFileAlt } from 'react-icons/fa';
const heading = "Series - Create awesome workflows and connect them to AI without a single line of code"
const description = "Help in defining, managing, and improving processes. can make any kind of flow"
const image = "https://res.cloudinary.com/zapier-media/video/upload/q_auto:best/f_auto/v1726860625/Homepage%20%E2%80%94%20Sept%202024/sc03_HP_240917_Power-with-AI_v02_supxar.mp4"
const features = [
{
head: "Connect the apps you already love",
desc: "Everyday supports over 100 apps, so you can tame the chaos and turn your tools into processes all in one place.",
button: "Explore all apps",
link: "#"
},
{
head: "Start quickly with these pre-built templates from other Everyday users",
desc: "Automate your tasks in just a few minutes to reclaim countless hours of your time.",
button: "Explore more",
link: "#"
}
]
const images = [
"https://www.zarla.com/images/starbucks-logo-2400x2400-20220513.png?crop=1:1,smart&width=150&dpr=2",
"https://www.zarla.com/images/apple-logo-2400x2400-20220512-3.png?crop=1:1,smart&width=150&dpr=2",
"https://www.zarla.com/images/google-logo-2400x2400-20220519.png?crop=1:1,smart&width=150&dpr=2",
"https://www.zarla.com/images/mercedes-benz-logo-2400x2400-20220513-2.png?crop=1:1,smart&width=150&dpr=2",
"https://www.zarla.com/images/walmart-logo-2400x2400-20223105.png?crop=1:1,smart&width=150&dpr=2",
"https://www.zarla.com/images/pepsi-logo-2400x2400-20220513-1.png?crop=1:1,smart&width=150&dpr=2",
];
const contents = [
{
title: "List",
description:
"With our drag and drop feature, anyone in your enterprise can build AI products effortlessly. Make AI an integral part of your business operations, irrespective of technical expertise.",
link: "https://stripe.com",
icon: FaListUl, // Add icon here
},
{
title: "Search and Discovery",
description:
"Users can search for series based on keywords, categories, or tags making it way easier to manage all your creations and looking for them is not a hassle at all.",
link: "https://netflix.com",
icon: FaSearch, // Add icon here
},
{
title: "Drag and drop",
description:
"Certainly! “Drag and drop” refers to a user interface interaction where a person can click on an item, drag it to a different location, and then release it to drop it there. This action is commonly used in various applications and websites to allow users to rearrange or manipulate content more intuitively.",
link: "https://enterprise.everydayseries.com/",
icon: FaArrowsAlt, // Add icon here
},
{
title: "Integration",
description:
"User can integrate own apis. When we talk about users integrating their own APIs, we’re referring to the ability for users to incorporate their own custom Application Programming Interfaces (APIs) into a software application or system.",
link: "https://meta.com",
icon: FaPlug, // Add icon here
},
{
title: "Copy and Paste",
description:
"Users have the capability to duplicate the flow or item and then paste it elsewhere within the system. No need to create the same thing twice",
link: "https://amazon.com",
icon: FaPaste, // Add icon here
},
{
title: "Template",
description:
"User can save any flow as template and can reuse it later. Don’t be limited by your series. this feature enables users to save a sequence of actions or steps as a template for future use.",
link: "https://microsoft.com",
icon: FaRegFileAlt, // Add icon here
},
// Add more features as needed
];
const featuresData = [
{
title: "Create Series using Drag and Drop",
description: "Organize, connect, and track your goals using the GoalGrid. Stay aligned and in sync with your strategic objectives.",
imgSrc: "https://res.cloudinary.com/dezd109fz/image/upload/v1737595526/Screenshot_2025-01-23_065418_xo3ezn.png",
},
{
title: "Built for Enterprises",
description: "Everyday platform ensures enterprise-grade deployment, security, and data governance, all with the simplicity of one centrally managed platform.",
imgSrc: "https://res.cloudinary.com/dezd109fz/image/upload/v1737595526/Screenshot_2025-01-23_065356_gbkov8.png",
},
{
title: "Integrate your Workflows",
description: "Connect Everyday to your existing tools, integrate important business processes, and build more powerful applications.",
imgSrc: "https://res.cloudinary.com/dezd109fz/image/upload/v1737595526/Screenshot_2025-01-23_065455_whfipm.png",
},
];
const words = `This features allows even non tech guys to figure out the platform and create awesome workflows. Now that's mind-blowing.`
export default function Series() {
return (
<div className="p-6 bg-[#080E12] dark text-white">
<Navbar />
<div className='h-screen py-10 px-24 flex flex-col items-start justify-end'>
<h1 className="text-8xl mb-10">{heading}</h1>
<h2 className='text-4xl'>{description}</h2>
</div>
<div className='p-40'><video src={image} autoPlay className="w-ful border rounded-2xl object" /></div>
<div className="flex flex-col text-white h-fit py-20 space-y-20">
{features.map((item, index) => (
<div key={index} className="p-6 text-center space-y-10 h-fit">
{/* Feature Heading and Description */}
<h2 className="text-5xl mb-2 w-2/3 mx-auto">{item.head}</h2>
<p className="w-2/3 mx-auto -mt-3">{item.desc}</p>
<a
href={item.link}
className="bg-violet-500 hover:bg-violet-300 font-medium px-4 py-2 rounded-lg mt-4 inline-block"
>
{item.button}
</a>
{/* Conditional Rendering for Marquee After First Feature */}
{index === 0 && (
<>
<Marquee className="[--duration:60s] w-[90%] mx-auto mt-20">
<div className="flex space-x-10">
{images.map((img, index) => (
<img
key={index}
src={img}
alt={`Avatar ${index + 1}`}
className="h-24 w-24 border rounded-lg object-cover"
/>
))}
</div>
</Marquee>
<Marquee reverse className="[--duration:60s] w-[90%] mx-auto">
<div className="flex space-x-10">
{images.map((img, index) => (
<img
key={index}
src={img}
alt={`Avatar ${index + 1}`}
className="h-24 w-24 border rounded-lg object-cover"
/>
))}
</div>
</Marquee>
{/* Add gradient effects for marquee */}
<div className="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-l from-transparent to-[#080E12]"></div>
<div className="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-r from-transparent to-[#080E12]"></div>
</>
)}
{/* Conditional Rendering for GIF After Second Feature */}
{index === 1 && (
<div className="mt-20 flex justify-center">
<img
src="https://cdn.dribbble.com/users/695342/screenshots/3782293/dashboard-gif-ok.gif"
alt="Workflow GIF"
className="rounded-lg shadow-lg w-[60%] h-1/2 mx-auto"
/>
</div>
)}
</div>
))}
</div>
<div className="max-w-7xl mx-auto px-8">
<HoverEffect items={contents} />
</div>
<Features featuresData={featuresData} />
<div className="bg-white rounded-lg shadow-md px-10 py-20 mx-10 my-20">
<div className="text-yellow-500 text-center text-2xl mb-10">
★★★★★
</div>
<p className="text-gray-700 leading-relaxed text-4xl">
<strong className="font-semibold">Magic Button:</strong> Simply press the magic button to instantly generate your series automatically.
</p>
<TextGenerateEffect words={words} />
</div>
<Footer />
</div>
);
}

45
app/template/layout.tsx Normal file
View File

@ -0,0 +1,45 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import { Poppins, Arimo, Outfit, Roboto } from 'next/font/google';
import "../globals.css";
const poppins = Poppins({
weight: ['300', '400', '500', '600', '700'],
subsets: ['latin'],
});
const arimo = Arimo({
weight: ['400', '500', '600', '700'],
subsets: ['latin'],
});
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={`${poppins.className} antialiased`}
>
{children}
</body>
</html>
);
}

199
app/template/page.tsx Normal file
View File

@ -0,0 +1,199 @@
"use client";
import React from 'react';
import Navbar from '@/components/Navbar/navbar';
import Features from "@/components/Features/features";
import Footer from "@/components/footer";
import { HoverEffect } from '@/components/ui/card-hover-effect';
import { Marquee } from '@/components/ui/marquee';
import { FaListUl, FaSearch, FaArrowsAlt, FaPlug, FaPaste, FaRegFileAlt } from 'react-icons/fa';
import { TextGenerateEffect } from '@/components/ui/text-generate-effect';
const heading = "Templates - Predesigned Workflows to Streamline Processes and Connect with AI Effortlessly"
const description = "Simplify process management with customizable templates that help automate tasks, improve efficiency, and unlock AI-powered innovations for any type of workflow."
const image = "https://res.cloudinary.com/zapier-media/video/upload/q_auto:best/f_auto/v1726860625/Homepage%20%E2%80%94%20Sept%202024/sc03_HP_240917_Power-with-AI_v02_supxar.mp4"
const features = [
{
head: "Connect the apps you already love",
desc: "Everyday supports over 100 apps, so you can tame the chaos and turn your tools into processes all in one place.",
button: "Explore all apps",
link: "#"
},
{
head: "Start quickly with these pre-built templates from other Everyday users",
desc: "Automate your tasks in just a few minutes to reclaim countless hours of your time.",
button: "Explore more",
link: "#"
}
]
const images = [
"https://www.zarla.com/images/starbucks-logo-2400x2400-20220513.png?crop=1:1,smart&width=150&dpr=2",
"https://www.zarla.com/images/apple-logo-2400x2400-20220512-3.png?crop=1:1,smart&width=150&dpr=2",
"https://www.zarla.com/images/google-logo-2400x2400-20220519.png?crop=1:1,smart&width=150&dpr=2",
"https://www.zarla.com/images/mercedes-benz-logo-2400x2400-20220513-2.png?crop=1:1,smart&width=150&dpr=2",
"https://www.zarla.com/images/walmart-logo-2400x2400-20223105.png?crop=1:1,smart&width=150&dpr=2",
"https://www.zarla.com/images/pepsi-logo-2400x2400-20220513-1.png?crop=1:1,smart&width=150&dpr=2",
];
const contents = [
{
title: "Series Template",
description:
"It serves as pre-designed series of steps or processes that can be saved and reused multiple times. Users can make a list of own series template or can browse through a list of templates created by other users and can use them directly from the Series Template Marketplace.",
link: "https://stripe.com",
icon: FaListUl, // Add icon here
},
{
title: "Diverse Templates",
description:
"The marketplace offers a wide range of series templates across industries and functions, including sales, marketing, customer support, and operations, to streamline workflows and boost efficiency.",
link: "https://netflix.com",
icon: FaSearch, // Add icon here
},
{
title: "Search and Discovery",
description:
"Accelerate your operations with our pre-built AI workflows tailored for various business functions, from sales to marketing, operations, and more. <br />Users can search for templates based on keywords, categories, or tags.",
link: "https://enterprise.everydayseries.com/",
icon: FaSearch, // Add icon here
},
{
title: "Template Customization",
description:
"Users can customize templates to fit their specific requirements or preferences by modifying steps, adding new components, or integrating AI features to create tailored workflows that meet unique business needs.",
link: "https://meta.com",
icon: FaPlug, // Add icon here
},
{
title: "Unity In Workflows",
description:
"Eliminate silos with a powerful platform that harmoniously connects every aspect of your work, enabling seamless collaboration, streamlined communication, and unified processes across teams and departments.",
link: "https://amazon.com",
icon: FaPaste, // Add icon here
},
{
title: "Marketplace",
description:
"Improve your productivity with our smart automations, transforming repetitive tasks into streamlined processes.User can browse through a list of series templates created by other users and can use it.",
link: "https://microsoft.com",
icon: FaRegFileAlt, // Add icon here
},
// Add more features as needed
];
const featuresData = [
{
title: "Create Series using Drag and Drop",
description: "Organize, connect, and track your goals using the GoalGrid. Stay aligned and in sync with your strategic objectives.",
imgSrc: "https://res.cloudinary.com/dezd109fz/image/upload/v1737595526/Screenshot_2025-01-23_065418_xo3ezn.png",
},
{
title: "Built for Enterprises",
description: "Everyday platform ensures enterprise-grade deployment, security, and data governance, all with the simplicity of one centrally managed platform.",
imgSrc: "https://res.cloudinary.com/dezd109fz/image/upload/v1737595526/Screenshot_2025-01-23_065356_gbkov8.png",
},
{
title: "Integrate your Workflows",
description: "Connect Everyday to your existing tools, integrate important business processes, and build more powerful applications.",
imgSrc: "https://res.cloudinary.com/dezd109fz/image/upload/v1737595526/Screenshot_2025-01-23_065455_whfipm.png",
},
];
const words = `"Discover the future of AI-integrated workflow management with Everyday. Transform your enterprise operations today."`
export default function Series() {
return (
<div className="p-6 bg-[#080E12] dark text-white">
<Navbar />
<div className='h-screen py-10 px-24 flex flex-col items-start justify-end'>
<h1 className="text-8xl mb-10">{heading}</h1>
<h2 className='text-4xl'>{description}</h2>
</div>
<div className='p-40'><video src={image} autoPlay className="w-ful border rounded-2xl object" /></div>
<Features featuresData={featuresData} />
<div className="max-w-7xl mx-auto px-8">
<HoverEffect items={contents} />
</div>
{/* FEATURES */}
<div className="flex flex-col text-white h-fit py-20 space-y-20">
{features.map((item, index) => (
<div key={index} className="p-6 text-center space-y-10 h-fit">
{/* Feature Heading and Description */}
<h2 className="text-5xl mb-2 w-2/3 mx-auto">{item.head}</h2>
<p className="w-2/3 mx-auto -mt-3">{item.desc}</p>
<a
href={item.link}
className="bg-violet-500 hover:bg-violet-300 font-medium px-4 py-2 rounded-lg mt-4 inline-block"
>
{item.button}
</a>
{/* Conditional Rendering for Marquee After First Feature */}
{index === 0 && (
<>
<Marquee className="[--duration:60s] w-[90%] mx-auto mt-20">
<div className="flex space-x-10">
{images.map((img, index) => (
<img
key={index}
src={img}
alt={`Avatar ${index + 1}`}
className="h-24 w-24 border rounded-lg object-cover"
/>
))}
</div>
</Marquee>
<Marquee reverse className="[--duration:60s] w-[90%] mx-auto">
<div className="flex space-x-10">
{images.map((img, index) => (
<img
key={index}
src={img}
alt={`Avatar ${index + 1}`}
className="h-24 w-24 border rounded-lg object-cover"
/>
))}
</div>
</Marquee>
{/* Add gradient effects for marquee */}
<div className="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-l from-transparent to-[#080E12]"></div>
<div className="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-r from-transparent to-[#080E12]"></div>
</>
)}
{/* Conditional Rendering for GIF After Second Feature */}
{index === 1 && (
<div className="mt-20 flex justify-center">
<img
src="https://cdn.dribbble.com/users/695342/screenshots/3782293/dashboard-gif-ok.gif"
alt="Workflow GIF"
className="rounded-lg shadow-lg w-[60%] h-1/2 mx-auto"
/>
</div>
)}
</div>
))}
</div>
<div className="bg-white rounded-lg shadow-md px-10 py-20 mx-10 my-20">
<div className="text-yellow-500 text-center text-2xl mb-10">
★★★★★
</div>
{/* <p className="text-gray-700 leading-relaxed text-4xl">
<strong className="font-semibold">Magic Button:</strong> Simply press the magic button to instantly generate your series automatically.
</p> */}
<TextGenerateEffect words={words} />
</div>
<Footer />
</div>
);
}

177
app/tools/page.tsx Normal file
View File

@ -0,0 +1,177 @@
"use client";
import React from 'react';
import Navbar from '@/components/Navbar/navbar';
import Features from "@/components/Features/features";
import Footer from "@/components/footer";
import { HoverEffect } from '@/components/ui/card-hover-effect';
import { Marquee } from '@/components/ui/marquee';
import { FaListUl, FaSearch, FaArrowsAlt, FaPlug, FaPaste, FaRegFileAlt } from 'react-icons/fa';
import { TextGenerateEffect } from '@/components/ui/text-generate-effect';
const heading = "Tools - Automate Task Sequences for Streamlined Workflows";
const description = "A programmed tool designed to execute a predefined sequence of tasks systematically, automating workflows and minimizing manual intervention.";
const image = "https://res.cloudinary.com/zapier-media/video/upload/q_auto:best/f_auto/v1726860625/Homepage%20%E2%80%94%20Sept%202024/sc03_HP_240917_Power-with-AI_v02_supxar.mp4"
const features = [
{
head: "Connect the apps you already love",
desc: "Everyday supports over 100 apps, so you can tame the chaos and turn your tools into processes all in one place.",
button: "Explore all apps",
link: "#"
},
{
head: "Start quickly with these pre-built templates from other Everyday users",
desc: "Automate your tasks in just a few minutes to reclaim countless hours of your time.",
button: "Explore more",
link: "#"
}
]
const images = [
"https://www.zarla.com/images/starbucks-logo-2400x2400-20220513.png?crop=1:1,smart&width=150&dpr=2",
"https://www.zarla.com/images/apple-logo-2400x2400-20220512-3.png?crop=1:1,smart&width=150&dpr=2",
"https://www.zarla.com/images/google-logo-2400x2400-20220519.png?crop=1:1,smart&width=150&dpr=2",
"https://www.zarla.com/images/mercedes-benz-logo-2400x2400-20220513-2.png?crop=1:1,smart&width=150&dpr=2",
"https://www.zarla.com/images/walmart-logo-2400x2400-20223105.png?crop=1:1,smart&width=150&dpr=2",
"https://www.zarla.com/images/pepsi-logo-2400x2400-20220513-1.png?crop=1:1,smart&width=150&dpr=2",
];
const contents = [
{
title: "List",
description:
"Our proven approach enhances operational efficiency, delivers faster results, and keeps your team ahead of the curve.",
link: "https://stripe.com",
icon: FaListUl, // Add icon here
},
{
title: "Assign/Complete",
description:
"Assign a task to a team member, or do it on your own. Complete flow of tasks now at your fingertips without the hassle of assigning and reassigning and increasing due dates.",
link: "https://cal.com",
icon: FaSearch, // Add icon here
},
{
title: "History",
description:
"History captures tasks submitted by users, recording all associated data for reference. This way, you can go back and look at the progress so far.",
link: "https://enterprise.everydayseries.com/",
icon: FaSearch, // Add icon here
},
];
const featuresData = [
{
title: "Create Series using Drag and Drop",
description: "Organize, connect, and track your goals using the GoalGrid. Stay aligned and in sync with your strategic objectives.",
imgSrc: "https://res.cloudinary.com/dezd109fz/image/upload/v1737595526/Screenshot_2025-01-23_065418_xo3ezn.png",
},
{
title: "Built for Enterprises",
description: "Everyday platform ensures enterprise-grade deployment, security, and data governance, all with the simplicity of one centrally managed platform.",
imgSrc: "https://res.cloudinary.com/dezd109fz/image/upload/v1737595526/Screenshot_2025-01-23_065356_gbkov8.png",
},
{
title: "Integrate your Workflows",
description: "Connect Everyday to your existing tools, integrate important business processes, and build more powerful applications.",
imgSrc: "https://res.cloudinary.com/dezd109fz/image/upload/v1737595526/Screenshot_2025-01-23_065455_whfipm.png",
},
];
const words = `Require a little more? We offer optional add-on services for developing even more solutions.`
export default function Series() {
return (
<div className="p-6 bg-[#080E12] dark text-white">
<Navbar />
<div className='h-screen py-10 px-24 flex flex-col items-start justify-end'>
<h1 className="text-8xl mb-10">{heading}</h1>
<h2 className='text-4xl'>{description}</h2>
</div>
<div className='p-40'><video src={image} autoPlay className="w-ful border rounded-2xl object" /></div>
<div className="max-w-7xl mx-auto px-8">
<HoverEffect items={contents} />
</div>
<Features featuresData={featuresData} />
{/* FEATURES */}
<div className="flex flex-col text-white h-fit py-20 space-y-20">
{features.map((item, index) => (
<div key={index} className="p-6 text-center space-y-10 h-fit">
{/* Feature Heading and Description */}
<h2 className="text-5xl mb-2 w-2/3 mx-auto">{item.head}</h2>
<p className="w-2/3 mx-auto -mt-3">{item.desc}</p>
<a
href={item.link}
className="bg-violet-500 hover:bg-violet-300 font-medium px-4 py-2 rounded-lg mt-4 inline-block"
>
{item.button}
</a>
{/* Conditional Rendering for Marquee After First Feature */}
{index === 0 && (
<>
<Marquee className="[--duration:60s] w-[90%] mx-auto mt-20">
<div className="flex space-x-10">
{images.map((img, index) => (
<img
key={index}
src={img}
alt={`Avatar ${index + 1}`}
className="h-24 w-24 border rounded-lg object-cover"
/>
))}
</div>
</Marquee>
<Marquee reverse className="[--duration:60s] w-[90%] mx-auto">
<div className="flex space-x-10">
{images.map((img, index) => (
<img
key={index}
src={img}
alt={`Avatar ${index + 1}`}
className="h-24 w-24 border rounded-lg object-cover"
/>
))}
</div>
</Marquee>
{/* Add gradient effects for marquee */}
<div className="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-l from-transparent to-[#080E12]"></div>
<div className="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-r from-transparent to-[#080E12]"></div>
</>
)}
{/* Conditional Rendering for GIF After Second Feature */}
{index === 1 && (
<div className="mt-20 flex justify-center">
<img
src="https://cdn.dribbble.com/users/695342/screenshots/3782293/dashboard-gif-ok.gif"
alt="Workflow GIF"
className="rounded-lg shadow-lg w-[60%] h-1/2 mx-auto"
/>
</div>
)}
</div>
))}
</div>
<div className="bg-white rounded-lg shadow-md px-10 py-20 mx-10 my-20">
<div className="text-yellow-500 text-center text-2xl mb-10">
★★★★★
</div>
<p className="text-gray-700 leading-relaxed text-4xl">
<strong className="font-semibold">Add-On</strong> Professional Services
</p>
<TextGenerateEffect words={words} />
</div>
<Footer />
</div>
);
}

45
app/writer/layout.tsx Normal file
View File

@ -0,0 +1,45 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import { Poppins, Arimo, Outfit, Roboto } from 'next/font/google';
import "../globals.css";
const poppins = Poppins({
weight: ['300', '400', '500', '600', '700'],
subsets: ['latin'],
});
const arimo = Arimo({
weight: ['400', '500', '600', '700'],
subsets: ['latin'],
});
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={`${poppins.className} antialiased`}
>
{children}
</body>
</html>
);
}

171
app/writer/page.tsx Normal file
View File

@ -0,0 +1,171 @@
"use client";
import React from 'react';
import Navbar from '@/components/Navbar/navbar';
import Features from "@/components/Features/features";
import Footer from "@/components/footer";
import { HoverEffect } from '@/components/ui/card-hover-effect';
import { Marquee } from '@/components/ui/marquee';
import { TextGenerateEffect } from "@/components/ui/text-generate-effect";
import { FaListUl, FaSearch, FaArrowsAlt, FaPlug, FaPaste, FaRegFileAlt } from 'react-icons/fa';
const heading = "Writer - Your Platform for Documentation and Textual Content";
const description = "A feature designed to fulfill written tasks by providing a dedicated space for creating and completing documentation and other textual content.";
const image = "https://res.cloudinary.com/zapier-media/video/upload/q_auto:best/f_auto/v1726860625/Homepage%20%E2%80%94%20Sept%202024/sc03_HP_240917_Power-with-AI_v02_supxar.mp4"
const features = [
{
head: "Connect the apps you already love",
desc: "Everyday supports over 100 apps, so you can tame the chaos and turn your tools into processes all in one place.",
button: "Explore all apps",
link: "#"
},
{
head: "Start quickly with these pre-built templates from other Everyday users",
desc: "Automate your tasks in just a few minutes to reclaim countless hours of your time.",
button: "Explore more",
link: "#"
}
]
const images = [
"https://www.zarla.com/images/starbucks-logo-2400x2400-20220513.png?crop=1:1,smart&width=150&dpr=2",
"https://www.zarla.com/images/apple-logo-2400x2400-20220512-3.png?crop=1:1,smart&width=150&dpr=2",
"https://www.zarla.com/images/google-logo-2400x2400-20220519.png?crop=1:1,smart&width=150&dpr=2",
"https://www.zarla.com/images/mercedes-benz-logo-2400x2400-20220513-2.png?crop=1:1,smart&width=150&dpr=2",
"https://www.zarla.com/images/walmart-logo-2400x2400-20223105.png?crop=1:1,smart&width=150&dpr=2",
"https://www.zarla.com/images/pepsi-logo-2400x2400-20220513-1.png?crop=1:1,smart&width=150&dpr=2",
];
const contents = [
{
title: "Ask AI",
description:
"Ask Me Anything is an AI-based chat interface designed to provide responses and assistance across a wide range of inquiries and topics. Helps you research extensive topics without the hassle of going over the internet.",
link: "https://stripe.com",
icon: FaListUl, // Add icon here
},
{
title: "Magic Continue",
description:
"Don't feel like typing, relax and let AI finish the job. Just type '..continue' and AI will continue to write where you left off, with full control of flow and limit in your hands.",
link: "https://netflix.com",
icon: FaSearch, // Add icon here
},
{
title: "Download in Pdf",
description:
"Once you are done with the write up, download it as a Pdf file and save it to your device. Later pull that up if you need any editing done. Let us know, we'll take care of the rest.",
link: "https://enterprise.everydayseries.com/",
icon: FaArrowsAlt, // Add icon here
},
];
const featuresData = [
{
title: "Create Series using Drag and Drop",
description: "Organize, connect, and track your goals using the GoalGrid. Stay aligned and in sync with your strategic objectives.",
imgSrc: "https://res.cloudinary.com/dezd109fz/image/upload/v1737595526/Screenshot_2025-01-23_065418_xo3ezn.png",
},
{
title: "Built for Enterprises",
description: "Everyday platform ensures enterprise-grade deployment, security, and data governance, all with the simplicity of one centrally managed platform.",
imgSrc: "https://res.cloudinary.com/dezd109fz/image/upload/v1737595526/Screenshot_2025-01-23_065356_gbkov8.png",
},
{
title: "Integrate your Workflows",
description: "Connect Everyday to your existing tools, integrate important business processes, and build more powerful applications.",
imgSrc: "https://res.cloudinary.com/dezd109fz/image/upload/v1737595526/Screenshot_2025-01-23_065455_whfipm.png",
},
];
const words = `“In the new era of technology we are looking to the future with a certain pride for our company and business. We consider all the drivers of two of main financial change.”`
export default function Series() {
return (
<div className="p-6 bg-[#080E12] dark text-white">
<Navbar />
<div className='h-screen py-10 px-24 flex flex-col items-start justify-end'>
<h1 className="text-8xl mb-10">{heading}</h1>
<h2 className='text-4xl'>{description}</h2>
</div>
<div className='p-40'><video src={image} autoPlay className="w-ful border rounded-2xl object" /></div>
<div className="flex flex-col text-white h-fit py-20 space-y-20">
{features.map((item, index) => (
<div key={index} className="p-6 text-center space-y-10 h-fit">
{/* Feature Heading and Description */}
<h2 className="text-5xl mb-2 w-2/3 mx-auto">{item.head}</h2>
<p className="w-2/3 mx-auto -mt-3">{item.desc}</p>
<a
href={item.link}
className="bg-violet-500 hover:bg-violet-300 font-medium px-4 py-2 rounded-lg mt-4 inline-block"
>
{item.button}
</a>
{/* Conditional Rendering for Marquee After First Feature */}
{index === 0 && (
<>
<Marquee className="[--duration:60s] w-[90%] mx-auto mt-20">
<div className="flex space-x-10">
{images.map((img, index) => (
<img
key={index}
src={img}
alt={`Avatar ${index + 1}`}
className="h-24 w-24 border rounded-lg object-cover"
/>
))}
</div>
</Marquee>
<Marquee reverse className="[--duration:60s] w-[90%] mx-auto">
<div className="flex space-x-10">
{images.map((img, index) => (
<img
key={index}
src={img}
alt={`Avatar ${index + 1}`}
className="h-24 w-24 border rounded-lg object-cover"
/>
))}
</div>
</Marquee>
{/* Add gradient effects for marquee */}
<div className="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-l from-transparent to-[#080E12]"></div>
<div className="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-r from-transparent to-[#080E12]"></div>
</>
)}
{/* Conditional Rendering for GIF After Second Feature */}
{index === 1 && (
<div className="mt-20 flex justify-center">
<img
src="https://cdn.dribbble.com/users/695342/screenshots/3782293/dashboard-gif-ok.gif"
alt="Workflow GIF"
className="rounded-lg shadow-lg w-[60%] h-1/2 mx-auto"
/>
</div>
)}
</div>
))}
</div>
<div className="max-w-7xl mx-auto px-8">
<HoverEffect items={contents} />
</div>
<Features featuresData={featuresData} />
<div className="bg-white rounded-lg shadow-md px-10 py-20 mx-10 my-20">
<div className="text-yellow-500 text-center text-2xl mb-10">
★★★★★
</div>
{/* <p className="text-gray-700 leading-relaxed text-4xl">
<strong className="font-semibold">Magic Button:</strong> Simply press the magic button to instantly generate your series automatically.
</p> */}
<TextGenerateEffect words={words} />
</div>
<Footer />
</div>
);
}

20
components.json Normal file
View File

@ -0,0 +1,20 @@
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "tailwind.config.ts",
"css": "app/globals.css",
"baseColor": "neutral",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
}
}

160
components/Agents/business-verticals.tsx Normal file
View File

@ -0,0 +1,160 @@
"use client";
import { useState } from 'react';
import {
ChevronDown,
ShoppingCart,
HeartPulse,
Wallet,
GraduationCap,
Home,
Plane,
Scale,
Megaphone
} from 'lucide-react';
const verticals = [
{
icon: <ShoppingCart className="w-5 h-5" />,
title: "Retail & E-commerce",
description: "Enhance customer service with real-time chat support, personalized shopping experiences, and seamless order tracking.",
gradient: "from-pink-500/20 to-purple-500/20"
},
{
icon: <HeartPulse className="w-5 h-5" />,
title: "Healthcare & Wellness",
description: "Improve patient care through virtual consultations, appointment scheduling, and instant access to health resources.",
gradient: "from-blue-500/20 to-cyan-500/20"
},
{
icon: <Wallet className="w-5 h-5" />,
title: "Finance & Banking",
description: "Empower customers with financial insights, automated account management, and personalized advisory services.",
gradient: "from-green-500/20 to-emerald-500/20"
},
{
icon: <GraduationCap className="w-5 h-5" />,
title: "Education & eLearning",
description: "Revolutionize learning with interactive tutoring, course guidance, resource recommendations, and performance tracking.",
gradient: "from-orange-500/20 to-yellow-500/20"
},
{
icon: <Home className="w-5 h-5" />,
title: "Real Estate & Property Management",
description: "Streamline property listings, offer virtual tours, schedule viewings, and provide detailed market insights.",
gradient: "from-purple-500/20 to-indigo-500/20"
},
{
icon: <Plane className="w-5 h-5" />,
title: "Travel & Hospitality",
description: "Enhance guest experiences with AI-driven booking assistance, itinerary management, and personalized recommendations.",
gradient: "from-cyan-500/20 to-blue-500/20"
},
{
icon: <Scale className="w-5 h-5" />,
title: "Legal & Consulting",
description: "Simplify client communications, document management, and consultation scheduling for faster service delivery.",
gradient: "from-violet-500/20 to-purple-500/20"
},
{
icon: <Megaphone className="w-5 h-5" />,
title: "Creative & Marketing",
description: "Boost engagement through dynamic content creation, campaign management, and customer insights analytics.",
gradient: "from-rose-500/20 to-pink-500/20"
}
];
export default function BusinessVerticals() {
const [expandedIndex, setExpandedIndex] = useState<number | null>(null);
return (
<div className="w-full py-32">
<div className="container mx-auto px-4">
<div className="text-center mb-16">
<h2 className="text-4xl md:text-6xl text-white mb-8">
Transform Your Business Verticals
</h2>
<p className="text-xl text-gray-400 max-w-3xl mx-auto">
Our platform isn't one-size-fits-all—each industry can harness the power of AI to improve efficiency and drive growth.
</p>
</div>
<div className="max-w-6xl mx-auto space-y-4">
{verticals.map((vertical, index) => (
<div
key={index}
className="group"
>
{/* Main row - always visible */}
<div
className={`
relative overflow-hidden
px-6 py-4 rounded-xl
cursor-pointer
transition-all duration-300
border border-purple-500/10
${expandedIndex === index ? 'bg-purple-900/20' : 'hover:bg-purple-900/10'}
`}
onClick={() => setExpandedIndex(expandedIndex === index ? null : index)}
>
<div className="flex items-center gap-6">
{/* Icon */}
<div className={`
w-10 h-10 rounded-lg
flex items-center justify-center
bg-gradient-to-br ${vertical.gradient}
transition-transform duration-300 text-white
${expandedIndex === index ? 'rotate-3' : 'group-hover:scale-105'}
`}>
{vertical.icon}
</div>
{/* Title */}
<h3 className="flex-1 text-xl text-white">{vertical.title}</h3>
{/* Expand/Collapse icon */}
<ChevronDown
className={`
w-5 h-5 text-purple-400
transition-transform duration-300
${expandedIndex === index ? 'rotate-180' : ''}
`}
/>
</div>
{/* Expanded content */}
<div className={`
grid grid-rows-[0fr]
transition-all duration-300
${expandedIndex === index ? 'grid-rows-[1fr] mt-4' : ''}
`}>
<div className="overflow-hidden">
<div className="pl-16 text-gray-400 leading-relaxed">
{vertical.description}
</div>
{/* Action button */}
<div className="pl-16 mt-4">
<button className="
px-4 py-2 rounded-lg
bg-purple-500/20 hover:bg-purple-500/30
text-purple-300 text-sm
transition-colors duration-300
">
Explore Solutions
</button>
</div>
</div>
</div>
</div>
</div>
))}
</div>
{/* Bottom gradient line */}
<div className="relative mt-16 flex justify-center">
<div className="w-32 h-px bg-gradient-to-r from-transparent via-purple-500/30 to-transparent" />
</div>
</div>
</div>
);
}

155
components/Agents/sample-agents.tsx Normal file
View File

@ -0,0 +1,155 @@
"use client";
import { useState } from 'react';
import {
ShoppingCart,
HeartPulse,
Wallet,
GraduationCap,
Home,
Briefcase,
ArrowRight,
Bot
} from 'lucide-react';
const agents = [
{
title: "ShopSmart Assistant",
category: "Retail & E-commerce",
description: "Engages customers, answers FAQs, provides personalized product recommendations, and streamlines the purchase process.",
icon: <ShoppingCart className="w-6 h-6" />,
gradient: "from-pink-500/20 to-purple-500/20"
},
{
title: "HealthMate Advisor",
category: "Healthcare",
description: "Offers immediate healthcare information, assists in appointment scheduling, and guides patients through available services.",
icon: <HeartPulse className="w-6 h-6" />,
gradient: "from-blue-500/20 to-cyan-500/20"
},
{
title: "FinGuide Bot",
category: "Finance & Banking",
description: "Provides personalized financial advice, handles customer queries, assists with account management, and schedules consultations.",
icon: <Wallet className="w-6 h-6" />,
gradient: "from-green-500/20 to-emerald-500/20"
},
{
title: "LearnHub Tutor",
category: "Education",
description: "Facilitates course enrollment, answers academic queries, recommends learning resources, and tracks student progress.",
icon: <GraduationCap className="w-6 h-6" />,
gradient: "from-orange-500/20 to-yellow-500/20"
},
{
title: "HomeFinder Agent",
category: "Real Estate",
description: "Showcases property listings, schedules viewings, offers virtual tours, and provides real-time support for potential buyers.",
icon: <Home className="w-6 h-6" />,
gradient: "from-purple-500/20 to-indigo-500/20"
},
{
title: "ProConnect Advisor",
category: "Professional Services",
description: "Streamlines client interactions, manages consultation scheduling, and delivers tailored content to boost engagement.",
icon: <Briefcase className="w-6 h-6" />,
gradient: "from-teal-500/20 to-blue-500/20"
}
];
export default function SampleAgents() {
const [activeAgent, setActiveAgent] = useState<number | null>(null);
return (
<div className="w-full py-32">
<div className="container mx-auto px-4">
<div className="text-center mb-24">
<h2 className="text-4xl md:text-6xl text-white mb-8">See Our AI Agents in Action</h2>
<p className="text-xl text-gray-400 max-w-3xl mx-auto">
Our platform makes it easy to create AI agents that engage customers, streamline operations, and drive revenue.
Check out some sample agents built with our tools:
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
{agents.map((agent, index) => (
<div
key={index}
className="group relative"
onMouseEnter={() => setActiveAgent(index)}
onMouseLeave={() => setActiveAgent(null)}
>
{/* Card Background */}
<div className={`
absolute inset-0 rounded-2xl
bg-gradient-to-br ${agent.gradient}
opacity-0 group-hover:opacity-100
transition-all duration-500
`} />
{/* Card Content */}
<div className="relative p-8 rounded-2xl border border-purple-500/10">
{/* Category Tag */}
<div className="flex items-center gap-2 mb-6">
<Bot className="w-4 h-4 text-purple-400" />
<span className="text-sm text-purple-400">{agent.category}</span>
</div>
{/* Icon */}
<div className={`
w-12 h-12 rounded-xl
flex items-center justify-center
bg-gradient-to-br ${agent.gradient}
mb-6 transition-transform duration-500 text-white
${activeAgent === index ? 'scale-110 rotate-3' : ''}
`}>
{agent.icon}
</div>
{/* Title & Description */}
<h3 className="text-2xl text-white mb-4">{agent.title}</h3>
<p className="text-gray-400 leading-relaxed mb-6">{agent.description}</p>
{/* Try Agent Button */}
<button className={`
flex items-center gap-2 text-sm
text-purple-400 hover:text-purple-300
transition-all duration-300
${activeAgent === index ? 'translate-x-2' : ''}
`}>
Try this agent
<ArrowRight className="w-4 h-4" />
</button>
</div>
{/* Decorative Elements */}
<div className={`
absolute -bottom-4 -right-4 w-32 h-32
bg-gradient-to-br ${agent.gradient}
rounded-full blur-3xl
transition-opacity duration-500
opacity-0 group-hover:opacity-20
`} />
</div>
))}
</div>
{/* CTA Button */}
<div className="text-center mt-16">
<button className="
group relative overflow-hidden
px-8 py-4 rounded-full
text-white text-lg
transition-all duration-300
hover:shadow-lg hover:shadow-purple-500/20
">
<div className="absolute inset-0 bg-gradient-to-r from-purple-600 to-blue-600 opacity-80 group-hover:opacity-100 transition-opacity" />
<span className="relative flex items-center gap-2">
Explore More Sample Agents
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
</span>
</button>
</div>
</div>
</div>
);
}

59
components/Companies/partners.tsx Normal file
View File

@ -0,0 +1,59 @@
"use client";
import { cn } from "@/lib/utils";
import { Marquee } from "@/components/ui/marquee";
const images = [
"https://www.zarla.com/images/starbucks-logo-2400x2400-20220513.png?crop=1:1,smart&width=150&dpr=2",
"https://www.zarla.com/images/apple-logo-2400x2400-20220512-3.png?crop=1:1,smart&width=150&dpr=2",
"https://www.zarla.com/images/google-logo-2400x2400-20220519.png?crop=1:1,smart&width=150&dpr=2",
"https://www.zarla.com/images/mercedes-benz-logo-2400x2400-20220513-2.png?crop=1:1,smart&width=150&dpr=2",
"https://www.zarla.com/images/walmart-logo-2400x2400-20223105.png?crop=1:1,smart&width=150&dpr=2",
"https://www.zarla.com/images/pepsi-logo-2400x2400-20220513-1.png?crop=1:1,smart&width=150&dpr=2",
];
export function Partners() {
return (
<div className="h-screen flex flex-col items-center justify-center space-y-10">
<div className="flex flex-col items-center justify-center space-y-6">
<h1 className="text-white text-4xl">Partners</h1>
<div className="relative flex h-[200px] w-full flex-col items-center justify-center overflow-hidden rounded-lg bg-transparent">
<Marquee pauseOnHover className="[--duration:20s]">
<div className="flex space-x-6">
{images.map((img, index) => (
<img
key={index}
src={img}
alt={`Avatar ${index + 1}`}
className="h-32 w-32 rounded-full object-cover"
/>
))}
</div>
</Marquee>
<div className="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-l from-transparent to-[#080E12]"></div>
<div className="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-r from-transparent to-[#080E12]"></div>
</div>
</div>
<div className="flex flex-col items-center justify-center space-y-6">
<h1 className="text-white text-4xl">Customers</h1>
<div className="relative flex h-[200px] w-full flex-col items-center justify-center overflow-hidden rounded-lg bg-transparent md:shadow-xl">
<Marquee reverse pauseOnHover className="[--duration:20s]">
<div className="flex space-x-6">
{images.map((img, index) => (
<img
key={index}
src={img}
alt={`Avatar ${index + 1}`}
className="h-32 w-32 rounded-full object-cover"
/>
))}
</div>
</Marquee>
<div className="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-l from-transparent to-[#080E12]"></div>
<div className="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-r from-transparent to-[#080E12]"></div>
</div>
</div>
</div>
);
}

359
components/Features/features-bento.tsx Normal file
View File

@ -0,0 +1,359 @@
"use client";
import { cn } from "@/lib/utils";
import React, { useState } from "react";
import { BentoGrid, BentoGridItem } from "../ui/bento-grid";
import {
IconBoxAlignRightFilled,
IconClipboardCopy,
IconFileBroken,
IconSignature,
IconTableColumn,
} from "@tabler/icons-react";
import { motion, AnimatePresence } from "framer-motion";
import { FaPlay } from "react-icons/fa";
export function BentoFeatures() {
const variants = {
hidden: { opacity: 0, y: 50 },
visible: { opacity: 1, y: 0 },
};
return (
<motion.div
initial="hidden"
whileInView="visible"
variants={variants}
transition={{ duration: 0.5 }}
className="max-w-6xl mx-auto py-20"
>
<div className="text-center mb-16">
<motion.h2
// className="text-4xl md:text-5xl bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-blue-500"
className="text-4xl md:text-5xl bg-clip-text text-white"
variants={{
hidden: { opacity: 0, y: 20 },
visible: { opacity: 1, y: 0 }
}}
>
All-in-One Platform for AI-Powered Services
</motion.h2>
</div>
<BentoGrid className="md:auto-rows-[20rem]">
{items.map((item, i) => (
<BentoGridItem
key={i}
title={item.title}
description={item.description}
header={item.header}
className={cn("[&>p:text-lg] ", item.className)}
icon={item.icon}
/>
))}
</BentoGrid>
</motion.div>
);
}
const SkeletonOne = () => {
const [isHovered, setIsHovered] = useState(false);
return (
<motion.div
className="flex flex-1 w-full h-full min-h-[6rem] bg-gradient-to-br from-purple-900/50 to-blue-900/50 flex-col space-y-2 rounded-xl overflow-hidden"
onHoverStart={() => setIsHovered(true)}
onHoverEnd={() => setIsHovered(false)}
>
<div className="flex flex-col space-y-2 p-6">
<motion.h2
className="text-4xl font-bold text-white"
animate={{ scale: isHovered ? 1.05 : 1 }}
>
No Coding Needed
</motion.h2>
<motion.div
className="h-2 w-32 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full mt-4"
animate={{ width: isHovered ? "40%" : "8rem" }}
/>
<motion.p
className="text-neutral-300 mt-2 flex items-center gap-2"
animate={{ x: isHovered ? 10 : 0 }}
>
Learn more
<motion.span
animate={{ x: isHovered ? 5 : 0 }}
transition={{ repeat: isHovered ? Infinity : 0, duration: 0.6 }}
>
→
</motion.span>
</motion.p>
</div>
<motion.img
src="https://images.unsplash.com/photo-1603201667230-bd139210db18?q=80&w=1788&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
className="p-4 rounded-xl"
animate={{
scale: isHovered ? 1.05 : 1,
rotate: isHovered ? 1 : 0
}}
transition={{ type: "spring", stiffness: 300 }}
alt="Feature preview"
/>
</motion.div>
);
};
const SkeletonTwo = () => {
const [isTyping, setIsTyping] = useState(false);
return (
<motion.div
className="flex flex-1 w-full h-full min-h-[2rem] bg-gradient-to-br from-purple-900/20 to-blue-900/20 flex-col items-center justify-center p-6 rounded-xl cursor-pointer"
onHoverStart={() => setIsTyping(true)}
onHoverEnd={() => setIsTyping(false)}
>
<div className="flex flex-col space-y-4 w-full">
<div className="relative w-full h-20 bg-black/40 rounded-xl overflow-hidden group">
<AnimatePresence>
{isTyping && (
<motion.div
className="absolute inset-0 flex items-center justify-start px-4"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
>
<motion.div
initial={{ width: 0 }}
animate={{
width: "auto",
transition: {
duration: 2,
repeat: Infinity,
repeatType: "reverse"
}
}}
className="overflow-hidden whitespace-nowrap text-purple-300"
>
console.log("Hello World!");
</motion.div>
<motion.div
animate={{ opacity: [0, 1, 0] }}
transition={{ duration: 0.8, repeat: Infinity }}
className="text-purple-300 ml-1"
>
|
</motion.div>
</motion.div>
)}
</AnimatePresence>
</div>
<motion.div
className="space-y-2"
animate={{
opacity: isTyping ? 1 : 0.5,
transition: { duration: 1, repeat: Infinity, repeatType: "reverse" }
}}
>
<div className="h-3 w-3/4 bg-gradient-to-r from-purple-500/20 to-blue-500/20 rounded-full" />
<div className="h-3 w-1/2 bg-gradient-to-r from-purple-500/20 to-blue-500/20 rounded-full" />
<div className="h-3 w-5/6 bg-gradient-to-r from-purple-500/20 to-blue-500/20 rounded-full" />
</motion.div>
</div>
</motion.div>
);
};
const SkeletonThree = () => {
const [isHovered, setIsHovered] = useState(false);
return (
<motion.div
className="flex flex-1 w-full h-full min-h-[6rem] bg-gradient-to-br from-purple-900/20 to-blue-900/20 flex-col items-center justify-center p-6 rounded-xl"
onHoverStart={() => setIsHovered(true)}
onHoverEnd={() => setIsHovered(false)}
>
<div className="relative w-full h-full bg-black/40 rounded-xl overflow-hidden p-6">
<motion.div
className="flex flex-col space-y-4"
animate={{ y: isHovered ? -10 : 0 }}
>
<div className="flex items-center justify-between">
<div className="h-8 w-24 bg-purple-500/30 rounded-full" />
<motion.div
className="text-2xl font-bold text-green-400"
animate={{ scale: isHovered ? 1.1 : 1 }}
>
$0
</motion.div>
</div>
<motion.div
className="h-16 w-full bg-gradient-to-r from-purple-500/20 to-blue-500/20 rounded-xl"
animate={{
scale: isHovered ? 1.02 : 1,
backgroundColor: isHovered ? "rgba(139, 92, 246, 0.3)" : "rgba(139, 92, 246, 0.2)"
}}
/>
<div className="flex justify-between items-center">
<div className="h-6 w-16 bg-purple-500/30 rounded-full" />
<motion.div
className="text-xl font-bold text-green-400"
animate={{ scale: isHovered ? 1.1 : 1 }}
>
$499
</motion.div>
</div>
</motion.div>
</div>
</motion.div>
);
};
const SkeletonFour = () => {
return (
<motion.div
className="flex flex-1 w-full h-full min-h-[6rem] bg-gradient-to-br from-purple-900/20 to-blue-900/20 flex-col items-center justify-center p-8 rounded-xl"
>
<div className="flex flex-col space-y-4 w-full">
<motion.div
className="bg-purple-500/20 p-4 rounded-xl cursor-pointer group relative overflow-hidden"
whileHover={{ scale: 1.02 }}
>
<motion.div
className="absolute inset-0 bg-purple-500/20 translate-x-[-100%] group-hover:translate-x-0 transition-transform duration-300"
/>
<div className="relative flex items-center space-x-4">
<motion.div
className="p-2 bg-purple-500/40 rounded-lg"
whileHover={{ rotate: 360 }}
transition={{ duration: 0.4 }}
>
<IconBoxAlignRightFilled className="h-6 w-6 text-purple-200" />
</motion.div>
<span className="text-white font-medium">Form Builder</span>
</div>
</motion.div>
<motion.div
className="bg-white/10 p-4 rounded-xl cursor-pointer group relative overflow-hidden"
whileHover={{ scale: 1.02 }}
>
<motion.div
className="absolute inset-0 bg-white/10 translate-x-[-100%] group-hover:translate-x-0 transition-transform duration-300"
/>
<div className="relative flex items-center space-x-4">
<motion.div
className="p-2 bg-white/20 rounded-lg"
whileHover={{ rotate: 360 }}
transition={{ duration: 0.4 }}
>
<IconClipboardCopy className="h-6 w-6 text-white" />
</motion.div>
<span className="text-white font-medium">Newsletter Creator</span>
</div>
</motion.div>
</div>
</motion.div>
);
};
// const SkeletonFive = () => {
// return (
// <motion.div
// className="flex flex-1 w-full h-full min-h-[6rem] dark:bg-dot-white/[0.2] bg-dot-black/[0.2] flex-col items-center justify-center p-8"
// >
// <div className="grid grid-cols-2 gap-4 w-full">
// <div className="bg-purple-500/20 p-4 rounded-xl aspect-square flex items-center justify-center">
// <motion.div
// animate={{ rotate: 360 }}
// transition={{ duration: 8, repeat: Infinity, ease: "linear" }}
// className="w-12 h-12 rounded-full border-4 border-purple-500 border-t-transparent"
// />
// </div>
// <div className="bg-blue-500/20 p-4 rounded-xl aspect-square flex items-center justify-center">
// <motion.div
// initial={{ scale: 0.8 }}
// animate={{ scale: 1.2 }}
// transition={{ duration: 2, repeat: Infinity, repeatType: "reverse" }}
// className="w-12 h-12 bg-gradient-to-tr from-blue-500 to-purple-500 rounded-lg"
// />
// </div>
// <div className="bg-green-500/20 p-4 rounded-xl aspect-square flex items-center justify-center">
// <motion.div
// initial={{ opacity: 0.5 }}
// animate={{ opacity: 1 }}
// transition={{ duration: 2, repeat: Infinity, repeatType: "reverse" }}
// className="w-12 h-12 bg-gradient-to-br from-green-500 to-blue-500 rounded-full"
// />
// </div>
// <div className="bg-pink-500/20 p-4 rounded-xl aspect-square flex items-center justify-center">
// <motion.div
// animate={{
// scale: [1, 1.2, 1],
// rotate: [0, 90, 0]
// }}
// transition={{ duration: 4, repeat: Infinity }}
// className="w-12 h-12 bg-gradient-to-bl from-pink-500 to-purple-500 rounded-lg"
// />
// </div>
// </div>
// </motion.div>
// );
// };
const items = [
{
title: "Drag & Drop No-Code Builder",
description: (
<span className="text-sm">
Easily create robust MicroSaaS applications using our intuitive drag-and-drop interface. Empower yourself to design custom workflows without writing a single line of code, streamlining operations and enhancing efficiency.
</span>
),
header: <SkeletonOne />,
className: "md:col-span-1 md:row-span-2",
icon: <IconClipboardCopy className="h-4 w-4 text-neutral-500" />,
},
{
title: "Writing Simplified",
description: (
<span className="text-sm">
Transform your writing process with the power of AI. Use the built-in AI writer to generate, refine, or continue content effortlessly.
</span>
),
header: <SkeletonTwo />,
className: "md:col-span-1",
icon: <IconFileBroken className="h-4 w-4 text-neutral-500" />,
},
{
title: "Monetize Smarter",
description: (
<span className="text-sm">
Launch your own community or tap into our marketplace to sell AI subscriptions to SMBs and beyond. Transform your ideas into profitable ventures.
</span>
),
header: <SkeletonThree />,
className: "md:col-span-1",
icon: <IconSignature className="h-4 w-4 text-neutral-500" />,
},
{
title: "Integrated Creative Tools",
description: (
<span className="text-sm">
From forms to video editors, AI writers to newsletter creators, we've got you covered. Access a comprehensive suite of tools designed to enhance your creative workflow.
</span>
),
header: <SkeletonFour />,
className: "md:col-span-2",
icon: <IconTableColumn className="h-4 w-4 text-neutral-500" />,
},
// {
// title: "Smart Templates",
// description: (
// <span className="text-sm">
// Access a library of intelligent templates that adapt to your needs. Each template is powered by AI to provide personalized starting points.
// </span>
// ),
// header: <SkeletonFive />,
// className: "md:col-span-1",
// icon: <IconBoxAlignRightFilled className="h-4 w-4 text-neutral-500" />,
// }
];

108
components/Features/features-clickable.tsx Normal file
View File

@ -0,0 +1,108 @@
"use client";
import React, { useState } from 'react';
import { motion } from 'framer-motion';
// Define the Item interface
interface Item {
id: number;
media: string; // URL for image or video
title: string;
description: string;
}
// Define the items array with type annotations
const items: Item[] = [
{
id: 1,
media: "https://res.cloudinary.com/zapier-media/video/upload/q_auto:best/f_auto/v1726860621/Homepage%20%E2%80%94%20Sept%202024/sc01_HP_240917_Connect_v01_edm2pd.mp4",
title: "Product Management",
description:
"Coordinate and manage product sprints in collaboration with cross-functional team members, ensuring efficient planning and execution. Work closely with partners from different teams to iterate rapidly, align goals, and drive continuous improvement throughout the development process.",
},
{
id: 2,
media: "https://res.cloudinary.com/zapier-media/video/upload/q_auto:best/f_auto/v1726860622/Homepage%20%E2%80%94%20Sept%202024/sc02_HP_240917_Automate_v01_tnxxyr.mp4",
title: "Marketing",
description:
"Develop and implement marketing strategies to promote products and services, analyze market trends, and identify target audiences. Collaborate with sales teams to create effective campaigns that drive brand awareness and customer engagement while measuring the effectiveness of marketing initiatives.",
},
{
id: 3,
media: "https://res.cloudinary.com/zapier-media/video/upload/q_auto:best/f_auto/v1726860625/Homepage%20%E2%80%94%20Sept%202024/sc03_HP_240917_Power-with-AI_v02_supxar.mp4",
title: "Sales",
description:
"Drive revenue growth by identifying potential clients, building relationships, and closing sales deals. Develop sales strategies that align with company goals, deliver presentations to prospective customers, and provide exceptional customer service to ensure client satisfaction and retention.",
},
{
id: 4,
media: "https://res.cloudinary.com/zapier-media/video/upload/q_auto:best/f_auto/v1726860625/Homepage%20%E2%80%94%20Sept%202024/sc03_HP_240917_Power-with-AI_v02_supxar.mp4",
title: "HR",
description:
"Manage recruitment processes, employee relations, and organizational development initiatives. Ensure compliance with labor laws and regulations while fostering a positive workplace culture that promotes employee engagement and professional growth. Implement training programs to enhance workforce capabilities and performance.",
},
];
export default function Cliclables() {
const [selectedItem, setSelectedItem] = useState<Item>(items[0]);
const handleButtonClick = (item: Item) => {
setSelectedItem(item);
};
return (
<div className="w-full max-w-6xl mx-auto py-5 px-8">
<div className="relative w-full">
{/* Image section */}
<motion.div
key={`img-${selectedItem.id}`}
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5 }}
className="h-full bg-gray-100 rounded-xl overflow-hidden"
>
<video
src={selectedItem.media}
// alt={selectedItem.title}
autoPlay
className="w-full h-full object-cover"
/>
</motion.div>
</div>
{/* Navigation buttons at the top */}
<div className="flex flex-col md:flex-row space-y-3 md:space-y-0 items-center justify-between my-8">
{items.map((item) => (
<button
key={item.id}
onClick={() => handleButtonClick(item)}
className={`py-2 px-auto w-56 rounded-full transition-all duration-300 uppercase ${selectedItem.id === item.id
? "bg-white text-black shadow-lg scale-105"
: "bg-transparent text-white border border-gray-500"
}`}
>
{item.title}
</button>
))}
</div>
<div className="relative w-full">
{/* Description section */}
<motion.div
key={`desc-${selectedItem.id}`}
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5 }}
className="flex flex-col justify-center"
>
<h3 className="text-2xl font-semibold text-white">{selectedItem.title}</h3>
<p className="text-gray-600 leading-relaxed">
{selectedItem.description}
</p>
</motion.div>
</div>
</div>
);
}

522
components/Features/features.tsx Normal file
View File

@ -0,0 +1,522 @@
"use client";
import React, { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
const VectorNoCode = () => {
const [step, setStep] = useState(0);
const nodes = [
{
icon: (
<svg className="w-6 h-6 text-purple-200" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
),
label: "Input"
},
{
icon: (
<svg className="w-6 h-6 text-purple-200" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
</svg>
),
label: "Process"
},
{
icon: (
<svg className="w-6 h-6 text-purple-200" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
</svg>
),
label: "Output"
}
];
useEffect(() => {
const timer = setTimeout(() => {
setStep((prev) => (prev + 1) % 3);
}, 3000);
return () => clearTimeout(timer);
}, [step]);
return (
<motion.div className="w-full h-[400px] bg-gradient-to-br from-purple-900/20 to-blue-900/20 rounded-xl p-6 relative overflow-hidden">
<div className="absolute inset-0 flex items-center justify-center">
{nodes.map((node, i) => (
<motion.div
key={i}
className="absolute"
initial={{ x: -200 + i * 200 }}
>
{/* Node container */}
<motion.div
className="relative flex flex-col items-center"
animate={{
scale: step >= i ? 1.1 : 1,
opacity: step >= i ? 1 : 0.5,
}}
transition={{
duration: 0.5,
type: "spring",
}}
>
{/* Node */}
<motion.div
className="w-16 h-16 rounded-xl bg-gradient-to-br from-purple-500/30 to-blue-500/30
flex items-center justify-center backdrop-blur-sm"
animate={{
scale: step === i ? [1, 1.2, 1] : 1,
backgroundColor: step >= i ? "rgba(139, 92, 246, 0.4)" : "rgba(139, 92, 246, 0.2)"
}}
transition={{ duration: 0.5 }}
>
{node.icon}
</motion.div>
{/* Label */}
<motion.span
className="mt-2 text-sm text-purple-200"
animate={{
opacity: step >= i ? 1 : 0.5
}}
>
{node.label}
</motion.span>
</motion.div>
{/* Connection line */}
{i < 2 && (
<motion.div
className="absolute w-[200px] h-[2px] bg-gradient-to-r from-purple-500/30 to-blue-500/30 left-16 top-8"
initial={{ scaleX: 0 }}
animate={{
scaleX: step > i ? 1 : 0,
}}
transition={{
duration: 1,
ease: "easeInOut"
}}
>
{/* Moving dot */}
<motion.div
className="absolute h-4 w-4 bg-purple-500/50 rounded-full -translate-y-[6px]"
initial={{ x: 0, opacity: 0 }}
animate={{
x: step > i ? [0, 200] : 0,
opacity: step > i ? [1, 0] : 0,
scale: step > i ? [1, 1.5, 1] : 1
}}
transition={{
duration: 1,
ease: "easeInOut"
}}
/>
</motion.div>
)}
</motion.div>
))}
</div>
</motion.div>
);
};
const VectorCreativeSuite = () => (
<motion.div className="w-full h-[400px] bg-gradient-to-br from-purple-900/20 to-blue-900/20 rounded-xl p-6 relative overflow-hidden">
<div className="flex h-full gap-4">
{/* Editor Panel */}
<div className="flex-1 bg-black/20 rounded-xl p-4">
<div className="flex items-center gap-2 mb-4">
<motion.div
className="w-3 h-3 rounded-full bg-red-500/70"
animate={{ opacity: [0.5, 1, 0.5] }}
transition={{ duration: 2, repeat: Infinity }}
/>
<motion.div
className="w-3 h-3 rounded-full bg-yellow-500/70"
animate={{ opacity: [0.5, 1, 0.5] }}
transition={{ duration: 2, delay: 0.3, repeat: Infinity }}
/>
<motion.div
className="w-3 h-3 rounded-full bg-green-500/70"
animate={{ opacity: [0.5, 1, 0.5] }}
transition={{ duration: 2, delay: 0.6, repeat: Infinity }}
/>
</div>
<motion.div
className="h-4 w-32 bg-purple-500/30 rounded-md mb-4"
animate={{ width: ["8rem", "12rem", "8rem"] }}
transition={{ duration: 3, repeat: Infinity }}
/>
<div className="space-y-2">
{[...Array(5)].map((_, i) => (
<motion.div
key={i}
className="h-3 bg-purple-500/20 rounded"
initial={{ width: "40%" }}
animate={{ width: ["40%", "100%", "40%"] }}
transition={{
duration: 4,
delay: i * 0.2,
repeat: Infinity,
}}
/>
))}
</div>
</div>
{/* Preview Panel */}
<div className="flex-1 bg-black/20 rounded-xl p-4">
<motion.div
className="w-full h-full rounded-lg bg-gradient-to-br from-purple-500/20 to-blue-500/20 relative"
animate={{
boxShadow: [
"0 0 0 0 rgba(139, 92, 246, 0)",
"0 0 20px 2px rgba(139, 92, 246, 0.3)",
"0 0 0 0 rgba(139, 92, 246, 0)"
]
}}
transition={{ duration: 3, repeat: Infinity }}
>
<motion.div
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-16 h-16 border-4 border-purple-500/30 rounded-full border-t-transparent"
animate={{ rotate: 360 }}
transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
/>
<motion.div
className="absolute bottom-4 left-1/2 -translate-x-1/2 h-2 w-24 bg-purple-500/30 rounded-full"
animate={{ width: ["6rem", "8rem", "6rem"] }}
transition={{ duration: 2, repeat: Infinity }}
/>
</motion.div>
</div>
</div>
</motion.div>
);
const VectorCommunity = () => {
// Reduced number of points
const gridPoints = Array.from({ length: 15 }, (_, i) => ({
id: i,
x: (i % 5) * 100 + 80,
y: Math.floor(i / 5) * 100 + 80,
}));
return (
<motion.div className="w-full h-[400px] bg-gradient-to-br from-purple-900/20 to-blue-900/20 rounded-xl p-6 relative overflow-hidden">
<div className="absolute inset-0 flex items-center justify-center">
{/* Connection lines */}
<svg className="absolute w-full h-full">
{gridPoints.map((point, i) => (
gridPoints.slice(i + 1).map((target, j) => {
const distance = Math.sqrt(
Math.pow(point.x - target.x, 2) +
Math.pow(point.y - target.y, 2)
);
// Increased connection distance for wider coverage
if (distance < 240) { // Increased distance to maintain connections
return (
<motion.line
key={`${i}-${j}`}
x1={point.x}
y1={point.y}
x2={target.x}
y2={target.y}
stroke="rgba(139, 92, 246, 0.2)"
strokeWidth="1"
initial={{ opacity: 0 }}
animate={{
opacity: [0.2, 0.5, 0.2],
strokeWidth: [1, 2, 1]
}}
transition={{
duration: 2,
delay: (i + j) * 0.1,
repeat: Infinity
}}
/>
);
}
return null;
})
))}
</svg>
{/* User icons */}
{gridPoints.map((point, i) => (
<motion.div
key={i}
className="absolute"
style={{
left: point.x,
top: point.y,
transform: 'translate(-50%, -50%)'
}}
initial={{ scale: 0 }}
animate={{
scale: [1, 1.2, 1],
y: [0, -5, 0]
}}
transition={{
duration: 3,
delay: i * 0.1,
repeat: Infinity,
repeatType: "reverse"
}}
>
<div className="w-8 h-8 rounded-full bg-purple-500/30 flex items-center justify-center">
<svg
className="w-4 h-4 text-purple-200"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
</div>
<motion.div
className="absolute -top-1 -right-1 w-2 h-2 rounded-full bg-green-400"
animate={{
scale: [1, 1.5, 1],
opacity: [0.5, 1, 0.5]
}}
transition={{
duration: 2,
delay: i * 0.2,
repeat: Infinity
}}
/>
</motion.div>
))}
{/* Central hub - made larger */}
<motion.div
className="absolute w-16 h-16 rounded-full bg-purple-600/40 flex items-center justify-center"
animate={{
scale: [1, 1.2, 1],
boxShadow: [
"0 0 0 0 rgba(139, 92, 246, 0.4)",
"0 0 20px 10px rgba(139, 92, 246, 0.2)",
"0 0 0 0 rgba(139, 92, 246, 0.4)"
]
}}
transition={{
duration: 3,
repeat: Infinity
}}
>
<svg
className="w-8 h-8 text-purple-200"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
/>
</svg>
</motion.div>
</div>
</motion.div>
);
};
const VectorMonetization = () => {
const subscriptionTiers = [
{ name: "Basic", price: "49", color: "from-blue-500/30 to-purple-500/30" },
{ name: "Pro", price: "199", color: "from-purple-500/30 to-pink-500/30" },
{ name: "Enterprise", price: "499", color: "from-pink-500/30 to-orange-500/30" }
];
return (
<motion.div className="w-full h-[400px] bg-gradient-to-br from-purple-900/20 to-blue-900/20 rounded-xl p-6 relative overflow-hidden">
<div className="absolute inset-0 flex items-center justify-center">
<div className="relative w-full h-full flex items-center justify-center">
{/* Background rings */}
{[...Array(3)].map((_, i) => (
<motion.div
key={i}
className="absolute rounded-full border-2 border-purple-500/20"
style={{
width: `${(i + 1) * 150}px`,
height: `${(i + 1) * 150}px`,
}}
animate={{
rotate: 360,
scale: [1, 1.05, 1],
}}
transition={{
rotate: {
duration: 10 + i * 5,
repeat: Infinity,
ease: "linear",
},
scale: {
duration: 2,
repeat: Infinity,
delay: i * 0.3,
}
}}
/>
))}
{/* Subscription tiers */}
{subscriptionTiers.map((tier, i) => (
<motion.div
key={i}
className={`absolute bg-gradient-to-br ${tier.color} rounded-xl p-4 backdrop-blur-sm
flex flex-col items-center justify-center w-32 h-32`}
style={{
x: i * 140 - 140,
y: 0,
}}
animate={{
y: [0, -20, 0],
scale: [1, 1.05, 1],
}}
transition={{
duration: 3,
delay: i * 0.2,
repeat: Infinity,
}}
whileHover={{ scale: 1.1 }}
>
<motion.span
className="text-sm text-purple-200 mb-2"
animate={{ opacity: [0.5, 1, 0.5] }}
transition={{ duration: 2, repeat: Infinity }}
>
{tier.name}
</motion.span>
<motion.div
className="text-2xl font-bold text-white mb-1"
animate={{ scale: [1, 1.1, 1] }}
transition={{ duration: 2, repeat: Infinity }}
>
${tier.price}
</motion.div>
<motion.div
className="text-xs text-purple-200"
animate={{ opacity: [0.5, 1, 0.5] }}
transition={{ duration: 2, repeat: Infinity }}
>
per month
</motion.div>
</motion.div>
))}
{/* Floating elements */}
{[...Array(5)].map((_, i) => (
<motion.div
key={i}
className="absolute w-3 h-3"
style={{
x: Math.random() * 400 - 200,
y: Math.random() * 400 - 200,
}}
animate={{
y: [0, -100],
opacity: [0, 1, 0],
scale: [1, 1.5, 1],
}}
transition={{
duration: 2,
delay: i * 0.3,
repeat: Infinity,
}}
>
<div className="w-full h-full rounded-full bg-green-400/30" />
</motion.div>
))}
</div>
</div>
</motion.div>
);
};
const defaultFeaturesData = [
{
title: "No-Code AI Builder",
description: "Design, test, and deploy AI agents effortlessly. Create powerful AI applications without any coding knowledge required.",
vector: <VectorNoCode />,
},
{
title: "Creative Suite",
description: "Access powerful forms, video editing, and content creation tools to bring your vision to life. Transform your ideas into polished, professional content.",
vector: <VectorCreativeSuite />,
},
{
title: "Community & Marketplace",
description: "Grow your audience on your own platform or join our marketplace to reach thousands of SMBs. Build and nurture your community while expanding your reach.",
vector: <VectorCommunity />,
},
{
title: "Subscription-Based Monetization",
description: "Generate recurring revenue with our seamless subscription integration. Turn your AI solutions into a sustainable business model.",
vector: <VectorMonetization />,
},
];
interface Feature {
title: string;
description: string;
vector: React.ReactNode;
}
export default function Features({ featuresData }: { featuresData?: Feature[] }) {
const dataToUse = featuresData || defaultFeaturesData;
return (
<div className="container mx-auto p-6 py-40 text-white">
<motion.h2
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
viewport={{ once: true }}
className="text-4xl md:text-5xl text-center mb-16"
>
Everything You Need to Create, Manage, and Monetize Your AI Offerings
</motion.h2>
<div className="space-y-32"> {/* Increased spacing between features */}
{dataToUse.map((feature, index) => (
<motion.div
key={index}
initial={{ opacity: 0, x: index % 2 === 0 ? -100 : 100 }}
whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5 }}
viewport={{ once: true }}
className={`flex flex-col md:flex-row items-center gap-8 ${index % 2 === 0 ? '' : 'md:flex-row-reverse'}`}
>
<div className={`flex-1 ${index % 2 === 0 ? 'md:pr-8' : 'md:pl-8'}`}>
<div className={`space-y-6 ${index % 2 === 0 ? '' : 'text-right'}`}>
<h3 className="text-3xl md:text-5xl">{feature.title}</h3>
<p className="text-gray-400 text-lg">{feature.description}</p>
<motion.button
className="bg-purple-600 px-6 py-3 rounded-full hover:bg-purple-700 transition-colors"
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
Learn More
</motion.button>
</div>
</div>
<div className="w-full md:w-1/2">
{feature.vector}
</div>
</motion.div>
))}
</div>
</div>
);
}

60
components/Hero/hero.tsx Normal file
View File

@ -0,0 +1,60 @@
"use client";
import React, { useRef } from 'react';
import AnimatedShinyText from '../ui/animated-shiny-text';
import { ArrowRightIcon } from 'lucide-react';
import { cn } from "@/lib/utils";
import { motion, useInView } from 'framer-motion';
export default function Hero() {
// Create a ref for the container element
const ref = useRef(null);
// Use useInView hook to detect when the element is in viewport
const isInView = useInView(ref, { once: true });
// Left right motion variants defined for the animations
const leftVariants = {
hidden: { x: -100, opacity: 0 },
visible: { x: 0, opacity: 1 },
};
const rightVariants = {
hidden: { x: 100, opacity: 0 },
visible: { x: 0, opacity: 1 },
};
return (
<div ref={ref} className='text-white h-fit md:h-screen flex flex-col md:flex-row pt-40 md:pt-20'>
<motion.div
className='w-full md:w-1/2 flex flex-col items-start justify-center pl-20 px-10 space-y-5 md:space-y-10'
initial="hidden"
animate={isInView ? "visible" : "hidden"}
variants={leftVariants}
transition={{ duration: 0.5 }}
>
<div
className={cn(
"group rounded-full border text-xs md:text-base transition-all ease-in hover:cursor-pointer hover:bg-neutral-200 dark:border-white/5 dark:bg-neutral-900 dark:hover:bg-neutral-800",
)}
>
<AnimatedShinyText className="inline-flex items-center justify-center px-4 py-1 transition ease-out hover:text-neutral-600 hover:duration-300 hover:dark:text-neutral-400">
<span>✨ Introducing Everyday Series AI</span>
<ArrowRightIcon className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
</AnimatedShinyText>
</div>
<h1 className='text-3xl md:text-6xl'>Automate your operations and scale businesses</h1>
<p className='text-gray-500 text-sm md:text-base'>Empower your business with Micro-SaaS applications—designed by you, no coding required. Craft powerful workflows with our intuitive drag-and-drop builder, streamline approvals, and bring your ideas to life.</p>
<button className='bg-violet-600 px-5 py-4 rounded-full text-sm md:text-base'>Get 14 days free</button>
</motion.div>
<motion.div
className='w-full md:w-1/2 px-10 flex flex-col items-center justify-center'
initial="hidden"
animate={isInView ? "visible" : "hidden"}
variants={rightVariants}
transition={{ duration: 0.5 }}
>
<img src='https://res.cloudinary.com/dezd109fz/image/upload/v1737305415/Untitled_design_utuwwq.png' alt="Hero Image"/>
</motion.div>
</div>
);
}

143
components/Hero/hero2.tsx Normal file
View File

@ -0,0 +1,143 @@
"use client";
import React from 'react';
import { useState, useEffect } from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';
const slides = [
{
title: "Turn Your Expertise into Intelligent AI Agents",
description: "Effortlessly convert your existing services into AI-powered agents. Empower your business with innovative, interactive tools that open new revenue streams.",
buttonText: "Get Started Today",
buttonLink: "#",
image: "https://images.unsplash.com/photo-1600880292203-757bb62b4baf?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
overlayClass: "bg-black/60" // Semi-transparent overlay for better text readability
},
{
title: "Design Without Coding",
description: "Leverage our drag-and-drop builder to create custom AI solutions—no programming skills required. Your ideas, our platform, endless possibilities.",
buttonText: "Explore the Builder",
buttonLink: "#",
image: "https://images.unsplash.com/photo-1531497865144-0464ef8fb9a9?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
overlayClass: "bg-black/60"
},
{
title: "Unleash Your Creative Potentialr",
description: "From forms and video editing to AI writing and newsletters, our fully integrated creative suite brings your vision to life with the power of AI.",
buttonText: "Discover Our Tools",
buttonLink: "#",
image: "https://images.unsplash.com/photo-1603201667141-5a2d4c673378?q=80&w=1796&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
overlayClass: "bg-black/60"
},
{
title: "Monetize Your Skills & Services",
description: "Build your own community or tap into our marketplace to sell AI-powered subscriptions to SMBs. Turn your expertise into a recurring revenue engine.",
buttonText: "Learn How to Monetize",
buttonLink: "#",
image: "https://plus.unsplash.com/premium_photo-1661338826350-49e4fd1b004e?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
overlayClass: "bg-black/60"
},
{
title: "Step Into the Future of Business",
description: "Embrace the next era of innovation. Transform, scale, and thrive with our AI-powered platform that adapts to your business needs.",
buttonText: "Start Your Free Trial",
buttonLink: "#",
image: "https://plus.unsplash.com/premium_photo-1661425631372-6f9530fc211f?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
overlayClass: "bg-black/60"
}
];
const HeroCarousel = () => {
const [currentSlide, setCurrentSlide] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setCurrentSlide((prev) => (prev + 1) % slides.length);
}, 10000);
return () => clearInterval(timer);
}, []);
const nextSlide = () => {
setCurrentSlide((prev) => (prev + 1) % slides.length);
};
const prevSlide = () => {
setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);
};
return (
<div className='h-screen flex flex-col items-end justify-end'>
<div className="relative h-[700px] w-full overflow-hidden">
{/* Slides */}
<div className="relative h-full w-full">
{slides.map((slide, index) => (
<div
key={index}
className={`absolute inset-0 h-full w-full transition-all duration-700 ${
currentSlide === index ? 'opacity-100' : 'opacity-0'
}`}
>
{/* Background Image */}
<div
className="absolute inset-0 bg-cover bg-center bg-no-repeat transition-transform duration-700"
style={{
backgroundImage: `url(${slide.image})`,
transform: currentSlide === index ? 'scale(1.05)' : 'scale(1)'
}}
/>
{/* Overlay */}
<div className={`absolute inset-0 ${slide.overlayClass}`} />
{/* Content */}
<div className="relative flex h-full flex-col items-start justify-end py-40 px-20 text-left">
<div className="max-w-3xl">
<h1 className="mb-6 text-6xl text-white drop-shadow-lg">
{slide.title}
</h1>
<p className="mb-8 text-xl text-white drop-shadow-lg">
{slide.description}
</p>
<a
href={slide.buttonLink}
className="rounded-lg mt-10 bg-white px-8 py-3 text-lg font-semibold text-gray-900 transition-colors hover:bg-gray-100"
>
{slide.buttonText}
</a>
</div>
</div>
</div>
))}
</div>
{/* Navigation Buttons */}
<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"
>
<ChevronLeft size={28} />
</button>
<button
onClick={nextSlide}
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>
{/* Slide Indicators */}
<div className="absolute bottom-8 left-1/2 flex -translate-x-1/2 space-x-3">
{slides.map((_, index) => (
<button
key={index}
onClick={() => setCurrentSlide(index)}
className={`h-2 rounded-full transition-all ${
currentSlide === index ? 'w-8 bg-white' : 'w-2 bg-white/50'
}`}
/>
))}
</div>
</div>
</div>
);
};
export default HeroCarousel;

138
components/How/how.tsx Normal file
View File

@ -0,0 +1,138 @@
"use client";
import { useState, useEffect } from 'react';
import { ArrowRight, Wand2, Palette, Rocket } from 'lucide-react';
const steps = [
{
icon: <Wand2 className="w-8 h-8" />,
title: "Convert & Enhance Your Services",
description: "Use our intuitive tools to turn your current offerings into interactive AI agents",
color: "from-purple-500/30 to-blue-500/30"
},
{
icon: <Palette className="w-8 h-8" />,
title: "Customize Your Experience",
description: "Leverage our drag-and-drop builder and creative suite (forms, video editor, writer, newsletter) to tailor your AI solutions",
color: "from-blue-500/30 to-purple-500/30"
},
{
icon: <Rocket className="w-8 h-8" />,
title: "Launch & Monetize",
description: "Build your community or list your AI services on our marketplace—boost your revenue by tapping into a growing market of SMBs seeking smart solutions",
color: "from-purple-500/30 to-pink-500/30"
}
];
export default function HowItWorks() {
const [activeStep, setActiveStep] = useState(0);
const [isHovering, setIsHovering] = useState(false);
useEffect(() => {
if (isHovering) return;
const timer = setInterval(() => {
setActiveStep((prev) => (prev + 1) % steps.length);
}, 5000);
return () => clearInterval(timer);
}, [isHovering]);
return (
<div className="w-full py-32">
<div className="container mx-auto px-4">
<div className="text-center mb-24">
<h2 className="text-4xl md:text-6xl text-white mb-8">How It Works</h2>
<p className="text-xl text-gray-400">Transform your business with AI in three simple steps</p>
</div>
<div className="relative max-w-6xl mx-auto">
{/* Connecting line */}
<div className="absolute top-24 left-0 w-full h-px">
<div className="relative w-full h-full">
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-purple-500/20 to-transparent" />
<div
className="absolute h-full bg-gradient-to-r from-purple-500 to-blue-500 transition-all duration-1000"
style={{
width: `${(activeStep + 1) * 33.33}%`,
opacity: 0.3
}}
/>
</div>
</div>
<div className="relative flex justify-between items-start gap-12">
{steps.map((step, index) => (
<div
key={index}
className="flex-1"
onMouseEnter={() => {
setIsHovering(true);
setActiveStep(index);
}}
onMouseLeave={() => setIsHovering(false)}
>
<div className="relative">
{/* Icon container */}
<div
className={`
relative z-10 w-20 h-20 mx-auto mb-8
rounded-2xl overflow-hidden
transition-all duration-500 ease-out
${activeStep === index ? 'scale-110' : 'scale-100'}
`}
>
<div className={`
absolute inset-0 bg-gradient-to-br ${step.color}
transition-opacity duration-500
${activeStep === index ? 'opacity-100' : 'opacity-50'}
`} />
<div className={`
absolute inset-0 flex items-center justify-center
transition-transform duration-500
${activeStep === index ? 'scale-110 text-white' : 'scale-100 text-gray-500'}
`}>
{step.icon}
</div>
</div>
{/* Content */}
<div className={`
p-8 rounded-2xl
transition-all duration-500 ease-out
${activeStep === index ? 'bg-purple-900/20 translate-y-0 opacity-100' : 'bg-transparent translate-y-4 opacity-60'}
`}>
<h3 className="text-2xl text-white mb-4">{step.title}</h3>
<p className="text-gray-400 leading-relaxed">{step.description}</p>
</div>
</div>
{/* Step indicator */}
<div className={`
mt-6 flex justify-center items-center gap-2
transition-opacity duration-500
${activeStep === index ? 'opacity-100' : 'opacity-50'}
`}>
<span className="text-sm text-purple-400">Step {index + 1}</span>
{index < steps.length - 1 && (
<ArrowRight className="w-4 h-4 text-purple-400" />
)}
</div>
</div>
))}
</div>
</div>
<div className="text-center mt-24">
<button className="
group relative overflow-hidden
px-10 py-5 rounded-full
text-white text-lg
transition-all duration-300
hover:shadow-lg hover:shadow-purple-500/20
">
<div className="absolute inset-0 bg-gradient-to-r from-purple-600 to-blue-600 opacity-80 group-hover:opacity-100 transition-opacity" />
<span className="relative">Explore Features</span>
</button>
</div>
</div>
</div>
);
}

74
components/MouseParallax.tsx Normal file
View File

@ -0,0 +1,74 @@
"use client";
import { cn } from "@/lib/utils";
import React, { useRef, useState, useEffect } from "react";
export const MouseParallaxImage = ({
image,
title,
className,
}: {
image: string;
title: string;
className?: string;
}) => {
const ref = useRef<HTMLDivElement>(null);
const [isMouseEntered, setIsMouseEntered] = useState(false);
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
if (!ref.current) return;
const { left, top, width, height } = ref.current.getBoundingClientRect();
const x = (e.clientX - left - width / 2) / 25; // Adjust sensitivity
const y = (e.clientY - top - height / 2) / 25; // Inverted for natural feel
ref.current.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`;
};
const handleMouseEnter = () => {
setIsMouseEntered(true);
if (ref.current) {
ref.current.style.transition = 'transform 0.2s ease-out';
}
};
const handleMouseLeave = () => {
setIsMouseEntered(false);
if (ref.current) {
ref.current.style.transform = `rotateY(0deg) rotateX(0deg)`;
ref.current.style.transition = 'transform 0.2s ease-out';
}
};
// Reset transform when mouse leaves
useEffect(() => {
if (!ref.current) return;
if (!isMouseEntered) {
ref.current.style.transform = `rotateY(0deg) rotateX(0deg)`;
}
}, [isMouseEntered]);
return (
<div
onMouseEnter={handleMouseEnter}
onMouseMove={handleMouseMove}
onMouseLeave={handleMouseLeave}
className={cn("h-full w-auto", className)}
style={{ perspective: '1000px' }}
>
<div
ref={ref}
className="h-full w-auto transition-transform duration-200 ease-linear"
style={{
transformStyle: "preserve-3d",
}}
>
<img
src={image}
height={1000}
width={1000}
className="h-full w-auto object-contain rounded-2xl"
alt={title}
/>
</div>
</div>
);
};

34
components/Navbar/MobileMenu.tsx Normal file
View File

@ -0,0 +1,34 @@
// MobileMenu.tsx
import React from 'react';
import { FaAngleDown } from "react-icons/fa";
interface MobileMenuProps {
show: boolean;
toggle: () => void;
}
const MobileMenu: React.FC<MobileMenuProps> = ({ show, toggle }) => {
return (
<div className={`fixed top-0 left-0 w-full h-screen bg-[#080E12] text-white bg-opacity-90 transition-transform duration-300 ${show ? 'translate-x-0' : '-translate-x-full'} z-50`}>
<div className="flex justify-end p-4">
<button onClick={toggle} className="text-white">Close</button>
</div>
<ul className="flex flex-col items-center space-y-4 mt-20">
<li className="flex items-center cursor-pointer">
Product <FaAngleDown className='ml-2' />
</li>
<li className="flex items-center cursor-pointer">
Solutions <FaAngleDown className='ml-2' />
</li>
<li className="flex items-center cursor-pointer">
Pricing
</li>
<li className="flex items-center cursor-pointer">
Resources <FaAngleDown className='ml-2' />
</li>
</ul>
</div>
);
};
export default MobileMenu;

474
components/Navbar/dropdowns.tsx Normal file
View File

@ -0,0 +1,474 @@
import React from 'react';
import { CgWebsite } from 'react-icons/cg';
import { FaBook, FaBookmark, FaMicrophone, FaMoneyBillAlt, FaPen, FaServicestack, FaStore, FaUserCog, FaUserPlus, FaVideo } from 'react-icons/fa';
import { GiArtificialIntelligence } from 'react-icons/gi';
import { GoWorkflow } from 'react-icons/go';
import { GrTemplate } from 'react-icons/gr';
import { IoIosApps, IoIosDocument, IoIosMail, IoMdAnalytics, IoMdArrowRoundForward } from 'react-icons/io';
import { IoFlash, IoText } from 'react-icons/io5';
import { LuWorkflow } from 'react-icons/lu';
import { MdSecurity, MdTranslate } from 'react-icons/md';
import { RiMoneyEuroBoxFill, RiProductHuntFill } from 'react-icons/ri';
import { VscTools } from 'react-icons/vsc';
const productItems = [
{
category: 'FEATURES',
list: [
{
name: 'Series',
description: 'Drag - drop and create amazing workflows',
icon: <GoWorkflow className="h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500" />,
link: '/series',
},
{
name: 'Template',
description: 'Create awesome templates for easier integration',
icon: <GrTemplate className="h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500" />,
link: '/template',
},
{
name: 'Tools',
description: 'For the non-techies, just input and output',
icon: <VscTools className="h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500" />,
link: '/tools',
},
{
name: 'Click Video',
description: 'Create interactive videos for your clients',
icon: <FaVideo className="h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500" />,
link: '/click-video',
},
{
name: 'Writer',
description: 'Write with ease with built in AI text generator',
icon: <FaPen className="h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500" />,
link: '/writer',
},
{
name: 'Website',
description: '',
icon: <CgWebsite className="h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500" />,
link: '/website',
},
],
},
{
category: 'CAPABILITIES',
list: [
{
name: 'App Integration',
description: 'Integrate your workflows in your apps',
icon: <IoIosApps className="h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500" />,
link: '/integrations',
},
{
name: 'Data Syncing',
description: 'Keep your data up-to-date across platforms.',
icon: <IoIosApps className="h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500" />,
link: '/data-syncing',
},
{
name: 'Analytics Dashboard',
description: 'Visualize your workflow performance.',
icon: <IoIosApps className="h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500" />,
link: '/analytics-dashboard',
},
],
},
{
category: "WHAT'S NEW",
list: [
{
name: 'Improved Workflow Builder',
description: 'Build smarter workflows faster with new updates.',
icon: <LuWorkflow className="h-10 w-10 p-2 rounded-lg items-center border-gray-300 border text-violet-500" />,
link: '/workflow-builder',
},
{
name: 'Enhanced AI Writer',
description: 'Generate better, smarter content effortlessly.',
icon: <FaPen className="h-10 w-10 p-2 rounded-lg items-center border-gray-300 border text-violet-500" />,
link: '/ai-writer',
},
{
name: 'Marketplace Expansion',
description: 'Explore more tools and integrations today.',
icon: <FaStore className="h-10 w-10 p-2 rounded-lg items-center border-gray-300 border text-violet-500" />,
link: '/marketplace-expansion',
},
{
name: 'Upgraded Video Interactivity',
description: 'Create dynamic, engaging videos with ease.',
icon: <FaVideo className="h-10 w-10 p-2 rounded-lg items-center border-gray-300 border text-violet-500" />,
link: '/video-interactivity',
},
],
},
];
export const ProductDropdown: React.FC = () => {
return (
<div className="w-full text-white py-10 px-28">
<div className="flex">
{/* Main Content */}
<div className="w-2/3 space-y-8">
<div>
<h1 className="text-3xl">Everyday Series Workflows</h1>
<p className="text-gray-300 text-sm">No code automation and much more.</p>
</div>
<div className="flex space-x-4">
{/* Render Features and Capabilities */}
{productItems.slice(0, 2).map((itemGroup, index) => (
<div key={index} className="w-1/2 space-y-4">
<h3 className="font-medium text-sm text-slate-300">{itemGroup.category}</h3>
<ul className="space-y-4">
{itemGroup.list.map((item, idx) => (
<li key={idx} className="flex items-center space-x-4">
{item.icon}
<div
className="group hover:cursor-pointer"
onClick={() => window.location.href = item.link} // Navigate on click
>
<h3 className="font-medium transition-colors duration-200 group-hover:text-violet-500">{item.name}</h3>
<p className="font-thin text-xs transition-all duration-200 group-hover:underline">
{item.description}
</p>
</div>
</li>
))}
</ul>
</div>
))}
</div>
</div>
{/* What's New Section */}
<div className='w-1/3 space-y-10 border-gray-300 border-l pl-16 py-5'>
<h1 className='text-3xl'>What's New!</h1>
<ul className='space-y-4'>
{productItems.find(group => group.category === "WHAT'S NEW")?.list.map((item, index) => (
<li key={index} className='flex items-center space-x-4'>
{item.icon}
<div>
<h3 className='font-medium'>{item.name}</h3>
<p className='font-thin text-xs'>{item.description}</p>
</div>
</li>
))}
</ul>
</div>
</div>
{/* Footer Links */}
<div className='relative bottom-0 flex border-gray-300 border-t mt-10 pt-5 px-10 text-sm font-light space-x-8'>
<p className='hover:underline cursor-pointer'>Explore templates</p>
<p className='hover:underline cursor-pointer'>Explore tools</p>
<p className='hover:underline cursor-pointer'>Join Everyday Free Access</p>
</div>
</div>
);
};
// Solutions Dropdown Component
export const SolutionsDropdown: React.FC = () => {
return (
<div className="w-full text-white py-10 px-28">
<div className='flex'>
<div className='w-3/4 space-y-8 space-x-4'>
<div>
<h1 className='text-3xl'>Explore AI driven solutions.</h1>
<p className='text-gray-300 text-sm'>Create AI solutions for your clients and enterprises.</p>
</div>
<div className='flex space-x-4'>
<div className='w-1/2 space-y-2'>
<h3 className='font-medium text-sm text-slate-300'>Overview</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'>Marketing</h3>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Revolutionize campaigns with AI-driven automation</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'>Product Manager</h3>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Streamline workflows and build smarter, faster products</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'>Sales</h3>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Close deals faster with seamless, automated tools</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'>Finance</h3>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Optimize processes and track budgets with ease</p>
</div>
</li>
<li className='flex items-center space-x-4'>
<FaUserCog 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'>HR</h3>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Empower your team with smarter workflow solutions</p>
</div>
</li>
</ul>
</div>
<div className='w-1/2 space-y-2'>
<h3 className='font-medium text-sm text-slate-300'>Enterprises</h3>
<ul className='space-y-4'>
<li className='flex items-center space-x-4'>
<FaServicestack 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'>Services</h3>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Transform operations with AI-driven service solutions</p>
</div>
</li>
<li className='flex items-center space-x-4'>
<MdSecurity 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'>Security</h3>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Protect your data with next-gen secure workflows</p>
</div>
</li>
</ul>
</div>
{/* */}
<div className='w-1/2 space-y-2'>
<h3 className='font-medium text-sm text-slate-300'>Users</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'>For Learners</h3>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Learn smarter with intuitive tools and AI support</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'>For Coders</h3>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Code faster and build better with powerful tools</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'>For Enterprises</h3>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'>Scale operations with solutions built for enterprise growth</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div className='w-1/4 space-y-10 border-gray-300 border-l pl-10 py-5'>
<h1 className='text-3xl'>Latest AI tools!</h1>
<div>
<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 border-gray-300 border text-violet-500' />
<div className='group hover:cursor-pointer'>
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Story Book</h3>
<p className='font-thin text-xs'>Generate a story using the power of AI.</p>
</div>
</li>
<li className='flex items-center space-x-4'>
<FaMicrophone className='h-10 w-10 p-2 rounded-lg items-center border-gray-300 border text-violet-500' />
<div className='group hover:cursor-pointer'>
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Audio Genie</h3>
<p className='font-thin text-xs'>Generate and modify audio content effortlessly.</p>
</div>
</li>
<li className='flex items-center space-x-4'>
<MdTranslate className='h-10 w-10 p-2 rounded-lg items-center border-gray-300 border text-violet-500' />
<div className='group hover:cursor-pointer'>
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Custom Translator</h3>
<p className='font-thin text-xs'>Neural Text translation system tailored to your needs.</p>
</div>
</li>
<li className='flex items-center space-x-4'>
<IoText className='h-10 w-10 p-2 rounded-lg items-center border-gray-300 border text-violet-500' />
<div className='group hover:cursor-pointer'>
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>Text Classification</h3>
<p className='font-thin text-xs'>Categorise text into user defined classes.</p>
</div>
</li>
<li className='transition-colors duration-200 hover:text-violet-500 hover:underline cursor-pointer flex items-center'>View More <IoMdArrowRoundForward /> </li>
</ul>
</div>
</div>
</div>
<div className='relative bottom-0 flex border-gray-300 border-t mt-10 pt-5 px-10 text-sm font-light space-x-8'>
<p className='hover:underline cursor-pointer'>Explore templates</p>
<p className='hover:underline cursor-pointer'>Explore tools</p>
<p className='hover:underline cursor-pointer'>Join Everyday Free Access</p>
</div>
</div>
);
};
// Resources Dropdown Component
export const ResourcesDropdown: React.FC = () => {
return (
<div className="w-full text-white py-10 px-28">
<div className='flex'>
<div className='w-full space-y-8'>
<div>
<h1 className='text-3xl'>Curated Resources to Get You Started.</h1>
<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>
</div>
</div>
</div>
<div className='relative bottom-0 flex border-gray-300 border-t mt-10 pt-5 px-10 text-sm font-light space-x-8'>
<p className='hover:underline cursor-pointer'>Explore templates</p>
<p className='hover:underline cursor-pointer'>Explore tools</p>
<p className='hover:underline cursor-pointer'>Join Everyday Free Access</p>
</div>
</div>
);
};

132
components/Navbar/navbar.tsx Normal file
View File

@ -0,0 +1,132 @@
"use client";
import React, { useState } from 'react';
import { FaAngleDown } from "react-icons/fa";
import { ProductDropdown, SolutionsDropdown, ResourcesDropdown } from './dropdowns';
import MobileMenu from './MobileMenu'; // Import the MobileMenu component
const Navbar: React.FC = () => {
const [showProduct, setShowProduct] = useState<boolean>(false);
const [showSolutions, setShowSolutions] = useState<boolean>(false);
const [showResources, setShowResources] = useState<boolean>(false);
const [activeTab, setActiveTab] = useState<string>('');
const [mobileMenuOpen, setMobileMenuOpen] = useState<boolean>(false); // State for mobile menu
const toggleProduct = () => {
setShowProduct(!showProduct);
setShowSolutions(false);
setShowResources(false);
setActiveTab('product');
};
const toggleSolutions = () => {
setShowSolutions(!showSolutions);
setShowProduct(false);
setShowResources(false);
setActiveTab('solutions');
};
const toggleResources = () => {
setShowResources(!showResources);
setShowProduct(false);
setShowSolutions(false);
setActiveTab('resources');
};
const toggleMobileMenu = () => {
setMobileMenuOpen(!mobileMenuOpen);
};
return (
<div className='fixed top-0 w-full h-fit px-10 bg-[#080E12] bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-100 z-50'>
<div className='w-full text-white flex items-center justify-between'>
<div className='flex items-center space-x-12 relative'>
<a href='/'>
<img
className='h-20'
src='https://res.cloudinary.com/dezd109fz/image/upload/v1737306774/Screenshot_2025-01-16_150353_fwgdmz.png'
alt="Logo"
/></a>
{/* Desktop Menu */}
<ul className='hidden md:flex space-x-12'>
{/* Product Menu */}
<li className={`flex items-center cursor-pointer relative ${activeTab === 'product' ? 'text-violet-500' : ''}`} onClick={toggleProduct}>
Product <FaAngleDown className='ml-2' />
{activeTab === 'product' && (
<span className="absolute left-0 -bottom-1 transition-all duration-300">
<span className="block h-[2px] w-full bg-violet-500"></span>
</span>
)}
</li>
{/* Solutions Menu */}
<li className={`flex items-center cursor-pointer relative ${activeTab === 'solutions' ? 'text-violet-500' : ''}`} onClick={toggleSolutions}>
Solutions <FaAngleDown className='ml-2' />
{activeTab === 'solutions' && (
<span className="absolute left-0 -bottom-1 transition-all duration-300">
<span className="block h-[2px] w-full bg-violet-500"></span>
</span>
)}
</li>
{/* Pricing */}
<li className='flex items-center cursor-pointer'>Pricing</li>
{/* Resources Menu */}
<li className={`flex items-center cursor-pointer relative ${activeTab === 'resources' ? 'text-violet-500' : ''}`} onClick={toggleResources}>
Resources <FaAngleDown className='ml-2' />
{activeTab === 'resources' && (
<span className="absolute left-0 -bottom-1 transition-all duration-300">
<span className="block h-[2px] w-full bg-violet-500"></span>
</span>
)}
</li>
</ul>
{/* Hamburger Icon for Mobile View */}
<div className="md:hidden flex items-center" onClick={toggleMobileMenu}>
☰
</div>
</div>
{/* Action Buttons */}
<div className='hidden md:flex space-x-4'>
<button className='border px-4 py-2 rounded-md text-white border-white hover:bg-gray-800'>
Start Free Trial
</button>
<button className='border px-4 py-2 rounded-md bg-violet-700 hover:bg-violet-500 text-white'>
Take a Demo
</button>
</div>
</div>
{/* Dropdowns for Desktop View */}
<div className='border'>
{showProduct && (
<div>
<ProductDropdown />
</div>
)}
{showSolutions && (
<div>
<SolutionsDropdown />
</div>
)}
{showResources && (
<div>
<ResourcesDropdown />
</div>
)}
</div>
{/* Mobile Menu */}
{mobileMenuOpen && (
<MobileMenu show={mobileMenuOpen} toggle={toggleMobileMenu} />
)}
</div>
);
};
export default Navbar;

70
components/Newsletter/faces.tsx Normal file
View File

@ -0,0 +1,70 @@
"use client";
import { cn } from "@/lib/utils";
import { Marquee } from "@/components/ui/marquee";
const images = [
{
img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSV9uzErWz9EXqZDxZ5lP9aYpMz8eK6rr5X3w&s",
},
{
img: "https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F8ed3d547-94ff-48e1-9f20-8c14a7030a02_2000x2000.jpeg",
},
{
img: "https://cdn.vectorstock.com/i/1000v/48/43/google-symbol-logo-black-and-white-design-vector-46334843.jpg",
},
{
img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQADFN8_BR0poY4_U86hIDw6bB-iXS2UUXmoQ&s",
},
{
img: "https://miro.medium.com/v2/resize:fit:1400/1*O-ClkORJkmUm1wRsApB_yQ.png",
},
{
img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS9R9N0XiqvtWH8Qr0zHTfYLxoPh__Hc4HayrA1AwxNwSmpLVSR9jg4HoxK4zCx5AQVdJ0&usqp=CAU",
},
];
// Card Component for displaying each partner's logo
const FaceCard = ({ img }: { img: string }) => {
return (
<div
className={cn(
"relative h-28 w-28 cursor-pointer overflow-hidden rounded-xl flex items-center justify-center", // Made cards square
)}
>
<img className="h-full w-full object-cover" alt="" src={img} /> {/* Removed alt text and made image fill the card */}
</div>
);
};
export function Faces() {
const firstRow = images.slice(0, Math.ceil(images.length / 2));
const secondRow = images.slice(Math.ceil(images.length / 2));
return (
<div className="relative flex h-[500px] w-full flex-row items-center justify-center overflow-hidden rounded-lg bg-transparent md:shadow-xl">
{/* First Vertical Marquee */}
<Marquee pauseOnHover vertical className="[--duration:20s]">
{firstRow.map((partner, index) => (
<FaceCard key={index} {...partner} />
))}
</Marquee>
<Marquee reverse pauseOnHover vertical className="[--duration:20s]">
{secondRow.map((partner, index) => (
<FaceCard key={index} {...partner} />
))}
</Marquee>
<Marquee pauseOnHover vertical className="[--duration:20s]">
{firstRow.map((partner, index) => (
<FaceCard key={index} {...partner} />
))}
</Marquee>
{/* Gradients for top and bottom fade effect */}
<div className="pointer-events-none absolute inset-x-0 top-0 h-1/3 bg-gradient-to-t from-transparent to-[#080E12]"></div>
<div className="pointer-events-none absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-b from-transparent to-[#080E12]"></div>
</div>
);
}

38
components/Newsletter/newsletter.tsx Normal file
View File

@ -0,0 +1,38 @@
import React from 'react';
import { Faces } from './faces';
export function Newsletter() {
return (
<div className="flex items-center justify-center h-screen p-10 md:p-40">
<div className="flex flex-col md:flex-row w-full rounded-lg overflow-hidden">
<div className="w-full md:w-1/2">
{/* <img
src="https://res.cloudinary.com/dezd109fz/image/upload/v1737606596/Screenshot_2025-01-23_095938_fv9kxh.png" // Replace with your image URL
alt="Description of Image"
className="object-cover w-full h-full"
/> */}
<Faces />
</div>
<div className="w-full md:w-1/2 px-8 py-28 flex flex-col justify-between text-white">
<h2 className="text-5xl leading-[1.2] mb-4">Stay Up to Date with Latest Tech Updates</h2>
<p className="mb-6">
Stay updated with our latest news and offers. Join our community today!
</p>
<div className="flex space-x-4">
<input
type="email"
placeholder="Enter your email"
className="py-2 px-4 border border-[#4F79B9] bg-transparent rounded-xl mb-4 w-7/12 h-12"
required
/>
<button className="bg-[#4F79B9] text-white py-2 px-4 w-6/12 h-12 rounded-full hover:bg-[#3a5e95]">
Subscribe to Newsletter
</button>
</div>
</div>
</div>
</div>
);
}

26
components/dashboard-view.tsx Normal file
View File

@ -0,0 +1,26 @@
"use client";
import React from 'react';
import { motion } from 'framer-motion';
import { MouseParallaxImage } from './MouseParallax';
export default function DashboardView() {
const imageLink = "https://res.cloudinary.com/dezd109fz/image/upload/v1737426510/Screenshot_2025-01-21_075609_ypdwbo.png";
const variants = {
hidden: { opacity: 0, y: 50 },
visible: { opacity: 1, y: 0 },
};
return (
<motion.div
initial="hidden"
whileInView="visible"
variants={variants}
transition={{ duration: 0.5 }}
className='h-fit md:h-screen w-full flex items-center justify-center p-5 md:p-20 mt-20'
>
<MouseParallaxImage image={imageLink} title={""} className="" />
</motion.div>
);
}

148
components/footer.tsx Normal file
View File

@ -0,0 +1,148 @@
"use client";
import React from 'react';
import { motion } from 'framer-motion';
const companyLinks = [
{ text: "About", url: "/about" },
{ text: "Careers", url: "/careers" },
{ text: "Blog", url: "/blog" },
{ text: "Status", url: "/status" },
{ text: "Privacy", url: "/privacy" },
{ text: "Partner with us", url: "/partner" }
];
const communicationLinks = [
{ text: "Book Discovery Call", url: "/book-call" },
{ text: "Science Behind Everything", url: "/science" }
];
const communityLinks = [
{ text: "Customer Stories", url: "/customer-stories" },
{ text: "Community", url: "/community" },
{ text: "Support", url: "/support" },
{ text: "Reports", url: "/reports" }
];
const learnLinks = [
{ text: "Webinars", url: "/webinars" },
{ text: "Leadership", url: "/leadership" },
{ text: "Demos", url: "/demos" },
{ text: "Videos", url: "/videos" },
{ text: "Guides", url: "/guides" },
{ text: "Articles", url: "/articles" },
{ text: "eBooks", url: "/ebooks" },
{ text: "Quick Reads", url: "/quick-reads" }
];
const solutionsLinks = [
{ text: "Popular Solutions", url: "/solutions/popular" },
{ text: "Marketing", url: "/solutions/marketing" },
{ text: "Product", url: "/solutions/product" },
{ text: "Human Resources", url: "/solutions/hr" },
{ text: "Sales", url: "/solutions/sales" },
{ text: "Operations", url: "/solutions/operations" },
{ text: "Finance", url: "/solutions/finance" },
{ text: "Content", url: "/solutions/content" }
];
export default function Footer() {
return (
<div>
{/* Top Section */}
<div className='bg-black text-white px-10 md:px-40 py-10 md:py-20 flex items-center justify-between'>
<h1 className='text-5xl'>Let's get Started</h1>
<button className='px-6 py-4 rounded-2xl border hover:bg-white hover:text-black'>
Get 14 Days Free
</button>
</div>
{/* Middle Section with Lists */}
<div className='px-10 md:px-40 pt-20'>
<div className='grid grid-cols-1 md:grid-cols-5 gap-10'>
{/* Company List */}
<div className='space-y-5'>
<h3 className='text-lg mb-2 text-white'>Company</h3>
<ul className='text-gray-200 space-y-4'>
{companyLinks.map((link, index) => (
<li key={index}>
<a href={link.url} className="hover:text-violet-500">{link.text}</a>
</li>
))}
</ul>
</div>
{/* Communication List */}
<div className='space-y-5'>
<h3 className='text-lg mb-2 text-white'>Communication</h3>
<ul className='text-gray-200 space-y-4'>
{communicationLinks.map((link, index) => (
<li key={index}>
<a href={link.url} className="hover:text-violet-500">{link.text}</a>
</li>
))}
</ul>
</div>
{/* Community List */}
<div className='space-y-5'>
<h3 className='text-lg mb-2 text-white'>Community</h3>
<ul className='text-gray-200 space-y-4'>
{communityLinks.map((link, index) => (
<li key={index}>
<a href={link.url} className="hover:text-violet-500">{link.text}</a>
</li>
))}
</ul>
</div>
{/* Learn List */}
<div className='space-y-5'>
<h3 className='text-lg mb-2 text-white'>Learn</h3>
<ul className='text-gray-200 space-y-4'>
{learnLinks.map((link, index) => (
<li key={index}>
<a href={link.url} className="hover:text-violet-500">{link.text}</a>
</li>
))}
</ul>
</div>
{/* Solutions List */}
<div className='space-y-5'>
<h3 className='text-lg mb-2 text-white'>Solutions</h3>
<ul className='text-gray-200 space-y-4'>
{solutionsLinks.map((link, index) => (
<li key={index}>
<a href={link.url} className="hover:text-violet-500">{link.text}</a>
</li>
))}
</ul>
</div>
</div>
</div>
{/* Bottom Section with Animated Image */}
<div className='text-gray-400 px-10 md:px-40 py-20 pt-5 md:pt-10 flex flex-col md:flex-row items-center justify-between'>
{/* Animated Logo Image */}
<motion.img
className="h-20"
src="https://res.cloudinary.com/dezd109fz/image/upload/v1737306774/Screenshot_2025-01-16_150353_fwgdmz.png"
alt="Logo"
initial={{ y: -400, opacity: 0 }} // Start above view and invisible
whileInView={{
y: [-200, 0, -50, 0, -20, 0], // Drop and bounce effect
opacity: 1, // Fade in
}}
transition={{
duration: 1.5,
ease: "easeInOut",
}}
/>
{/* Description Text */}
<p className='w-full md:w-1/3 text-xs text-center md:text-right'>
In the new era of technology, we look to the future with certainty and pride for our company and business.
</p>
</div>
</div>
);
}

71
components/magicui/orbiting-circles.tsx Normal file
View File

@ -0,0 +1,71 @@
import { cn } from "@/lib/utils";
import React from "react";
export interface OrbitingCirclesProps
extends React.HTMLAttributes<HTMLDivElement> {
className?: string;
children?: React.ReactNode;
reverse?: boolean;
duration?: number;
delay?: number;
radius?: number;
path?: boolean;
iconSize?: number;
speed?: number;
}
export function OrbitingCircles({
className,
children,
reverse,
duration = 20,
radius = 160,
path = true,
iconSize = 30,
speed = 1,
...props
}: OrbitingCirclesProps) {
const calculatedDuration = duration / speed;
return (
<>
{path && (
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
className="pointer-events-none absolute inset-0 size-full"
>
<circle
className="stroke-black/10 stroke-1 dark:stroke-white/10"
cx="50%"
cy="50%"
r={radius}
fill="none"
/>
</svg>
)}
{React.Children.map(children, (child, index) => {
const angle = (360 / React.Children.count(children)) * index;
return (
<div
style={
{
"--duration": calculatedDuration,
"--radius": radius,
"--angle": angle,
"--icon-size": `${iconSize}px`,
} as React.CSSProperties
}
className={cn(
`absolute flex size-[var(--icon-size)] transform-gpu animate-orbit items-center justify-center rounded-full`,
{ "[animation-direction:reverse]": reverse },
className,
)}
{...props}
>
{child}
</div>
);
})}
</>
);
}

90
components/ui/animated-background.tsx Normal file
View File

@ -0,0 +1,90 @@
'use client';
import { cn } from '@/lib/utils';
import { AnimatePresence, Transition, motion } from 'motion/react';
import {
Children,
cloneElement,
ReactElement,
useEffect,
useState,
useId,
} from 'react';
export type AnimatedBackgroundProps = {
children:
| ReactElement<{ 'data-id': string }>[]
| ReactElement<{ 'data-id': string }>;
defaultValue?: string;
onValueChange?: (newActiveId: string | null) => void;
className?: string;
transition?: Transition;
enableHover?: boolean;
};
export function AnimatedBackground({
children,
defaultValue,
onValueChange,
className,
transition,
enableHover = false,
}: AnimatedBackgroundProps) {
const [activeId, setActiveId] = useState<string | null>(null);
const uniqueId = useId();
const handleSetActiveId = (id: string | null) => {
setActiveId(id);
if (onValueChange) {
onValueChange(id);
}
};
useEffect(() => {
if (defaultValue !== undefined) {
setActiveId(defaultValue);
}
}, [defaultValue]);
return Children.map(children, (child: any, index) => {
const id = child.props['data-id'];
const interactionProps = enableHover
? {
onMouseEnter: () => handleSetActiveId(id),
onMouseLeave: () => handleSetActiveId(null),
}
: {
onClick: () => handleSetActiveId(id),
};
return cloneElement(
child,
{
key: index,
className: cn('relative inline-flex', child.props.className),
'data-checked': activeId === id ? 'true' : 'false',
...interactionProps,
},
<>
<AnimatePresence initial={false}>
{activeId === id && (
<motion.div
layoutId={`background-${uniqueId}`}
className={cn('absolute inset-0', className)}
transition={transition}
initial={{ opacity: defaultValue ? 1 : 0 }}
animate={{
opacity: 1,
}}
exit={{
opacity: 0,
}}
/>
)}
</AnimatePresence>
<div className='z-10'>{child.props.children}</div>
</>
);
});
}

40
components/ui/animated-shiny-text.tsx Normal file
View File

@ -0,0 +1,40 @@
import { CSSProperties, FC, ReactNode } from "react";
import { cn } from "@/lib/utils";
interface AnimatedShinyTextProps {
children: ReactNode;
className?: string;
shimmerWidth?: number;
}
const AnimatedShinyText: FC<AnimatedShinyTextProps> = ({
children,
className,
shimmerWidth = 100,
}) => {
return (
<p
style={
{
"--shiny-width": `${shimmerWidth}px`,
} as CSSProperties
}
className={cn(
"mx-auto max-w-md text-neutral-600/70 dark:text-neutral-400/70",
// Shine effect
"animate-shiny-text bg-clip-text bg-no-repeat [background-position:0_0] [background-size:var(--shiny-width)_100%] [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]",
// Shine gradient
"bg-gradient-to-r from-transparent via-black/80 via-50% to-transparent dark:via-white/80",
className,
)}
>
{children}
</p>
);
};
export default AnimatedShinyText;

54
components/ui/bento-grid.tsx Normal file
View File

@ -0,0 +1,54 @@
import { cn } from "@/lib/utils";
export const BentoGrid = ({
className,
children,
}: {
className?: string;
children?: React.ReactNode;
}) => {
return (
<div
className={cn(
"grid md:auto-rows-[18rem] grid-cols-1 md:grid-cols-3 gap-4 max-w-screen mx-auto ",
className
)}
>
{children}
</div>
);
};
export const BentoGridItem = ({
className,
title,
description,
header,
icon,
}: {
className?: string;
title?: string | React.ReactNode;
description?: string | React.ReactNode;
header?: React.ReactNode;
icon?: React.ReactNode;
}) => {
return (
<div
className={cn(
"row-span-1 rounded-xl group/bento hover:shadow-xl transition duration-200 shadow-input dark:shadow-none p-4 dark:bg-[#1D1E24] justify-between flex flex-col space-y-4",
className
)}
>
{header}
<div className="group-hover/bento:translate-x-2 transition duration-200">
{icon}
<div className="font-sans font-bold text-neutral-600 dark:text-neutral-200 mb-2 mt-2">
{title}
</div>
<div className="font-sans font-normal text-neutral-600 text-xs dark:text-neutral-300">
{description}
</div>
</div>
</div>
);
};

118
components/ui/card-hover-effect.tsx Normal file
View File

@ -0,0 +1,118 @@
import { cn } from "@/lib/utils";
import { AnimatePresence, motion } from "framer-motion";
import Link from "next/link";
import { useState } from "react";
import { IconType } from 'react-icons';
export const HoverEffect = ({
items,
className,
}: {
items: {
title: string;
description: string;
link: string;
icon: IconType; // adding icon type
}[];
className?: string;
}) => {
let [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
return (
<div
className={cn(
"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 py-10",
className
)}
>
{items.map((item, idx) => (
<Link
target="_blank"
href={item?.link}
key={item?.link}
className="relative group block p-2 h-full w-full"
onMouseEnter={() => setHoveredIndex(idx)}
onMouseLeave={() => setHoveredIndex(null)}
>
<AnimatePresence>
{hoveredIndex === idx && (
<motion.span
className="absolute inset-0 h-full w-full bg-neutral-200 dark:bg-black block rounded-3xl"
layoutId="hoverBackground"
initial={{ opacity: 0 }}
animate={{
opacity: 1,
transition: { duration: 0.15 },
}}
exit={{
opacity: 0,
transition: { duration: 0.15, delay: 0.2 },
}}
/>
)}
</AnimatePresence>
<Card icon={item.icon}>
<CardTitle>{item.title}</CardTitle>
<CardDescription>{item.description}</CardDescription>
</Card>
</Link>
))}
</div>
);
};
export const Card = ({
className,
children,
icon
}: {
className?: string;
children: React.ReactNode;
icon: IconType;
}) => {
const Icon = icon;
return (
<div
className={cn(
"rounded-2xl h-[300px] w-full p-4 overflow-hidden border-transparent dark:border-white/[0.2] relative z-20 flex flex-col justify-between", // Added flex layout
className
)}
>
<div className="relative z-50">
<div className="p-4">{children}</div>
</div>
{<Icon className="text-4xl text-white absolute bottom-8 right-8 opacity-70" />}
</div>
);
};
export const CardTitle = ({
className,
children,
}: {
className?: string;
children: React.ReactNode;
}) => {
return (
<h4 className={cn("text-zinc-100 font-bold tracking-wide mt-4", className)}>
{children}
</h4>
);
};
export const CardDescription = ({
className,
children,
}: {
className?: string;
children: React.ReactNode;
}) => {
return (
<p
className={cn(
"mt-8 text-zinc-400 tracking-wide leading-relaxed text-sm",
className
)}
>
{children}
</p>
);
};

104
components/ui/infinite-moving-cards.tsx Normal file
View File

@ -0,0 +1,104 @@
"use client";
import { cn } from "@/lib/utils";
import React, { useEffect, useState } from "react";
export const InfiniteMovingCards = ({
items,
direction = "left",
speed = "fast",
pauseOnHover = true,
className,
}: {
items: {
src: string;
alt: string;
}[];
direction?: "left" | "right";
speed?: "fast" | "normal" | "slow";
pauseOnHover?: boolean;
className?: string;
}) => {
const containerRef = React.useRef<HTMLDivElement>(null);
const scrollerRef = React.useRef<HTMLUListElement>(null);
useEffect(() => {
addAnimation();
}, []);
const [start, setStart] = useState(false);
function addAnimation() {
if (containerRef.current && scrollerRef.current) {
const scrollerContent = Array.from(scrollerRef.current.children);
// Duplicate items for infinite scrolling effect
scrollerContent.forEach((item) => {
const duplicatedItem = item.cloneNode(true);
if (scrollerRef.current) {
scrollerRef.current.appendChild(duplicatedItem);
}
});
getDirection();
getSpeed();
setStart(true);
}
}
const getDirection = () => {
if (containerRef.current) {
containerRef.current.style.setProperty(
"--animation-direction",
direction === "left" ? "forwards" : "reverse"
);
}
};
const getSpeed = () => {
if (containerRef.current) {
const durationMap: Record<string, string> = {
fast: "20s",
normal: "40s",
slow: "80s",
};
containerRef.current.style.setProperty("--animation-duration", durationMap[speed]);
}
};
return (
<div
ref={containerRef}
className={cn(
"scroller relative z-20 max-w-7xl overflow-hidden [mask-image:linear-gradient(to_right,transparent,white_20%,white_80%,transparent)]",
className
)}
>
<ul
ref={scrollerRef}
className={cn(
"flex min-w-full shrink-0 gap-4 py-4 w-max flex-nowrap",
start && "animate-scroll ",
pauseOnHover && "hover:[animation-play-state:paused]"
)}
>
{items.map((item, idx) => (
<li
className="w-[120px] max-w-full relative flex-shrink-0"
key={item.alt} // Use alt text as key for uniqueness
>
<img
src={item.src}
alt={item.alt}
className="w-full h-auto rounded-md"
style={{
background:
"linear-gradient(180deg, var(--slate-800), var(--slate-900))",
}}
/>
</li>
))}
</ul>
</div>
);
};

73
components/ui/marquee.tsx Normal file
View File

@ -0,0 +1,73 @@
import { cn } from "@/lib/utils";
import { ComponentPropsWithoutRef } from "react";
interface MarqueeProps extends ComponentPropsWithoutRef<"div"> {
/**
* Optional CSS class name to apply custom styles
*/
className?: string;
/**
* Whether to reverse the animation direction
* @default false
*/
reverse?: boolean;
/**
* Whether to pause the animation on hover
* @default false
*/
pauseOnHover?: boolean;
/**
* Content to be displayed in the marquee
*/
children: React.ReactNode;
/**
* Whether to animate vertically instead of horizontally
* @default false
*/
vertical?: boolean;
/**
* Number of times to repeat the content
* @default 4
*/
repeat?: number;
}
export function Marquee({
className,
reverse = false,
pauseOnHover = false,
children,
vertical = false,
repeat = 4,
...props
}: MarqueeProps) {
return (
<div
{...props}
className={cn(
"group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)]",
{
"flex-row": !vertical,
"flex-col": vertical,
},
className,
)}
>
{Array(repeat)
.fill(0)
.map((_, i) => (
<div
key={i}
className={cn("flex shrink-0 justify-around [gap:var(--gap)]", {
"animate-marquee flex-row": !vertical,
"animate-marquee-vertical flex-col": vertical,
"group-hover:[animation-play-state:paused]": pauseOnHover,
"[animation-direction:reverse]": reverse,
})}
>
{children}
</div>
))}
</div>
);
}

69
components/ui/text-generate-effect.tsx Normal file
View File

@ -0,0 +1,69 @@
"use client";
import { useEffect } from "react";
import { motion, stagger, useAnimate, useInView } from "framer-motion";
import { cn } from "@/lib/utils";
import { useRef } from "react";
export const TextGenerateEffect = ({
words,
className,
filter = true,
duration = 1,
}: {
words: string;
className?: string;
filter?: boolean;
duration?: number;
}) => {
const [scope, animate] = useAnimate();
const containerRef = useRef(null);
const isInView = useInView(containerRef, { once: true });
let wordsArray = words.split(" ");
useEffect(() => {
if (isInView) {
animate(
"span",
{
opacity: 1,
filter: filter ? "blur(0px)" : "none",
},
{
duration: duration ? duration : 1,
delay: stagger(0.2),
ease: "easeOut", // added an ease for smoother animation
}
);
}
}, [isInView, scope.current, animate, filter, duration]);
const renderWords = () => {
return (
<>
{wordsArray.map((word, idx) => {
return (
<motion.span
key={word + idx}
className="text-gray-500 opacity-0 font-normal text-3xl italic"
style={{
filter: filter ? "blur(10px)" : "none",
}}
>
{word}{" "}
</motion.span>
);
})}
</>
);
};
return (
<div className={cn("font-bold", className)} ref={containerRef}>
<div className="mt-4">
<motion.div ref={scope} className=" dark:text-white text-black text-2xl leading-snug tracking-wide">
{renderWords()}
</motion.div>
</div>
</div>
);
};

111
components/why.tsx Normal file
View File

@ -0,0 +1,111 @@
"use client";
import { useState } from 'react';
import { MousePointer, Command, Coins, HeartHandshake } from 'lucide-react';
const benefits = [
{
icon: <MousePointer className="w-6 h-6" />,
title: "User-Friendly",
description: "Intuitive, drag-and-drop design means you can focus on what matters—your expertise.",
gradient: "from-purple-500/10 via-purple-500/5 to-transparent"
},
{
icon: <Command className="w-6 h-6" />,
title: "All-in-One Solution",
description: "No need for multiple tools; manage everything from one centralized platform.",
gradient: "from-blue-500/10 via-blue-500/5 to-transparent"
},
{
icon: <Coins className="w-6 h-6" />,
title: "Scalable Revenue Streams",
description: "Monetize your services through community building and our AI marketplace.",
gradient: "from-indigo-500/10 via-indigo-500/5 to-transparent"
},
{
icon: <HeartHandshake className="w-6 h-6" />,
title: "Dedicated Support",
description: "Our expert team is here to help you succeed every step of the way.",
gradient: "from-violet-500/10 via-violet-500/5 to-transparent"
}
];
export default function WhyChooseUs() {
const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
return (
<div className="w-full py-32">
<div className="container mx-auto px-4">
<div className="text-center mb-24">
<h2 className="text-4xl md:text-6xl text-white mb-8">Why Choose Us</h2>
<p className="text-xl text-gray-400">Everything you need to succeed with AI</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto">
{benefits.map((benefit, index) => (
<div
key={index}
className="relative group"
onMouseEnter={() => setHoveredIndex(index)}
onMouseLeave={() => setHoveredIndex(null)}
>
{/* Animated background */}
<div className={`
absolute inset-0 opacity-0 group-hover:opacity-100
bg-gradient-to-r ${benefit.gradient}
transition-all duration-500 rounded-3xl
`} />
{/* Content container */}
<div className="relative p-8">
<div className="flex items-start gap-6">
{/* Icon container */}
<div className={`
w-12 h-12 rounded-xl
flex items-center justify-center
bg-gradient-to-br from-purple-500/20 to-blue-500/20
transition-all duration-500 text-white
${hoveredIndex === index ? 'scale-110 rotate-3' : 'scale-100 rotate-0'}
`}>
{benefit.icon}
</div>
{/* Text content */}
<div className="flex-1">
<h3 className={`
text-2xl text-white mb-3
transition-transform duration-500
${hoveredIndex === index ? 'translate-x-2' : 'translate-x-0'}
`}>
{benefit.title}
</h3>
<p className={`
text-gray-400 leading-relaxed
transition-all duration-500
${hoveredIndex === index ? 'opacity-100' : 'opacity-80'}
`}>
{benefit.description}
</p>
</div>
</div>
{/* Decorative elements */}
<div className={`
absolute bottom-0 right-0 w-24 h-24
bg-gradient-to-br from-purple-500/5 to-blue-500/5
rounded-full blur-2xl
transition-opacity duration-500
${hoveredIndex === index ? 'opacity-100' : 'opacity-0'}
`} />
</div>
</div>
))}
</div>
{/* Bottom decoration */}
<div className="relative mt-16 flex justify-center">
<div className="w-32 h-1 bg-gradient-to-r from-transparent via-purple-500/30 to-transparent" />
</div>
</div>
</div>
);
}

6
lib/utils.ts Normal file
View File

@ -0,0 +1,6 @@
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}

274
package-lock.json generated
View File

@ -7,10 +7,20 @@
"": {
"name": "ai-website",
"version": "0.1.0",
"license": "ISC",
"dependencies": {
"@tabler/icons-react": "^3.28.1",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"framer-motion": "^12.4.2",
"lucide-react": "^0.473.0",
"motion": "^12.0.4",
"next": "15.1.5",
"react": "^19.0.0",
"react-dom": "^19.0.0"
"react-dom": "^19.0.0",
"react-icons": "^5.4.0",
"tailwind-merge": "^2.6.0",
"tailwindcss-animate": "^1.0.7"
},
"devDependencies": {
"@types/node": "^20",
@ -25,7 +35,6 @@
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
"integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=10"
@ -409,7 +418,6 @@
"version": "8.0.2",
"resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
"integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
"dev": true,
"license": "ISC",
"dependencies": {
"string-width": "^5.1.2",
@ -427,7 +435,6 @@
"version": "0.3.8",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
"integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/set-array": "^1.2.1",
@ -442,7 +449,6 @@
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6.0.0"
@ -452,7 +458,6 @@
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
"integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6.0.0"
@ -462,14 +467,12 @@
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
"integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
"dev": true,
"license": "MIT"
},
"node_modules/@jridgewell/trace-mapping": {
"version": "0.3.25",
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
"integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/resolve-uri": "^3.1.0",
@ -614,7 +617,6 @@
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
"integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
"dev": true,
"license": "MIT",
"dependencies": {
"@nodelib/fs.stat": "2.0.5",
@ -628,7 +630,6 @@
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
"integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 8"
@ -638,7 +639,6 @@
"version": "1.2.8",
"resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
"integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
"dev": true,
"license": "MIT",
"dependencies": {
"@nodelib/fs.scandir": "2.1.5",
@ -652,7 +652,6 @@
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
"integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
"dev": true,
"license": "MIT",
"optional": true,
"engines": {
@ -674,6 +673,32 @@
"tslib": "^2.8.0"
}
},
"node_modules/@tabler/icons": {
"version": "3.28.1",
"resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.28.1.tgz",
"integrity": "sha512-h7nqKEvFooLtFxhMOC1/2eiV+KRXhBUuDUUJrJlt6Ft6tuMw2eU/9GLQgrTk41DNmIEzp/LI83K9J9UUU8YBYQ==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/codecalm"
}
},
"node_modules/@tabler/icons-react": {
"version": "3.28.1",
"resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.28.1.tgz",
"integrity": "sha512-KNBpA2kbxr3/2YK5swt7b/kd/xpDP1FHYZCxDFIw54tX8slELRFEf95VMxsccQHZeIcUbdoojmUUuYSbt/sM5Q==",
"license": "MIT",
"dependencies": {
"@tabler/icons": "3.28.1"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/codecalm"
},
"peerDependencies": {
"react": ">= 16"
}
},
"node_modules/@types/node": {
"version": "20.17.14",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.14.tgz",
@ -708,7 +733,6 @@
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
"integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=12"
@ -721,7 +745,6 @@
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
"integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=12"
@ -734,14 +757,12 @@
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
"integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
"dev": true,
"license": "MIT"
},
"node_modules/anymatch": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
"integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
"dev": true,
"license": "ISC",
"dependencies": {
"normalize-path": "^3.0.0",
@ -755,21 +776,18 @@
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
"integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
"dev": true,
"license": "MIT"
},
"node_modules/balanced-match": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
"dev": true,
"license": "MIT"
},
"node_modules/binary-extensions": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
"integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=8"
@ -782,7 +800,6 @@
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
"dev": true,
"license": "MIT",
"dependencies": {
"balanced-match": "^1.0.0"
@ -792,7 +809,6 @@
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
"integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
"dev": true,
"license": "MIT",
"dependencies": {
"fill-range": "^7.1.1"
@ -816,7 +832,6 @@
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
"integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 6"
@ -846,7 +861,6 @@
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
"dev": true,
"license": "MIT",
"dependencies": {
"anymatch": "~3.1.2",
@ -871,7 +885,6 @@
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
"dev": true,
"license": "ISC",
"dependencies": {
"is-glob": "^4.0.1"
@ -880,12 +893,33 @@
"node": ">= 6"
}
},
"node_modules/class-variance-authority": {
"version": "0.7.1",
"resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
"integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
"license": "Apache-2.0",
"dependencies": {
"clsx": "^2.1.1"
},
"funding": {
"url": "https://polar.sh/cva"
}
},
"node_modules/client-only": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
"integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
"license": "MIT"
},
"node_modules/clsx": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
"license": "MIT",
"engines": {
"node": ">=6"
}
},
"node_modules/color": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
@ -904,7 +938,6 @@
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"devOptional": true,
"license": "MIT",
"dependencies": {
"color-name": "~1.1.4"
@ -917,7 +950,6 @@
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"devOptional": true,
"license": "MIT"
},
"node_modules/color-string": {
@ -935,7 +967,6 @@
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
"integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 6"
@ -945,7 +976,6 @@
"version": "7.0.6",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
"integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
"dev": true,
"license": "MIT",
"dependencies": {
"path-key": "^3.1.0",
@ -960,7 +990,6 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
"dev": true,
"license": "MIT",
"bin": {
"cssesc": "bin/cssesc"
@ -990,35 +1019,30 @@
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
"integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
"dev": true,
"license": "Apache-2.0"
},
"node_modules/dlv": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
"integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
"dev": true,
"license": "MIT"
},
"node_modules/eastasianwidth": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
"integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
"dev": true,
"license": "MIT"
},
"node_modules/emoji-regex": {
"version": "9.2.2",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
"integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
"dev": true,
"license": "MIT"
},
"node_modules/fast-glob": {
"version": "3.3.3",
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
"integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
"dev": true,
"license": "MIT",
"dependencies": {
"@nodelib/fs.stat": "^2.0.2",
@ -1035,7 +1059,6 @@
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
"dev": true,
"license": "ISC",
"dependencies": {
"is-glob": "^4.0.1"
@ -1048,7 +1071,6 @@
"version": "1.18.0",
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.18.0.tgz",
"integrity": "sha512-QKHXPW0hD8g4UET03SdOdunzSouc9N4AuHdsX8XNcTsuz+yYFILVNIX4l9yHABMhiEI9Db0JTTIpu0wB+Y1QQw==",
"dev": true,
"license": "ISC",
"dependencies": {
"reusify": "^1.0.4"
@ -1058,7 +1080,6 @@
"version": "7.1.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
"integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
"dev": true,
"license": "MIT",
"dependencies": {
"to-regex-range": "^5.0.1"
@ -1071,7 +1092,6 @@
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
"integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
"dev": true,
"license": "ISC",
"dependencies": {
"cross-spawn": "^7.0.0",
@ -1084,11 +1104,37 @@
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/framer-motion": {
"version": "12.4.2",
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.4.2.tgz",
"integrity": "sha512-pW307cQKjDqEuO1flEoIFf6TkuJRfKr+c7qsHAJhDo4368N/5U8/7WU8J+xhd9+gjmOgJfgp+46evxRRFM39dA==",
"license": "MIT",
"dependencies": {
"motion-dom": "^12.0.0",
"motion-utils": "^12.0.0",
"tslib": "^2.4.0"
},
"peerDependencies": {
"@emotion/is-prop-valid": "*",
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"peerDependenciesMeta": {
"@emotion/is-prop-valid": {
"optional": true
},
"react": {
"optional": true
},
"react-dom": {
"optional": true
}
}
},
"node_modules/fsevents": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
"dev": true,
"hasInstallScript": true,
"license": "MIT",
"optional": true,
@ -1103,7 +1149,6 @@
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
"dev": true,
"license": "MIT",
"funding": {
"url": "https://github.com/sponsors/ljharb"
@ -1113,7 +1158,6 @@
"version": "10.4.5",
"resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
"integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
"dev": true,
"license": "ISC",
"dependencies": {
"foreground-child": "^3.1.0",
@ -1134,7 +1178,6 @@
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
"integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
"dev": true,
"license": "ISC",
"dependencies": {
"is-glob": "^4.0.3"
@ -1147,7 +1190,6 @@
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
"integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"function-bind": "^1.1.2"
@ -1167,7 +1209,6 @@
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
"dev": true,
"license": "MIT",
"dependencies": {
"binary-extensions": "^2.0.0"
@ -1180,7 +1221,6 @@
"version": "2.16.1",
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
"integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
"dev": true,
"license": "MIT",
"dependencies": {
"hasown": "^2.0.2"
@ -1196,7 +1236,6 @@
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
@ -1206,7 +1245,6 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=8"
@ -1216,7 +1254,6 @@
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
"dev": true,
"license": "MIT",
"dependencies": {
"is-extglob": "^2.1.1"
@ -1229,7 +1266,6 @@
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.12.0"
@ -1239,14 +1275,12 @@
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
"dev": true,
"license": "ISC"
},
"node_modules/jackspeak": {
"version": "3.4.3",
"resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
"integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
"dev": true,
"license": "BlueOak-1.0.0",
"dependencies": {
"@isaacs/cliui": "^8.0.2"
@ -1262,7 +1296,6 @@
"version": "1.21.7",
"resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
"integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
"dev": true,
"license": "MIT",
"bin": {
"jiti": "bin/jiti.js"
@ -1272,7 +1305,6 @@
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
"integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=14"
@ -1285,21 +1317,27 @@
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
"dev": true,
"license": "MIT"
},
"node_modules/lru-cache": {
"version": "10.4.3",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
"integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
"dev": true,
"license": "ISC"
},
"node_modules/lucide-react": {
"version": "0.473.0",
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.473.0.tgz",
"integrity": "sha512-KW6u5AKeIjkvrxXZ6WuCu9zHE/gEYSXCay+Gre2ZoInD0Je/e3RBtP4OHpJVJ40nDklSvjVKjgH7VU8/e2dzRw==",
"license": "ISC",
"peerDependencies": {
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
}
},
"node_modules/merge2": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
"integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 8"
@ -1309,7 +1347,6 @@
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
"integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
"dev": true,
"license": "MIT",
"dependencies": {
"braces": "^3.0.3",
@ -1323,7 +1360,6 @@
"version": "9.0.5",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
"integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
"dev": true,
"license": "ISC",
"dependencies": {
"brace-expansion": "^2.0.1"
@ -1339,17 +1375,56 @@
"version": "7.1.2",
"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
"integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
"dev": true,
"license": "ISC",
"engines": {
"node": ">=16 || 14 >=14.17"
}
},
"node_modules/motion": {
"version": "12.0.4",
"resolved": "https://registry.npmjs.org/motion/-/motion-12.0.4.tgz",
"integrity": "sha512-ybiFFMRZfZY/4F9Pi4CSVPr2us5Q0XbOLB6NZnMNW8duYKM7gzljPbkqCTCadaSJuGxc6sx1uE6Mb2VbHEx4GA==",
"license": "MIT",
"dependencies": {
"framer-motion": "^12.0.4",
"tslib": "^2.4.0"
},
"peerDependencies": {
"@emotion/is-prop-valid": "*",
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"peerDependenciesMeta": {
"@emotion/is-prop-valid": {
"optional": true
},
"react": {
"optional": true
},
"react-dom": {
"optional": true
}
}
},
"node_modules/motion-dom": {
"version": "12.0.0",
"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.0.0.tgz",
"integrity": "sha512-CvYd15OeIR6kHgMdonCc1ihsaUG4MYh/wrkz8gZ3hBX/uamyZCXN9S9qJoYF03GqfTt7thTV/dxnHYX4+55vDg==",
"license": "MIT",
"dependencies": {
"motion-utils": "^12.0.0"
}
},
"node_modules/motion-utils": {
"version": "12.0.0",
"resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.0.0.tgz",
"integrity": "sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA==",
"license": "MIT"
},
"node_modules/mz": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
"integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
"dev": true,
"license": "MIT",
"dependencies": {
"any-promise": "^1.0.0",
@ -1461,7 +1536,6 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
@ -1471,7 +1545,6 @@
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
@ -1481,7 +1554,6 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
"integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 6"
@ -1491,14 +1563,12 @@
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
"integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
"dev": true,
"license": "BlueOak-1.0.0"
},
"node_modules/path-key": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=8"
@ -1508,14 +1578,12 @@
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
"dev": true,
"license": "MIT"
},
"node_modules/path-scurry": {
"version": "1.11.1",
"resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
"integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
"dev": true,
"license": "BlueOak-1.0.0",
"dependencies": {
"lru-cache": "^10.2.0",
@ -1538,7 +1606,6 @@
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=8.6"
@ -1551,7 +1618,6 @@
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
@ -1561,7 +1627,6 @@
"version": "4.0.6",
"resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
"integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 6"
@ -1571,7 +1636,6 @@
"version": "8.5.1",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.1.tgz",
"integrity": "sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==",
"dev": true,
"funding": [
{
"type": "opencollective",
@ -1600,7 +1664,6 @@
"version": "15.1.0",
"resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
"integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
"dev": true,
"license": "MIT",
"dependencies": {
"postcss-value-parser": "^4.0.0",
@ -1618,7 +1681,6 @@
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
"integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
"dev": true,
"license": "MIT",
"dependencies": {
"camelcase-css": "^2.0.1"
@ -1638,7 +1700,6 @@
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
"integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
"dev": true,
"funding": [
{
"type": "opencollective",
@ -1674,7 +1735,6 @@
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
"integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
"dev": true,
"funding": [
{
"type": "opencollective",
@ -1700,7 +1760,6 @@
"version": "6.1.2",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
"integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
"dev": true,
"license": "MIT",
"dependencies": {
"cssesc": "^3.0.0",
@ -1714,14 +1773,12 @@
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
"dev": true,
"license": "MIT"
},
"node_modules/queue-microtask": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
"integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
"dev": true,
"funding": [
{
"type": "github",
@ -1759,11 +1816,19 @@
"react": "^19.0.0"
}
},
"node_modules/react-icons": {
"version": "5.4.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.4.0.tgz",
"integrity": "sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==",
"license": "MIT",
"peerDependencies": {
"react": "*"
}
},
"node_modules/read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
"integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
"dev": true,
"license": "MIT",
"dependencies": {
"pify": "^2.3.0"
@ -1773,7 +1838,6 @@
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
"dev": true,
"license": "MIT",
"dependencies": {
"picomatch": "^2.2.1"
@ -1786,7 +1850,6 @@
"version": "1.22.10",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
"integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
"dev": true,
"license": "MIT",
"dependencies": {
"is-core-module": "^2.16.0",
@ -1807,7 +1870,6 @@
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
"integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
"dev": true,
"license": "MIT",
"engines": {
"iojs": ">=1.0.0",
@ -1818,7 +1880,6 @@
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
"integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
"dev": true,
"funding": [
{
"type": "github",
@ -1901,7 +1962,6 @@
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
"dev": true,
"license": "MIT",
"dependencies": {
"shebang-regex": "^3.0.0"
@ -1914,7 +1974,6 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=8"
@ -1924,7 +1983,6 @@
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
"integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
"dev": true,
"license": "ISC",
"engines": {
"node": ">=14"
@ -1964,7 +2022,6 @@
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
"integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
"dev": true,
"license": "MIT",
"dependencies": {
"eastasianwidth": "^0.2.0",
@ -1983,7 +2040,6 @@
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
"dev": true,
"license": "MIT",
"dependencies": {
"emoji-regex": "^8.0.0",
@ -1998,7 +2054,6 @@
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=8"
@ -2008,14 +2063,12 @@
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
"dev": true,
"license": "MIT"
},
"node_modules/string-width-cjs/node_modules/strip-ansi": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
"dev": true,
"license": "MIT",
"dependencies": {
"ansi-regex": "^5.0.1"
@ -2028,7 +2081,6 @@
"version": "7.1.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
"integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"ansi-regex": "^6.0.1"
@ -2045,7 +2097,6 @@
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
"dev": true,
"license": "MIT",
"dependencies": {
"ansi-regex": "^5.0.1"
@ -2058,7 +2109,6 @@
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=8"
@ -2091,7 +2141,6 @@
"version": "3.35.0",
"resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
"integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/gen-mapping": "^0.3.2",
@ -2114,7 +2163,6 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.4"
@ -2123,11 +2171,20 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/tailwind-merge": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.0.tgz",
"integrity": "sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/dcastil"
}
},
"node_modules/tailwindcss": {
"version": "3.4.17",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
"integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
"dev": true,
"license": "MIT",
"dependencies": {
"@alloc/quick-lru": "^5.2.0",
@ -2161,11 +2218,19 @@
"node": ">=14.0.0"
}
},
"node_modules/tailwindcss-animate": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
"integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
"license": "MIT",
"peerDependencies": {
"tailwindcss": ">=3.0.0 || insiders"
}
},
"node_modules/thenify": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
"integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
"dev": true,
"license": "MIT",
"dependencies": {
"any-promise": "^1.0.0"
@ -2175,7 +2240,6 @@
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
"integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
"dev": true,
"license": "MIT",
"dependencies": {
"thenify": ">= 3.1.0 < 4"
@ -2188,7 +2252,6 @@
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"is-number": "^7.0.0"
@ -2201,7 +2264,6 @@
"version": "0.1.13",
"resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
"integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
"dev": true,
"license": "Apache-2.0"
},
"node_modules/tslib": {
@ -2235,14 +2297,12 @@
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
"dev": true,
"license": "MIT"
},
"node_modules/which": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
"dev": true,
"license": "ISC",
"dependencies": {
"isexe": "^2.0.0"
@ -2258,7 +2318,6 @@
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
"integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"ansi-styles": "^6.1.0",
@ -2277,7 +2336,6 @@
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
"dev": true,
"license": "MIT",
"dependencies": {
"ansi-styles": "^4.0.0",
@ -2295,7 +2353,6 @@
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=8"
@ -2305,7 +2362,6 @@
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"license": "MIT",
"dependencies": {
"color-convert": "^2.0.1"
@ -2321,14 +2377,12 @@
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
"dev": true,
"license": "MIT"
},
"node_modules/wrap-ansi-cjs/node_modules/string-width": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
"dev": true,
"license": "MIT",
"dependencies": {
"emoji-regex": "^8.0.0",
@ -2343,7 +2397,6 @@
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
"dev": true,
"license": "MIT",
"dependencies": {
"ansi-regex": "^5.0.1"
@ -2356,7 +2409,6 @@
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz",
"integrity": "sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==",
"dev": true,
"license": "ISC",
"bin": {
"yaml": "bin.mjs"

23
package.json
View File

@ -2,6 +2,14 @@
"name": "ai-website",
"version": "0.1.0",
"private": true,
"description": "This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).",
"license": "ISC",
"author": "",
"type": "commonjs",
"main": "index.js",
"directories": {
"lib": "lib"
},
"scripts": {
"dev": "next dev",
"build": "next build",
@ -9,16 +17,25 @@
"lint": "next lint"
},
"dependencies": {
"@tabler/icons-react": "^3.28.1",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"framer-motion": "^12.4.2",
"lucide-react": "^0.473.0",
"motion": "^12.0.4",
"next": "15.1.5",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"next": "15.1.5"
"react-icons": "^5.4.0",
"tailwind-merge": "^2.6.0",
"tailwindcss-animate": "^1.0.7"
},
"devDependencies": {
"typescript": "^5",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"postcss": "^8",
"tailwindcss": "^3.4.1"
"tailwindcss": "^3.4.1",
"typescript": "^5"
}
}

100
tailwind.config.ts
View File

@ -1,18 +1,102 @@
import type { Config } from "tailwindcss";
export default {
content: [
darkMode: ["class"],
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
colors: {
background: "var(--background)",
foreground: "var(--foreground)",
},
},
extend: {
colors: {
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))'
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))'
},
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))'
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))'
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))'
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))'
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))'
},
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
chart: {
'1': 'hsl(var(--chart-1))',
'2': 'hsl(var(--chart-2))',
'3': 'hsl(var(--chart-3))',
'4': 'hsl(var(--chart-4))',
'5': 'hsl(var(--chart-5))'
}
},
borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)'
},
animation: {
'shiny-text': 'shiny-text 8s infinite',
marquee: 'marquee var(--duration) infinite linear',
'marquee-vertical': 'marquee-vertical var(--duration) linear infinite',
orbit: 'orbit calc(var(--duration)*1s) linear infinite'
},
keyframes: {
'shiny-text': {
'0%, 90%, 100%': {
'background-position': 'calc(-100% - var(--shiny-width)) 0'
},
'30%, 60%': {
'background-position': 'calc(100% + var(--shiny-width)) 0'
}
},
marquee: {
from: {
transform: 'translateX(0)'
},
to: {
transform: 'translateX(calc(-100% - var(--gap)))'
}
},
'marquee-vertical': {
from: {
transform: 'translateY(0)'
},
to: {
transform: 'translateY(calc(-100% - var(--gap)))'
}
},
orbit: {
'0%': {
transform: 'rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--radius) * 1px)) rotate(calc(var(--angle) * -1deg))'
},
'100%': {
transform: 'rotate(calc(var(--angle) * 1deg + 360deg)) translateY(calc(var(--radius) * 1px)) rotate(calc((var(--angle) * -1deg) - 360deg))'
}
}
}
}
},
plugins: [],
plugins: [require("tailwindcss-animate")],
} satisfies Config;

2
tsconfig.json
View File

@ -22,6 +22,6 @@
"@/*": ["./*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "components/Newsletter/newsletter.tsx"],
"exclude": ["node_modules"]
}