iHateReading

Find Your Interests

CMD + K

Getting Started

Welcome to custom components section. Components that are building blocks of any website in the world helping you to build websites as quickly and easily as possible

Clone the github starter repository
Run yarn or npm install
Copy paste the component source code in pages/index.js
Run yarn run dev or npm run dev
Open localhost:3001 run the repository
Simply copy-paste each components to build your website instantly
You are all set!!🔥

Install the tailwind, framer-motion, gsap and lucide-react npm modules
Use yarn add tailwindcss postcss framer-motion gsap lucide-react react-icons
Add postcss.config.jsandtailwind.config.jsin the root directory next to package.json for configuring tailwind
Copy paste the component source code
Run yarn run dev or npm run dev
Open localhost:3001 run the repository
Simply copy-paste each components to build your website instantly
You are all set!!🔥

Monitoring status hero section

Trusted by top companies

Track your app monitoring status

Stay alive and let your business grow

Real-time Monitoring

Track your application's performance metrics in real-time with instant alerts

Secure & Reliable

Enterprise-grade security with 99.9% uptime guarantee for your monitoring needs

Lightning Fast

Ultra-fast response times and instant notifications for critical issues

Analytics Dashboard

Comprehensive analytics and insights to optimize your application performance

/* eslint-disable @next/next/no-html-link-for-pages */
import React, { useState } from "react";
import {
	Search,
	Activity,
	Shield,
	Zap,
	BarChart,
	DotIcon,
	Monitor,
	PlayCircle,
} from "lucide-react";

const trustedCompanies = [
	{
		name: "Slack",
		logo: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbrands%2FLogo.png-1.png?alt=media&token=42f6c0ad-e6a4-426f-81b7-9b980a7228e1",
	},
	{
		name: "Figma",
		logo: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbrands%2FLogo.png-2.png?alt=media&token=b9c55419-1463-4a3d-89e3-4f5c74d2db90",
	},
	{
		name: "Google",
		logo: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbrands%2FLogo.png-3.png?alt=media&token=ad19be3c-a464-4869-adb1-75b13df1522d",
	},
	{
		name: "Spotify",
		logo: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbrands%2FLogo.png-5.png?alt=media&token=50fea414-9b0b-439c-9b55-cad0daaf6df3",
	},
];
const BackgroundDots = () => {
	const dots = Array.from({ length: 500 });

	return (
		<div className="absolute inset-0 z-0 pointer-events-none overflow-hidden">
			<div className="w-full h-full grid grid-cols-20 gap-2 p-4">
				{dots.map((_, i) => (
					<div
						key={i}
						className={`w-2 h-2 rounded-full bg-gray-800 ${
							i % 2 === 0 ? "animate-pulse" : ""
						}`}
					/>
				))}
			</div>
		</div>
	);
};

const MonitoringStatusHero = () => {
	const [hoveredCard, setHoveredCard] = useState(false);
	const [circlePosition, setCirclePosition] = useState({ x: 0, y: 0 });

	const handleMouseMove = (e) => {
		const rect = e.currentTarget.getBoundingClientRect();
		const x = e.clientX - rect.left - 80;
		const y = e.clientY - rect.top - 80;
		setHoveredCard(true);
		setCirclePosition({ x, y });
	};

	const handleMouseLeave = () => {
		setHoveredCard(false);
	};

	const FeatureCard = ({ id, icon: Icon, title, description }) => (
		<div className="relative group flex flex-col justify-start items-start border border-gray-700 hover:border-gray-600 p-6 rounded-lg shadow-sm hover:shadow-2xl transition-all duration-100 ease-in overflow-hidden cursor-pointer hover:text-white text-gray-300">
			<div className="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mb-4">
				<Icon className="w-6 h-6 text-orange-600" />
			</div>
			<h3 className="text-2xl font-semibold text-gray-400 mb-2">{title}</h3>
			<p className="text-gray-400 text-sm">{description}</p>
		</div>
	);

	return (
		<div
			className="min-h-screen bg-gradient-to-br from-gray-800 to-black text-white relative "
			onMouseMove={(e) => handleMouseMove(e)}
			onMouseLeave={handleMouseLeave}
		>
			{hoveredCard && (
				<span
					style={{
						transform: `translate(${circlePosition.x}px, ${circlePosition.y}px)`,
					}}
					className="absolute w-40 h-40 rounded-full bg-gradient-to-tr from-gray-800 to-orange-900 blur-2xl transition-all duration-100 ease-in"
				/>
			)}
			{/* Navbar */}
			<nav className="absolute top-0 left-0 right-0 border-b border-gray-800 z-50">
				<div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
					<div className="flex justify-between items-center h-16">
						{/* Logo */}
						<div className="group flex justify-start items-center gap-1 hover:text-white text-gray-400 cursor-pointer">
							<Monitor />
							<a className="group-hover:text-white no-underline text-gray-400 transition-all duration-100 ease-in">
								Desktop
							</a>
						</div>

						{/* Center Links */}
						<div className="hidden md:flex items-center space-x-8 cursor-pointer">
							<a className="text-gray-400 hover:text-white hover:bg-orange-800 rounded-xl p-2 no-underline hover:no-underline hover:px-4 transition-all duration-100 ease-in">
								Home
							</a>
							<a className="text-gray-400 hover:text-white hover:bg-orange-800 rounded-xl p-2 no-underline hover:no-underline hover:px-4 transition-all duration-100 ease-in">
								Features
							</a>
							<a className="text-gray-400 hover:text-white hover:bg-orange-800 rounded-xl p-2 no-underline hover:no-underline hover:px-4 transition-all duration-100 ease-in">
								Pricing
							</a>
							<a className="text-gray-400 hover:text-white hover:bg-orange-800 rounded-xl p-2 no-underline hover:no-underline hover:px-4 transition-all duration-100 ease-in">
								Docs
							</a>
						</div>

						{/* Right Side */}
						<div className="flex items-center cursor-pointer">
							<button className="bg-orange-600 text-gray-200 hover:text-white px-4 py-2 hover:px-6 rounded-md hover:bg-orange-700 transition-all duration-100 ease-in">
								Get Started
							</button>
						</div>
					</div>
				</div>
			</nav>

			{/* Hero Content */}
			<div className="pt-32 pb-16 px-4 sm:px-6 lg:px-8">
				<div className="max-w-5xl mx-auto">
					{/* Heading */}
					<div className="text-center my-12">
						<span className="w-60 mx-auto px-2 text-sm rounded-full bg-gradient-to-tr from-gray-900 to-orange-900 animate-pulse flex justify-center items-center gap-1 transition-all duration-100 ease-in hover:bg-gray-900">
							<DotIcon className="text-orange-400" size={40} />
							Trusted by top companies
						</span>
						<h1 className="text-4 md:text-5xl lg:text-5xl font-bold mb-6 font-cool mt-10">
							Track your app monitoring status
						</h1>
						<p className="text-xl">Stay alive and let your business grow</p>
						<div className="flex justify-center items-center gap-4 mt-8">
							<button className="group inline-flex items-center px-6 py-1 bg-orange-600 text-white rounded-md hover:bg-orange-700 hover:px-8 transition-all duration-100 ease-in">
								<Search className="w-5 h-5 mr-2 group-hover:-translate-x-1 transition-all duration-100 ease-in" />
								<p>Get Started</p>
							</button>
							<button className="group relative inline-flex items-center px-6 py-1 rounded-md overflow-hidden">
								<div className="absolute inset-0 bg-gradient-to-r from-gray-900 to-orange-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
								<div className="absolute inset-0 bg-gradient-to-r from-orange-800 to-gray-900 group-hover:translate-x-full transition-transform duration-300" />
								<div className="relative flex items-center">
									<PlayCircle className="w-5 h-5 mr-2 group-hover:scale-110 transition-transform duration-300" />
									<p className="text-white">Check Demo</p>
								</div>
							</button>
						</div>
					</div>

					{/* Features */}
					<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mt-16">
						<FeatureCard
							id="monitoring"
							icon={Activity}
							title="Real-time Monitoring"
							description="Track your application's performance metrics in real-time with instant alerts"
						/>
						<FeatureCard
							id="security"
							icon={Shield}
							title="Secure & Reliable"
							description="Enterprise-grade security with 99.9% uptime guarantee for your monitoring needs"
						/>
						<FeatureCard
							id="speed"
							icon={Zap}
							title="Lightning Fast"
							description="Ultra-fast response times and instant notifications for critical issues"
						/>
						<FeatureCard
							id="analytics"
							icon={BarChart}
							title="Analytics Dashboard"
							description="Comprehensive analytics and insights to optimize your application performance"
						/>
					</div>
				</div>
			</div>
		</div>
	);
};

export default MonitoringStatusHero;

Buy iHateReading UI library to get the source codeiHateReading UI (Buy all components)

Klip hero section

Voice generation

Instant voice generation

Scene generation

Ready made scenes

Backed by Ycombinator

AI powered video generator

-Create videos from your content instantly

Quick report

Analyse reports

Easy transciption

Quickly create transcription

/* eslint-disable @next/next/no-html-link-for-pages */
import React, { useState } from "react";
import {
	Search,
	Activity,
	Shield,
	Zap,
	BarChart,
	DotIcon,
	Monitor,
	PlayCircle,
	Mouse,
} from "lucide-react";
import colors from "tailwindcss/colors";

const BackgroundDots = () => {
	return (
		<div className="absolute inset-0 w-full h-full">
			<div
				className="absolute inset-0 opacity-10 z-0"
				style={{
					backgroundImage: `
							linear-gradient(to right, ${colors.gray[800]} 1px, transparent 1px),
							linear-gradient(to bottom, ${colors.gray[800]} 1px, transparent 1px)
						`,
					backgroundSize: "4rem 4rem",
				}}
			/>
		</div>
	);
};

const trustedCompanies = [
	{
		name: "Slack",
		logo: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbrands%2FLogo.png-1.png?alt=media&token=42f6c0ad-e6a4-426f-81b7-9b980a7228e1",
	},
	{
		name: "Figma",
		logo: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbrands%2FLogo.png-2.png?alt=media&token=b9c55419-1463-4a3d-89e3-4f5c74d2db90",
	},
	{
		name: "Google",
		logo: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbrands%2FLogo.png-3.png?alt=media&token=ad19be3c-a464-4869-adb1-75b13df1522d",
	},
	{
		name: "Spotify",
		logo: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbrands%2FLogo.png-5.png?alt=media&token=50fea414-9b0b-439c-9b55-cad0daaf6df3",
	},
];

const KlipHeroSection = () => {
	const [hoveredCard, setHoveredCard] = useState(false);
	const [circlePosition, setCirclePosition] = useState({ x: 0, y: 0 });

	const handleMouseMove = (e) => {
		const rect = e.currentTarget.getBoundingClientRect();
		const x = e.clientX - rect.left;
		const y = e.clientY - rect.top;
		setHoveredCard(true);
		setCirclePosition({ x, y });
	};

	const handleMouseLeave = () => {
		setHoveredCard(false);
	};

	const FeatureCard = ({ title, description }) => (
		<div className="relative group flex flex-col justify-start items-start rounded-lg border border-gray-800 my-1 px-4 py-2 bg-black bg-opacity-20 transition-all duration-100 ease-in overflow-hidden cursor-pointer hover:text-white text-gray-300">
			<p className="font-semibold">{title}</p>
			<p className="text-sm">{description}</p>
		</div>
	);

	return (
		<div
			className="min-h-screen bg-gradient-to-br from-gray-800 to-black text-white relative "
			onMouseMove={(e) => handleMouseMove(e)}
			onMouseLeave={handleMouseLeave}
		>
			{hoveredCard && (
				<div
					style={{
						transform: `translate(${circlePosition.x}px, ${circlePosition.y}px)`,
					}}
					className="absolute transition-all duration-100 ease-in text-gray-400"
				>
					<Mouse />
				</div>
			)}

			{/* Navbar */}
			<nav className="w-full z-50">
				<div className="max-w-7xl mx-auto sm:px-6 lg:px-8 py-4">
					<div className="flex justify-between items-center ">
						{/* Logo */}
						<div className="group flex justify-start items-center gap-1 hover:text-white text-gray-400 cursor-pointer">
							<span className="text-3xl font-cool uppercase font-bold">K</span>
							<a className="group-hover:text-white no-underline text-gray-400 transition-all duration-100 ease-in">
								klip
							</a>
						</div>

						{/* Center Links */}
						<div className="hidden md:flex items-center space-x-8 cursor-pointer">
							<a className="text-gray-400 hover:bg-gray-200 hover:text-black rounded-xl p-2 no-underline hover:no-underline hover:px-4 transition-all duration-100 ease-in">
								Docs
							</a>
							<a className="text-gray-400 hover:bg-gray-200 hover:text-black rounded-xl p-2 no-underline hover:no-underline hover:px-4 transition-all duration-100 ease-in">
								Pricing
							</a>
						</div>

						{/* Right Side */}
						<div className="flex items-center cursor-pointer">
							<button className="bg-gray-800 text-gray-200 hover:text-black px-4 py-2 hover:px-6 rounded-md hover:bg-white transition-all duration-100 ease-in">
								Get Started
							</button>
						</div>
					</div>
				</div>
			</nav>
			{/* Hero Content */}
			<div className="pt-4 pb-16 px-4 sm:px-6 lg:px-8 relative">
				<BackgroundDots />
				<div className="mx-auto max-w-7xl inset-10 z-50">
					<div className="flex justify-between items-center flex-wrap gap-8 mt-16">
						<div className="flex flex-col border border-gray-700 bg-gradient-to-tr from-gray-900 to-gray-900 p-2 rounded-xl">
							<FeatureCard
								title="Voice generation"
								description="Instant voice generation"
							/>
							<FeatureCard
								title="Scene generation"
								description="Ready made scenes"
							/>
						</div>
						<div className="text-center my-12">
							<span className="w-60 mx-auto p-2 text-sm rounded-full bg-gradient-to-tr from-gray-800 to-gray-700 animate-pulse flex justify-center items-center gap-1 transition-all duration-100 ease-in hover:bg-gray-900">
								<img
									src="https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbrands%2Fdownload.png?alt=media&token=0bd5ea8c-0e9b-4eab-ad50-c53217cf4fa2"
									className="w-4 h-4 rounded-full"
								/>
								Backed by Ycombinator
							</span>
							<h1 className="text-4xl md:text-5xl lg:text-5xl font-bold mb-6 font-cool mt-10">
								AI powered video generator
							</h1>
							<p className="text-xl">
								-Create videos from your content instantly
							</p>
							<div className="flex justify-center items-center gap-4 mt-8">
								<button className="group inline-flex items-center px-6 py-1 bg-gray-100 text-black rounded-md hover:bg-white hover:text-black hover:px-8 transition-all duration-100 ease-in">
									<Search className="w-5 h-5 mr-2 group-hover:-translate-x-1 transition-all duration-100 ease-in" />
									<p>Create account</p>
								</button>
								<button className="group relative inline-flex items-center px-6 py-1 rounded-md overflow-hidden hover:border hover:border-gray-700">
									<div className="absolute inset-0 bg-gradient-to-r from-gray-700 to-gray-900 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
									<div className="absolute inset-0 bg-gradient-to-r from-gray-900 to-gray-700 group-hover:translate-x-full transition-transform duration-300" />
									<div className="relative flex items-center">
										<Monitor className="w-5 h-5 mr-2 group-hover:scale-110 transition-transform duration-300" />
										<p className="text-white">Check Demo</p>
									</div>
								</button>
							</div>
						</div>

						<div className="flex flex-col border border-gray-700 bg-gradient-to-tr from-gray-900 to-gray-900 p-2 rounded-xl">
							<FeatureCard title="Quick report" description="Analyse reports" />
							<FeatureCard
								title="Easy transciption"
								description="Quickly create transcription"
							/>
						</div>
					</div>
					<div className="group my-4 border-4 border-gray-50 border-opacity-10 rounded-xl ">
						<img
							src="https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbanners%2Fvideoframe_2424.png?alt=media&token=db22ca2c-8bc5-404c-a6b4-891db6b4421e"
							className="w-3/4 sm:w-full xs:w-full xxs:w-full h-96 mx-auto border border-gray-700 rounded-xl object-top group-hover:object-center transition-all duration-100 ease-in"
						/>
					</div>
				</div>
			</div>
		</div>
	);
};

export default KlipHeroSection;

Buy iHateReading UI library to get the source codeiHateReading UI (Buy all components)

Sustainable brand hero section

One step towards future

Sustainable

Earthy

Clothes

Shop e-commerce products that reduce carbon footprint

Shop now

Learn more

10+ sustainable products

4.8 Average Rating

import gsap from "gsap";
import {
	ArrowRight,
	ChevronRight,
	DotIcon,
	Earth,
	Menu,
	Search,
	ShoppingCart,
	StarIcon,
	X,
} from "lucide-react";
import React, { useState } from "react";

const PlaneteraHeroSection = () => {
	const [show, setShow] = useState(false);

	return (
		<div
			className="relative bg-cover bg-center bg-no-repeat"
			style={{
				backgroundImage:
					"url('https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbackgrounds%2Fpexels-jplenio-1423600.jpg?alt=media&token=1075d135-a02a-4bc1-b05d-6b9443e765d8')",
			}}
		>
			<div className="absolute inset-0 bg-black bg-opacity-80 z-0" />

			{/* Navbar */}
			<nav className="flex justify-between items-center px-4 py-4 md:px-8 relative z-10 w-full">
				{/* Mobile menu icon */}
				<div
					className="md:hidden cursor-pointer bg-gray-50 bg-opacity-10 p-2 rounded-full"
					onClick={() => setShow(!show)}
				>
					<Menu className="text-gray-100" />
				</div>

				{/* Logo */}
				<div className="flex gap-1 items-center text-white skew-x-2 hover:skew-x-0 transition-all duration-100 ease-in">
					<Earth />
					<p className="font-medium">Plantera</p>
				</div>

				{/* Desktop nav links */}
				<div className="hidden md:flex gap-4 text-sm font-medium text-gray-300">
					{["About", "Shop", "Collection", "Blog"].map((item) => (
						<p
							key={item}
							className="hover:text-white hover:font-bold hover:underline cursor-pointer transition-all duration-100 ease-in"
						>
							{item}
						</p>
					))}
				</div>

				{/* Right icons and Sign in */}
				<div className="flex gap-2 items-center">
					<div className="p-2 bg-white bg-opacity-10 rounded-full hover:bg-opacity-20 cursor-pointer">
						<Search size={24} className="text-gray-100 hover:text-white" />
					</div>
					<div className="p-2 bg-white bg-opacity-10 rounded-full relative hover:bg-opacity-20 cursor-pointer">
						<span className="absolute right-0 -top-3 text-sm text-white bg-gray-50 bg-opacity-10 rounded-full p-1">
							2
						</span>
						<ShoppingCart
							size={24}
							className="text-gray-100 hover:text-white"
						/>
					</div>
					<p className="flex items-center gap-2 bg-gray-100 text-black px-2 py-1 hover:px-4 hover:gap-0 transition-all duration-100 ease-in rounded-full cursor-pointer group text-sm">
						<ArrowRight
							size={18}
							className="text-gray-800 group-hover:rotate-45 transition-all duration-100 ease-in"
						/>
						Sign in
					</p>
				</div>
			</nav>

			{/* Hero Content */}
			<div className="relative z-10 flex flex-col lg:flex-row xl:items-center md:items-start justify-around px-4 md:px-20 py-16 gap-8">
				{/* Text Section */}
				<div className="max-w-4xl">
					<span className="text-xs px-2 py-1 hover:px-4 rounded-full flex items-center mb-2 transition-all duration-100 ease-in w-fit text-green-400 animate-pulse">
						<DotIcon className="text-green-400" size={24} />
						One step towards future
					</span>
					<div className="text-white font-bold text-4xl md:text-6xl lg:text-7xl space-y-4 font-cool">
						<p>Sustainable</p>
						<span className="group text-green-400 rounded-xl flex items-center gap-2 hover:px-6 transition-all duration-100 ease-in">
							<span className="hidden group-hover:block p-1 rounded transition-all duration-100 ease-in">
								<Earth size={44} className="text-green-400" />
							</span>
							Earthy
						</span>
						<p>Clothes</p>
					</div>
					<p className="text-white mt-4">
						Shop e-commerce products that reduce carbon footprint
					</p>
					<div className="mt-6 flex flex-wrap gap-4">
						<p className="bg-green-800 hover:bg-green-900 shadow-xl rounded-full px-4 py-2 hover:px-6 transition-all duration-100 ease-in flex items-center gap-2 text-white text-sm cursor-pointer">
							Shop now
							<ArrowRight />
						</p>
						<p className="bg-gray-50 hover:bg-white text-black shadow-xl flex px-4 py-2 rounded-full text-sm hover:px-6 transition-all duration-100 ease-in cursor-pointer">
							Learn more
						</p>
					</div>
					<div className="mt-6 flex flex-wrap gap-4">
						<p className="bg-green-800 bg-opacity-10 hover:bg-green-900 shadow-xl rounded-full px-4 py-2 hover:px-6 transition-all duration-100 ease-in flex items-center gap-2 text-white text-sm">
							10+ sustainable products
							<ChevronRight />
						</p>
						<p className="bg-gray-50 bg-opacity-5 hover:text-black hover:bg-white text-white shadow-xl flex px-4 py-2 rounded-full text-sm hover:px-6 transition-all duration-100 ease-in">
							<StarIcon />
							4.8 Average Rating
						</p>
					</div>
				</div>

				{/* Image Section */}
				<div className="relative flex flex-wrap gap-4 justify-center max-w-2xl md:flex-col md:justify-center md:items-center xs:flex-col xs:justify-center xs:items-center sm:flex-col sm:justify-center sm:items-center xxs:flex-col xxs:justify-center xxs:items-center">
					{[
						"https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fclothes%2Fimg-12.png?alt=media&token=a200ae8a-d1b0-40c7-bf87-529ecbb20c9c",
						"https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fclothes%2Fimg-13.png?alt=media&token=a3bb1346-8b62-46ba-9128-3beacf0f3f18",
						"https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fclothes%2Fimg-14.png?alt=media&token=8c1cb036-dfaf-40c2-8502-8168f1db61b2",
						"https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fclothes%2Fimg-15.png?alt=media&token=73ee2679-1e62-41a5-a0d5-257f604c8e81",
					].map((img, idx) => (
						<div
							key={idx}
							id={`img-${idx}`}
							className="border-4 border-gray-50 border-opacity-20 rounded-xl hover:border-8 group transition-all duration-100 ease-in cursor-pointer group -skew-x-2 -skew-y-2 hover:skew-x-0 hover:skew-y-0"
							onClick={() => {
								const img = document.getElementById(`img-${idx}`);
								const isZoomed = img.getAttribute("data-zoomed") === "true";
								const scale = window.innerWidth < 768 ? 1.1 : 1.2;

								gsap.fromTo(
									img,
									{ scale: isZoomed ? scale : 1 },
									{
										scale: isZoomed ? 1 : scale,
										duration: 0.3,
										transformOrigin: "center center",
									}
								);

								img.setAttribute("data-zoomed", (!isZoomed).toString());
							}}
						>
							<img
								src={img}
								alt={`Product ${idx + 1}`}
								className="w-60 h-60 md:w-40 md:h-40 group-hover:w-80 rounded object-top hover:object-center transition-all duration-100 ease-in object-cover"
							/>
						</div>
					))}
				</div>
			</div>

			{/* Mobile Menu */}
			<div
				className={`${
					show
						? "fixed inset-x-0 bottom-0 h-3/4 bg-gray-900 bg-opacity-90 z-20"
						: "hidden"
				} transition-all duration-200 ease-in`}
			>
				<section className="flex flex-col gap-4 p-6 h-full relative text-white">
					<div
						className="absolute right-4 top-4 cursor-pointer"
						onClick={() => setShow(false)}
					>
						<X />
					</div>

					<div className="flex gap-1 items-center text-white font-medium">
						<Earth />
						Plantera
					</div>

					{["About", "Shop", "Collection", "Blog"].map((item) => (
						<p
							key={item}
							className="hover:text-gray-700 hover:underline transition-all cursor-pointer"
						>
							{item}
						</p>
					))}

					<div className="flex gap-2 items-center mt-4">
						<div className="p-2 bg-black bg-opacity-10 rounded-full hover:bg-opacity-20 cursor-pointer">
							<Search size={24} />
						</div>
						<div className="p-2 bg-black bg-opacity-10 rounded-full relative hover:bg-opacity-20 cursor-pointer">
							<span className="absolute right-0 -top-3 text-sm text-white bg-gray-500 bg-opacity-30 rounded-full p-1">
								2
							</span>
							<ShoppingCart size={24} />
						</div>
					</div>

					<p className="mt-4 flex items-center gap-2 cursor-pointer bg-gray-800 text-white px-3 py-2 rounded-full text-sm group w-fit">
						<ArrowRight
							size={18}
							className="group-hover:rotate-45 transition-all duration-100 ease-in"
						/>
						Sign in
					</p>
				</section>
			</div>
		</div>
	);
};

export default PlaneteraHeroSection;

Buy iHateReading UI library to get the source codeiHateReading UI (Buy all components)

E-commerce hero section

Ukayi

Homegrown sustainable hemp clothing brand

import React from "react";
import {
	ArrowUp,
	ChevronDown,
	ChevronDownIcon,
	FileX2Icon,
	FolderArchiveIcon,
	LuggageIcon,
	MousePointer,
	Projector,
	ShirtIcon,
	Sun,
} from "lucide-react";

const images = [
	{
		id: 1,
		styles: {
			rotateX: "-25deg",
		},
		img: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fclothes%2Fimg-12.png?alt=media&token=a200ae8a-d1b0-40c7-bf87-529ecbb20c9c",
	},
	{
		id: 2,
		styles: {
			rotateX: "-10deg",
		},
		img: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fclothes%2Fimg-13.png?alt=media&token=a3bb1346-8b62-46ba-9128-3beacf0f3f18",
	},
	{
		id: 3,
		styles: {
			rotateX: "0deg",
		},
		img: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fclothes%2Fimg-14.png?alt=media&token=8c1cb036-dfaf-40c2-8502-8168f1db61b2",
	},
	{
		id: 4,
		styles: {
			rotateX: "10deg",
		},
		img: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fclothes%2Fimg-15.png?alt=media&token=73ee2679-1e62-41a5-a0d5-257f604c8e81",
	},
	{
		id: 5,
		styles: {
			rotateX: "25deg",
		},
		img: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fclothes%2Fimg-16.png?alt=media&token=c1fcff3d-0a4d-4dfe-888e-6ea902293c2f",
	},
	{
		id: 6,
		styles: {
			rotateX: "45deg",
		},
		img: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fclothes%2Fimg-17.png?alt=media&token=cefbef51-7877-4e30-b8a2-249155eecc98",
	},
];
const ECommerceHeroSection = () => {
	return (
		<div className="min-h-screen ">
			<nav className="flex justify-between items-center gap-2 flex-wrap w-full p-2">
				<div className="md:hidden block">
					<ChevronDown />
				</div>
				<div className="flex justify-center items-center gap-1 group cursor-pointer hover:gap-2 transition-all duration-100 ease-in">
					<ShirtIcon
						size={16}
						className="text-gray-400 group-hover:text-gray-200 transition-all duration-100 ease-in group-hover:rotate-45"
					/>
					<p className="text-gray-400 font-sans italic group-hover:text-gray-200 transition-all duration-100 ease-in">
						Ukayi
					</p>
				</div>
				<div className="flex justify-around items-center gap-4 text-gray-500 font-serif ">
					<p className="hover:text-gray-400 transition-all duration-100 ease-in cursor-pointer">
						Products
					</p>
					<p className="hover:text-gray-400 transition-all duration-100 ease-in cursor-pointer">
						Shirts
					</p>
					<p className="hover:text-gray-400 transition-all duration-100 ease-in cursor-pointer">
						T-Shirts
					</p>
					<p className="hover:text-gray-400 transition-all duration-100 ease-in cursor-pointer">
						Trousers
					</p>
					<p className="hover:text-gray-400 transition-all duration-100 ease-in cursor-pointer">
						Contacts
					</p>
				</div>
				<div className="flex gap-2 items-center">
					<LuggageIcon className="text-gray-400" />
					<Sun className="text-gray-400" />
					<button className="px-4 py-2 group border border-gray-100 hover:bg-gray-50 hover:border-gray-200 rounded-full hover:px-6 transition-all duration-100 ease-in flex justify-center gap-1 items-center text-gray-400">
						<ArrowUp
							className="rotate-45 text-gray-400 group-hover:rotate-0 transition-all duration-100 ease-in"
							size={16}
						/>
						Login{" "}
					</button>
				</div>
			</nav>
			<section className="flex flex-col justify-center items-center min-h-screen py-20">
				<div className="py-20">
					<p className="font-fancy text-center text-7xl">Ukayi</p>
					<p className="text-gray-700">
						Homegrown sustainable hemp clothing brand
					</p>
				</div>
				<div className="flex md:w-10/12 w-full mx-auto gap-4 items-center md:flex-row md:justify-center md:items-center xs:flex-col xs:justify-center xs:items-center sm:flex-col sm:justify-center sm:items-center xxs:flex-col xxs:justify-center xxs:items-center">
					{images.map((item) => {
						return (
							<div
								key={item.id}
								className="border border-gray-100 bg-white rounded-xl p-2 hover:p-4 transition-all duration-100 ease-in cursor-pointer group skew-x-12 skew-y-6 hover:skew-x-0 hover:skew-y-0"
							>
								<img src={item.img} className="w-40 h-40 rounded-xl" />
							</div>
						);
					})}
				</div>
				<br />
				<button className="mt-4 px-4 py-3 group border bg-gray-900 hover:bg-black hover:border-gray-700 rounded-full hover:px-6 hover:py-4 transition-all duration-100 ease-in flex justify-center gap-1 items-center text-gray-400">
					<span className="relative z-10">Explore products</span>
					<FolderArchiveIcon
						size={18}
						className="group-hover:rotate-45 group-hover:translate-x-2 transition-all duration-100 ease-in"
					/>
				</button>
			</section>
		</div>
	);
};
export default ECommerceHeroSection;

AI SAAS hero section

agento

Docs

Pricing

Demo

Community

Contacts

One place for AI Agent

All in one AI agent platform, build any agent in the world

Trusted by top brands

Slack

Google

Spotify

Tesla

Airbnb

import React from "react";
import gsap from "gsap";
import {
	ArrowUp,
	ChevronDownIcon,
	FileX2Icon,
	MousePointer,
	Projector,
} from "lucide-react";

const trustedCompanies = [
	{
		name: "Slack",
		logo: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbrands%2FLogo.png-1.png?alt=media&token=42f6c0ad-e6a4-426f-81b7-9b980a7228e1",
	},

	{
		name: "Google",
		logo: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbrands%2FLogo.png-3.png?alt=media&token=ad19be3c-a464-4869-adb1-75b13df1522d",
	},
	{
		name: "Spotify",
		logo: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbrands%2FLogo.png-5.png?alt=media&token=50fea414-9b0b-439c-9b55-cad0daaf6df3",
	},
	{
		name: "Tesla",
		logo: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbrands%2FLogo.png-6.png?alt=media&token=01eca906-cc76-4a3d-8c23-88a85d61c256",
	},

	{
		name: "Airbnb",
		logo: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbrands%2FLogo.png-8.png?alt=media&token=a29d83cf-aa7b-450b-9217-a4ea5582876b",
	},
];

const AIAgentHeroSection = () => {
	return (
		<div className="bg-gray-900 min-h-screen">
			<div className="flex justify-between items-center gap-2 flex-wrap w-full p-2 bg-black bg-opacity-5 border-b border-gray-800">
				<div className="flex justify-center items-center gap-1 group cursor-pointer hover:gap-2 transition-all duration-100 ease-in">
					<FileX2Icon
						size={16}
						className="text-gray-400 group-hover:text-gray-200 transition-all duration-100 ease-in group-hover:rotate-45"
					/>
					<p className="text-xl text-gray-400 font-sans italic group-hover:text-gray-200 transition-all duration-100 ease-in">
						agento
					</p>
				</div>
				<div className="flex justify-around items-center gap-4 text-gray-500">
					<p className="hover:text-gray-400 transition-all duration-100 ease-in cursor-pointer hover:underline no-underline">
						Docs
					</p>
					<p className="hover:text-gray-400 transition-all duration-100 ease-in cursor-pointer hover:underline no-underline">
						Pricing
					</p>
					<p className="hover:text-gray-400 transition-all duration-100 ease-in cursor-pointer hover:underline no-underline">
						Demo
					</p>
					<p className="hover:text-gray-400 transition-all duration-100 ease-in cursor-pointer hover:underline no-underline">
						Community
					</p>
					<p className="hover:text-gray-400 transition-all duration-100 ease-in cursor-pointer hover:underline no-underline">
						Contacts
					</p>
				</div>
				<div>
					<button className="px-2 py-2 group border border-gray-800 hover:bg-gray-50 hover:text-black hover:border-gray-700 rounded-full text-sm hover:px-4 transition-all duration-100 ease-in flex justify-center gap-1 items-center text-gray-400">
						Get started{" "}
						<ArrowUp
							className="rotate-45 text-gray-400 group-hover:rotate-0 transition-all duration-100 ease-in"
							size={14}
						/>
					</button>
				</div>
			</div>
			<section className="flex flex-col justify-center items-center py-20">
				<div className="flex flex-col justify-center items-center my-5">
					<p className="text-7xl text-gray-200 font-sans text-center">
						One place for{" "}
						<span className="italic bg-gradient-to-r from-gray-50 to-yellow-100 bg-clip-text text-transparent font-semibold">
							AI Agent
						</span>
					</p>
					<p className="text-xl text-gray-400 font-cool text-center">
						All in one AI agent platform, build any agent in the world
					</p>
					<button className="mt-4 px-4 py-2 group border border-gray-700 bg-gray-900 hover:bg-gray-50 hover:text-black hover:border-gray-700 rounded-full hover:px-6 hover:py-3 transition-all duration-100 ease-in flex justify-center gap-1 items-center text-gray-400">
						<span className="relative z-10">Try Demo</span>
						<Projector
							size={18}
							className="group-hover:rotate-45 group-hover:translate-x-2 transition-all duration-100 ease-in"
						/>
					</button>
				</div>
				<video
					src="https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fvideos%2FkH4osWoEMFaxAoLTDAHn3JScM.mp4?alt=media&token=de3de79e-ef4e-4f06-bde4-5e4685d35be2"
					autoPlay
					className="h-full w-3/4 mx-auto my-4 rounded-2xl border border-gray-800 "
				/>
			</section>
			<section>
				<p className="text-gray-500 text-center mt-5">Trusted by top brands</p>
				<div className="flex justify-center gap-8 flex-wrap">
					{trustedCompanies.map((company) => (
						<div className="relative group" key={company.name}>
							<div className="absolute left-1/2 transform -translate-x-1/2 translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
								<div className="flex items-center rounded-full bg-gray-800 p-2">
									<MousePointer className="w-4 h-4 text-gray-500 group-hover:translate-x-1 group-hover:rotate-180 transition-all duration-100 ease-in" />
									<span className="ml-2 text-gray-500 text-sm">
										{company.name}
									</span>
								</div>
							</div>
							<img
								src={company.logo}
								alt={company.name}
								className="h-40 w-20 object-contain animate-pulse"
							/>
						</div>
					))}
				</div>
			</section>
		</div>
	);
};
export default AIAgentHeroSection;

Neuron AI Hero section

NeuronAI

Empower Your

Teams

AI Agents.

NeuronAI simplifies your workflow with intelligent agents that automate repetitive tasks, generate insights, and optimize performance—saving you hours every day

import React, { useState } from "react";
import { Typewriter } from "react-simple-typewriter";

import router from "next/router";
import {
	Brain,
	DollarSign,
	FileText,
	LogIn,
	Menu,
	Phone,
	X,
} from "lucide-react";

const users = [
	{
		name: "John Smith",
		image:
			"https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fusers%2Fdownload.jpeg?alt=media&token=45387c9c-560c-4b54-919c-0037cdb4432b",
	},
	{
		name: "Michael Chen",
		image:
			"https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fusers%2Fdownload%20(1).jpeg?alt=media&token=246c25b6-58f1-427c-94c4-b9f884cc9941",
	},
	{
		name: "Fredy Rodriguez",
		image:
			"https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fusers%2Fuser-1.png?alt=media&token=9c572853-fd83-42c7-8f28-3b4bdb1fd247",
	},
];

const NeuronAIHeroSection = () => {
	const [isMenuOpen, setIsMenuOpen] = useState(false);

	const navItems = [
		{ label: "Docs", icon: <FileText className="w-4 h-4" /> },
		{
			label: "Pricing",
			icon: <DollarSign className="w-4 h-4" />,
		},
		{ label: "Contact", icon: <Phone className="w-4 h-4" /> },
	];
	return (
		<div className="relative">
			<header className="w-full bg-white border border-gray-50 rounded-xl relative z-50 backdrop-blur-lg">
				<div className="container mx-auto py-4 px-4 flex items-center justify-between">
					<div className="flex items-center gap-2 cursor-pointer">
						<Brain className="w-6 h-6" />
						<span className="text-2xl">NeuronAI</span>
					</div>

					<button
						className="md:hidden"
						onClick={() => setIsMenuOpen((prev) => !prev)}
					>
						{isMenuOpen ? (
							<X className="w-6 h-6" />
						) : (
							<Menu className="w-6 h-6" />
						)}
					</button>

					<nav className="hidden md:flex items-center gap-8">
						{navItems.map((item) => (
							<div
								key={item.label}
								className="flex items-center gap-2 text-base cursor-pointer hover:text-gray-600"
							>
								{item.icon}
								{item.label}
							</div>
						))}
					</nav>

					<button className="hidden md:block bg-gray-900 hover:bg-black hover:scale-105 transition-all duration-300 text-white px-4 py-2 rounded-md">
						Try for FREE
					</button>
				</div>

				<div
					className={`absolute top-full md:hidden z-40 w-full px-2 transition-all duration-300 ${
						isMenuOpen
							? "opacity-100 h-auto"
							: "opacity-0 h-0 pointer-events-none overflow-hidden"
					}`}
				>
					<div className="container mx-auto p-4 border border-gray-100 bg-white">
						<nav className="flex flex-col gap-4">
							{navItems.map((item) => (
								<div
									key={item.label}
									className="flex items-center gap-2 text-base cursor-pointer hover:text-gray-600"
								>
									{item.icon}
									{item.label}
								</div>
							))}
							<button className="bg-gray-900 hover:bg-black hover:scale-105 transition-all duration-300 text-white px-4 py-2 rounded-md w-full">
								Try for FREE
							</button>
						</nav>
					</div>
				</div>
			</header>

			<div className="relative text-center flex items-center justify-center flex-col overflow-hidden flex-wrap w-full h-full bg-gradient-to-r from-white-50 to-orange-50">
				<div className="w-full my-4">
					<video
						src="https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fvideos%2Fdemo-5.mp4?alt=media&token=f919c20c-8ed4-47a9-9a90-7a79889e7ca7"
						autoPlay
						loop
						className="w-full h-96 object-cover opacity-50 rounded-xl"
					/>
				</div>
				<div className="flex flex-col md:pb-40">
					<div className="px-10">
						<div className="flex items-center flex-wrap justify-center">
							<p className="text-7xl mb-4">Empower Your</p>
							<div className="relative flex items-center -space-x-4 font-semibold transition-all duration-100 ease-in p-4 mx-4 rounded-xl hover:bg-gray-50 hover:bg-opacity-80 hover:px-6 border-none hover:border-2 border-transparent hover:border-gray-900 hover:animate-border group">
								<span className="absolute left-1/2 -top-3 transform -translate-x-1/2 -translate-y-full bg-gray-50 text-gray-800 text-xs rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
									Teams
								</span>
								{users.map((item) => (
									<img
										key={item}
										src={item.image}
										alt={`${item.name}`}
										className="w-10 h-10 object-cover rounded-full transition-transform duration-300 ease-in-out hover:scale-105 hover:-translate-y-4 hover:rotate-45"
									/>
								))}
							</div>
						</div>

						<p className="text-7xl bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-purple-600">
							AI{" "}
							<Typewriter
								words={["Agents", "Automation", "Integration", "Insights"]}
								autoStart
								loop
								cursor="|"
								delay={50}
							/>
						</p>
						<p className="text-gray-500 max-w-xl mx-auto text-md my-4">
							NeuronAI simplifies your workflow with intelligent agents that
							automate repetitive tasks, generate insights, and optimize
							performance—saving you hours every day
						</p>
					</div>
					<button className="flex gap-2 items-center justify-center group w-80 mt-2 mx-auto relative bg-gray-900 text-white px-8 py-4 hover:px-10 rounded-xl text-lg font-medium hover:bg-black hover:scale-105 transition-all duration-100 ease-in hover:translate-x-4">
						<LogIn className="group-hover:rotate-90 transition-all duration-100 ease-in" />
						Get Started
					</button>
				</div>
			</div>
		</div>
	);
};

export default NeuronAIHeroSection;

Client showcase

Our clients

import React, { useEffect, useState } from "react";

const trustedCompanies = [
	{
		name: "Slack",
		logo: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbrands%2FLogo.png-1.png?alt=media&token=42f6c0ad-e6a4-426f-81b7-9b980a7228e1",
	},
	{
		name: "Figma",
		logo: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbrands%2FLogo.png-2.png?alt=media&token=b9c55419-1463-4a3d-89e3-4f5c74d2db90",
	},
	{
		name: "Google",
		logo: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbrands%2FLogo.png-3.png?alt=media&token=ad19be3c-a464-4869-adb1-75b13df1522d",
	},
	{
		name: "Spotify",
		logo: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbrands%2FLogo.png-5.png?alt=media&token=50fea414-9b0b-439c-9b55-cad0daaf6df3",
	},
	{
		name: "Tesla",
		logo: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbrands%2FLogo.png-6.png?alt=media&token=01eca906-cc76-4a3d-8c23-88a85d61c256",
	},
	{
		name: "OpenAI",
		logo: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbrands%2FLogo.png-7.png?alt=media&token=da7c6aaf-3efb-49d1-9fb9-2461ce831886",
	},
	{
		name: "Airbnb",
		logo: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbrands%2FLogo.png-8.png?alt=media&token=a29d83cf-aa7b-450b-9217-a4ea5582876b",
	},
	{
		name: "Nvidia",
		logo: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbrands%2FLogo.png.png?alt=media&token=e993d678-b9b9-4d85-a543-c991cf1d432f",
	},
	{
		name: "Apple",
		logo: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbrands%2FLogo.png-4.png?alt=media&token=27594b44-f0ac-4d05-ac6b-2c15eabbf2b8",
	},
];

const ClientShowcase = () => {
	return (
		<div className="flex justify-center items-center flex-col h-screen w-full p-10 overflow-x-hidden">
			<p className="text-7xl text-left font-fancy my-5">Our clients</p>
			<br />
			<br />
			<div
				className="img-container flex justify-around items-center gap-10"
				style={{
					display: "flex",
					animation: "scroll 10s linear infinite",
					whiteSpace: "nowrap",
				}}
			>
				{trustedCompanies?.map((item, index) => (
					<img
						key={index}
						src={item.logo}
						alt={item.name}
						className={`w-20 max-w-md h-20 object-contain rounded-xl hover:rounded-md hover:w-40 hover:h-40 transition-all duration-100 ease-in hover:skew-x-2 cursor-pointer img-each`}
					/>
				))}
			</div>
			<style>
				{`
        @keyframes scroll {
          0% { transform: translateX(0); }
          100% { transform: translateX(-20%); }
        }
      `}
			</style>
		</div>
	);
};

export default ClientShowcase;

FAQ section component

Frequently Asked Questions

Get answers to common questions about NeuronAI

NeuronAI is an AI-powered automation platform that uses intelligent agents to automate repetitive tasks, generate insights, and optimize workflows. It works by understanding your processes and leveraging machine learning to automate and improve them.

We take security seriously. All data is encrypted end-to-end, stored in secure cloud infrastructure, and we comply with industry standards like SOC 2 and GDPR. We never share or sell your data to third parties.

NeuronAI integrates seamlessly with popular tools like Slack, Zapier, Hubspot, Instagram, Facebook, Medium and many more. We're constantly adding new integrations based on user needs.

We offer flexible pricing plans starting from free tier for individuals to enterprise plans for large organizations. Each plan is tailored to provide the best value based on your usage and needs.

No technical knowledge is required. Our platform is designed to be user-friendly with an intuitive interface. However, we do provide advanced features for technical users who want more control.

We provide 24/7 customer support through chat, email, and phone. Enterprise customers get dedicated support managers. We also have extensive documentation and video tutorials.

Yes! We offer a 14-day free trial with full access to all features. No credit card required. You can upgrade to a paid plan anytime during or after the trial.

import React, { useState } from "react";

const faqs = [
	{
		question: "What is NeuronAI and how does it work?",
		answer:
			"NeuronAI is an AI-powered automation platform that uses intelligent agents to automate repetitive tasks, generate insights, and optimize workflows. It works by understanding your processes and leveraging machine learning to automate and improve them.",
	},
	{
		question: "How secure is my data with NeuronAI?",
		answer:
			"We take security seriously. All data is encrypted end-to-end, stored in secure cloud infrastructure, and we comply with industry standards like SOC 2 and GDPR. We never share or sell your data to third parties.",
	},
	{
		question: "What integrations does NeuronAI support?",
		answer:
			"NeuronAI integrates seamlessly with popular tools like Slack, Zapier, Hubspot, Instagram, Facebook, Medium and many more. We're constantly adding new integrations based on user needs.",
	},
	{
		question: "How much does NeuronAI cost?",
		answer:
			"We offer flexible pricing plans starting from free tier for individuals to enterprise plans for large organizations. Each plan is tailored to provide the best value based on your usage and needs.",
	},
	{
		question: "Do I need technical knowledge to use NeuronAI?",
		answer:
			"No technical knowledge is required. Our platform is designed to be user-friendly with an intuitive interface. However, we do provide advanced features for technical users who want more control.",
	},
	{
		question: "What kind of support do you offer?",
		answer:
			"We provide 24/7 customer support through chat, email, and phone. Enterprise customers get dedicated support managers. We also have extensive documentation and video tutorials.",
	},
	{
		question: "Can I try NeuronAI before purchasing?",
		answer:
			"Yes! We offer a 14-day free trial with full access to all features. No credit card required. You can upgrade to a paid plan anytime during or after the trial.",
	},
];

const FAQSection = () => {
	const [openIndex, setOpenIndex] = useState(null);

	return (
		<div className="container mx-auto py-24">
			<div className="text-center mb-16">
				<h2 className="text-4xl font-bold text-gray-900 mb-4">
					Frequently Asked Questions
				</h2>
				<p className="text-lg text-gray-600">
					Get answers to common questions about NeuronAI
				</p>
			</div>

			<div className="max-w-xl mx-auto">
				{faqs.map((faq, index) => (
					<div key={index} className="">
						<button
							className={`w-full px-6 py-4 text-left hover:bg-gray-50 bg-gray-50 bg-opacity-10 hover:bg-opacity-50 border border-gray-200 rounded-xl transition-all duration-200 ease-in flex justify-between items-center ${
								index === faqs.length - 1 ? "border-b" : ""
							}`}
							onClick={() => {
								setTimeout(() => {
									setOpenIndex(openIndex === index ? null : index);
								}, 200);
							}}
						>
							<span className="font-medium text-gray-900">{faq.question}</span>
							<span className="ml-6 flex-shrink-0">
								{openIndex === index ? "−" : "+"}
							</span>
						</button>
						<div
							className={`px-6 bg-gray-50 bg-opacity-10 rounded-b-lg my-2 ${
								openIndex === index ? "h-32 visible opacity-100" : "h-0 opacity-0 invisible"
							} transition-all duration-100 ease-in`}
						>
							<p className="text-gray-600">{faq.answer}</p>
						</div>
					</div>
				))}
			</div>
		</div>
	);
};

export default FAQSection;

User testimonial section

What Our Customers Say

Join thousands of satisfied customers who have transformed their workflows with NeuronAI

John Smith

Product Manager at TechCorp

NeuronAI has transformed how we handle our workflow automation. The AI agents are incredibly intuitive and have saved us countless hours.

Michael Chen

CTO at InnovateX

The integration capabilities are outstanding. We've been able to connect all our tools seamlessly and the AI automation is a game-changer.

Fredy Rodriguez

Operations Director at GlobalTech

The ROI we've seen with NeuronAI is incredible. Our team productivity has increased significantly since implementing the platform.

John Smith

Product Manager at TechCorp

NeuronAI has transformed how we handle our workflow automation. The AI agents are incredibly intuitive and have saved us countless hours.

Michael Chen

CTO at InnovateX

The integration capabilities are outstanding. We've been able to connect all our tools seamlessly and the AI automation is a game-changer.

Fredy Rodriguez

Operations Director at GlobalTech

The ROI we've seen with NeuronAI is incredible. Our team productivity has increased significantly since implementing the platform.

John Smith

Product Manager at TechCorp

NeuronAI has transformed how we handle our workflow automation. The AI agents are incredibly intuitive and have saved us countless hours.

Michael Chen

CTO at InnovateX

The integration capabilities are outstanding. We've been able to connect all our tools seamlessly and the AI automation is a game-changer.

Fredy Rodriguez

Operations Director at GlobalTech

The ROI we've seen with NeuronAI is incredible. Our team productivity has increased significantly since implementing the platform.

John Smith

Product Manager at TechCorp

NeuronAI has transformed how we handle our workflow automation. The AI agents are incredibly intuitive and have saved us countless hours.

Michael Chen

CTO at InnovateX

The integration capabilities are outstanding. We've been able to connect all our tools seamlessly and the AI automation is a game-changer.

Fredy Rodriguez

Operations Director at GlobalTech

The ROI we've seen with NeuronAI is incredible. Our team productivity has increased significantly since implementing the platform.

John Smith

Product Manager at TechCorp

NeuronAI has transformed how we handle our workflow automation. The AI agents are incredibly intuitive and have saved us countless hours.

Michael Chen

CTO at InnovateX

The integration capabilities are outstanding. We've been able to connect all our tools seamlessly and the AI automation is a game-changer.

Fredy Rodriguez

Operations Director at GlobalTech

The ROI we've seen with NeuronAI is incredible. Our team productivity has increased significantly since implementing the platform.

John Smith

Product Manager at TechCorp

NeuronAI has transformed how we handle our workflow automation. The AI agents are incredibly intuitive and have saved us countless hours.

Michael Chen

CTO at InnovateX

The integration capabilities are outstanding. We've been able to connect all our tools seamlessly and the AI automation is a game-changer.

Fredy Rodriguez

Operations Director at GlobalTech

The ROI we've seen with NeuronAI is incredible. Our team productivity has increased significantly since implementing the platform.

John Smith

Product Manager at TechCorp

NeuronAI has transformed how we handle our workflow automation. The AI agents are incredibly intuitive and have saved us countless hours.

Michael Chen

CTO at InnovateX

The integration capabilities are outstanding. We've been able to connect all our tools seamlessly and the AI automation is a game-changer.

Fredy Rodriguez

Operations Director at GlobalTech

The ROI we've seen with NeuronAI is incredible. Our team productivity has increased significantly since implementing the platform.

John Smith

Product Manager at TechCorp

NeuronAI has transformed how we handle our workflow automation. The AI agents are incredibly intuitive and have saved us countless hours.

Michael Chen

CTO at InnovateX

The integration capabilities are outstanding. We've been able to connect all our tools seamlessly and the AI automation is a game-changer.

Fredy Rodriguez

Operations Director at GlobalTech

The ROI we've seen with NeuronAI is incredible. Our team productivity has increased significantly since implementing the platform.

John Smith

Product Manager at TechCorp

NeuronAI has transformed how we handle our workflow automation. The AI agents are incredibly intuitive and have saved us countless hours.

Michael Chen

CTO at InnovateX

The integration capabilities are outstanding. We've been able to connect all our tools seamlessly and the AI automation is a game-changer.

Fredy Rodriguez

Operations Director at GlobalTech

The ROI we've seen with NeuronAI is incredible. Our team productivity has increased significantly since implementing the platform.

John Smith

Product Manager at TechCorp

NeuronAI has transformed how we handle our workflow automation. The AI agents are incredibly intuitive and have saved us countless hours.

Michael Chen

CTO at InnovateX

The integration capabilities are outstanding. We've been able to connect all our tools seamlessly and the AI automation is a game-changer.

Fredy Rodriguez

Operations Director at GlobalTech

The ROI we've seen with NeuronAI is incredible. Our team productivity has increased significantly since implementing the platform.

John Smith

Product Manager at TechCorp

NeuronAI has transformed how we handle our workflow automation. The AI agents are incredibly intuitive and have saved us countless hours.

Michael Chen

CTO at InnovateX

The integration capabilities are outstanding. We've been able to connect all our tools seamlessly and the AI automation is a game-changer.

Fredy Rodriguez

Operations Director at GlobalTech

The ROI we've seen with NeuronAI is incredible. Our team productivity has increased significantly since implementing the platform.

John Smith

Product Manager at TechCorp

NeuronAI has transformed how we handle our workflow automation. The AI agents are incredibly intuitive and have saved us countless hours.

Michael Chen

CTO at InnovateX

The integration capabilities are outstanding. We've been able to connect all our tools seamlessly and the AI automation is a game-changer.

Fredy Rodriguez

Operations Director at GlobalTech

The ROI we've seen with NeuronAI is incredible. Our team productivity has increased significantly since implementing the platform.

import React from "react";
import gsap from "gsap";

const testimonials = [
	{
		name: "John Smith",
		role: "Product Manager",
		company: "TechCorp",
		image:
			"https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fusers%2Fdownload.jpeg?alt=media&token=45387c9c-560c-4b54-919c-0037cdb4432b",
		quote:
			"NeuronAI has transformed how we handle our workflow automation. The AI agents are incredibly intuitive and have saved us countless hours.",
	},
	{
		name: "Michael Chen",
		role: "CTO",
		company: "InnovateX",
		image:
			"https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fusers%2Fdownload%20(1).jpeg?alt=media&token=246c25b6-58f1-427c-94c4-b9f884cc9941",
		quote:
			"The integration capabilities are outstanding. We've been able to connect all our tools seamlessly and the AI automation is a game-changer.",
	},
	{
		name: "Fredy Rodriguez",
		role: "Operations Director",
		company: "GlobalTech",
		image:
			"https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fusers%2Fuser-1.png?alt=media&token=9c572853-fd83-42c7-8f28-3b4bdb1fd247",
		quote:
			"The ROI we've seen with NeuronAI is incredible. Our team productivity has increased significantly since implementing the platform.",
	},
];

const UserTestimonialSection = () => {
	return (
		<section className="py-24">
			<div className="container mx-auto">
				<div className="text-center mb-16">
					<h2 className="text-4xl font-bold text-gray-900 mb-4">
						What Our Customers Say
					</h2>
					<p className="text-lg text-gray-600 max-w-2xl mx-auto">
						Join thousands of satisfied customers who have transformed their
						workflows with NeuronAI
					</p>
				</div>

				<div className="flex flex-col gap-8 w-full mx-auto overflow-hidden p-5">
					{[0, 1, 2].map((row) => {
						const rowRef = React.useRef(null);

						React.useEffect(() => {
							const element = rowRef.current;
							const totalWidth = element.scrollWidth;

							gsap.fromTo(
								element,
								{ x: 0 },
								{
									x: -totalWidth / 2,
									duration: row === 0 ? 50 : row === 1 ? 70 : 90,
									ease: "none",
									repeat: -1,
								}
							);
						}, []);

						return (
							<div key={row} ref={rowRef} className="flex gap-8">
								{[
									...testimonials,
									...testimonials,
									...testimonials,
									...testimonials,
								].map((testimonial, index) => (
									<div
										key={index}
										className="bg-white p-5 rounded-xl shadow-sm hover:shadow-xl transition-all duration-300 min-w-[300px]"
									>
										<div className="flex items-center mb-6">
											<img
												src={testimonial.image}
												alt={testimonial.name}
												className="w-10 h-10 rounded-full object-cover mr-4"
											/>
											<div>
												<h3 className="font-semibold text-gray-900">
													{testimonial.name}
												</h3>
												<p className="text-sm text-gray-600">
													{testimonial.role} at {testimonial.company}
												</p>
											</div>
										</div>
										<p className="text-gray-600 text-xs">{testimonial.quote}</p>
									</div>
								))}
							</div>
						);
					})}
				</div>
			</div>
		</section>
	);
};

export default UserTestimonialSection;

Blog cards

March 30, 2025

The Future of Electric Cars

Exploring the latest advancements in EV technology and their impact on the automotive industry.

5 min read

March 28, 2025

Self-Driving Cars: Where Are We Now?

A deep dive into the current state of autonomous vehicles and what the future holds.

7 min read

March 25, 2025

Hydrogen vs. Electric: The Battle for Sustainable Transport

Comparing hydrogen fuel cell vehicles and electric cars to determine the best path forward.

6 min read

import React from "react";

const BlogCards = () => {
	const blogs = [
		{
			title: "The Future of Electric Cars",
			description:
				"Exploring the latest advancements in EV technology and their impact on the automotive industry.",
			image:
				"https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbanners%2FFrame%2060.png?alt=media&token=3c921a97-43d3-444c-a296-88150dcbe73e",
			date: "March 30, 2025",
			readingTime: "5 min read",
		},
		{
			title: "Self-Driving Cars: Where Are We Now?",
			description:
				"A deep dive into the current state of autonomous vehicles and what the future holds.",
			image:
				"https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbanners%2FFrame%2061.png?alt=media&token=eef36233-1b52-4d5f-9e3f-219b2d345646",
			date: "March 28, 2025",
			readingTime: "7 min read",
		},
		{
			title: "Hydrogen vs. Electric: The Battle for Sustainable Transport",
			description:
				"Comparing hydrogen fuel cell vehicles and electric cars to determine the best path forward.",
			image:
				"https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbanners%2FFrame%2062.png?alt=media&token=d26ea4ef-874c-4189-b96c-1ee640cb81c0",
			date: "March 25, 2025",
			readingTime: "6 min read",
		},
	];

	return (
		<section className="bg-white text-gray-900 py-10 px-6">
			<div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6">
				{blogs.map((blog, index) => (
					<div
						key={index}
						className="group bg-gray-50 bg-opacity-50 rounded-xl overflow-hidden transition-all duration-100 ease-in cursor-pointer hover:bg-gray-50 hover:scale-105"
					>
						<img
							src={blog.image}
							alt={blog.title}
							className="w-full h-48 object-cover rounded-t-xl group-hover:object-center object-top transition-all duration-100 ease-in"
						/>
						<div className="p-4 group-hover:text-black group-hover:px-5 transition-all duration-100 ease-in">
							<p className="text-gray-500 text-sm">{blog.date}</p>
							<h3 className="text-lg font-semibold mt-2">{blog.title}</h3>
							<p className="text-gray-600 text-sm mt-1">{blog.description}</p>
							<p className="mt-6 text-sm text-gray-400"> {blog.readingTime}</p>
						</div>
					</div>
				))}
			</div>
		</section>
	);
};

export default BlogCards;

Trusted companies section

Trusted by some top brands

Slack

Figma

Google

Spotify

Tesla

OpenAI

Airbnb

Nvidia

Apple

import { MousePointer } from "lucide-react";
import React from "react";

const trustedCompanies = [
	{
		name: "Slack",
		logo: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbrands%2FLogo.png-1.png?alt=media&token=42f6c0ad-e6a4-426f-81b7-9b980a7228e1",
	},
	{
		name: "Figma",
		logo: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbrands%2FLogo.png-2.png?alt=media&token=b9c55419-1463-4a3d-89e3-4f5c74d2db90",
	},
	{
		name: "Google",
		logo: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbrands%2FLogo.png-3.png?alt=media&token=ad19be3c-a464-4869-adb1-75b13df1522d",
	},
	{
		name: "Spotify",
		logo: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbrands%2FLogo.png-5.png?alt=media&token=50fea414-9b0b-439c-9b55-cad0daaf6df3",
	},
	{
		name: "Tesla",
		logo: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbrands%2FLogo.png-6.png?alt=media&token=01eca906-cc76-4a3d-8c23-88a85d61c256",
	},
	{
		name: "OpenAI",
		logo: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbrands%2FLogo.png-7.png?alt=media&token=da7c6aaf-3efb-49d1-9fb9-2461ce831886",
	},
	{
		name: "Airbnb",
		logo: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbrands%2FLogo.png-8.png?alt=media&token=a29d83cf-aa7b-450b-9217-a4ea5582876b",
	},
	{
		name: "Nvidia",
		logo: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbrands%2FLogo.png.png?alt=media&token=e993d678-b9b9-4d85-a543-c991cf1d432f",
	},
	{
		name: "Apple",
		logo: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbrands%2FLogo.png-4.png?alt=media&token=27594b44-f0ac-4d05-ac6b-2c15eabbf2b8",
	},
];

const TrustedBrandsComponent = () => {
	return (
		<div className="h-80 flex justify-center items-center flex-col">
			<div>
				<p className="text-center text-lg">Trusted by some top brands</p>
			</div>
			<div className="flex justify-center gap-8">
				{trustedCompanies.map((company) => (
					<div className="relative group" key={company.name}>
						<div className="absolute left-1/2 transform -translate-x-1/2 translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
							<div className="flex items-center rounded-full bg-gray-100 p-2">
								<MousePointer className="w-4 h-4 text-gray-500 group-hover:translate-x-1 group-hover:rotate-180 transition-all duration-100 ease-in" />
								<span className="ml-2 text-gray-500 text-sm">
									{company.name}
								</span>
							</div>
						</div>
						<img
							src={company.logo}
							alt={company.name}
							className="h-40 w-40 object-contain animate-pulse"
						/>
					</div>
				))}
			</div>
		</div>
	);
};

export default TrustedBrandsComponent;

Features section bento grid

Fast Performance

Optimized for speed and efficiency.

Security

Top-notch security to keep your data safe.

Developer Friendly

Built for developers, easy integrations.

Global Access

Access from anywhere in the world.

import React from "react";
import { Zap, ShieldCheck, Code, Globe, ArrowUp } from "lucide-react";

const features = [
	{
		title: "Fast Performance",
		description: "Optimized for speed and efficiency.",
		icon: <Zap size={24} />,
		flex: "flex-1",
	},
	{
		title: "Security",
		description: "Top-notch security to keep your data safe.",
		icon: <ShieldCheck size={24} />,
		flex: "flex",
	},
	{
		title: "Developer Friendly",
		description: "Built for developers, easy integrations.",
		icon: <Code size={24} />,
		flex: "flex",
	},
	{
		title: "Global Access",
		description: "Access from anywhere in the world.",
		icon: <Globe size={24} />,
		flex: "flex-1",
	},
];

const FeaturesBento = () => {
	return (
		<div className="relative grid md:grid-cols-2 sm:grid-cols-1 xxs:grid-cols-1 xs:grid-cols-1 gap-2 mx-auto px-20 flex-col justify-center items-center">
			{/* Center Borders */}
			<div className="hidden md:flex absolute inset-0 items-center justify-center pointer-events-none">
				{/* Vertical Border */}
				<div className="absolute w-[1px] h-full bg-gray-100"></div>
				{/* Horizontal Border */}
				<div className="absolute h-[1px] w-full bg-gray-100"></div>
			</div>

			{features.map((feature, index) => (
				<div
					key={index}
					className={`relative w-full h-80 group p-10 rounded-xl transition-all hover:p-8 hover:bg-gray-50 hover:bg-opacity-50 duration-100 ease-in cursor-pointer`}
				>
					<div className="absolute top-5 right-5 text-gray-600 p-2 rounded-full group-hover:bg-indigo-600 group-hover:text-gray-200 transition-all ease-in duration-100 group-hover:translate-y-2">
						{feature.icon}
					</div>
					<div className="relative">
						<h3 className="text-lg font-semibold">{feature.title}</h3>
						<p className="text-gray-600 mt-2">{feature.description}</p>
					</div>
					<div>
						<p className="flex items-center text-gray-500 text-xs hover:underline no-underline group">
							Read more
							<span className="group-hover:visible invisible transition-all duration-100 ease-in text-gray-500 rotate-45">
								<ArrowUp size={16} />
							</span>
						</p>
					</div>
				</div>
			))}
		</div>
	);
};

export default FeaturesBento;

Dark ƒeatures grid

Features

A bunch of great features to get you started

Campaign schedule

Orci molestie nam vulputate nunc habitant gravida. Interdum vitae vivamus ipsum aliquet.

Team management

Orci molestie nam vulputate nunc habitant gravida. Interdum vitae vivamus ipsum aliquet.

Fully customizable

Orci molestie nam vulputate nunc habitant gravida. Interdum vitae vivamus ipsum aliquet.

Live statistics

Orci molestie nam vulputate nunc habitant gravida. Interdum vitae vivamus ipsum aliquet.

Budget management

Orci molestie nam vulputate nunc habitant gravida. Interdum vitae vivamus ipsum aliquet.

Task management

Orci molestie nam vulputate nunc habitant gravida. Interdum vitae vivamus ipsum aliquet.

import {
	BarChart2,
	CalendarClock,
	CreditCard,
	Pencil,
	SlidersHorizontal,
	Users,
} from "lucide-react";

const features = [
	{
		icon: <CalendarClock className="h-5 w-5 text-purple-400" />,
		title: "Campaign schedule",
		description:
			"Orci molestie nam vulputate nunc habitant gravida. Interdum vitae vivamus ipsum aliquet.",
	},
	{
		icon: <Users className="h-5 w-5 text-purple-400" />,
		title: "Team management",
		description:
			"Orci molestie nam vulputate nunc habitant gravida. Interdum vitae vivamus ipsum aliquet.",
	},
	{
		icon: <SlidersHorizontal className="h-5 w-5 text-purple-400" />,
		title: "Fully customizable",
		description:
			"Orci molestie nam vulputate nunc habitant gravida. Interdum vitae vivamus ipsum aliquet.",
	},
	{
		icon: <BarChart2 className="h-5 w-5 text-purple-400" />,
		title: "Live statistics",
		description:
			"Orci molestie nam vulputate nunc habitant gravida. Interdum vitae vivamus ipsum aliquet.",
	},
	{
		icon: <CreditCard className="h-5 w-5 text-purple-400" />,
		title: "Budget management",
		description:
			"Orci molestie nam vulputate nunc habitant gravida. Interdum vitae vivamus ipsum aliquet.",
	},
	{
		icon: <Pencil className="h-5 w-5 text-purple-400" />,
		title: "Task management",
		description:
			"Orci molestie nam vulputate nunc habitant gravida. Interdum vitae vivamus ipsum aliquet.",
	},
];

const DarkFeatureGrid = () => {
	return (
		<div className="my-10 py-20 min-h-screen bg-gray-900 flex flex-col justify-center items-center">
			<span className="mx-auto w-fit px-4 py-2 border border-gray-800 my-4 rounded-xl text-pink-400">
				Features
			</span>
			<p className="text-7xl font-extrabold text-white text-center max-w-4xl mx-auto my-10">
				A bunch of great features to get you started
			</p>
			<div className="py-10 my-10 px-6">
				<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
					{features.map((feature, index) => (
						<div
							key={index}
							className="bg-black bg-opacity-20 text-white rounded-2xl p-6 hover:bg-black hover:bg-opacity-80 hover:scale-105 duration-100 ease-in transition"
						>
							<div className="bg-gray-900 text-pink-800 w-10 h-10 flex items-center justify-center rounded-xl mb-4">
								{feature.icon}
							</div>
							<h3 className="text-white text-3xl font-semibold my-4">
								{feature.title}
							</h3>
							<p className="text-gray-400 text-lg my-2">
								{feature.description}
							</p>
						</div>
					))}
				</div>
			</div>
		</div>
	);
};

export default DarkFeatureGrid;

Footer section component

import React from "react";
import { Brain } from "lucide-react";

const Footer = () => {
	const navItems = [
		{ label: "Get started", href: "/login" },
		{ label: "Docs", href: "/docs" },
		{ label: "Contact", href: "/contact" },
		{ label: "Pricing", href: "/pricing" },
		{ label: "Privacy Policy", href: "/" },
		{ label: "Terms of Service", href: "/" },
	];

	return (
		<footer className="w-full border-t border-gray-50">
			<div className="container mx-auto flex flex-col items-center gap-6 py-24">
				<div className="flex items-center gap-2">
					<Brain className="w-8 h-8" />
					<span className="text-2xl font-semibold">NeuronAI</span>
				</div>
				<nav className="flex sm:flex-row items-center gap-4 sm:gap-8">
					{navItems.map(({ label, href }) => (
						<div
							key={label}
							className="text-gray-600 hover:text-gray-900 cursor-pointer"
						>
							{label}
						</div>
					))}
				</nav>
				<hr className="w-full border-t border-gray-50" />
				<div className="text-gray-500 text-sm text-center">
					© 2025 NeuronAI. All rights reserved.
				</div>
				<div className="text-gray-500 text-sm text-center">
					Follow us on:
					<a className="ml-2 text-gray-600 hover:text-gray-900">
						Twitter
					</a>
					,
					<a className="ml-2 text-gray-600 hover:text-gray-900">
						LinkedIn
					</a>
					,
					<a className="ml-2 text-gray-600 hover:text-gray-900">
						GitHub
					</a>
				</div>
			</div>
		</footer>
	);
};

export default Footer;

Pricing section

Simple, Transparent Pricing

Choose the plan that's right for you

Basic

$9/month

1 Project

5,000 API Calls

Basic Support

Core Features

No Advanced Analytics

No Custom Models

No Priority Support

Pro

$29/month

5 Projects

50,000 API Calls

Priority Support

Advanced Features

Basic Analytics

Team Collaboration

No Custom Models

Enterprise

$99/month

Unlimited Projects

Unlimited API Calls

24/7 Premium Support

All Features

Advanced Analytics

Custom Models

Dedicated Account Manager

import { Check, X, Calendar, CalendarClock } from "lucide-react";
import React, { useState } from "react";
import { FaCrown } from "react-icons/fa";

const PricingSection = () => {
	const [billingPeriod, setBillingPeriod] = useState("monthly");

	const plans = [
		{
			name: "Basic",
			price: billingPeriod === "monthly" ? "$9" : "$90",
			period: billingPeriod === "monthly" ? "/month" : "/year",
			features: [
				"1 Project",
				"5,000 API Calls",
				"Basic Support",
				"Core Features",
			],
			limitations: [
				"No Advanced Analytics",
				"No Custom Models",
				"No Priority Support",
			],
		},
		{
			name: "Pro",
			price: billingPeriod === "monthly" ? "$29" : "$290",
			period: billingPeriod === "monthly" ? "/month" : "/year",
			popular: true,
			features: [
				"5 Projects",
				"50,000 API Calls",
				"Priority Support",
				"Advanced Features",
				"Basic Analytics",
				"Team Collaboration",
			],
			limitations: ["No Custom Models"],
		},
		{
			name: "Enterprise",
			price: billingPeriod === "monthly" ? "$99" : "$990",
			period: billingPeriod === "monthly" ? "/month" : "/year",
			features: [
				"Unlimited Projects",
				"Unlimited API Calls",
				"24/7 Premium Support",
				"All Features",
				"Advanced Analytics",
				"Custom Models",
				"Dedicated Account Manager",
			],
			limitations: [],
		},
	];

	return (
		<div className="container mx-auto py-16">
			<div className="text-center mb-16">
				<h1 className="text-4xl font-bold text-gray-900 mb-4">
					Simple, Transparent Pricing
				</h1>
				<p className="text-xl text-gray-600 mb-8">
					Choose the plan that's right for you
				</p>

				<div className="inline-flex items-center bg-gray-100 rounded-lg p-1">
					<button
						onClick={() => setBillingPeriod("monthly")}
						className={`px-4 py-2 rounded-md text-sm font-medium transition-colors flex items-center gap-2 ${
							billingPeriod === "monthly"
								? "bg-white text-gray-900 shadow-sm"
								: "text-gray-600 hover:text-gray-900"
						}`}
					>
						<Calendar className="w-4 h-4" />
						Monthly
					</button>
					<button
						onClick={() => setBillingPeriod("annually")}
						className={`px-4 py-2 rounded-md text-sm font-medium transition-colors flex items-center gap-2 relative ${
							billingPeriod === "annually"
								? "bg-white text-gray-900 shadow-sm"
								: "text-gray-600 hover:text-gray-900"
						}`}
					>
						<CalendarClock className="w-4 h-4" />
						Annually
						{billingPeriod === "annually" && (
							<span className="absolute -top-5 -right-5 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-lg">
								-20%
							</span>
						)}
					</button>
				</div>
			</div>

			<div className="grid md:grid-cols-3 gap-8 w-full mx-auto sm:grid-cols-1 px-10">
				{plans.map((plan, index) => (
					<div
						key={plan.name}
						className={`bg-white hover:shadow-xl hover:border-2 hover:border-black hover:px-12 hover:-translate-y-2 hover:bg-gray-50 hover:bg-opacity-20 transition-all duration-300 ease-in-out p-10 relative ${
							plan.popular ? "border border-gray-800" : "border border-gray-100"
						}`}
					>
						{plan.popular && (
							<div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
								<div className="bg-gray-900 text-white px-4 py-1 rounded-full flex items-center gap-2">
									<FaCrown className="w-4 h-4" />
									<span className="text-sm font-medium">Most Popular</span>
								</div>
							</div>
						)}

						<div className="mb-8">
							<h2 className="text-2xl font-bold text-gray-900 mb-4">
								{plan.name}
							</h2>
							<div className="flex items-end justify-start gap-1">
								<span className="text-4xl font-bold text-gray-900">
									{plan.price}
								</span>
								<span className="text-gray-600 mb-1">{plan.period}</span>
							</div>
						</div>

						<div className="space-y-4 mb-8">
							{plan.features.map((feature) => (
								<div key={feature} className="flex items-center gap-3">
									<Check className="w-5 h-5 text-green-500" />
									<span className="text-gray-700">{feature}</span>
								</div>
							))}
							{plan.limitations.map((limitation) => (
								<div key={limitation} className="flex items-center gap-3">
									<X className="w-5 h-5 text-red-500" />
									<span className="text-gray-500">{limitation}</span>
								</div>
							))}
						</div>

						<button
							className={`w-full py-3 px-6 rounded-lg font-medium ${
								plan.popular
									? "bg-gray-800 text-white hover:bg-gray-900"
									: "bg-gray-100 text-gray-900 hover:bg-gray-200"
							} transition-colors`}
						>
							Get Started
						</button>
					</div>
				))}
			</div>
		</div>
	);
};

export default PricingSection;

Docs page

Social Media

Join our community

Getting Started with NeuronAI

Welcome to NeuronAI documentation. This guide will help you get up and running quickly with our powerful AI platform.

Quick Start

1Create your account
2Set up your first project
3Start building

Prerequisites

Basic understanding of automation workflows
API knowledge (optional)
Modern web browser

Next Steps

After completing the quick start guide, consider exploring the following:

Explore our Features to understand what NeuronAI can do for you.
Check out the API Integration section for advanced usage.
Join our community forums to connect with other users and share your experiences.

import React, { useState } from "react";
import {
	ArrowLeft,
	ArrowRight,
	Globe,
	ListIcon,
	MessageCircle,
} from "lucide-react";
import { BsGithub, BsTwitterX } from "react-icons/bs";
import { LiaLinkedin } from "react-icons/lia";

const DocsSection = () => {
	const [activeTab, setActiveTab] = useState("getting-started");
	const [isDrawerOpen, setIsDrawerOpen] = useState(false);

	const tabs = [
		{ id: "getting-started", label: "Getting Started" },
		{ id: "features", label: "Features" },
		{ id: "api-integration", label: "API Integration" },
		{ id: "faq", label: "FAQ" },
		{ id: "examples", label: "Examples" },
		{ id: "tutorials", label: "Tutorials" },
		{ id: "changelog", label: "Changelog" },
	];

	const features = [
		{
			title: "AI-Powered Automation",
			description:
				"Leverage intelligent agents to automate repetitive tasks and workflows with human-like understanding",
			benefits: [
				"24/7 Operation",
				"99.9% Accuracy",
				"Self-Learning Capabilities",
			],
		},
		{
			title: "Data Insights",
			description:
				"Get actionable insights with real-time analysis powered by NeuronAI",
			benefits: ["Predictive Analytics", "Custom Reports", "Visual Dashboards"],
		},
		{
			title: "Custom Workflows",
			description: "Design and deploy workflows tailored to your team's needs",
			benefits: [
				"Drag-and-Drop Builder",
				"Template Library",
				"Version Control",
			],
		},
		{
			title: "Seamless Integration",
			description:
				"Integrate with tools like Slack, Zapier, and Hubspot, Instagram, Facebook, Medium",
			benefits: ["One-Click Connect", "Real-time Sync", "Custom Webhooks"],
		},
		{
			title: "Advanced Security",
			description: "Enterprise-grade security with end-to-end encryption",
			benefits: ["SOC 2 Certified", "GDPR Compliant", "Regular Audits"],
		},
		{
			title: "Smart Analytics",
			description: "Deep insights into your automation performance",
			benefits: ["Custom Metrics", "Performance Tracking", "ROI Analysis"],
		},
	];

	const faqs = [
		{
			question: "What is NeuronAI?",
			answer:
				"NeuronAI is an AI-powered automation platform that helps teams streamline their workflows and processes.",
			category: "General",
		},
		{
			question: "How do I get started?",
			answer:
				"Simply create an account, set up your first project, and start building automated workflows.",
			category: "Getting Started",
		},
		{
			question: "What integrations are supported?",
			answer:
				"We support integrations with Slack, Zapier, Hubspot, and many other popular tools.",
			category: "Technical",
		},
		{
			question: "What are the pricing plans?",
			answer:
				"We offer flexible pricing plans starting from $29/month for startups to custom enterprise solutions.",
			category: "Pricing",
		},
		{
			question: "Is there a free trial?",
			answer:
				"Yes, we offer a 14-day free trial with full access to all features.",
			category: "Pricing",
		},
		{
			question: "What kind of support do you provide?",
			answer:
				"We offer 24/7 email support, live chat during business hours, and priority phone support for enterprise customers.",
			category: "Support",
		},
	];

	const tutorials = [
		{
			title: "Getting Started Guide",
			description: "Learn the basics of NeuronAI",
			link: "/tutorials/getting-started",
			duration: "15 mins",
			difficulty: "Beginner",
		},
		{
			title: "Building Your First Workflow",
			description: "Create your first automated workflow",
			link: "/tutorials/first-workflow",
			duration: "30 mins",
			difficulty: "Intermediate",
		},
		{
			title: "Advanced Features",
			description: "Master advanced NeuronAI capabilities",
			link: "/tutorials/advanced",
			duration: "45 mins",
			difficulty: "Advanced",
		},
		{
			title: "API Integration Guide",
			description: "Learn how to integrate NeuronAI with your existing systems",
			link: "/tutorials/api-integration",
			duration: "60 mins",
			difficulty: "Advanced",
		},
		{
			title: "Custom Workflows",
			description: "Build complex automation workflows",
			link: "/tutorials/custom-workflows",
			duration: "90 mins",
			difficulty: "Expert",
		},
	];

	const changelog = [
		{
			version: "1.0.0",
			date: "2024-01-15",
			type: "Major Release",
			changes: [
				"Initial release",
				"Core AI functionality",
				"Basic API integration",
				"Documentation site launch",
				"User authentication system",
				"Basic dashboard features",
			],
		},
		{
			version: "1.1.0",
			date: "2024-02-01",
			type: "Feature Update",
			changes: [
				"Added advanced text analysis",
				"Improved API response times",
				"New dashboard features",
				"Bug fixes and performance improvements",
				"Enhanced security features",
				"New integration options",
			],
		},
		{
			version: "1.1.1",
			date: "2024-02-15",
			type: "Patch",
			changes: [
				"Critical security patches",
				"Performance optimizations",
				"UI/UX improvements",
				"Bug fixes in workflow editor",
				"Documentation updates",
			],
		},
		{
			version: "1.2.0",
			date: "2024-03-01",
			type: "Feature Update",
			changes: [
				"New AI models integration",
				"Enhanced workflow automation",
				"Advanced reporting features",
				"Mobile app release",
				"New API endpoints",
			],
		},
	];

	const handleNavigation = (direction) => {
		const currentIndex = tabs.findIndex((tab) => tab.id === activeTab);
		if (direction === "next" && currentIndex < tabs.length - 1) {
			setActiveTab(tabs[currentIndex + 1].id);
		} else if (direction === "prev" && currentIndex > 0) {
			setActiveTab(tabs[currentIndex - 1].id);
		}
	};

	const GettingStarted = () => (
		<div className="max-w-4xl">
			<h1 className="text-3xl font-bold mb-6">Getting Started with NeuronAI</h1>
			<p className="text-gray-600 text-base mb-8">
				Welcome to NeuronAI documentation. This guide will help you get up and
				running quickly with our powerful AI platform.
			</p>
			<QuickStart />
			<Prerequisites />
			<NextSteps />
		</div>
	);

	const QuickStart = () => (
		<div className="bg-gray-50 p-6 rounded-xl shadow-sm mb-8">
			<h2 className="text-xl font-semibold mb-4">Quick Start</h2>
			<ol className="space-y-4 text-gray-700">
				<li className="flex items-center gap-2">
					<span className="bg-blue-100 text-blue-700 rounded-full w-6 h-6 flex items-center justify-center">
						1
					</span>
					Create your account
				</li>
				<li className="flex items-center gap-2">
					<span className="bg-blue-100 text-blue-700 rounded-full w-6 h-6 flex items-center justify-center">
						2
					</span>
					Set up your first project
				</li>
				<li className="flex items-center gap-2">
					<span className="bg-blue-100 text-blue-700 rounded-full w-6 h-6 flex items-center justify-center">
						3
					</span>
					Start building
				</li>
			</ol>
		</div>
	);

	const Prerequisites = () => (
		<div className="bg-blue-50 p-6 rounded-xl mb-8">
			<h2 className="text-xl font-semibold mb-4">Prerequisites</h2>
			<ul className="list-disc list-inside space-y-2 text-gray-700">
				<li>Basic understanding of automation workflows</li>
				<li>API knowledge (optional)</li>
				<li>Modern web browser</li>
			</ul>
		</div>
	);

	const NextSteps = () => (
		<div className="bg-green-50 p-6 rounded-xl mb-8">
			<h2 className="text-xl font-semibold mb-4">Next Steps</h2>
			<p className="text-gray-700 mb-4">
				After completing the quick start guide, consider exploring the
				following:
			</p>
			<ul className="list-disc list-inside space-y-2 text-gray-700">
				<li>
					Explore our Features to understand what NeuronAI can do for you.
				</li>
				<li>Check out the API Integration section for advanced usage.</li>
				<li>
					Join our community forums to connect with other users and share your
					experiences.
				</li>
			</ul>
		</div>
	);

	const Features = () => (
		<div className="max-w-4xl">
			<h1 className="text-3xl font-bold mb-6">Features</h1>
			<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
				{features.map((feature, index) => (
					<FeatureCard key={index} feature={feature} />
				))}
			</div>
		</div>
	);

	const FeatureCard = ({ feature }) => (
		<div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:bg-gray-50 hover:bg-opacity-50">
			<h3 className="text-lg font-bold mb-4">{feature.title}</h3>
			<p className="text-gray-600 mb-4">{feature.description}</p>
			<div className="space-y-2">
				<h4 className="font-semibold text-gray-700">Key Benefits:</h4>
				<ul className="list-disc list-inside text-gray-600">
					{feature.benefits.map((benefit, i) => (
						<li key={i}>{benefit}</li>
					))}
				</ul>
			</div>
		</div>
	);

	const ApiIntegration = () => (
		<div className="max-w-4xl">
			<h1 className="text-3xl font-bold mb-6">API Integration</h1>
			<p className="text-gray-600 mb-4">
				Integrate NeuronAI with your existing systems using our API.
			</p>
			<p className="text-gray-600 mb-4">
				To integrate NeuronAI with your systems, follow these steps:
			</p>
			<IntegrationSteps />
			<p className="text-gray-600 mt-4">
				For more detailed information, refer to our{" "}
				<a href="/docs/api-reference" className="text-blue-600 underline">
					API Reference
				</a>
				.
			</p>
			<CodeSample />
		</div>
	);

	const IntegrationSteps = () => (
		<ol className="list-decimal list-inside space-y-2 text-gray-700">
			<li>Obtain your API key from the NeuronAI dashboard.</li>
			<li>Use the API documentation to understand the available endpoints.</li>
			<li>
				Implement the API calls in your application using your preferred
				programming language.
			</li>
			<li>
				Test the integration thoroughly to ensure everything works as expected.
			</li>
		</ol>
	);

	const CodeSample = () => (
		<div className="rounded-lg mt-6">
			<h2 className="text-lg font-semibold mb-2">Code Sample</h2>
			<pre className="bg-gray-50 p-4 rounded-md overflow-x-auto">
				<code className="text-gray-800">
					{`// Example of making an API call using fetch
const apiKey = 'YOUR_API_KEY';
const endpoint = 'https://api.neuronai.com/v1/resource';

fetch(endpoint, {
  method: 'GET',
  headers: {
    'Authorization': \`Bearer \${apiKey}\`,
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));`}
				</code>
			</pre>
		</div>
	);

	const Faq = () => (
		<div className="max-w-4xl">
			<h1 className="text-3xl font-bold mb-6">Frequently Asked Questions</h1>
			<p className="text-gray-600 mb-4">
				Find answers to common questions about NeuronAI.
			</p>
			<div className="space-y-4">
				{faqs.map((faq, index) => (
					<FaqItem key={index} faq={faq} />
				))}
			</div>
		</div>
	);

	const FaqItem = ({ faq }) => (
		<div className="border-b border-gray-200 pb-4">
			<h2 className="font-semibold text-lg">{faq.question}</h2>
			<p className="text-gray-600">{faq.answer}</p>
		</div>
	);

	const exampleData = [
		{
			title: "Example 1: Basic API Call",
			code: `// Example of making a simple API call
				const apiKey = 'YOUR_API_KEY';
				const endpoint = 'https://api.neuronai.com/v1/resource';

				fetch(endpoint, {
					method: 'GET',
					headers: {
						'Authorization': \`Bearer \${apiKey}\`,
						'Content-Type': 'application/json'
					}
				})
				.then(response => response.json())
				.then(data => console.log(data))
				.catch(error => console.error('Error:', error));`,
		},
		{
			title: "Example 2: Posting Data",
			code: `// Example of posting data to the API
				const apiKey = 'YOUR_API_KEY';
				const endpoint = 'https://api.neuronai.com/v1/resource';

				const data = { key: 'value' };

				fetch(endpoint, {
					method: 'POST',
					headers: {
						'Authorization': \`Bearer \${apiKey}\`,
						'Content-Type': 'application/json'
					},
					body: JSON.stringify(data)
				})
				.then(response => response.json())
				.then(data => console.log(data))
				.catch(error => console.error('Error:', error));`,
		},
	];

	const Examples = () => (
		<div className="max-w-4xl">
			<h1 className="text-3xl font-bold mb-6">Examples</h1>
			<p className="text-gray-600 mb-4">
				Explore practical examples of using NeuronAI.
			</p>
			{exampleData.map((example, index) => (
				<Example key={index} example={example} />
			))}
		</div>
	);

	const Example = ({ example }) => (
		<div className="p-4 rounded-lg mt-6">
			<h2 className="text-lg font-semibold mb-2">{example.title}</h2>
			<pre className="bg-gray-50 p-4 rounded-md overflow-x-auto">
				<code className="text-gray-800">{example.code}</code>
			</pre>
		</div>
	);

	const Tutorials = () => (
		<div className="max-w-4xl">
			<h1 className="text-3xl font-bold mb-6">Tutorials</h1>
			<p className="text-gray-600 mb-4">
				Follow step-by-step tutorials to master NeuronAI.
			</p>
			{tutorials.map((tutorial, index) => (
				<Tutorial key={index} tutorial={tutorial} />
			))}
		</div>
	);

	const Tutorial = ({ tutorial }) => (
		<div className="p-4 mt-6 border border-gray-100 rounded-xl transition-transform transform hover:scale-105">
			<h2 className="text-lg font-semibold mb-2 text-gray-900">
				{tutorial.title}
			</h2>
			<p className="text-gray-600 mb-2">{tutorial.description}</p>
			{tutorial.steps && tutorial.steps.length > 0 ? (
				<ol className="list-decimal list-inside space-y-2 text-gray-700">
					{tutorial.steps.map((step, index) => (
						<li key={index} className="hover:text-gray-900 transition-colors">
							{step}
						</li>
					))}
				</ol>
			) : (
				<p className="text-gray-500">No steps available for this tutorial.</p>
			)}
		</div>
	);

	const Changelog = () => (
		<div className="max-w-4xl">
			<h1 className="text-3xl font-bold mb-6">Changelog</h1>
			<p className="text-gray-600 mb-4">
				Stay updated with the latest changes and updates.
			</p>
			<div className="bg-white">
				<div className="text-gray-700">
					{changelog.map((entry) => (
						<ChangelogEntry key={entry.version} entry={entry} />
					))}
				</div>
			</div>
		</div>
	);

	const ChangelogEntry = ({ entry }) => (
		<div key={entry.version} className="my-4">
			<h3 className="font-bold">
				Version {entry.version} ({entry.date}) - {entry.type}
			</h3>
			<ul className="list-disc list-inside space-y-2">
				{entry.changes.map((change, index) => (
					<li key={index}>{change}</li>
				))}
			</ul>
		</div>
	);

	const renderContent = () => {
		switch (activeTab) {
			case "getting-started":
				return <GettingStarted />;
			case "features":
				return <Features />;
			case "api-integration":
				return <ApiIntegration />;
			case "faq":
				return <Faq />;
			case "examples":
				return <Examples />;
			case "tutorials":
				return <Tutorials />;
			case "changelog":
				return <Changelog />;
			default:
				return null;
		}
	};

	const renderSidebar = () => (
		<div className="flex flex-col gap-4">
			<div className="flex flex-col gap-2">
				{tabs.map((tab) => (
					<button
						key={tab.id}
						onClick={() => {
							setActiveTab(tab.id);
							setIsDrawerOpen(false);
						}}
						className={`px-4 py-2 rounded-lg text-left ${
							activeTab === tab.id
								? "bg-gray-50 text-black font-medium"
								: "text-gray-700 hover:bg-gray-50"
						}`}
					>
						{tab.label}
					</button>
				))}
			</div>

			<div className="border-t border-gray-100 pt-4">
				<p className="text-sm font-medium text-gray-700 mb-2">Social Media</p>
				<div className="flex gap-2">
					<button className="flex items-center gap-2 px-4 py-2 rounded-lg hover:bg-gray-50">
						<BsTwitterX className="w-4 h-4" />
						Twitter
					</button>
					<button className="flex items-center gap-2 px-4 py-2 rounded-lg hover:bg-gray-50">
						<LiaLinkedin className="w-4 h-4" />
						LinkedIn
					</button>
				</div>
			</div>

			<div className="border-t border-gray-100 pt-4">
				<p className="text-sm font-medium text-gray-700 mb-2">
					Join our community
				</p>
				<div className="flex flex-col gap-2">
					<button className="flex items-center gap-2 px-4 py-2 rounded-lg hover:bg-gray-50">
						<Globe className="w-4 h-4" />
						Web Community
					</button>
					<button className="flex items-center gap-2 px-4 py-2 rounded-lg hover:bg-gray-50">
						<MessageCircle className="w-4 h-4" />
						Discord Community
					</button>
					<button className="flex items-center gap-2 px-4 py-2 rounded-lg hover:bg-gray-50">
						<BsGithub className="w-4 h-4" />
						Github
					</button>
				</div>
			</div>
		</div>
	);

	return (
		<div className="min-h-screen bg-white">
			<main className="mx-auto min-h-screen border border-gray-50">
				{/* Mobile Menu Button */}
				<button
					className="relative border border-gray-100 rounded-lg px-4 py-1 ml-8 mt-4 md:hidden"
					onClick={() => setIsDrawerOpen(!isDrawerOpen)}
				>
					{isDrawerOpen ? null : (
						<div className="flex items-center gap-2">
							<ListIcon size={20} />
							<span className="">{activeTab}</span>
						</div>
					)}
				</button>

				{/* Mobile Drawer */}
				<div
					className={`md:hidden fixed inset-0 bg-black bg-opacity-50 z-40 transition-opacity ${
						isDrawerOpen ? "opacity-100" : "opacity-0 pointer-events-none"
					}`}
					onClick={() => setIsDrawerOpen(false)}
				>
					<div
						className={`fixed inset-y-0 left-0 w-64 bg-white transform transition-transform ${
							isDrawerOpen ? "translate-x-0" : "-translate-x-full"
						}`}
						onClick={(e) => e.stopPropagation()}
					>
						<div className="p-4 overflow-y-auto h-full">{renderSidebar()}</div>
					</div>
				</div>

				<div className="flex gap-8 px-8">
					{/* Desktop Sidebar */}
					<nav className="hidden md:block w-64 py-8">{renderSidebar()}</nav>

					<div className="flex-1 border-l border-gray-50 min-h-screen p-8">
						{renderContent()}
						<div className="flex justify-between mt-8">
							<button
								onClick={() => handleNavigation("prev")}
								className="flex items-center gap-2 px-4 py-2 rounded-lg bg-gray-50 text-gray-700 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
								disabled={tabs.findIndex((tab) => tab.id === activeTab) === 0}
							>
								<ArrowLeft size={20} />
								Previous
							</button>
							<button
								onClick={() => handleNavigation("next")}
								className="flex items-center gap-2 px-4 py-2 rounded-lg bg-gray-50 text-gray-700 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
								disabled={
									tabs.findIndex((tab) => tab.id === activeTab) ===
									tabs.length - 1
								}
							>
								Next
								<ArrowRight size={20} />
							</button>
						</div>
					</div>
				</div>
			</main>
		</div>
	);
};

export default DocsSection;

Contact page

We’re Here to Help!

Get in Touch

Have questions? We'd love to hear from you. Send us a message and we'll respond as soon as possible.

contact@neuronai.com

Phone

+1 (555) 123-4567

Address

123 AI Street, Tech Valley, CA 94025

Social media

import React from "react";
import { Mail, Phone, MapPin, Send } from "lucide-react";
import { FaLinkedin, FaTwitter, FaGithub } from "react-icons/fa";
import colors from "tailwindcss/colors";

const BackgroundDots = () => {
	return (
		<div className="absolute inset-0 w-full h-[50vh]">
			<div className="absolute inset-0 bg-white">
				<div
					className="absolute inset-0 opacity-30"
					style={{
						backgroundImage: `
							linear-gradient(to right, ${colors.gray[100]} 1px, transparent 1px),
							linear-gradient(to bottom, ${colors.gray[100]} 1px, transparent 1px)
						`,
						backgroundSize: "4rem 4rem",
					}}
				/>
			</div>
		</div>
	);
};

const ContactPage = () => (
	<div className="bg-white relative">
		<main className="relative min-h-screen container mx-auto   border-gray-50">
			<BackgroundDots />
			<div className="lg:w-1/3 md:w-1/2 sm:w-1/2 xxs:w-1/3 xs:w-1/3 mx-auto   border-gray-50 ">
				<div className="relative py-20 text-center ">
					<p className="text-5xl font-serif">Contact us</p>
					<p>We’re Here to Help!</p>
				</div>
				<div className="relative grid grid-cols-1 gap-12 mx-auto py-20">
					<div className="space-y-8">
						<div className="px-10">
							<h2 className="text-2xl font-semibold mb-6">Get in Touch</h2>
							<p className="text-gray-600 mb-8">
								Have questions? We'd love to hear from you. Send us a message
								and we'll respond as soon as possible.
							</p>
						</div>
						<div className="px-10">
							<form className="space-y-6">
								{["name", "email", "message"].map((field, index) => (
									<div key={index}>
										<label
											htmlFor={field}
											className="block text-sm font-medium text-gray-700 mb-1"
										>
											{field.charAt(0).toUpperCase() + field.slice(1)}
										</label>
										{field === "message" ? (
											<textarea
												id={field}
												rows="4"
												className="w-full px-4 py-2 border border-gray-300 bg-gray-50 outline-none rounded-lg focus:bg-gray-100"
												placeholder={`Your ${field}`}
											></textarea>
										) : (
											<input
												type={field === "email" ? "email" : "text"}
												id={field}
												className="w-full px-4 py-2 border border-gray-300 bg-gray-50 outline-none rounded-lg focus:bg-gray-100"
												placeholder={`Your ${field}`}
											/>
										)}
									</div>
								))}
								<button
									type="submit"
									className="w-full bg-gray-800 hover:bg-gray-900 text-white py-2 px-4 rounded-lg flex items-center justify-center gap-2"
								>
									<Send className="w-4 h-4" /> Send Message
								</button>
							</form>
						</div>
						<hr className="border-gray-50" />
						<div className="space-y-4 px-10">
							<p>Contact us</p>
							{[
								{
									icon: <Mail className="w-6 h-6 text-gray-600" />,
									label: "Email",
									value: "contact@neuronai.com",
								},
								{
									icon: <Phone className="w-6 h-6 text-gray-600" />,
									label: "Phone",
									value: "+1 (555) 123-4567",
								},
								{
									icon: <MapPin className="w-6 h-6 text-gray-600" />,
									label: "Address",
									value: "123 AI Street, Tech Valley, CA 94025",
								},
							].map(({ icon, label, value }, index) => (
								<div key={index} className="flex items-center gap-4">
									{icon}
									<div>
										<p className="font-medium">{label}</p>
										<p className="text-gray-600">{value}</p>
									</div>
								</div>
							))}
						</div>
						<hr className="border-gray-50" />
						<div className="px-10 space-y-4">
							<p>Social media</p>
							<div className="flex gap-4">
								{[FaLinkedin, FaTwitter, FaGithub].map((Icon, index) => (
									<a
										key={index}
										href="#"
										className="text-gray-400 hover:text-gray-500"
									>
										<Icon className="w-6 h-6" />
									</a>
								))}
							</div>
						</div>
					</div>
				</div>
			</div>
		</main>
	</div>
);
export default ContactPage;

Sidebar

Contra

John Smith

johnsmith@ihatereading.in

Workspaces

Dashboard

Projects

Tasks

Clients

Messages

Leads

Social Media

Affiliates

Jobs Board

Payments

Invoices

Expenses

Income

Services

Theme

import {
	BriefcaseIcon,
	CheckCheck,
	CreditCardIcon,
	DollarSignIcon,
	FileIcon,
	FileTextIcon,
	FoldersIcon,
	LinkIcon,
	MailIcon,
	Moon,
	Sun,
	MessageSquareIcon,
	PersonStandingIcon,
	SettingsIcon,
	Share2Icon,
	ChevronLeftIcon,
	ChevronRightIcon,
} from "lucide-react";
import React, { useState } from "react";

const workspaces = [
	{ name: "Dashboard", link: "/", logo: FileIcon },
	{ name: "Projects", link: "/", logo: FoldersIcon },
	{ name: "Tasks", link: "/", logo: CheckCheck },
	{ name: "Clients", link: "", logo: PersonStandingIcon },
	{ name: "Messages", link: "", logo: MessageSquareIcon },
];

const payments = [
	{ name: "Invoices", link: "/", logo: FileTextIcon },
	{ name: "Expenses", link: "/", logo: CreditCardIcon },
	{ name: "Income", link: "/", logo: DollarSignIcon },
	{ name: "Services", link: "/", logo: BriefcaseIcon },
];

const leads = [
	{ name: "Social Media", link: "/", logo: Share2Icon },
	{ name: "Affiliates", link: "/", logo: LinkIcon },
	{ name: "Email", link: "/", logo: MailIcon },
	{ name: "Jobs Board", link: "/", logo: BriefcaseIcon },
];

const SidebarItem = ({ icon: Icon, name, show }) => (
	<div className="flex items-center gap-2 text-gray-500 hover:text-black hover:bg-gray-50 rounded-xl px-2 text-sm cursor-pointer">
		<Icon size={20} className={show ? "": "my-2"} />
		{show && <p>{name}</p>}
	</div>
);

const ProjectManagementSidebar = () => {
	const [show, setShow] = useState(true);
	const [theme, setTheme] = useState("light");

	return (
		<div
			className={`min-h-screen transition-all duration-200 mx-auto ${
				show ? "md:w-72 sm:w-full xxs:w-full xs:w-full" : "w-20"
			} border border-gray-200 rounded-xl`}
		>
			{/* Profile Section */}
			<div className="p-2">
				<div className="flex justify-between items-center">
					<div className="flex gap-2 items-center rounded-xl py-1 px-2 font-semibold border border-gray-50 bg-gray-50 text-sm hover:bg-gray-50 my-2">
						<img
							src="https://ihatereading.in/logo.png"
							className="w-6 h-6 object-contain rounded-full transition-all duration-100 ease-in"
						/>
						{show && <p>Contra</p>}
					</div>
					<button
						onClick={() => setShow(!show)}
						className="p-1 rounded-lg hover:bg-gray-100 transition"
					>
						{show ? (
							<ChevronLeftIcon size={20} />
						) : (
							<ChevronRightIcon size={20} />
						)}
					</button>
				</div>
				<div className="flex items-center gap-2 hover:bg-gray-50 border border-gray-50 rounded-xl px-2">
					<img
						src="https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fusers%2Fuser-1.png?alt=media&token=9c572853-fd83-42c7-8f28-3b4bdb1fd247"
						className="w-10 h-10 object-contain rounded-xl my-1"
					/>
					{show && (
						<div>
							<p className="text-gray-800 mb-0">John Smith</p>
							<p className="text-xs text-gray-500 mt-0">
								johnsmith@ihatereading.in
							</p>
						</div>
					)}
				</div>
			</div>

			<div className="mx-4 my-4 space-y-6">
				{[
					{ title: "Workspaces", items: workspaces },
					{ title: "Leads", items: leads },
					{ title: "Payments", items: payments },
				].map(({ title, items }) => (
					<section key={title}>
						{show && (
							<p className="text-sm text-gray-500 font-semibold">{title}</p>
						)}
						{items.map((item) => (
							<SidebarItem
								key={item.name}
								icon={item.logo}
								name={item.name}
								show={show}
							/>
						))}
					</section>
				))}
			</div>

			{/* Theme Toggle */}
			<section className="mx-4 my-10">
				{show && <p className="text-sm text-gray-500 font-semibold">Theme</p>}
				<button
					onClick={() => setTheme(theme === "light" ? "dark" : "light")}
					className="p-2 flex items-center gap-2 rounded-full border border-zinc-100"
				>
					<Moon size={18} className="text-zinc-500 " />
					{show && <Sun size={18} className="text-zinc-900" />}
				</button>
			</section>
		</div>
	);
};

export default ProjectManagementSidebar;

Sticky navbar

iHateReading

Docs

Products

Pricing

Contacts

import React, { useState, useEffect, useRef } from "react";
import {
	X,
	PanelLeftOpen,
	PanelLeftClose,
	LogIn,
	PartyPopperIcon,
	DogIcon,
	UserIcon,
	Moon,
	Sun,
	SidebarIcon,
} from "lucide-react";
import Image from "next/image";
import { PiGoogleLogo } from "react-icons/pi";
import colors from "tailwindcss/colors";

const StickyNavbar = () => {
	const [showAuthModal, setShowAuthModal] = useState(false);
	const [loading, setLoading] = useState(false);
	const [loadingGithub, setLoadingGithub] = useState(false);
	const [email, setEmail] = useState("");
	const [password, setPassword] = useState("");
	const [isLoginWithEmail, setIsLoginWithEmail] = useState(false);
	const [theme, setTheme] = useState("light");

	const modalRef = useRef(null);

	return (
		<div className="sticky top-0 flex justify-between w-full bg-white border-b border-t border-gray-50 py-2 md:px-5 z-10 ">
			<div className="relative flex justify-start items-center gap-4">
				<SidebarIcon
					size={24}
					color={theme === "light" ? colors.gray[700] : colors.gray[100]}
				/>
				<p className="text-gray-800 hover:text-black cursor-pointer">
					iHateReading
				</p>
			</div>
			<div className="flex justify-around items-center gap-8">
				<p className="text-gray-600 hover:text-black cursor-pointer">
					Docs
				</p>
				<p className="text-gray-600 hover:text-black cursor-pointer">
					Products
				</p>
				<p className="text-gray-600 hover:text-black cursor-pointer">
					Pricing
				</p>
				<p className="text-gray-600 hover:text-black cursor-pointer">
					Contacts
				</p>
			</div>
			<div className="flex items-center gap-4">
				<button
					onClick={() => {
						const newTheme = theme === "light" ? "dark" : "light";
						setTheme(newTheme);
					}}
					className={`p-2 flex gap-2 items-center rounded-full border border-zinc-100`}
				>
					<Moon size={18} className="text-zinc-100 dark:text-zinc-100" />
					<Sun size={18} className="text-zinc-900 dark:text-zinc-800" />
				</button>
				<button
					onClick={() => setShowAuthModal(true)}
					className="px-4 py-2 text-sm bg-gray-900 text-white rounded hover:px-6 transition-all duration-100 ease-in hover:bg-zinc-1000 dark:bg-zinc-900 dark:hover:bg-zinc-800"
				>
					<LogIn className="mr-2 inline" size={16} />
					Get started
				</button>
			</div>

			{showAuthModal && (
				<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
					<div
						ref={modalRef}
						className="bg-white rounded-xl p-8 w-96 relative"
					>
						<button
							onClick={() => setShowAuthModal(false)}
							className="absolute top-4 right-4 hover:bg-zinc-100 p-1 rounded-full transition-colors"
						>
							<X size={20} className="text-gray-500" />
						</button>

						<div className="flex flex-col items-center">
							<h2 className="text-2xl font-bold mb-6">Welcome Back</h2>
							<p className="text-gray-500 mb-4">
								Please sign in or sign up to continue.
							</p>
							<div className="w-full space-y-3 mb-6">
								<input
									type="email"
									placeholder="Email"
									value={email}
									onChange={(e) => setEmail(e.target.value)}
									className="w-full p-2 outline-none text-sm border rounded-xl border-gray-300 hover:bg-gray-50 dark:text-zinc-100"
								/>
								<input
									type="password"
									placeholder="Password"
									value={password}
									onChange={(e) => setPassword(e.target.value)}
									className="w-full p-2 outline-none text-sm border border-gray-300 rounded-xl hover:bg-gray-50 dark:text-zinc-100"
								/>
								<button className="w-full text-white rounded-xl py-2 text-sm bg-gray-800 hover:bg-gray-900 transition-colors font-medium dark:hover:bg-zinc-800">
									Sign In
								</button>
								<button className="w-full text-white rounded-xl py-2 text-sm bg-gray-800 hover:bg-gray-900 transition-colors font-medium dark:hover:bg-zinc-800">
									Sign Up (for new users)
								</button>
							</div>

							<div className="relative w-full mb-6">
								<div className="absolute inset-0 flex items-center">
									<div className="w-full border-t border-gray-200"></div>
								</div>
								<div className="relative flex justify-center text-sm">
									<span className="px-2 bg-white text-gray-500 dark:text-zinc-400">
										Or continue with
									</span>
								</div>
							</div>

							<div className="w-full space-y-2">
								<button className="w-full flex items-center justify-center px-4 py-2 text-sm border border-gray-300 rounded-xl hover:bg-zinc-50 transition-colors hover:bg-gray-50">
									<PiGoogleLogo className="mr-2 text-lg" />
									Sign in with Google
								</button>

								<button className="w-full flex items-center justify-center px-4 py-2 text-sm border border-gray-300 rounded-xl hover:bg-zinc-50 transition-colors hover:bg-gray-50">
									<svg className="w-4 h-4 mr-2" viewBox="0 0 24 24">
										<path
											fill="currentColor"
											d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385c.6.105.825-.255.825-.57c0-.285-.015-1.23-.015-2.235c-3.015.555-3.795-.735-4.035-1.41c-.135-.345-.72-1.41-1.23-1.695c-.42-.225-1.02-.78-.015-.795c.945-.015 1.62.87 1.845 1.23c1.08 1.815 2.805 1.305 3.495.99c.105-.78.42-1.305.765-1.605c-2.67-.3-5.46-1.335-5.46-5.925c0-1.305.465-2.385 1.23-3.225c-.12-.3-.54-1.53.12-3.18c0 0 1.005-.315 3.3 1.23c.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23c.66 1.65.24 2.88.12 3.18c.765.84 1.23 1.905 1.23 3.225c0 4.605-2.805 5.625-5.475 5.925c.435.375.81 1.095.81 2.22c0 1.605-.015 2.895-.015 3.3c0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"
										/>
									</svg>
									Sign in with GitHub
								</button>
							</div>
						</div>
					</div>
				</div>
			)}
		</div>
	);
};

export default StickyNavbar;

Bottom drawer

Social Media

Twitter

WebsiteYoutubeInstagramMedium

import React, { useState } from "react";
import { Laptop2Icon, LinkIcon, RssIcon, X } from "lucide-react";
import { FaInstagram, FaYoutube } from "react-icons/fa";
import colors from "tailwindcss/colors";

const BottomSheet = () => {
	const [opened, setOpened] = useState(false);

	const toggleBottomSheet = () => {
		setOpened(!opened);
	};

	return (
		<div className="min-h-screen flex items-center justify-center bg-gray-100 relative">
			<button
				onClick={toggleBottomSheet}
				className="bg-gray-800 text-white flex justify-around items-center gap-2 py-2 px-4 group rounded font-mono hover:bg-black hover:pl-6 duration-100 transition-all"
			>
				<LinkIcon
					className="opacity-0 group-hover:opacity-100 hidden group-hover:inline transition-opacity duration-100 group-hover:scale-110 group-hover:text-yellow-500"
					size={14}
				/>
				Show Bottom Sheet
			</button>
			<div
				className={`fixed w-96 h-80 border border-gray-200 rounded-md bg-white ${
					opened ? "mx-auto bottom-1" : "-bottom-96"
				} transition-all duration-100`}
			>
				<div className="flex justify-between items-center p-2 border-b">
					<h3 className="text-lg font-medium">Social Media</h3>
					<X className="cursor-pointer" size={24} onClick={toggleBottomSheet} />
				</div>
				<div className="p-2">
					<div className="flex flex-wrap justify-start items-center gap-2">
						<div className="group relative bg-indigo-50 hover:underline my-1 cursor-pointer hover:px-6 px-4 duration-100 transition-all ease-in-out hover:bg-indigo-50 rounded-full hover:rounded-xl py-2 gap-2 flex justify-start items-center">
							<span className="cursor-pointer w-4 h-4 transition-all duration-100">
								<svg
									role="img"
									viewBox="0 0 24 24"
									fill={colors.indigo[600]}
									xmlns="http://www.w3.org/2000/svg"
								>
									<title>X</title>
									<path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" />
								</svg>
							</span>
							<a className="text-indigo-500 hover:underline">Twitter</a>
						</div>

						<span className="group bg-orange-50 my-1 cursor-pointer hover:px-6 px-4 hover:underline duration-100 transition-all ease-in-out hover:bg-orange-50 rounded-full py-2 gap-1 flex justify-start items-center">
							<span className="cursor-pointer transition-all duration-100">
								<Laptop2Icon color={colors.orange[600]} size={20} />
							</span>
							<a className="text-orange-500 hover:underline">Website</a>
						</span>

						<span className="group bg-red-50 my-1 cursor-pointer hover:px-6 px-4 hover:underline duration-100 transition-all ease-in-out hover:bg-red-50 rounded-full py-2 gap-1 flex justify-start items-center">
							<span className="cursor-pointer transition-all duration-100">
								<FaYoutube color={colors.red[600]} />
							</span>
							<a className="text-red-500 hover:underline">Youtube</a>
						</span>

						<span className="group bg-pink-50 my-1 cursor-pointer hover:px-6 px-4 hover:underline duration-100 transition-all ease-in-out hover:bg-pink-50 rounded-full py-2 gap-1 flex justify-start items-center">
							<span className="cursor-pointer transition-all duration-100">
								<FaInstagram color={colors.pink[600]} />
							</span>
							<a className="text-pink-500 hover:underline">Instagram</a>
						</span>

						<span className="group bg-green-50 hover:translate-x-4 my-1 cursor-pointer hover:px-6 px-4 hover:underline duration-100 transition-all ease-in-out hover:bg-green-50 rounded-full py-2 gap-1 flex justify-start items-center">
							<span className="cursor-pointer transition-all duration-100 ">
								<RssIcon color={colors.green[600]} size={20} />
							</span>
							<a className="text-green-500 hover:underline">Medium</a>
						</span>
					</div>
				</div>
			</div>
		</div>
	);
};

export default BottomSheet;

Card payment form

Card Payment

Enter Your Card Details

import React from "react";
import colors from "tailwindcss/colors";

const BackgroundDots = () => {
	return (
		<div className="absolute inset-0 w-full h-[50vh]">
			<div className="absolute inset-0 bg-white">
				<div
					className="absolute inset-0 opacity-30"
					style={{
						backgroundImage: `
							linear-gradient(to right, ${colors.gray[100]} 1px, transparent 1px),
							linear-gradient(to bottom, ${colors.gray[100]} 1px, transparent 1px)
						`,
						backgroundSize: "4rem 4rem",
					}}
				/>
			</div>
		</div>
	);
};

const CardPaymentForm = () => {
	return (
		<div className="container relative mx-auto border border-gray-50">
			<BackgroundDots />
			<div className="flex flex-col justify-center items-center md:py-10 flex-wrap mx-auto">
				<h2 className="text-4xl font-bold text-center mb-8">Card Payment</h2>
				<hr className="border-gray-50" />
				<div className="relative md:w-1/2 lg:w-1/3 mx-auto py-10 md:py-20">
					<p className="text-xl font-semibold px-8">Enter Your Card Details</p>
					<form className="mx-auto p-8 w-full">
						<div className="mb-4">
							<label
								htmlFor="cardNumber"
								className="block text-gray-500 text-sm font-bold mb-2"
							>
								Card Number
							</label>
							<input
								type="text"
								id="cardNumber"
								maxLength="16"
								placeholder="Card Number (16 digits)"
								required
								className="shadow appearance-none border rounded-lg w-full py-2 px-3 text-gray-500 leading-tight focus:outline-none focus:shadow-outline"
							/>
						</div>
						<div className="flex flex-wrap gap-2 mb-4">
							<div className="w-1/3">
								<label
									htmlFor="expiry"
									className="block text-gray-500 text-sm font-bold mb-2"
								>
									Expiry Date
								</label>
								<input
									type="text"
									id="expiry"
									placeholder="MM/YY"
									required
									className="shadow appearance-none border rounded-lg w-full py-2 px-3 text-gray-500 leading-tight focus:outline-none focus:shadow-outline"
								/>
							</div>
							<div className="w-1/3">
								<label
									htmlFor="cvc"
									className="block text-gray-500 text-sm font-bold mb-2"
								>
									CVC
								</label>
								<input
									type="text"
									id="cvc"
									placeholder="CVC"
									required
									className="shadow appearance-none border rounded-lg w-full py-2 px-3 text-gray-500 leading-tight focus:outline-none focus:shadow-outline"
								/>
							</div>
						</div>
						<button
							type="submit"
							className="bg-gray-800 hover:bg-gray-900 w-full text-white font-bold py-3 px-4 rounded-lg focus:outline-none focus:shadow-outline"
						>
							Pay Now
						</button>
					</form>
				</div>
			</div>
		</div>
	);
};

export default CardPaymentForm;

Feedback form

Share Feedback

Let us know what you liked the most?

import React from "react";
import colors from "tailwindcss/colors";

const BackgroundDots = () => {
	return (
		<div className="absolute inset-0 w-full h-[50vh]">
			<div className="absolute inset-0 bg-white">
				<div
					className="absolute inset-0 opacity-30"
					style={{
						backgroundImage: `
							linear-gradient(to right, ${colors.gray[100]} 1px, transparent 1px),
							linear-gradient(to bottom, ${colors.gray[100]} 1px, transparent 1px)
						`,
						backgroundSize: "4rem 4rem",
					}}
				/>
			</div>
		</div>
	);
};

const CardPaymentForm = () => {
	return (
		<div className="container relative mx-auto border border-gray-50">
			<BackgroundDots />
			<div className="flex flex-col justify-center items-center md:py-10 flex-wrap mx-auto">
				<h2 className="text-4xl font-bold text-center mb-8">Card Payment</h2>
				<hr className="border-gray-50" />
				<div className="relative md:w-1/2 lg:w-1/3 mx-auto py-10 md:py-20">
					<p className="text-xl font-semibold px-8">Enter Your Card Details</p>
					<form className="mx-auto p-8 w-full">
						<div className="mb-4">
							<label
								htmlFor="cardNumber"
								className="block text-gray-500 text-sm font-bold mb-2"
							>
								Card Number
							</label>
							<input
								type="text"
								id="cardNumber"
								maxLength="16"
								placeholder="Card Number (16 digits)"
								required
								className="shadow appearance-none border rounded-lg w-full py-2 px-3 text-gray-500 leading-tight focus:outline-none focus:shadow-outline"
							/>
						</div>
						<div className="flex flex-wrap gap-2 mb-4">
							<div className="w-1/3">
								<label
									htmlFor="expiry"
									className="block text-gray-500 text-sm font-bold mb-2"
								>
									Expiry Date
								</label>
								<input
									type="text"
									id="expiry"
									placeholder="MM/YY"
									required
									className="shadow appearance-none border rounded-lg w-full py-2 px-3 text-gray-500 leading-tight focus:outline-none focus:shadow-outline"
								/>
							</div>
							<div className="w-1/3">
								<label
									htmlFor="cvc"
									className="block text-gray-500 text-sm font-bold mb-2"
								>
									CVC
								</label>
								<input
									type="text"
									id="cvc"
									placeholder="CVC"
									required
									className="shadow appearance-none border rounded-lg w-full py-2 px-3 text-gray-500 leading-tight focus:outline-none focus:shadow-outline"
								/>
							</div>
						</div>
						<button
							type="submit"
							className="bg-gray-800 hover:bg-gray-900 w-full text-white font-bold py-3 px-4 rounded-lg focus:outline-none focus:shadow-outline"
						>
							Pay Now
						</button>
					</form>
				</div>
			</div>
		</div>
	);
};

export default CardPaymentForm;

UPI payment form

Card Payment

import React, { useState } from "react";
import { TextInput, Button, Tooltip } from "@mantine/core";
import {
	Lock,
	CreditCard,
	Watch,
	Calendar,
	PlusIcon,
	DollarSign,
} from "lucide-react";
import { gsap } from "gsap";
import colors from "tailwindcss/colors";

const userOrders = [
	{
		name: "Stiched white ",
		id: 1,
		rating: 3.5,
		orderAt: "24 August 2024",
		hoverBackground: "bg-blue-50",
	},
	{
		name: "Purple lining",
		id: 2,
		rating: 4,
		orderAt: "26 August 2024",
		hoverBackground: "bg-green-50",
	},
	{
		name: "Creamy flower",
		id: 3,
		rating: 4.8,
		orderAt: "28 August 2024",
		hoverBackground: "bg-pink-50",
	},
	{
		name: "White spots",
		id: 4,
		rating: 3,
		orderAt: "31 August 2024",
		hoverBackground: "bg-yellow-50",
	},
];

const UpiCardPaymentForm = () => {
	const [cardNumber, setCardNumber] = useState("");
	const [expiryDate, setExpiryDate] = useState("");
	const [expiryYear, setExpiryYear] = useState("");
	const [cvv, setCvv] = useState("");
	const [loading, setLoading] = useState(false);
	const [isPaymentDone, setIsPaymentDone] = useState(false);
	const [cards, setCards] = useState([]);
	const [activeIndex, setActiveIndex] = useState(0);

	const handleCardNumberChange = (e) => {
		const value = e.target.value;
		setCardNumber(value);
	};

	const handlePayment = () => {
		setLoading(true);
		setTimeout(() => {
			gsap.to([".card-heading", ".user-cards", ".card-payment-form"], {
				width: "0%",
				height: "0%",
				display: "none",
				opacity: 0,
				duration: 0.5,
				onComplete: () => {
					setLoading(false);
					setIsPaymentDone(true);
					gsap.to(".payment-done-component", {
						display: "inline-block",
						opacity: 100,
					});
				},
			});
		}, 500);
	};

	const SingleCard = ({ item, index }) => {
		return (
			<div className="p-2 text-left" key={item?.cardNumber + "_" + index}>
				<div className=" my-2">
					<p className="text-md font-sans">Card Number</p>
					<p className="text-sm text-gray-500 font-mono">{item?.cardNumber}</p>
				</div>
				<div className=" my-2">
					<p className="text-md font-sans">Expiry date/year</p>
					<p className="text-sm text-gray-500 font-mono">
						{item?.expiryDate}/{item?.expiryYear}
					</p>
				</div>
				<div className="my-2">
					<p className="text-md font-sans">CVV</p>
					<p className="text-sm text-gray-500 font-mono">{item?.cvv}</p>
				</div>
			</div>
		);
	};

	const tailwindColorMap = {
		0: "blue",
		1: "green",
		2: "pink",
		3: "yellow",
		4: "red",
		5: "gray",
		6: "teal",
		7: "voilet",
		8: "rose",
	};

	const addNewCardAction = () => {
		let newIndex = cards.length;
		let newCards = [
			...cards,
			{
				cardNumber,
				expiryDate,
				expiryYear,
				cvv,
				cardColor: colors[tailwindColorMap[newIndex]][100],
			},
		];
		gsap.from(
			`.user-card-${newCards.length - 1}`,
			{ opacity: 0, rotation: 360 },
			{ opacity: 1, x: 0 }
		);
		setCards(newCards);
		setLoading(false);
		setActiveState("makePayment");
	};

	const updateCardAction = () => {
		const updatedCards = [...cards];
		updatedCards[activeIndex] = {
			cardNumber,
			expiryDate,
			expiryYear,
			cvv,
			cardColor: colors[tailwindColorMap[activeIndex]][100],
		};
		setActiveState("makePayment");
		setCards(updatedCards);
	};

	let states = {
		addNewCard: {
			buttonText: "Add New Card",
			action: addNewCardAction,
		},
		editCard: {
			buttonText: "Update Card",
			action: updateCardAction,
		},
		makePayment: {
			buttonText: "Make Payment",
			action: handlePayment,
		},
	};

	const [activeState, setActiveState] = useState("addNewCard");
	const { buttonText, action } = states[activeState];

	return (
		<div className="flex flex-col items-center justify-center min-h-screen">
			<div
				style={{ opacity: 1, transition: "opacity 0.5s ease-in-out" }}
				className="w-full max-w-xl bg-white p-8 rounded-lg shadow-lg border border-gray-200"
			>
				<div className="">
					<div className="card-heading">
						<h2 className="text-xl font-semibold mb-6 text-gray-800">
							Card Payment
						</h2>
					</div>
					<div
						className={`${
							cards.length > 0 ? "w-full h-full mb-6" : "w-0 h-0 invisible"
						}  flex justify-start items-center gap-3 user-cards transition-all duration-500 ease-in`}
					>
						<Tooltip label="Add new card">
							<button
								onClick={() => {
									setActiveState("addNewCard");
									setCardNumber("");
									setExpiryDate("");
									setExpiryYear("");
									setCvv("");
									setActiveIndex(null);
								}}
								className="border border-gray-200 rounded-full p-2 hover:bg-gray-100"
							>
								<PlusIcon size={14} />
							</button>
						</Tooltip>
						{cards.map((item, index) => {
							return (
								<div
									key={item.cardNumber + "_" + index}
									id={item.cardNumber}
									onClick={() => {
										setCardNumber(item.cardNumber);
										setExpiryDate(item.expiryDate);
										setExpiryYear(item.expiryYear);
										setCvv(item.cvv);
										setActiveState("editCard");
										setActiveIndex(index);
										gsap.fromTo(
											`.user-card-${index}`,
											{ y: 100, scale: 0.6 },
											{ y: 0, scale: 1, duration: 0.2 }
										);
										gsap.fromTo(
											[
												".card-number-input",
												".expirydate-input",
												".expiryyear-input",
												".cvv-input",
											],
											{ opacity: 0 },
											{ opacity: 1, duration: 0.2 }
										);
									}}
									className={`user-card-${index} rounded-md cursor-pointer h-10 w-20 hover:h-auto hover:w-80 group hover:shadow-xl transition-all duration-200 ease-in ${
										activeIndex === index
											? "border-2 border-black"
											: "border-none"
									}`}
									style={{
										backgroundColor: item?.cardColor,
									}}
								>
									<div className="visible group-hover:hidden transition-all duration-100 ease-in flex justify-center items-center mt-2">
										{index + 1}
									</div>
									<div className="hidden group-hover:inline-block opacity-0 group-hover:opacity-100 group-hover:translate-x-10 transition-all duration-300 ease-in">
										<SingleCard item={item} index={index} />
									</div>
								</div>
							);
						})}
					</div>
					<div className="card-payment-form">
						<div className="flex justify-between gap-2 mb-4">
							<TextInput
								value={cardNumber}
								onChange={handleCardNumberChange}
								placeholder="4444444444444444"
								maxLength={16}
								className="flex-grow card-number-input"
								classNames={{
									input:
										"outline-none focus:outline-none border border-gray-300",
								}}
								size="lg"
								radius="md"
								icon={<CreditCard size={18} />}
								styles={{ input: { fontSize: "1.25rem" } }}
							/>
						</div>
						<div className="flex justify-between gap-2 mb-4">
							<TextInput
								value={expiryDate}
								onChange={(e) => setExpiryDate(e.target.value)}
								placeholder="MM"
								maxLength={2}
								className="flex-grow expirydate-input"
								size="lg"
								icon={<Watch size={18} />}
								radius="md"
								styles={{ input: { fontSize: "1.25rem" } }}
							/>
							<TextInput
								value={expiryYear}
								onChange={(e) => setExpiryYear(e.target.value)}
								placeholder="YYYY"
								maxLength={4}
								className="flex-grow expiryyear-input"
								size="lg"
								icon={<Calendar size={18} />}
								radius="md"
								styles={{ input: { fontSize: "1.25rem" } }}
							/>
						</div>
						<div className="flex justify-between gap-2 mb-6">
							<TextInput
								value={cvv}
								onChange={(e) => setCvv(e.target.value)}
								placeholder="CVV"
								maxLength={3}
								className="flex-grow cvv-input"
								size="lg"
								radius="md"
								icon={<Lock size={18} />}
								styles={{ input: { fontSize: "1.25rem" } }}
							/>
						</div>
						<Button
							fullWidth
							size="lg"
							loading={loading}
							radius="md"
							color="dark"
							onClick={action}
							rightIcon={isPaymentDone ? <DollarSign size={18} /> : null}
						>
							{buttonText}
						</Button>
					</div>
					<div className="payment-done-component hidden">
						<div className="mb-8">
							{" "}
							<h2 className="text-xl font-semibold text-gray-800">
								Order confirmed
							</h2>
							<p className="text-lg font-mono">Your order is placed!!</p>
						</div>
						<div className="flex justify-around items-center animate-bounce">
							{userOrders.map((item, index) => {
								return (
									<div key={item.id}>
										<img
											src={item.src}
											className={`w-24 h-24 object-cover rounded-xl hover:h-28 hover:w-28 cursor-pointer hover:translate-x-4 translate-x-0 hover:shadow-2xl transition-all duration-100 ease-linear group-hover:ml-4`}
											style={{
												transform: `rotationX(${index + 1 * 10}px)`,
												transition: "all 0.4s ease",
											}}
										/>
									</div>
								);
							})}
						</div>
						<Button
							size="xs"
							color="dark"
							variant="filled"
							onClick={() => {
								window.location.href = "/custom-components/card-payment-form";
							}}
						>
							Reorder
						</Button>
					</div>
				</div>
			</div>
		</div>
	);
};

export default UpiCardPaymentForm;

User address form

User Address Form

Enter Your location details

import React from "react";
import colors from "tailwindcss/colors";

const BackgroundDots = () => {
	return (
		<div className="absolute inset-0 w-full h-[50vh]">
			<div className="absolute inset-0 bg-white">
				<div
					className="absolute inset-0 opacity-30"
					style={{
						backgroundImage: `
							linear-gradient(to right, ${colors.gray[100]} 1px, transparent 1px),
							linear-gradient(to bottom, ${colors.gray[100]} 1px, transparent 1px)
						`,
						backgroundSize: "4rem 4rem",
					}}
				/>
			</div>
		</div>
	);
};

const UserAddressForm = () => {
	return (
		<div className="container relative mx-auto border border-gray-50">
			<BackgroundDots />
			<div className="flex flex-col justify-center items-center md:py-10 flex-wrap mx-auto">
				<div className="relative">
					<h2 className="text-xl">User Address Form</h2>
					<p>Enter Your location details</p>
				</div>
				<div className="relative md:w-1/2 lg:w-1/3 mx-auto py-10 md:py-10">
					<form className="mx-auto p-8 w-full">
						<div className="mb-4">
							<label
								htmlFor="address"
								className="block text-gray-500 text-sm font-bold mb-2"
							>
								Address
							</label>
							<input
								type="text"
								id="address"
								placeholder="Address"
								required
								className="shadow appearance-none border rounded-lg w-full py-2 px-3 text-gray-500 leading-tight focus:outline-none focus:shadow-outline"
							/>
						</div>
						<div className="mb-4">
							<label
								htmlFor="city"
								className="block text-gray-500 text-sm font-bold mb-2"
							>
								City
							</label>
							<input
								type="text"
								id="city"
								placeholder="City"
								required
								className="shadow appearance-none border rounded-lg w-full py-2 px-3 text-gray-500 leading-tight focus:outline-none focus:shadow-outline"
							/>
						</div>
						<div className="mb-4">
							<label
								htmlFor="state"
								className="block text-gray-500 text-sm font-bold mb-2"
							>
								State
							</label>
							<input
								type="text"
								id="state"
								placeholder="State"
								required
								className="shadow appearance-none border rounded-lg w-full py-2 px-3 text-gray-500 leading-tight focus:outline-none focus:shadow-outline"
							/>
						</div>
						<div className="mb-4">
							<label
								htmlFor="country"
								className="block text-gray-500 text-sm font-bold mb-2"
							>
								Country
							</label>
							<input
								type="text"
								id="country"
								placeholder="Country"
								required
								className="shadow appearance-none border rounded-lg w-full py-2 px-3 text-gray-500 leading-tight focus:outline-none focus:shadow-outline"
							/>
						</div>

						<div className="mb-4">
							<label
								htmlFor="pincode"
								className="block text-gray-500 text-sm font-bold mb-2"
							>
								Pincode
							</label>
							<input
								type="number"
								id="pincode"
								placeholder="Pincode"
								required
								className="shadow appearance-none border rounded-lg w-full py-2 px-3 text-gray-500 leading-tight focus:outline-none focus:shadow-outline"
							/>
						</div>
						<button
							type="submit"
							className="bg-gray-800 hover:bg-gray-900 w-full text-white font-bold py-3 px-4 rounded-lg focus:outline-none focus:shadow-outline"
						>
							Submit
						</button>
					</form>
				</div>
			</div>
		</div>
	);
};

export default UserAddressForm;

Login

One click to get started easily

or continue with

import React from "react";
import { BsGithub } from "react-icons/bs";
import { BiLogoGoogle } from "react-icons/bi";
import colors from "tailwindcss/colors";

const BackgroundDots = () => {
	return (
		<div className="absolute inset-0 w-full h-[50vh]">
			<div className="absolute inset-0 bg-white">
				<div
					className="absolute inset-0 opacity-30"
					style={{
						backgroundImage: `
							linear-gradient(to right, ${colors.gray[100]} 1px, transparent 1px),
							linear-gradient(to bottom, ${colors.gray[100]} 1px, transparent 1px)
						`,
						backgroundSize: "4rem 4rem",
					}}
				/>
			</div>
		</div>
	);
};

const LoginForm = () => {
	return (
		<div className="container relative mx-auto border border-gray-50">
			<BackgroundDots />
			<div className="flex flex-col justify-center items-center md:py-10 flex-wrap mx-auto">
				<h2 className="text-4xl font-bold text-center mb-8">Login</h2>
				<hr className="border-gray-50" />
				<div className="relative md:w-1/2 lg:w-1/3 mx-auto py-10 md:py-20">
					<p className="text-xl font-semibold px-8">Login</p>
					<p className="text-gray-800 mb-2 px-8">
						One click to get started easily
					</p>
					<form className="mx-auto p-8 w-full">
						{["email", "password"].map((field, index) => (
							<div className="mb-4" key={index}>
								<label
									className="block text-gray-500 text-sm font-bold mb-2"
									htmlFor={field}
								>
									{field.charAt(0).toUpperCase() + field.slice(1)}
								</label>
								<input
									type={field}
									id={field}
									className="shadow appearance-none border rounded-lg w-full py-2 px-3 text-gray-500 leading-tight focus:outline-none focus:shadow-outline"
									placeholder={field.charAt(0).toUpperCase() + field.slice(1)}
									required
								/>
							</div>
						))}

						<button
							type="submit"
							className="bg-gray-800 hover:bg-gray-900 w-full text-white font-bold py-3 px-4 rounded-lg focus:outline-none focus:shadow-outline"
						>
							Login
						</button>
					</form>
					<p className="text-gray-500 text-sm text-center p-4">
						or continue with
					</p>
					<div className="flex justify-center flex-wrap gap-2">
						{[
							{
								icon: <BiLogoGoogle className="mr-2" />,
								text: "Login with Google",
							},
							{
								icon: <BsGithub className="mr-2" />,
								text: "Login with GitHub",
							},
						].map((item, index) => (
							<button
								key={index}
								className="flex items-center bg-white border border-gray-300 rounded-lg px-4 py-2 hover:bg-gray-100"
							>
								{item.icon}
								{item.text}
							</button>
						))}
					</div>
				</div>
			</div>
		</div>
	);
};

export default LoginForm;

Sign Up

Create Account

or continue with

import React from "react";
import { BsGithub } from "react-icons/bs";
import { BiLogoGoogle } from "react-icons/bi";
import colors from "tailwindcss/colors";

const BackgroundDots = () => {
	return (
		<div className="absolute inset-0 w-full h-[50vh]">
			<div className="absolute inset-0 bg-white">
				<div
					className="absolute inset-0 opacity-30"
					style={{
						backgroundImage: `
							linear-gradient(to right, ${colors.gray[100]} 1px, transparent 1px),
							linear-gradient(to bottom, ${colors.gray[100]} 1px, transparent 1px)
						`,
						backgroundSize: "4rem 4rem",
					}}
				/>
			</div>
		</div>
	);
};

const SignupForm = () => {
	return (
		<div className="container relative mx-auto border border-gray-50">
			<BackgroundDots />
			<div className="flex flex-col justify-center items-center md:py-10 flex-wrap mx-auto">
				<h2 className="text-4xl font-bold text-center mb-8">Sign Up</h2>
				<hr className="border-gray-50" />
				<div className="relative md:w-3/4 lg:w-1/2 mx-auto py-10 md:py-20">
					<p className="text-xl font-semibold px-8">Create Account</p>
					<p className="text-gray-800 mb-2 px-8">
						Sign up to get started easily
					</p>
					<form className="mx-auto p-8 w-full">
						{["name", "email", "password", "confirm password"].map(
							(field, index) => (
								<div className="mb-4" key={index}>
									<label
										className="block text-gray-500 text-sm font-bold mb-2"
										htmlFor={field.replace(" ", "")}
									>
										{field
											.split(" ")
											.map(
												(word) => word.charAt(0).toUpperCase() + word.slice(1)
											)
											.join(" ")}
									</label>
									<input
										type={
											field.toLowerCase().includes("password")
												? "password"
												: "text"
										}
										id={field.replace(" ", "")}
										className="shadow appearance-none border rounded-lg w-full py-2 px-3 text-gray-500 leading-tight focus:outline-none focus:shadow-outline"
										placeholder={field
											.split(" ")
											.map(
												(word) => word.charAt(0).toUpperCase() + word.slice(1)
											)
											.join(" ")}
										required
									/>
								</div>
							)
						)}
						<button
							type="submit"
							className="bg-gray-800 hover:bg-gray-900 w-full text-white font-bold py-3 px-4 rounded-lg focus:outline-none focus:shadow-outline"
						>
							Sign Up
						</button>
					</form>
					<p className="text-gray-500 text-sm text-center p-4">
						or continue with
					</p>
					<div className="flex justify-center flex-wrap gap-2">
						{[
							{
								icon: <BiLogoGoogle className="mr-2" />,
								text: "Sign Up with Google",
							},
							{
								icon: <BsGithub className="mr-2" />,
								text: "Sign Up with GitHub",
							},
						].map((item, index) => (
							<button
								key={index}
								className="flex items-center bg-white border border-gray-300 rounded-lg px-4 py-2 hover:bg-gray-100"
							>
								{item.icon}
								{item.text}
							</button>
						))}
					</div>
				</div>
			</div>
		</div>
	);
};

export default SignupForm;

Forget password form

Forgot Password

Reset Your Password

Enter your email address below and we'll send you a link to reset your password.

import React from "react";
import colors from "tailwindcss/colors";

const BackgroundDots = () => {
	return (
		<div className="absolute inset-0 w-full h-[50vh]">
			<div className="absolute inset-0 bg-white">
				<div
					className="absolute inset-0 opacity-30"
					style={{
						backgroundImage: `
							linear-gradient(to right, ${colors.gray[100]} 1px, transparent 1px),
							linear-gradient(to bottom, ${colors.gray[100]} 1px, transparent 1px)
						`,
						backgroundSize: "4rem 4rem",
					}}
				/>
			</div>
		</div>
	);
};

const ForgotPasswordForm = () => {
	return (
		<div className="container relative mx-auto border border-gray-50">
			<BackgroundDots />
			<div className="flex flex-col justify-center items-center md:py-10 flex-wrap mx-auto">
				<h2 className="text-4xl font-bold text-center mb-8">Forgot Password</h2>
				<hr className="border-gray-50" />
				<div className="relative md:w-3/4 lg:w-1/2 mx-auto py-10 md:py-20">
					<p className="text-xl font-semibold px-8">Reset Your Password</p>
					<p className="text-gray-800 mb-2 px-8">
						Enter your email address below and we'll send you a link to reset
						your password.
					</p>
					<form className="mx-auto p-8 w-full">
						<div className="mb-4">
							<label
								className="block text-gray-500 text-sm font-bold mb-2"
								htmlFor="email"
							>
								Email
							</label>
							<input
								type="email"
								id="email"
								className="shadow appearance-none border rounded-lg w-full py-2 px-3 text-gray-500 leading-tight focus:outline-none focus:shadow-outline"
								placeholder="Email"
								required
							/>
						</div>
						<button
							type="submit"
							className="bg-gray-800 hover:bg-gray-900 w-full text-white font-bold py-3 px-4 rounded-lg focus:outline-none focus:shadow-outline"
						>
							Send Reset Link
						</button>
					</form>
				</div>
			</div>
		</div>
	);
};

export default ForgotPasswordForm;

Phone OTP form

OTP Verification

Verify Your Phone Number

Enter your phone number to receive an OTP code.

import React, { useState } from "react";
import colors from "tailwindcss/colors";

const BackgroundDots = () => {
	return (
		<div className="absolute inset-0 w-full h-[50vh]">
			<div className="absolute inset-0 bg-white">
				<div
					className="absolute inset-0 opacity-30"
					style={{
						backgroundImage: `
							linear-gradient(to right, ${colors.gray[100]} 1px, transparent 1px),
							linear-gradient(to bottom, ${colors.gray[100]} 1px, transparent 1px)
						`,
						backgroundSize: "4rem 4rem",
					}}
				/>
			</div>
		</div>
	);
};

const OtpPhoneForm = () => {
	const [showOtpInput, setShowOtpInput] = useState(false);

	const handleButtonClick = () => {
		if (!showOtpInput) {
			setShowOtpInput(true);
		} else {
			setShowOtpInput(false);
			console.log("Confirm OTP");
		}
	};

	return (
		<div className="container relative mx-auto border border-gray-50">
			<BackgroundDots />
			<div className="flex flex-col justify-center items-center md:py-10 flex-wrap mx-auto">
				<h2 className="text-4xl font-bold text-center mb-8">
					OTP Verification
				</h2>
				<hr className="border-gray-50" />
				<div className="relative md:w-1/2 lg:w-1/3 mx-auto py-10 md:py-20">
					<p className="text-xl font-semibold px-8">Verify Your Phone Number</p>
					<p className="text-gray-800 mb-2 px-8">
						Enter your phone number to receive an OTP code.
					</p>
					<form className="mx-auto p-8 w-full">
						<div className="mb-4">
							<label
								className="block text-gray-500 text-sm font-bold mb-2"
								htmlFor="phone"
							>
								Phone Number
							</label>
							<input
								type="tel"
								id="phone"
								className="shadow appearance-none border rounded-lg w-full py-2 px-3 text-gray-500 leading-tight focus:outline-none focus:shadow-outline"
								placeholder="Phone Number"
								required
								disabled={showOtpInput} // Optional: disable phone input after OTP is sent
							/>
						</div>
						{showOtpInput && (
							<div className="mb-4">
								<label
									className="block text-gray-500 text-sm font-bold mb-2"
									htmlFor="otp"
								>
									OTP Code
								</label>
								<input
									type="number"
									id="otp"
									className="shadow appearance-none border rounded-lg w-full py-2 px-3 text-gray-500 leading-tight focus:outline-none focus:shadow-outline"
									placeholder="Enter OTP"
									required
								/>
							</div>
						)}
						<button
							type="button"
							onClick={handleButtonClick}
							className="bg-gray-800 hover:bg-gray-900 w-full text-white font-bold py-3 px-4 rounded-lg focus:outline-none focus:shadow-outline"
						>
							{showOtpInput ? "Confirm" : "Send OTP"}
						</button>
					</form>
				</div>
			</div>
		</div>
	);
};

export default OtpPhoneForm;

Cash on delivery form

Cash on Delivery

Your orders

import React, { useEffect, useState } from "react";
import { Button } from "@mantine/core";
import { Wallet } from "lucide-react";
import { gsap } from "gsap";

const userOrders = [
	{
		src: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fclothes%2Fimg-13.png?alt=media&token=a3bb1346-8b62-46ba-9128-3beacf0f3f18",
		name: "Stiched white ",
		id: 1,
		rating: 3.5,
		orderAt: "24 August 2024",
		hoverBackground: "bg-blue-50",
	},
	{
		src: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fclothes%2Fimg-12.png?alt=media&token=a200ae8a-d1b0-40c7-bf87-529ecbb20c9c",
		name: "Purple lining",
		id: 2,
		rating: 4,
		orderAt: "26 August 2024",
		hoverBackground: "bg-green-50",
	},
	{
		src: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fclothes%2Fimg-14.png?alt=media&token=8c1cb036-dfaf-40c2-8502-8168f1db61b2",
		name: "Creamy flower",
		id: 3,
		rating: 4.8,
		orderAt: "28 August 2024",
		hoverBackground: "bg-pink-50",
	},
	{
		src: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fclothes%2Fimg-15.png?alt=media&token=73ee2679-1e62-41a5-a0d5-257f604c8e81",
		name: "White spots",
		id: 4,
		rating: 3,
		orderAt: "31 August 2024",
		hoverBackground: "bg-yellow-50",
	},
];

const CashOnDeliveryPaymentForm = () => {
	const [upiId, setUpiId] = useState("");
	const [loading, setLoading] = useState(false);
	const [validity, setValidity] = useState(null);
	const [paymentStatus, setPaymentStatus] = useState(null);

	const handlePayment = async () => {
		setLoading(true);
		try {
			setTimeout(() => {
				setPaymentStatus("success");
				setLoading(false);
				gsap.to(".payment-form", {
					opacity: 0,
					width: 0,
					height: 0,
					scale: 0,
					duration: 0.5,
					display: "none",
				});
			}, 500);
		} catch (error) {
			setPaymentStatus("failed");
			setLoading(false);
		}
	};

	useEffect(() => {
		gsap.to(".complete-card", {
			opacity: 1,
			scale: 1,
			duration: 0.2,
		});
	}, []);

	return (
		<div className="flex flex-col items-center justify-center h-screen">
			<div className="complete-card w-full max-w-md bg-white p-6 rounded-lg shadow-lg border border-gray-200">
				<div className="payment-form">
					<h2 className="text-xl font-semibold mb-6 text-gray-800">
						Cash on Delivery
					</h2>

					<div className="mb-4">
						<span
							className={`bg-green-100 font-sans px-4 py-2 rounded-full transition-all duration-500 ease-in-out transform scale-0 opacity-0 ${
								validity
									? "scale-100 opacity-100 inline-block"
									: "scale-0 opacity-0 hidden"
							}`}
						>
							Huhuhu, your UPI ID is correct
						</span>
						<p
							className={`bg-pink-100 font-sans px-4 py-2 rounded-full transition-all duration-500 ease-in-out transform scale-0 opacity-0 ${
								!validity && upiId.length > 0
									? "scale-100 opacity-100 inline-block"
									: "scale-0 opacity-0 hidden"
							}`}
						>
							{`Oops, it's not a valid UPI ID`}
						</p>
					</div>
				</div>
				{paymentStatus && (
					<div className="payment-confirm-msg">
						<div className="mb-8">
							{" "}
							<h2 className="text-xl font-semibold text-gray-800">
								Order confirmed
							</h2>
							<p className="text-lg font-mono">Your order is placed!!</p>
						</div>
					</div>
				)}
				<div className="flex justify-start items-center my-4 gap-1 border border-gray-200 rounded-xl p-2">
					<p className="text-xs">Your orders</p>
					{userOrders.map((item, index) => {
						return (
							<div key={item.id}>
								<img
									src={item.src}
									className={`w-10 h-10 object-cover rounded-xl hover:h-20 hover:w-20 cursor-pointer hover:translate-x-4 translate-x-0 hover:shadow-2xl transition-all duration-100 ease-linear group-hover:ml-4`}
								/>
							</div>
						);
					})}
				</div>
				{!paymentStatus ? (
					<Button
						fullWidth
						size="lg"
						radius="md"
						color="dark"
						disabled={validity === false ? true : false}
						loading={loading}
						leftIcon={<Wallet size={18} />}
						onClick={handlePayment}
					>
						Make Payment
					</Button>
				) : (
					<Button
						size="xs"
						color="dark"
						variant="filled"
						onClick={() => {
							window.location.href = "/components/cod-payment-form";
						}}
					>
						Reorder
					</Button>
				)}
			</div>
		</div>
	);
};

export default CashOnDeliveryPaymentForm;

Orders Admin Table

Orders

Order ID	Customer	Email	Product	Price	Status	Date
ORD001	John Doe	john@example.com	Digital Product A	$49.99	Completed	2025-01-20
ORD002	Jane Smith	jane@example.com	Digital Product B	$29.99	Pending	2025-01-21
ORD003	Alice Johnson	alice@example.com	Digital Product C	$19.99	Refunded	2025-01-22
ORD004	Bob Williams	bob@example.com	Digital Product D	$39.99	Completed	2025-01-23
ORD005	Carol Taylor	carol@example.com	Digital Product E	$59.99	Pending	2025-01-24
ORD006	David Brown	david@example.com	Digital Product F	$24.99	Completed	2025-01-25
ORD007	Eva Green	eva@example.com	Digital Product G	$34.99	Refunded	2025-01-26
ORD008	Frank Miller	frank@example.com	Digital Product H	$44.99	Completed	2025-01-27

import React from "react";

const ordersData = [
	{
		orderId: "ORD001",
		customer: "John Doe",
		email: "john@example.com",
		product: "Digital Product A",
		price: "$49.99",
		status: "Completed",
		date: "2025-01-20",
	},
	{
		orderId: "ORD002",
		customer: "Jane Smith",
		email: "jane@example.com",
		product: "Digital Product B",
		price: "$29.99",
		status: "Pending",
		date: "2025-01-21",
	},
	{
		orderId: "ORD003",
		customer: "Alice Johnson",
		email: "alice@example.com",
		product: "Digital Product C",
		price: "$19.99",
		status: "Refunded",
		date: "2025-01-22",
	},
	{
		orderId: "ORD004",
		customer: "Bob Williams",
		email: "bob@example.com",
		product: "Digital Product D",
		price: "$39.99",
		status: "Completed",
		date: "2025-01-23",
	},
	{
		orderId: "ORD005",
		customer: "Carol Taylor",
		email: "carol@example.com",
		product: "Digital Product E",
		price: "$59.99",
		status: "Pending",
		date: "2025-01-24",
	},
	{
		orderId: "ORD006",
		customer: "David Brown",
		email: "david@example.com",
		product: "Digital Product F",
		price: "$24.99",
		status: "Completed",
		date: "2025-01-25",
	},
	{
		orderId: "ORD007",
		customer: "Eva Green",
		email: "eva@example.com",
		product: "Digital Product G",
		price: "$34.99",
		status: "Refunded",
		date: "2025-01-26",
	},
	{
		orderId: "ORD008",
		customer: "Frank Miller",
		email: "frank@example.com",
		product: "Digital Product H",
		price: "$44.99",
		status: "Completed",
		date: "2025-01-27",
	},
];

const OrdersTable = () => {
	return (
		<div className="container min-h-screen relative mx-auto border border-gray-50 overflow-x-auto">
			<div className="p-8">
				<h2 className="mb-8">Orders</h2>
				<div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
					<table className="min-w-full divide-y divide-gray-200">
						<thead className="bg-gray-50">
							<tr>
								<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
									Order ID
								</th>
								<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
									Customer
								</th>
								<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
									Email
								</th>
								<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
									Product
								</th>
								<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
									Price
								</th>
								<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
									Status
								</th>
								<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
									Date
								</th>
							</tr>
						</thead>
						<tbody className="bg-white divide-y divide-gray-200">
							{ordersData.map((order, index) => (
								<tr key={index} className="hover:bg-gray-50 cursor-pointer">
									<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
										{order.orderId}
									</td>
									<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
										{order.customer}
									</td>
									<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
										{order.email}
									</td>
									<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
										{order.product}
									</td>
									<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
										{order.price}
									</td>
									<td className="px-6 py-4 whitespace-nowrap text-sm">
										<span
											className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
												order.status === "Completed"
													? "bg-green-100 text-green-800"
													: order.status === "Pending"
													? "bg-yellow-100 text-yellow-800"
													: order.status === "Refunded"
													? "bg-red-100 text-red-800"
													: "bg-gray-100 text-gray-800"
											}`}
										>
											{order.status}
										</span>
									</td>
									<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
										{order.date}
									</td>
								</tr>
							))}
						</tbody>
					</table>
				</div>
			</div>
		</div>
	);
};

export default OrdersTable;

Subscriptions table

Subscriptions

Brand	Date	Amount
Stripe	2025-02-01	$19.99
Figma	2025-02-02	$9.99
Netflix	2025-02-03	$12.99
Apple	2025-02-04	$29.99
Slack	2025-02-05	$4.99
Total		$77.95

import React from "react";
import colors from "tailwindcss/colors";

const subscriptionsData = [
	{
		transactionId: "TXN001",
		brand: "Stripe",
		amount: "$19.99",
		status: "Successful",
		date: "2025-02-01",
	},
	{
		transactionId: "TXN002",
		brand: "Figma",
		amount: "$9.99",
		status: "Successful",
		date: "2025-02-02",
	},
	{
		transactionId: "TXN003",
		brand: "Netflix",
		amount: "$12.99",
		status: "Successful",
		date: "2025-02-03",
	},
	{
		transactionId: "TXN004",
		brand: "Apple",
		amount: "$29.99",
		status: "Successful",
		date: "2025-02-04",
	},
	{
		transactionId: "TXN005",
		brand: "Slack",
		amount: "$4.99",
		status: "Successful",
		date: "2025-02-05",
	},
];

const SubscriptionsTable = () => {
	const total = subscriptionsData.reduce((acc, transaction) => {
		const amountNumber = parseFloat(transaction.amount.replace("$", ""));
		return acc + amountNumber;
	}, 0);

	return (
		<div className="container mx-auto overflow-x-auto">
			<div className="p-8">
				<p className="mb-8">Subscriptions</p>
				<div className="shadow overflow-hidden border border-gray-200 sm:rounded-lg">
					<table className="min-w-full divide-y divide-gray-200">
						<thead className="bg-gray-50">
							<tr>
								<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
									Brand
								</th>
								<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
									Date
								</th>
								<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
									Amount
								</th>
							</tr>
						</thead>
						<tbody className="bg-white divide-y divide-gray-200">
							{subscriptionsData?.map((transaction, index) => (
								<tr key={index} className="hover:bg-gray-50">
									<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
										{transaction.brand}
									</td>
									<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
										{transaction.date}
									</td>
									<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
										{transaction.amount}
									</td>
								</tr>
							))}
							{/* Total Row */}
							<tr className="bg-gray-50 font-semibold">
								<td className="px-6 py-4" colSpan="2">Total</td>
								<td className="px-6 py-4 text-sm text-gray-900">
									<span className="font-bold">${total.toFixed(2)}</span>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	);
};

export default SubscriptionsTable;

CRMContacts section

Recent contacts

20 Total Contacts

Name	Email	Phone	Company	Created At
Alice Johnson	alice@company.com	345-678-9012	Company LLC	June 23, 2024
Bob Brown	bob@startup.io	456-789-0123	Startup LLC	June 22, 2024
Eco Solutions	contact@ecosolutions.com	456-789-0124	Eco Solutions LLC	June 12, 2024
Future Solutions	contact@futuresolutions.com	901-234-5678	Future Solutions Inc.	June 17, 2024
Future Vision	contact@futurevision.com	890-123-4568	Future Vision LLC	June 8, 2024
Global Innovators	info@globalinnovators.com	789-012-3457	Global Innovators LLC	June 9, 2024
Global Solutions	info@globalsolutions.com	678-901-2345	Global Solutions Inc.	June 20, 2024
GreenTech	info@greentech.com	890-123-4567	GreenTech Innovations	June 18, 2024
Innovatech	contact@innovatech.com	789-012-3456	Innovatech LLC	June 19, 2024
Innovative Minds	info@innovativeminds.com	567-890-1235	Innovative Minds LLC	June 11, 2024
Innovative Solutions	contact@innovativesolutions.com	012-345-6780	Innovative Solutions LLC	June 6, 2024
Jane Smith	jane@agency.co	234-567-8901	Agency Co.	June 24, 2024
John Doe	john@startup.com	123-456-7890	Startup Inc.	June 25, 2024
Next Level Tech	info@nextleveltech.com	901-234-5679	Next Level Technologies	June 7, 2024
NextGen Solutions	info@nextgensolutions.com	123-456-7891	NextGen Solutions LLC	June 15, 2024
Synergy Corp	contact@synergycorp.com	234-567-8902	Synergy Corporation	June 14, 2024
Tech Corp	contact@techcorp.com	567-890-1234	Tech Corporation	June 21, 2024
Tech Innovators	hello@techinnovators.com	012-345-6789	Tech Innovators LLC	June 16, 2024
Tech Pioneers	contact@techpioneers.com	678-901-2346	Tech Pioneers LLC	June 10, 2024
Visionary Tech	info@visionarytech.com	345-678-9013	Visionary Technologies	June 13, 2024

import React, { useState } from "react";
import {
	Users,
	PenIcon,
	Trash,
	X,
	Search,
	PlusCircle,
	ChevronUp,
	ChevronDown,
} from "lucide-react";
import { FaFacebook } from "react-icons/fa";
import { BsLinkedin, BsTwitterX } from "react-icons/bs";

const CRMContacts = () => {
	const [contacts, setContacts] = useState([
		{
			id: "201",
			name: "John Doe",
			email: "john@startup.com",
			phone: "123-456-7890",
			company: "Startup Inc.",
			createdAt: "2024-06-25",
			emails: [
				{
					subject: "Follow-Up",
					body: "Hi John, let’s schedule a call!",
					date: "2024-06-25",
				},
			],
		},
		{
			id: "202",
			name: "Jane Smith",
			email: "jane@agency.co",
			phone: "234-567-8901",
			company: "Agency Co.",
			createdAt: "2024-06-24",
			emails: [
				{
					subject: "Introduction",
					body: "Hi Jane, I hope you are doing well!",
					date: "2024-06-24",
				},
			],
		},
		{
			id: "203",
			name: "Alice Johnson",
			email: "alice@company.com",
			phone: "345-678-9012",
			company: "Company LLC",
			createdAt: "2024-06-23",
			emails: [
				{
					subject: "Meeting Request",
					body: "Hi Alice, can we meet next week?",
					date: "2024-06-23",
				},
			],
		},
		{
			id: "204",
			name: "Bob Brown",
			email: "bob@startup.io",
			phone: "456-789-0123",
			company: "Startup LLC",
			createdAt: "2024-06-22",
			emails: [
				{
					subject: "Welcome",
					body: "Hi Bob, welcome to our platform!",
					date: "2024-06-22",
				},
			],
		},
		{
			id: "205",
			name: "Tech Corp",
			email: "contact@techcorp.com",
			phone: "567-890-1234",
			company: "Tech Corporation",
			createdAt: "2024-06-21",
			emails: [
				{
					subject: "Partnership Inquiry",
					body: "Hello, we are interested in a partnership.",
					date: "2024-06-21",
				},
			],
		},
		{
			id: "206",
			name: "Global Solutions",
			email: "info@globalsolutions.com",
			phone: "678-901-2345",
			company: "Global Solutions Inc.",
			createdAt: "2024-06-20",
			emails: [
				{
					subject: "Service Inquiry",
					body: "Hi, we would like to know more about your services.",
					date: "2024-06-20",
				},
			],
		},
		{
			id: "207",
			name: "Innovatech",
			email: "contact@innovatech.com",
			phone: "789-012-3456",
			company: "Innovatech LLC",
			createdAt: "2024-06-19",
			emails: [
				{
					subject: "Collaboration Proposal",
					body: "Dear Innovatech, we propose a collaboration.",
					date: "2024-06-19",
				},
			],
		},
		{
			id: "208",
			name: "GreenTech",
			email: "info@greentech.com",
			phone: "890-123-4567",
			company: "GreenTech Innovations",
			createdAt: "2024-06-18",
			emails: [
				{
					subject: "Sustainability Initiative",
					body: "Hello GreenTech, let's discuss sustainability initiatives.",
					date: "2024-06-18",
				},
			],
		},
		{
			id: "209",
			name: "Future Solutions",
			email: "contact@futuresolutions.com",
			phone: "901-234-5678",
			company: "Future Solutions Inc.",
			createdAt: "2024-06-17",
			emails: [
				{
					subject: "Project Collaboration",
					body: "Dear Future Solutions, we are interested in collaborating on a project.",
					date: "2024-06-17",
				},
			],
		},
		{
			id: "210",
			name: "Tech Innovators",
			email: "hello@techinnovators.com",
			phone: "012-345-6789",
			company: "Tech Innovators LLC",
			createdAt: "2024-06-16",
			emails: [
				{
					subject: "Innovation Summit",
					body: "Hi Tech Innovators, we would like to invite you to our innovation summit.",
					date: "2024-06-16",
				},
			],
		},
		{
			id: "211",
			name: "NextGen Solutions",
			email: "info@nextgensolutions.com",
			phone: "123-456-7891",
			company: "NextGen Solutions LLC",
			createdAt: "2024-06-15",
			emails: [
				{
					subject: "New Opportunities",
					body: "Hello, we are exploring new opportunities together.",
					date: "2024-06-15",
				},
			],
		},
		{
			id: "212",
			name: "Synergy Corp",
			email: "contact@synergycorp.com",
			phone: "234-567-8902",
			company: "Synergy Corporation",
			createdAt: "2024-06-14",
			emails: [
				{
					subject: "Partnership Discussion",
					body: "Hi, let's discuss a potential partnership.",
					date: "2024-06-14",
				},
			],
		},
		{
			id: "213",
			name: "Visionary Tech",
			email: "info@visionarytech.com",
			phone: "345-678-9013",
			company: "Visionary Technologies",
			createdAt: "2024-06-13",
			emails: [
				{
					subject: "Tech Innovations",
					body: "Dear Visionary Tech, we are interested in your innovations.",
					date: "2024-06-13",
				},
			],
		},
		{
			id: "214",
			name: "Eco Solutions",
			email: "contact@ecosolutions.com",
			phone: "456-789-0124",
			company: "Eco Solutions LLC",
			createdAt: "2024-06-12",
			emails: [
				{
					subject: "Sustainability Projects",
					body: "Hello, we would like to collaborate on sustainability projects.",
					date: "2024-06-12",
				},
			],
		},
		{
			id: "215",
			name: "Innovative Minds",
			email: "info@innovativeminds.com",
			phone: "567-890-1235",
			company: "Innovative Minds LLC",
			createdAt: "2024-06-11",
			emails: [
				{
					subject: "Creative Collaboration",
					body: "Hi, we are looking for creative collaboration opportunities.",
					date: "2024-06-11",
				},
			],
		},
		{
			id: "216",
			name: "Tech Pioneers",
			email: "contact@techpioneers.com",
			phone: "678-901-2346",
			company: "Tech Pioneers LLC",
			createdAt: "2024-06-10",
			emails: [
				{
					subject: "Future Technologies",
					body: "Dear Tech Pioneers, let's discuss future technologies.",
					date: "2024-06-10",
				},
			],
		},
		{
			id: "217",
			name: "Global Innovators",
			email: "info@globalinnovators.com",
			phone: "789-012-3457",
			company: "Global Innovators LLC",
			createdAt: "2024-06-09",
			emails: [
				{
					subject: "Innovation Strategies",
					body: "Hello, we would like to discuss innovation strategies.",
					date: "2024-06-09",
				},
			],
		},
		{
			id: "218",
			name: "Future Vision",
			email: "contact@futurevision.com",
			phone: "890-123-4568",
			company: "Future Vision LLC",
			createdAt: "2024-06-08",
			emails: [
				{
					subject: "Visionary Projects",
					body: "Dear Future Vision, we are interested in your projects.",
					date: "2024-06-08",
				},
			],
		},
		{
			id: "219",
			name: "Next Level Tech",
			email: "info@nextleveltech.com",
			phone: "901-234-5679",
			company: "Next Level Technologies",
			createdAt: "2024-06-07",
			emails: [
				{
					subject: "Tech Advancements",
					body: "Hi, we would like to discuss tech advancements.",
					date: "2024-06-07",
				},
			],
		},
		{
			id: "220",
			name: "Innovative Solutions",
			email: "contact@innovativesolutions.com",
			phone: "012-345-6780",
			company: "Innovative Solutions LLC",
			createdAt: "2024-06-06",
			emails: [
				{
					subject: "Collaboration Opportunities",
					body: "Hello, we are looking for collaboration opportunities.",
					date: "2024-06-06",
				},
			],
		},
	]);
	const [searchTerm, setSearchTerm] = useState("");
	const [selectedContact, setSelectedContact] = useState(null);
	const [isContactModalOpen, setIsContactModalOpen] = useState(false);
	const [isAddContactModalOpen, setIsAddContactModalOpen] = useState(false);
	const [newContact, setNewContact] = useState({
		name: "",
		email: "",
		phone: "",
		company: "",
	});
	const [sortConfig, setSortConfig] = useState({
		key: "name",
		direction: "ascending",
	});

	const handleSearch = (event) => {
		setSearchTerm(event.target.value);
	};

	const handleSelectContact = (contact) => {
		setSelectedContact(contact);
		setIsContactModalOpen(true);
	};

	const handleAddContact = () => {
		setContacts((prevContacts) => [
			...prevContacts,
			{
				id: Date.now().toString(),
				...newContact,
				createdAt: new Date().toLocaleDateString(),
				image: "./people/default.png",
				emails: [],
			},
		]);
		setNewContact({ name: "", email: "", phone: "", company: "" });
		setIsAddContactModalOpen(false);
	};

	const handleSort = (key) => {
		let direction = "ascending";
		if (sortConfig.key === key && sortConfig.direction === "ascending") {
			direction = "descending";
		}
		setSortConfig({ key, direction });
	};

	const sortedContacts = [...contacts].sort((a, b) => {
		if (a[sortConfig.key] < b[sortConfig.key]) {
			return sortConfig.direction === "ascending" ? -1 : 1;
		}
		if (a[sortConfig.key] > b[sortConfig.key]) {
			return sortConfig.direction === "ascending" ? 1 : -1;
		}
		return 0;
	});

	const filteredContacts = sortedContacts.filter((contact) =>
		contact.name.toLowerCase().includes(searchTerm.toLowerCase())
	);

	const formatDate = (dateString) => {
		const options = { year: "numeric", month: "long", day: "numeric" };
		return new Date(dateString).toLocaleDateString(undefined, options);
	};

	return (
		<div className="p-6 w-full mx-auto">
			<p className="mb-4">Recent contacts</p>
			<div className="flex justify-between items-center flex-wrap">
				<div className="flex gap-2 items-center my-2 flex-wrap">
					<div className="flex hover:bg-gray-50 rounded px-2 py-2 items-center group border border-gray-100">
						<Search className="text-gray-800 mx-2" size={16} />{" "}
						<input
							type="text"
							placeholder="Search..."
							className="outline-none focus:outline-none group-hover:bg-gray-50"
							value={searchTerm}
							onChange={handleSearch}
						/>
					</div>
					<button
						onClick={() => setIsAddContactModalOpen(true)}
						className="flex items-center bg-gray-800 hover:bg-black hover:px-4 transition-all duration-100 ease-in text-white px-2 py-2 rounded"
					>
						<PlusCircle className="mr-1" size={16} />
						Add Contact
					</button>
				</div>
				<div className="flex items-center mb-4 gap-2">
					<div className="flex items-center bg-white border border-gray-100 rounded py-2 px-6 gap-4 hover:bg-gray-50 hover:px-8 transition-all duration-100 ease-in order-1">
						<Users className="text-blue-500" size={20} />
						<span className="">{contacts.length} Total Contacts</span>
					</div>
				</div>
			</div>
			<div className="overflow-x-auto hidescrollbar">
				<table className="min-w-full bg-white border">
					<thead>
						<tr className="py-2 px-2 text-gray-800 text-sm cursor-pointer">
							<th
								className="py-2 px-2 border-b text-left cursor-pointer"
								onClick={() => handleSort("name")}
							>
								Name
								{sortConfig?.key === "name" &&
									(sortConfig.direction === "ascending" ? (
										<ChevronUp size={16} className="inline ml-1" />
									) : (
										<ChevronDown size={16} className="inline ml-1" />
									))}
							</th>
							<th
								className="py-2 px-2 border-b text-left cursor-pointer"
								onClick={() => handleSort("email")}
							>
								Email
								{sortConfig?.key === "email" &&
									(sortConfig.direction === "ascending" ? (
										<ChevronUp size={16} className="inline ml-1" />
									) : (
										<ChevronDown size={16} className="inline ml-1" />
									))}
							</th>
							<th className="py-2 px-2 border-b text-left">Phone</th>
							<th
								className="py-2 px-2 border-b text-left cursor-pointer"
								onClick={() => handleSort("company")}
							>
								Company
								{sortConfig?.key === "company" &&
									(sortConfig.direction === "ascending" ? (
										<ChevronUp size={16} className="inline ml-1" />
									) : (
										<ChevronDown size={16} className="inline ml-1" />
									))}
							</th>
							<th
								className="py-2 px-2 border-b text-left cursor-pointer"
								onClick={() => handleSort("createdAt")}
							>
								Created At
								{sortConfig?.key === "createdAt" &&
									(sortConfig.direction === "ascending" ? (
										<ChevronUp size={16} className="inline ml-1" />
									) : (
										<ChevronDown size={16} className="inline ml-1" />
									))}
							</th>
							<th className="py-2 px-2 border-b text-left">Actions</th>
						</tr>
					</thead>
					<tbody>
						{filteredContacts.map((contact) => (
							<tr
								key={contact.id}
								className="hover:bg-gray-50 truncate text-sm cursor-pointer"
								onClick={() => handleSelectContact(contact)}
							>
								<td className="py-2 px-2 flex items-center">
									<span className="">{contact.name}</span>
								</td>
								<td className="py-2 px-4 ">{contact.email}</td>
								<td className="py-2 px-4 ">{contact.phone}</td>
								<td className="py-2 px-4 ">{contact.company}</td>
								<td className="py-2 px-4 ">{formatDate(contact.createdAt)}</td>
								<td className="md:py-2 px-4 sm:py-6">
									<div className="flex gap-2">
										<PenIcon size={18} />
										<Trash size={18} />
									</div>
								</td>
							</tr>
						))}
					</tbody>
				</table>
			</div>
			{isContactModalOpen && selectedContact && (
				<div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
					<div className="bg-white p-6 rounded shadow-lg w-96">
						<div className="flex justify-between items-center mb-4">
							<h2 className="text-xl font-semibold">Contact Details</h2>
							<button
								onClick={() => setIsContactModalOpen(false)}
								className="hover:bg-gray-50 text-gray-800 p-1 rounded"
							>
								<X className="inline" size={16} />
							</button>
						</div>
						<p className="mb-2 text-lg font-semibold">
							Name: {selectedContact.name}
						</p>
						<p className="mb-2">Email: {selectedContact.email}</p>
						<p className="mb-2">Phone: {selectedContact.phone}</p>
						<p className="mb-2">Company: {selectedContact.company}</p>
						<p className="mb-2">
							Created At: {formatDate(selectedContact.createdAt)}
						</p>
						<div className="flex justify-start my-4">
							<a href="#" className="mx-2">
								<FaFacebook className="w-6 h-6" />
							</a>
							<a href="#" className="mx-2">
								<BsTwitterX className="w-6 h-6" />
							</a>
							<a href="#" className="mx-2">
								<BsLinkedin className="w-6 h-6" />
							</a>
						</div>
					</div>
				</div>
			)}
			{isAddContactModalOpen && (
				<div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
					<div className="bg-white p-6 rounded shadow-lg max-w-xl mx-auto">
						<div className="flex items-center mb-4">
							<p className="flex-grow">Add New Contact</p>
							<button
								onClick={() => setIsAddContactModalOpen(false)}
								className="hover:bg-gray-50 text-gray-800 p-1 rounded"
							>
								<X className="inline mr-1" size={16} />
							</button>
						</div>
						<input
							type="text"
							placeholder="Name"
							value={newContact.name}
							onChange={(e) =>
								setNewContact({ ...newContact, name: e.target.value })
							}
							className="my-2 px-2 py-1 border rounded w-full outline-none"
						/>
						<input
							type="email"
							placeholder="Email"
							value={newContact.email}
							onChange={(e) =>
								setNewContact({ ...newContact, email: e.target.value })
							}
							className="my-2 px-2 py-1 border rounded w-full outline-none"
						/>
						<input
							type="text"
							placeholder="Phone"
							value={newContact.phone}
							onChange={(e) =>
								setNewContact({ ...newContact, phone: e.target.value })
							}
							className="my-2 px-2 py-1 border rounded w-full outline-none"
						/>
						<input
							type="text"
							placeholder="Company"
							value={newContact.company}
							onChange={(e) =>
								setNewContact({ ...newContact, company: e.target.value })
							}
							className="my-2 px-2 py-1 border rounded w-full outline-none"
						/>
						<button
							onClick={handleAddContact}
							className="flex items-center bg-gray-800 hover:bg-black hover:px-4 transition-all duration-100 ease-in text-white px-2 py-1 rounded"
						>
							<PlusCircle className="mr-1" size={16} />
							Add Contact
						</button>
					</div>
				</div>
			)}
		</div>
	);
};

export default CRMContacts;

Create new button

import React, { useState } from "react";
import * as LucideIcons from "lucide-react";
import gsap from "gsap";

export const iconMap = [
	{ id: 2, name: "Account", icon: LucideIcons.PersonStanding },
	{ id: 1, name: "Blog", icon: LucideIcons.BookAIcon },
	{ id: 4, name: "Projects", icon: LucideIcons.PenToolIcon },
	{ id: 3, name: "Bookmark", icon: LucideIcons.Award },
	{ id: 5, name: "Gallery", icon: LucideIcons.GalleryThumbnailsIcon },
	{ id: 6, name: "Website", icon: LucideIcons.Monitor },
];

const CreateNewButton = () => {
	const [show, setShow] = useState(false);

	return (
		<div className="flex flex-col justify-center items-center h-screen ">
			<div
				className={`max-w-xs bg-gray-100 bg-opacity-80 border border-gray-200 ${
					show ? "rounded-2xl" : "rounded-full p-2"
				} transition-all duration-200 ease-in`}
			>
				<div
					className={`flex justify-between group items-center gap-2 px-2 py-1`}
					onMouseEnter={() => {
						gsap.to(".plus-icon", { rotate: "+=360deg" });
					}}
				>
					<LucideIcons.PlusIcon
						size={20}
						className={`plus-icon ${
							!show ? "inline-block opacity-100" : "hidden opacity-0"
						} transition-all duration-100 ease-in`}
					/>
					<button
						className="flex justify-start gap-2 rounded-xl group-hover:text-gray-900 text-gray-500"
						onClick={() => {
							setShow(!show);
						}}
					>
						Create New
					</button>
					{show && (
						<button
							onClick={() => setShow(!show)}
							className="rounded-full hover:bg-gray-100 p-2 text-gray-500 font-light hover:text-black"
						>
							<LucideIcons.X size={20} />
						</button>
					)}
				</div>
				<div
					className={`button-list rounded-2xl overflow-hidden ${
						show
							? "h-60 opacity-100 visible w-full bg-white p-10 gap-5"
							: "h-0 opacity-0 invisible w-0"
					} grid grid-cols-3 justify-start items-start transition-all ease-in-out duration-300`}
				>
					{iconMap.map((item) => {
						const Icon = item.icon;
						return (
							<button
								key={item.id}
								className={`text-gray-500 p-3 hover:text-gray-800 hover:bg-gray-100 bg-opacity-80 hover:px-5 hover:py-4 rounded-md transition-all duration-200 ease-in group flex flex-col justify-center items-center ${
									show ? "opacity-100" : "opacity-0"
								} transition-all duration-75 ease-in`}
							>
								<Icon size={32} />
								<span className="text-gray-500 my-1 text-xxs">{item.name}</span>
							</button>
						);
					})}
				</div>
			</div>
		</div>
	);
};
export default CreateNewButton;

Morphine tabs button

Home

About

import { useState } from "react";

const MorphineButton = () => {
	const [active, setActive] = useState(0);

	return (
		<div className="flex justify-center items-center h-screen space-x-4">
			<div className="relative flex justify-center items-center">
				<div
					onClick={() => {
						setActive(1);
					}}
					className={`cursor-pointer p-3 text-center text-white bg-black ${
						active === 1 && active !== 0
							? "bg-indigo-600 mr-5 rounded-2xl shadow-2xl"
							: active === 2
							? "ml-0 rounded-xl"
							: "rounded-l-xl mr-0"
					} transition-all duration-500 ease-in`}
				>
					Home
				</div>
				<div
					onClick={() => {
						setActive(2);
					}}
					className={` cursor-pointer p-3 text-center text-white bg-black ${
						active === 2 && active !== 0
							? "bg-indigo-600 mx-5 rounded-2xl shadow-2xl"
							: active === 1
							? "ml-0 rounded-l-xl pl-5"
							: "rounded-r-xl mr-4 ml-0"
					} transition-all duration-500 ease-in`}
				>
					About
				</div>
				<div
					onClick={() => {
						setActive(3);
					}}
					className={`cursor-pointer p-3 text-center text-white bg-black ${
						active === 3 && active !== 0
							? "bg-indigo-600 ml-5 rounded-2xl shadow-2xl"
							: active === 1
							? "ml-0 rounded-r-xl"
							: "rounded-xl"
					} transition-all duration-500 ease-in`}
				>
					Subscribe
				</div>
			</div>
		</div>
	);
};

export default MorphineButton;

Tags input

import gsap from "gsap";
import { X } from "lucide-react";
import React, { useState } from "react";
import colors from "tailwindcss/colors";

const TagsInput = () => {
	const [tags, setTags] = useState([]);
	const [newTag, setNewTag] = useState("");

	const checkIfTagExists = () => {
		const filteredTags = tags?.filter((item) => item === newTag)[0];
		return filteredTags?.length > 0;
	};

	const handleKeyDown = (e) => {
		if (e.key === "Enter" && !checkIfTagExists()) {
			let prevtags = [...tags];
			prevtags?.push(newTag);
			const newIndex = prevtags?.length ? prevtags.length : 0;
			gsap.fromTo(
				`.tag-${newIndex}`,
				{
					opacity: 0,
					y: 40,
					width: 0,
				},
				{
					opacity: 1,
					y: 0,
					width: "100%",
					duration: 0.2,
					onComplete: () => {
						gsap.fromTo(
							".tag-input",
							{
								backgroundColor: colors.green[400],
								width: 0,
							},
							{
								backgroundColor: colors.white,
								duration: 0.2,
								width: "100%",
								onComplete: () => {
									setTags(prevtags);
									setNewTag("");
								},
							}
						);
					},
				}
			);
		} else if (e.key === "Enter" && checkIfTagExists()) {
			gsap.fromTo(
				".tag-input",
				{ x: 0, borderColor: colors.gray[300] },
				{
					x: -10,
					duration: 0.1,
					repeat: 5,
					yoyo: true,
					borderColor: colors.red[400],
					ease: "power1.inOut",
					onComplete: () =>
						gsap.set(".tag-input", { x: 0, borderColor: "none" }),
				}
			);
		}
	};

	return (
		<div className="w-full h-screen flex justify-center items-center flex-col">
			<div className="max-w-xl w-full">
				{tags.length > 1 && (
					<div className="flex justify-end items-center">
						<button
							className="flex justify-around items-center gap-2 p-2 bg-gray-50 rounded-md hover:border hover:border-gray-200 hover:bg-gray-100 hover:px-4 hover:py-2 my-2 transition-all duration-150 ease-in"
							onClick={() => {
								gsap.to(
									tags.map((i, index) => `.tag-${index}`),
									{
										duration: 0.5,
										width: 0,
										opacity: 0,
										stagger: 0.2,
										display: "none",
										ease: "power1",
										onComplete: () => {
											setTags([]);
										},
									}
								);
							}}
						>
							Clear all <X size={18} />
						</button>
					</div>
				)}
				<input
					placeholder="write tag and press Enter"
					value={newTag}
					onChange={(e) => setNewTag(e.target.value)}
					onKeyDown={handleKeyDown}
					className={`border border-gray-200 rounded-md p-3 w-full outline-none focus:border focus:border-gray-300 tag-input`}
				/>
				<div className="my-4 flex justify-start items-center flex-wrap gap-2">
					{tags.map((tag, index) => (
						<div
							key={tag}
							className={`px-4 py-2 group flex justify-around items-center gap-4 rounded-full bg-gray-900 hover:px-6 transition-all duration-200 ease-in cursor-pointer text-white tag-${index}`}
						>
							{tag}
							<div
								className="group-hover:mr-4 group-hover:visible invisible w-0 transition-all duration-150 ease-in"
								onClick={() => {
									gsap.to(`.tag-${index}`, {
										opacity: 0,
										width: 0,
										display: "none",
										duration: 0.2,
										onComplete: () => {
											const newTags = tags.filter((item) => item !== tag);
											setTags(newTags);
										},
									});
								}}
							>
								<X size={18} color={colors.gray[400]} />
							</div>
						</div>
					))}
				</div>
			</div>
		</div>
	);
};
export default TagsInput;

Email input validation

Subscribe to our newsletter

import { Button } from "@mantine/core";
import gsap from "gsap";
import React, { useState } from "react";

const EmailInputProgress = () => {
	const [email, setEmail] = useState("");
	const [progress, setProgress] = useState(0);
	const [loading, setLoading] = useState(false);

	const calculateProgress = (email) => {
		let percentage = 0;

		const username = email.split("@")[0] || "";
		const domainAndExtension = email.split("@")[1] || "";
		const domain = domainAndExtension.split(".")[0] || "";
		const extension = domainAndExtension.split(".")[1] || "";

		if (username.trim().length > 0) percentage += 20;

		if (email.includes("@")) percentage += 20;

		if (domain.length > 0) percentage += 20;

		if (email.includes(".") && email.indexOf(".") > email.indexOf("@"))
			percentage += 20;

		if (extension.length > 0) percentage += 20;

		return percentage;
	};

	const handleChange = (e) => {
		const newEmail = e.target.value;
		setEmail(newEmail);

		const newProgress = calculateProgress(newEmail);
		setProgress(newProgress);
	};

	const handleSubscribe = () => {
		const tl = gsap.timeline();
		setLoading(true);
		setTimeout(() => {
			tl.to(".email-form", {
				opacity: 0,
				duration: 0.5,
				y: 50,
				display: "none",
			}).fromTo(
				".subscription-message",
				{
					y: -80,
				},
				{
					opacity: 1,
					duration: 0.2,
					y: 0,
					display: "inline-block",
					onComplete: () => {
						setLoading(false);
					},
				}
			);
		}, 200);
	};
	return (
		<div className="w-full flex justify-center items-center h-screen">
			<div className="min-w-lg">
				<div className="email-form">
					<p className="my-2 text-gray-600">Subscribe to our newsletter</p>
					<input
						type="text"
						className="p-4 border-2 border-gray-200 w-96 text-gray-700 outline-none rounded-md active:rounded-full focus:border-gray-500 focus:border"
						style={{
							background: `linear-gradient(to right, #dcfce7 ${progress}%, white ${progress}%)`,
							transition: "all 0.5s ease",
						}}
						placeholder="Enter your email"
						onChange={handleChange}
						value={email}
					/>
					<Button
						color="dark"
						fullWidth
						my="sm"
						loading={loading}
						size="md"
						disabled={progress === 100 ? false : true}
						onClick={handleSubscribe}
					>
						Subscribe
					</Button>
				</div>
				<p className="hidden opacity-0 subscription-message">
					Thank you for subscription
				</p>
			</div>
		</div>
	);
};

export default EmailInputProgress;

Icon select modal

Click to select icon

import React, { useState } from "react";
import * as lucideIcons from "lucide-react";
import colors from "tailwindcss/colors";

const iconNames = Object.keys(lucideIcons).slice(1, 200);

const IconSelect = () => {
	const [activeIcon, setActiveIcon] = useState("Smile");
	const [iconPickerOpened, setIconPickerOpened] = useState(false);

	const toggleIconPicker = () => {
		setIconPickerOpened((prev) => !prev);
	};

	const handleIconClick = (iconName) => {
		setActiveIcon(iconName);
		setIconPickerOpened(false);
	};

	const ActiveIconComponent = lucideIcons[activeIcon];

	return (
		<div className="flex flex-col items-center justify-center h-screen w-full overflow-hidden">
			<div className="mb-4">
				<button
					onClick={toggleIconPicker}
					className="p-3 border border-gray-300 rounded-lg bg-white shadow-sm hover:bg-gray-100"
				>
					{activeIcon && (
						<ActiveIconComponent size={24} color={colors.gray[900]} />
					)}
				</button>
			</div>
			<p className="text-gray-600">Click to select icon</p>

			{/* Modal */}
			{iconPickerOpened && (
				<div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
					<div className="bg-white rounded-lg shadow-lg w-96 p-4 max-h-[50vh] overflow-y-auto">
						<div className="flex justify-between items-center border-b pb-2">
							<h2 className="text-lg font-semibold">Pick an Icon</h2>
							<button
								onClick={toggleIconPicker}
								className="text-gray-500 hover:text-gray-800"
							>
								✖
							</button>
						</div>
						<div className="grid grid-cols-6 gap-2 mt-4">
							{iconNames.map((iconName) => {
								const IconComponent = lucideIcons[iconName];
								if (IconComponent)
									return (
										<button
											key={iconName}
											onClick={() => handleIconClick(iconName)}
											className="p-2 rounded-lg hover:bg-gray-100 flex justify-center"
										>
											<IconComponent size={28} color={colors.gray[800]} />
										</button>
									);
							})}
						</div>
					</div>
				</div>
			)}
		</div>
	);
};

export default IconSelect;

Stats widget

Analytics Overview

Last 30 days

+12%

30K

Total Signups

New users this month

$45K

Total Revenue

Revenue this month

import { Users, DollarSign, TrendingUp, ArrowUpRight } from "lucide-react";

const stats = [
	{
		id: 1,
		title: "Total Signups",
		value: "30K",
		icon: Users,
		change: "+12%",
		trend: "up",
		description: "New users this month",
		previousValue: "26.8K",
		growthRate: 12,
		timeFrame: "month",
		category: "user-growth",
		iconColor: "text-pink-400",
		trendIcon: ArrowUpRight,
		trendColor: "text-green-500",
	},
	{
		title: "Total Revenue",
		value: "$45K",
		icon: DollarSign,
		trend: "up",
		description: "Revenue this month",
	},
];

const StatsWidget = () => {
	return (
		<div className="flex flex-col justify-center items-center w-full my-40">
			<div className="bg-white p-6 rounded-2xl shadow-md border border-gray-100 max-w-7xl mx-auto w-full">
				<div className="flex items-center justify-between mb-6">
					<h2 className="text-lg font-semibold text-gray-900">
						Analytics Overview
					</h2>
					<div className="flex items-center gap-2 text-sm text-gray-500">
						<TrendingUp size={16} />
						<span>Last 30 days</span>
					</div>
				</div>
				<div className="grid grid-cols-1 md:grid-cols-1 gap-6">
					{stats.map((stat, index) => (
						<div
							key={index}
							className="bg-gray-50 bg-opacity-50 p-4 rounded-xl hover:p-6 hover:bg-gray-50 transition-all duration-200 ease-in-out"
						>
							<div className="flex items-center justify-between">
								<span
									className={`text-sm font-medium ${
										stat.trend === "up" ? "text-green-500" : "text-red-500"
									}`}
								>
									{stat.change}
								</span>
							</div>
							<h3 className="text-xl font-bold text-gray-900 mb-1">
								{stat.value}
							</h3>
							<p className="text-gray-600 font-medium mb-2">{stat.title}</p>
							<p className="text-sm text-gray-500">{stat.description}</p>
						</div>
					))}
				</div>
			</div>
		</div>
	);
};

export default StatsWidget;

Invoice creator

Invoice Generator

Company Logo

Upload Logo

Invoice Number

Invoice Date

Due Date

Billed To

Billed From

Services

Currency

Service	Description	Total	Actions



Subtotal		$4500
Tax (10%)		$450
Total		$4950

Tax Rate:%

Discount

Payment Info

Bank Name

Account Number

IFSC/SWIFT Code

Account Holder

Bank Account Address

Signature

Note

Terms and Conditions

import { useState } from "react";
import {
	BotMessageSquareIcon,
	MoreVertical,
	PenIcon,
	Trash,
} from "lucide-react";

const teamMembers = [
	{
		name: "Devon Lane",
		role: "Marketing",
		image:
			"https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fusers%2Fuser-1.png?alt=media&token=9c572853-fd83-42c7-8f28-3b4bdb1fd247",
	},
	{
		name: "Cody Fisher",
		role: "Marketing",
		image:
			"https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fusers%2Fdownload.jpeg?alt=media&token=45387c9c-560c-4b54-919c-0037cdb4432b",
	},
	{
		name: "Ralph Edwards",
		role: "Marketing",
		image:
			"https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fusers%2Fdownload%20(1).jpeg?alt=media&token=246c25b6-58f1-427c-94c4-b9f884cc9941",
	},
	{
		name: "Jerome Bell",
		role: "Marketing",
		image:
			"https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fusers%2FRectangle%2026.png?alt=media&token=5e2d025c-2152-4a7b-9a23-ba296c1ecde2",
	},
];

const TeamsWidgets = () => {
	const [show, setShow] = useState(false);

	return (
		<div className="min-h-screen flex flex-col justify-center items-center w-full">
			<div className="bg-white p-6 rounded-2xl shadow-md border border-gray-100 max-w-lg mx-auto w-full">
				<h2 className="text-lg font-semibold text-gray-900 mb-4">
					Team members
				</h2>
				<div className="space-y-3">
					{teamMembers.map((member, index) => (
						<div
							key={index}
							className="w-full flex items-center justify-between cursor-pointer bg-gray-50 bg-opacity-50 hover:bg-gray-50 p-3 rounded-xl hover:px-6 transition-all duration-100 ease-in"
						>
							<div className="flex items-center gap-3">
								<img
									src={member.image}
									alt={member.name}
									className="rounded-full w-10 h-10"
								/>
								<div>
									<p className="text-gray-900 font-medium">{member.name}</p>
									<p className="text-gray-500 text-sm">{member.role}</p>
								</div>
							</div>
							<div className="group relative">
								<MoreVertical
									className="text-gray-500 cursor-pointer group-hover:text-gray-800 group-hover:rotate-180 transition-all duration-75 ease-in bg-gray-50 rounded-full p-1"
									size={24}
								/>
								<span className="absolute right-0 group-hover:block group-hover:w-40 group-hover:h-auto hidden w-0 h-0 space-y-1 text-left p-2 rounded-xl bg-white border border-gray-200 z-10 transition-all duration-100 ease-in">
									<p className="text-sm text-gray-800 flex justify-start items-center gap-1 hover:bg-gray-50 p-2 rounded-xl hover:px-3 transition-all ease-in duration-75">
										<BotMessageSquareIcon size={14} />
										Message
									</p>
									<p className="text-sm text-gray-800 flex justify-start items-center gap-1  hover:bg-gray-50 p-2 rounded-xl hover:px-3 transition-all ease-in duration-75">
										<PenIcon size={14} />
										Edit
									</p>
									<p className="text-sm text-red-800 flex justify-start items-center gap-1  hover:bg-gray-50 p-2 rounded-xl hover:px-3 transition-all ease-in duration-75">
										<Trash size={14} />
										Remove
									</p>
								</span>
							</div>
						</div>
					))}
				</div>
			</div>
		</div>
	);
};

export default TeamsWidgets;

Budget widget

Budget

Enter progress (0-100)

import { useState } from "react";
import { gsap } from "gsap";

const BudgetWidget = () => {
	const [progress, setProgress] = useState(0);

	const handleProgressChange = (e) => {
		const value = Math.min(100, Math.max(0, parseInt(e.target.value) || 0));
		setProgress(value);
		gsap.to(".progress-circle", {
			strokeDashoffset: offset,
			duration: 0.5,
		});
	};

	const circumference = 2 * Math.PI * 45; // radius of 45
	const offset = circumference - (progress / 100) * circumference;

	return (
		<div className="flex flex-col justify-center items-center w-full my-40">
			<div className="bg-white p-6 rounded-2xl shadow-md border border-gray-100 max-w-lg mx-auto w-full">
				<h2 className="text-lg font-semibold text-gray-900 mb-4">Budget</h2>

				{/* Circular Progress Bar */}
				<div className="flex justify-center items-center mb-6">
					<div className="relative w-32 h-32">
						<svg className="w-full h-full" viewBox="0 0 100 100">
							{/* Background Circle */}
							<circle
								className="bg-circle text-gray-200"
								strokeWidth="8"
								stroke="currentColor"
								fill="transparent"
								r="45"
								cx="50"
								cy="50"
							/>
							{/* Progress Circle */}
							<circle
								className="progress-circle text-pink-400"
								strokeWidth="8"
								strokeLinecap="round"
								stroke="currentColor"
								fill="transparent"
								r="45"
								cx="50"
								cy="50"
								style={{
									strokeDasharray: circumference,
								}}
							/>
						</svg>
						{/* Progress Text */}
						<div className="absolute inset-0 flex items-center justify-center">
							<span className="text-2xl font-bold text-gray-900">
								{progress}%
							</span>
						</div>
					</div>
				</div>

				{/* Progress Input */}
				<div className="flex flex-col items-center gap-2">
					<input
						type="number"
						min="0"
						max="100"
						value={progress}
						onChange={handleProgressChange}
						className="w-32 px-3 py-2 text-center border border-gray-800 text-black rounded-full focus:outline-none focus:ring-2 focus:ring-pink-400 focus:border-transparent"
						placeholder="0-100"
					/>
					<p className="text-sm text-gray-500">Enter progress (0-100)</p>
				</div>
			</div>
		</div>
	);
};

export default BudgetWidget;

Teams widget

Team members

Devon Lane

Marketing

Cody Fisher

Marketing

Ralph Edwards

Marketing

Jerome Bell

Marketing

import { useState } from "react";
import {
	BotMessageSquareIcon,
	MoreVertical,
	PenIcon,
	Trash,
} from "lucide-react";

const teamMembers = [
	{
		name: "Devon Lane",
		role: "Marketing",
		image:
			"https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fusers%2Fuser-1.png?alt=media&token=9c572853-fd83-42c7-8f28-3b4bdb1fd247",
	},
	{
		name: "Cody Fisher",
		role: "Marketing",
		image:
			"https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fusers%2Fdownload.jpeg?alt=media&token=45387c9c-560c-4b54-919c-0037cdb4432b",
	},
	{
		name: "Ralph Edwards",
		role: "Marketing",
		image:
			"https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fusers%2Fdownload%20(1).jpeg?alt=media&token=246c25b6-58f1-427c-94c4-b9f884cc9941",
	},
	{
		name: "Jerome Bell",
		role: "Marketing",
		image:
			"https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fusers%2FRectangle%2026.png?alt=media&token=5e2d025c-2152-4a7b-9a23-ba296c1ecde2",
	},
];

const TeamsWidgets = () => {
	const [show, setShow] = useState(false);

	return (
		<div className="min-h-screen flex flex-col justify-center items-center w-full">
			<div className="bg-white p-6 rounded-2xl shadow-md border border-gray-100 max-w-lg mx-auto w-full">
				<h2 className="text-lg font-semibold text-gray-900 mb-4">
					Team members
				</h2>
				<div className="space-y-3">
					{teamMembers.map((member, index) => (
						<div
							key={index}
							className="w-full flex items-center justify-between cursor-pointer bg-gray-50 bg-opacity-50 hover:bg-gray-50 p-3 rounded-xl hover:px-6 transition-all duration-100 ease-in"
						>
							<div className="flex items-center gap-3">
								<img
									src={member.image}
									alt={member.name}
									className="rounded-full w-10 h-10"
								/>
								<div>
									<p className="text-gray-900 font-medium">{member.name}</p>
									<p className="text-gray-500 text-sm">{member.role}</p>
								</div>
							</div>
							<div className="group relative">
								<MoreVertical
									className="text-gray-500 cursor-pointer group-hover:text-gray-800 group-hover:rotate-180 transition-all duration-75 ease-in bg-gray-50 rounded-full p-1"
									size={24}
								/>
								<span className="absolute right-0 group-hover:block group-hover:w-40 group-hover:h-auto hidden w-0 h-0 space-y-1 text-left p-2 rounded-xl bg-white border border-gray-200 z-10 transition-all duration-100 ease-in">
									<p className="text-sm text-gray-800 flex justify-start items-center gap-1 hover:bg-gray-50 p-2 rounded-xl hover:px-3 transition-all ease-in duration-75">
										<BotMessageSquareIcon size={14} />
										Message
									</p>
									<p className="text-sm text-gray-800 flex justify-start items-center gap-1  hover:bg-gray-50 p-2 rounded-xl hover:px-3 transition-all ease-in duration-75">
										<PenIcon size={14} />
										Edit
									</p>
									<p className="text-sm text-red-800 flex justify-start items-center gap-1  hover:bg-gray-50 p-2 rounded-xl hover:px-3 transition-all ease-in duration-75">
										<Trash size={14} />
										Remove
									</p>
								</span>
							</div>
						</div>
					))}
				</div>
			</div>
		</div>
	);
};

export default TeamsWidgets;

Payments widget

Payments

Figma

3 March 2025

-$12

Slack

4 March 2025

-$15

Google

5 March 2025

-$20

Spotify

14 March 2025

-$10

import { useState } from "react";
import {
	BotMessageSquareIcon,
	MoreVertical,
	PenIcon,
	Trash,
} from "lucide-react";

const payments = [
	{
		name: "Figma",
		date: "3 March 2025",
		amount: "$12",
		image:
			"https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbrands%2FLogo.png-2.png?alt=media&token=b9c55419-1463-4a3d-89e3-4f5c74d2db90",
	},
	{
		name: "Slack",
		date: "4 March 2025",
		amount: "$15",
		image:
			"https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbrands%2FLogo.png-1.png?alt=media&token=42f6c0ad-e6a4-426f-81b7-9b980a7228e1",
	},
	{
		name: "Google",
		date: "5 March 2025",
		amount: "$20",
		image:
			"https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbrands%2FLogo.png-3.png?alt=media&token=ad19be3c-a464-4869-adb1-75b13df1522d",
	},
	{
		name: "Spotify",
		date: "14 March 2025",
		amount: "$10",
		image:
			"https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fbrands%2FLogo.png-5.png?alt=media&token=50fea414-9b0b-439c-9b55-cad0daaf6df3",
	},
];

const PaymentsWidget = () => {
	const [show, setShow] = useState(false);

	return (
		<div className="min-h-screen flex flex-col justify-center items-center w-full">
			<div className="bg-white p-6 rounded-2xl shadow-md border border-gray-100 max-w-lg mx-auto w-full">
				<h2 className="text-lg font-semibold text-gray-900 mb-4">Payments</h2>
				<div className="space-y-3">
					{payments.map((payment, index) => (
						<div
							key={index}
							className="w-full flex items-center justify-between cursor-pointer bg-gray-50 bg-opacity-50 hover:bg-gray-50 p-3 rounded-xl hover:px-6 transition-all duration-100 ease-in"
						>
							<div className="flex items-center gap-3">
								<img
									src={payment.image}
									alt={payment.name}
									className="w-auto max-w-sm h-10"
								/>
								<div>
									<p className="text-gray-900 font-medium">{payment.name}</p>
									<p className="text-gray-500 text-sm">{payment.date}</p>
								</div>
							</div>
							<div>
								<p className="font-semibold text-gray-800 text-sm">
									-{payment.amount}
								</p>{" "}
							</div>
						</div>
					))}
				</div>
			</div>
		</div>
	);
};

export default PaymentsWidget;

Delete images

import { Button } from "@mantine/core";
import gsap from "gsap";
import { Trash2, ArrowLeft } from "lucide-react";
import React, { useState } from "react";

const images = [
	{
		id: 1,
		src: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fclothes%2Fimg-12.png?alt=media&token=a200ae8a-d1b0-40c7-bf87-529ecbb20c9c",
	},
	{
		id: 2,
		src: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fclothes%2Fimg-13.png?alt=media&token=a3bb1346-8b62-46ba-9128-3beacf0f3f18",
	},
	{
		id: 3,
		src: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fclothes%2Fimg-15.png?alt=media&token=73ee2679-1e62-41a5-a0d5-257f604c8e81",
	},
	{
		id: 4,
		src: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fclothes%2Fimg-16.png?alt=media&token=c1fcff3d-0a4d-4dfe-888e-6ea902293c2f",
	},
	{
		id: 5,
		src: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/public%2Fclothes%2Fimg-17.png?alt=media&token=cefbef51-7877-4e30-b8a2-249155eecc98",
	},
];

const DeleteImages = () => {
	const [isColumn, setIsColumn] = useState(false);
	const [loading, setLoading] = useState(false);
	const [text, setText] = useState("Delete all");
	const [icon, setIcon] = useState(<Trash2 size={16} />);

	const handleButtonClick = () => {
		setIsColumn((prevState) => !prevState);
		setLoading(true);
		setText("Deleting");

		const tl = gsap.timeline();

		tl.to(".img-container", {
			gap: !isColumn ? "0px" : "20px",
			duration: 0.2,
		})
			.to(".img-each", {
				scale: !isColumn ? 1.2 : 1,
				y: !isColumn ? -100 : 0,
				duration: 0.4,
				ease: "power2.inOut",
				stagger: 0.2,
			})
			.to(".img-container", {
				y: 90,
				scale: !isColumn ? 0 : 1,
				marginLeft: !isColumn ? "-40px" : "0px",
				duration: 0.3,
				ease: "power2.inOut",
			})
			.to(".img-container", {
				y: 0,
				duration: 0.3,
				onComplete: () => {
					setLoading(false);
					setText(isColumn ? "Delete all" : "Undo");
					setIcon(isColumn ? <Trash2 size={16} /> : <ArrowLeft size={16} />);
				},
			});
	};

	return (
		<div className="flex justify-center items-center flex-col h-screen w-full p-10">
			<div className="img-container flex justify-around items-center gap-5">
				{images.map((item, index) => (
					<img
						key={item.src}
						src={item.src}
						className={`w-20 h-20 object-cover rounded-xl hover:rounded-2xl hover:w-40 hover:h-40 transition-all duration-100 ease-in hover:skew-x-2 cursor-pointer img-each`}
					/>
				))}
			</div>
			<Button
				color="red"
				size="xs"
				variant={isColumn ? "outline" : "filled"}
				className="group"
				my="lg"
				leftIcon={icon}
				loading={loading}
				onClick={handleButtonClick}
			>
				{text}
			</Button>
		</div>
	);
};

export default DeleteImages;

Dynamic subscription

Free

Premium 20% OFF

import React, { useState } from "react";

const DynamicSubscription = () => {
	const [subscription, setSubscription] = useState({
		type: "free",
		duration: "",
	});

	return (
		<div className="h-screen flex flex-col justify-center items-center">
			<div className="w-full max-w-lg border border-gray-200 rounded-full p-2 flex items-center justify-between bg-white shadow-md">
				<div
					className={`flex-1 text-center p-3 rounded-full cursor-pointer transition-all duration-300 ${
						subscription.type === "free"
							? "bg-gray-900 text-white"
							: "bg-transparent hover:bg-gray-50 hover:px-6"
					}`}
					onClick={() => setSubscription({ type: "free", duration: "" })}
				>
					Free
				</div>

				<div
					className={`flex-1 text-center p-3 rounded-full cursor-pointer transition-all duration-300 ${
						subscription.type === "premium"
							? "bg-gray-900 text-white"
							: "bg-transparent hover:bg-gray-50 hover:px-6"
					}`}
					onClick={() =>
						setSubscription({ type: "premium", duration: "monthly" })
					}
				>
					Premium <span className="text-sm">20% OFF</span>
				</div>
			</div>

			<div>
				<div
					className={`mt-4 flex gap-4 ${
						subscription.type === "premium"
							? "w-full opacity-100 visible hover:bg-gray-50"
							: "w-0 opacity-0 invisible"
					} transition-all duration-100 ease-in`}
				>
					<button
						className={`px-6 py-3 hover:px-8 rounded-full transition-all duration-300 border ${
							subscription.duration === "monthly"
								? "bg-gray-900 text-white"
								: "bg-white text-black hover:bg-gray-50"
						}`}
						onClick={() =>
							setSubscription({ type: "premium", duration: "monthly" })
						}
					>
						Monthly
					</button>
					<button
						className={`px-6 py-2 hover:px-8 rounded-full transition-all duration-300 border ${
							subscription.duration === "annually"
								? "bg-gray-900 text-white"
								: "bg-white text-black hover:bg-gray-50"
						}`}
						onClick={() =>
							setSubscription({ type: "premium", duration: "annually" })
						}
					>
						Annually
					</button>
				</div>
			</div>
		</div>
	);
};

export default DynamicSubscription;

Animated grid boxes

import React, { useEffect } from "react";
import gsap from "gsap";

const AnimatedGridBoxes = () => {
	useEffect(() => {
		gsap.fromTo(
			".grid-bg div",
			{ opacity: 0, scale: 0 },
			{ opacity: 1, scale: 1, duration: 1, stagger: 0.1 }
		);
	}, []);

	return (
		<div className="relative w-full h-screen overflow-hidden z-10 ">
			<div className="grid-bg absolute inset-0 grid grid-cols-10 grid-rows-10 gap-2 p-4">
				{[...Array(100)].map((_, i) => (
					<div
						key={i}
						className="group w-full h-full bg-gray-50 flex justify-center items-center rounded-xl transition duration-300 ease-in-out hover:bg-indigo-100 cursor-pointer"
					>
						<span className="hidden group-hover:block text-sm text-gray-800 group-hover:text-black transition-all duration-100 ease-in">
							{i + 1}
						</span>
					</div>
				))}
			</div>
		</div>
	);
};

export default AnimatedGridBoxes;

Animated gallery

import React, { useState } from "react";

const AnimatedGallery = () => {
	const [activeIndex, setActiveIndex] = useState(null);

	const images = [
		{
			src: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/Logs%2F0_9lUWQ5iiXACH9TC0.jpeg?alt=media&token=0de588ed-2282-40e5-8e3c-faee01b8c38c",
		},
		{
			src: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/Logs%2F0_CFsSlVxcz87wIhuP.jpeg?alt=media&token=59d9c2f3-6cba-4384-99ec-e07e3c3d9579",
		},
		{
			src: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/Logs%2F0_5nfyEaT_0yMgJ7rV.jpeg?alt=media&token=5b349c27-d229-4186-b9f6-4b85a93c7848",
		},
		{
			src: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/Logs%2F0_LAlGTaACtiPTOsnt.jpeg?alt=media&token=6662d093-b504-49c8-a40b-02186971d3f0",
		},
		{
			src: "https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/Logs%2F0_8FvOcbiqDJfsneJF.jpeg?alt=media&token=85da75cd-2d39-4c21-baf1-3313094968b5",
		},
		
	];

	return (
		<div
			className="flex w-full h-screen p-4 justify-center items-center bg-gray-900"
			onClick={() => setActiveIndex(null)}
		>
			<div className="flex justify-between items-center mx-auto w-10/12 h-10/12">
				{images.map((image, index) => (
					<div
						key={index}
						className={`${
							activeIndex === index ? "w-full h-full" : "w-72 h-full"
						} duration-200 transition-all ease-in-out hover:px-6 cursor-pointer`}
						onClick={(e) => {
							e.stopPropagation();
							setActiveIndex(index);
						}}
					>
						<img
							className="w-full h-full rounded-md object-fill hover:shadow-2xl"
							style={{ aspectRatio: "auto" }}
							src={image.src}
							alt={`Image ${index + 1}`}
						/>
					</div>
				))}
			</div>
		</div>
	);
};

export default AnimatedGallery;

Daily writing calendar

September 2024, Calender

Sun

Mon

Tue

Wed

Thu

Fri

Sat

import React, { useEffect, useRef, useState } from "react";
import { Glasses, Loader, Pencil } from "lucide-react";
import { gsap } from "gsap";

const moods = [
	{ emoji: "😀", label: "Happy" },
	{ emoji: "🤣", label: "Laughing" },
	{ emoji: "🥰", label: "Loving" },
	{ emoji: "😢", label: "Sad" },
	{ emoji: "😊", label: "Satisfied" },
	{ emoji: "❤️", label: "Loved" },
	{ emoji: "😌", label: "Peaceful" },
	{ emoji: "🥸", label: "Silly" },
	{ emoji: "📖", label: "Reading" },
	{ emoji: "✍️", label: "Writing" },
	{ emoji: "💃", label: "Dancing" },
	{ emoji: "🍹", label: "Drinking" },
];

const moodMap = {
	Sad: "😢",
	Happy: "😀",
	Laughing: "🤣",
	Loving: "🥰",
	Loved: "❤️",
	Reading: "📖",
	Satisfied: "😊",
	Writing: "✍️",
	Peaceful: "😌",
	Dancing: "💃",
	Drinking: "🍹",
	Neutral: "🫥",
	Silly: "🥸",
};
const daysOfWeek = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

const DailyWriter = () => {
	const calendarRef = useRef(null);

	useEffect(() => {
		gsap.fromTo(
			calendarRef.current,
			{ opacity: 0, y: -50 },
			{ opacity: 1, y: 0, duration: 1, ease: "power2.out" }
		);
	}, []);

	const dates = Array.from({ length: 30 }, (_, i) => {
		return {
			id: i + 1,
			message: "",
			mood: "",
		};
	});

	const [progress, setProgress] = useState(0);
	const [vals, setVals] = useState(dates);
	const [value, setValue] = useState("");
	const [loader, setLoader] = useState(false);
	const [active, setActive] = useState(null);
	const [show, setShow] = useState(false);
	const [selectedMood, setSelectedMood] = useState("");

	useEffect(() => {
		const countDaysWithMessages = () => {
			return setProgress(vals.filter((item) => item.message.length > 0).length);
		};
		countDaysWithMessages();
	}, [vals]);

	const handleMoodSelect = (mood) => {
		const updatedVals = vals.map((date) => {
			if (date.id === active) {
				return { ...date, mood };
			}
			return date;
		});
		setVals(updatedVals);
		setSelectedMood(mood);
	};

	const handleSaveMessage = () => {
		if (active === null) return;
		setLoader(true);
		setTimeout(() => {
			setActive(null);
			setShow(false);
			setValue("");
			setSelectedMood("");
			setLoader(false);
		}, 200);
	};

	const getTodayId = () => {
		const today = new Date();
		return today.getDate();
	};

	const [reading, setReading] = useState(false);

	return (
		<div
			className={`min-h-screen flex flex-col items-center justify-center`}
			onClick={(e) => {
				e.stopPropagation();
				setShow(false);
				setActive(null);
				setValue("");
			}}
		>
			{show && active !== null && (
				<div className="fixed top-0 left-0 right-0 bottom-0 z-10 bg-gray-50 bg-opacity-90" />
			)}
			<div
				ref={calendarRef}
				className={`calender-ref border border-gray-300 p-8 rounded-xl min-w-1/2 bg-white shadow-sm`}
			>
				<div className="flex items-center justify-between mb-4">
					<h2 className="text-3xl font-serif">
						September 2024, {reading ? "List" : "Calender"}
					</h2>
					{progress > 0 && (
						<button
							className="hover:underline rounded-full p-4 hover:bg-gray-50"
							onClick={() => {
								setReading(!reading);
								gsap.fromTo(".calender-ref", { scale: 0.9 }, { scale: 1 });
							}}
						>
							{reading ? <Pencil size={20} /> : <Glasses size={20} />}
						</button>
					)}
				</div>
				<div>
					{!reading ? (
						<div>
							<div
								className={`writing-container grid grid-cols-7 text-center my-8 gap-2`}
							>
								{daysOfWeek.map((day, index) => (
									<div
										key={index}
										className="text-sm font-medium text-gray-600 rounded-full px-4 py-2 border border-gray-200"
									>
										{day}
									</div>
								))}
							</div>

							<div className="grid grid-cols-7 gap-4 mt-4">
								{vals.map((date) => {
									return (
										<div
											key={date.id}
											onClick={(e) => {
												e.stopPropagation();
												setActive(date.id);
												setShow(true);
												setValue(
													vals.find((item) => item.id === active)?.message || ""
												);
											}}
											className={`relative flex items-center justify-center flex-col h-20 w-20 rounded-md hover:border-gray-200 transition-all duration-100 ease-in text-gray-800 font-semibold cursor-pointer ${
												Number(date.message.length) > 0
													? "bg-green-200 hover:bg-green-300"
													: getTodayId() > date.id
													? "bg-red-50 bg-opacity-80 hover:bg-red-50 hover:bg-opacity-60"
													: "bg-gray-100 bg-opacity-80 hover:bg-gray-100 hover:bg-opacity-60"
											}`}
										>
											{date.id}
											<div className="absolute top-1 right-1">
												{date.message.length > 0 && (
													<p className="text-xl">{date?.mood}</p>
												)}
											</div>
										</div>
									);
								})}
							</div>
						</div>
					) : (
						<div className="reading-container h-1/2">
							{progress > 0 ? (
								vals.map((item) => {
									if (item.message.length > 0) {
										return (
											<div
												key={item.id}
												className="py-10 text-black w-full border-l-2 border-dashed border-gray-200 hover:bg-gray-50 hover:bg-opacity-50"
											>
												<p className="font-mono">
													<span className="text-gray-500">--</span> {item.id}{" "}
													September, 2024
												</p>
												<div className="my-2 px-10">
													<p className="font-serif">{item.mood}</p>
													<p className="text-xl">{item.message}</p>
												</div>
											</div>
										);
									} else {
										return null;
									}
								})
							) : (
								<p>Nothing added</p>
							)}
						</div>
					)}
				</div>
			</div>
			{show && active && (
				<div
					className={`modal-content p-4 rounded-xl bg-white border border-gray-200 shadow-2xl z-10 h-auto w-108 overflow-scroll`}
					style={{
						position: show ? "fixed" : "relative",
						top: show ? "50%" : "0%",
						left: show ? "50%" : "0%",
						transform: "translate(-50%, -50%)",
						transition: "all 0.5s ease",
					}}
					onClick={(e) => {
						e.stopPropagation();
					}}
				>
					<p className="font-semibold mt-2">September {active}</p>
					{selectedMood && (
						<p className="font-mono my-1">
							Your mood{" "}
							<span className="font-semibold">
								{selectedMood},{" "}
								{Object.keys(moodMap).filter(
									(item) => moodMap[item] === selectedMood
								)}
							</span>
						</p>
					)}
					<div className="flex space-x-2 my-4 max-w-md flex-wrap justify-start">
						{moods.map((mood, index) => {
							const activeMood = vals.filter((item) => active === item.id)[0]
								.mood;
							return (
								<div
									key={index}
									onClick={() => handleMoodSelect(mood.emoji)}
									className={`cursor-pointer text-2xl px-3 py-2 hover:px-4 transition-all duration-150 ease-in hover:bg-gray-100 hover:text-white rounded-2xl ${
										activeMood === mood.label
											? "border border-gray-200 bg-gray-100"
											: "bg-none"
									}`}
								>
									{mood.emoji}
								</div>
							);
						})}
					</div>
					<textarea
						placeholder="How you are feeling today"
						className={`bg-gray-100 border border-gray-700 my-2 text-gray-900 focus:border p-4 rounded-xl focus:border-gray-800 w-full outline-none `}
						name="message-input"
						rows={4}
						value={vals.filter((item) => item.id === active)[0]?.message}
						onChange={(e) => {
							const newVal = e.target.value;
							setValue(newVal);
							const updatedVals = vals.map((date) => {
								if (date.id === active) {
									return { ...date, message: newVal };
								}
								return date;
							});
							setVals(updatedVals);
						}}
					/>

					<button
						className="w-full p-4 rounded-xl mb-2 bg-gray-900 text-white flex justify-center gap-2 items-center"
						onClick={handleSaveMessage}
					>
						{loader && (
							<Loader size={18} color={"#fafafa"} className="animate-spin" />
						)}
						Save
					</button>
				</div>
			)}
		</div>
	);
};

export default DailyWriter;

Flower menu

import React, { useState } from "react";
import {
	HomeIcon,
	Laptop2Icon,
	PersonStandingIcon,
	Settings,
	MenuIcon,
	CrossIcon,
	PhoneCall,
} from "lucide-react";
import { gsap } from "gsap";

const FlowerMenu = () => {
	const [isOpen, setIsOpen] = useState(false);
	const circleItems = [
		{ Icon: HomeIcon, label: "Home" },
		{ Icon: Laptop2Icon, label: "Product" },
		{ Icon: PersonStandingIcon, label: "About" },
		{ Icon: Settings, label: "Settings" },
		{ Icon: PhoneCall, label: "Phone" },
	];
	const handleMenuClick = () => {
		setIsOpen(!isOpen);
		gsap.to(".container", {
			rotation: isOpen ? "+=720" : "0",
			scale: isOpen ? 0 : 1,
			duration: 1,
			stagger: 0.2,
		});
		gsap.to(".circle-item", {
			rotation: isOpen ? "+=360" : "0",
			scale: isOpen ? 0 : 1,
			duration: 1,
			stagger: 0.2,
		});
		gsap.to(".container", {
			rotation: isOpen ? "+=720" : "0",
			duration: 5,
			ease: "circ",
		});
	};

	const numberOfItems = circleItems.length;
	const angle = 360 / numberOfItems;
	return (
		<div className="relative flex justify-center items-center h-screen">
			<div className="relative flex justify-center items-center w-64 h-64">
				<div
					className=" bg-gray-900 hover:bg-gray-800 p-2 group cursor-pointer rounded-md flex justify-center items-center"
					onClick={handleMenuClick}
					style={{ zIndex: 1 }}
				>
					{isOpen ? (
						<CrossIcon size={18} color="white" />
					) : (
						<MenuIcon size={18} color="white" />
					)}
					<span
						className={`text-xs text-gray-100 group-hover:block group-hover:ml-2 hidden transition-transform duration-300 transform`}
					>
						{isOpen ? "Click to Close" : "Click to Expand"}
					</span>
				</div>

				<div
					className={`container absolute flex justify-center items-center w-full h-full p-10 rounded-full bg-gradient-to-r from-gray-50 via-purple-300 to-pink-50`}
				>
					{circleItems.map((item, index) => (
						<div
							key={index}
							className="circle-item absolute cursor-pointer rounded-md"
							style={{
								transform: `rotate(${
									index * angle
								}deg) translateX(150px) rotate(${-index * angle}deg)`,
								transition: "transform 0.5s ease",
							}}
						>
							<div className="bg-gray-900 p-2 rounded-md hover:bg-gray-800 group hover:flex">
								<item.Icon size={20} color="white" />
								<span className="text-sm text-gray-100 group-hover:inline-block group-hover:ml-2 hidden duration-200 ease-in transition-all">
									{item.label}
								</span>
							</div>
						</div>
					))}
				</div>
			</div>
		</div>
	);
};

export default FlowerMenu;

Magic mouse

Mouse Position 0px 0px

import gsap from "gsap";
import { ProjectorIcon } from "lucide-react";
import React, { useState } from "react";

const CursorMagic = () => {
	const [mousePosition, setMousePosition] = useState({
		x: 0,
		y: 0,
		show: false,
	});

	const handleMouseMove = (e) => {
		setMousePosition({
			x: e.clientX,
			y: e.clientY,
			show: true,
		});
	};

	const handleMouseLeave = () => {
		setMousePosition((prev) => ({ ...prev, show: false }));
	};

	return (
		<div className="relative flex justify-center items-center h-screen">
			<div
				className="relative"
				onMouseMove={handleMouseMove}
				onMouseLeave={handleMouseLeave}
			>
				<div
					className={`${
						mousePosition.show
							? "visible flex justify-around items-center gap-2"
							: "hidden"
					} transition-all duration-100 px-6 py-3 rounded-2xl text-black bg-white z-50`}
					style={{
						position: "fixed",
						top: mousePosition.y + 20 + "px",
						left: mousePosition.x + 20 + "px",
					}}
				>
					click me
					<ProjectorIcon size={20} color="black" />
				</div>
				<div
					className="p-2 border-2 border-gray-200 rounded-2xl cursor-pointer hover:border-4 hover:border-gray-300 transition-all duration-75"
					style={{
						transform: mousePosition.show
							? `skew(${
									mousePosition.x > window.innerWidth / 2
										? mousePosition.x / 100
										: -mousePosition.x / 100
							  }deg, ${
									mousePosition.y > window.innerHeight / 2
										? mousePosition.y / 100
										: -mousePosition.y / 100
							  }deg)`
							: "none",
						transformOrigin: "center center",
						transition: "all 0.5s ease",
					}}
				>
					<img
						src="https://firebasestorage.googleapis.com/v0/b/ihatereading-4ba52.appspot.com/o/Logs%2F0_9lUWQ5iiXACH9TC0.jpeg?alt=media&token=0de588ed-2282-40e5-8e3c-faee01b8c38c"
						className={`img rounded-2xl ${
							mousePosition.show &&
							`opacity-80 m-4 rounded-2xl duration-150 transition-all`
						}`}
						onClick={() => {
							gsap.to(".img", {
								rotationY: "+=180",
								duration: 1,
							});
						}}
					/>
					<div className="text-center">
						Mouse Position {mousePosition.x}px {mousePosition.y}px
					</div>
				</div>
			</div>
		</div>
	);
};

export default CursorMagic;

Animation clip

Believe in yourself

You will achieve greatness!

import React, { useEffect, useRef } from "react";
import { gsap } from "gsap";
import { HeartIcon, SmileIcon, StarIcon } from "lucide-react";

const AnimatedMovie = () => {
	const iconsRef = useRef([]);
	const subtitleRef = useRef(null);
	const descriptionRef = useRef(null);
	const tl = gsap.timeline();

	useEffect(() => {
		tl.fromTo(
			subtitleRef.current,
			{ opacity: 0, y: 50 },
			{ opacity: 1, y: 0, duration: 0.5, ease: "power2.out" }
		)
			.fromTo(
				iconsRef.current,
				{ opacity: 0, scale: 0.5 },
				{ opacity: 1, scale: 1, duration: 0.5, stagger: 1, ease: "power2.out" }
			)
			.fromTo(
				iconsRef.current[0],
				{
					x: "-200%",
				},
				{
					x: 0,
					duration: 0.5,
					ease: "power2.inOut",
				}
			)

			.fromTo(
				iconsRef.current[2],
				{
					rotation: -180,
					x: 0,
				},
				{
					rotation: 360,
					x: 40,
					duration: 0.5,
					ease: "power2.inOut",
				}
			)
			.fromTo(
				iconsRef.current[1],
				{
					y: -100,
				},
				{
					y: 0,
					scale: 2,
					duration: 0.5,
					ease: "power2.inOut",
				}
			)
			.to(iconsRef.current[2], {
				rotation: 360,
				x: -40,
				scale: 0,
				opacity: 0,
				duration: 0.5,
				ease: "power2.inOut",
			})
			.to(iconsRef.current[0], {
				rotation: 360,
				x: 0,
				scale: 0,
				opacity: 0,
				duration: 0.5,
				ease: "power2.inOut",
			})
			.fromTo(
				descriptionRef.current,
				{ opacity: 0, y: 50 },
				{
					opacity: 1,
					y: 0,
					duration: 0.5,
					ease: "power2.out",
					visibility: "visible",
				}
			);
	}, []);

	return (
		<div className="animated-movie-container flex flex-col items-center justify-center h-screen bg-gray-900 wfill">
			<div className="icons-container flex space-x-4 mb-4 w-full justify-center">
				<div ref={(el) => (iconsRef.current[0] = el)} className="icon">
					<SmileIcon size={50} color="#FFD700" />
				</div>
				<div ref={(el) => (iconsRef.current[1] = el)} className="icon">
					<HeartIcon size={50} color="#FF1493" />
				</div>
				<div ref={(el) => (iconsRef.current[2] = el)} className="icon">
					<StarIcon size={50} color="#FF4500" />
				</div>
			</div>
			<div
				ref={subtitleRef}
				className="subtitle text-lg font-bold text-gray-100 my-2"
			>
				Believe in yourself
			</div>
			<div
				ref={descriptionRef}
				className="text-lg font-bold text-gray-100 my-2 invisible"
			>
				You will achieve greatness!
			</div>
		</div>
	);
};

export default AnimatedMovie;

AI Chat Input

What's in your mind?

import React, { useState } from "react";
import {
	ArrowUp,
	ArrowUpCircle,
	AudioLines,
	DogIcon,
	File,
	Globe,
	Lightbulb,
	Loader2,
	Music2,
	Option,
	Play,
	PlayCircle,
	PlayIcon,
	Search,
} from "lucide-react";
import colors from "tailwindcss/colors";

const models = {
	openai: "gpt-4o-mini",
	google: "models/gemini-2.0-flash-exp",
	mistral: "mistral-large-latest",
	anthropic: "claude-3-5-sonnet-lates",
};

const ChatInputForm = () => {
	const [prompt, setPrompt] = useState("");
	const [showModel, setShowModel] = useState(false);
	const [active, setActive] = useState(models["openai"]);

	const handleModelChange = (model) => {
		setActive(model);
	};

	const handleSubmit = (e) => {
		e.preventDefault();
		console.log(e, "form values");
	};

	const [select, setSelect] = useState({
		search: false,
		reason: false,
	});

	return (
		<div className="flex justify-center flex-col items-center min-h-screen">
			<p className="text-xl my-2">What's in your mind?</p>
			<form
				onSubmit={handleSubmit}
				className="md:w-1/2 shadow-2xl drop-shadow-xl mx-auto px-4 py-2 border border-gray-200 z-0 bg-white rounded-xl"
			>
				<div className="max-w-screen-xl mx-auto">
					<div className="flex-1 mb-5">
						<input
							name="prompt"
							value={prompt}
							autoComplete="false"
							onChange={(e) => setPrompt(e.target.value)}
							placeholder="Type a message..."
							className="flex-1 p-2 w-full rounded-xl outline-none"
						/>
					</div>
					<div className="flex justify-between items-center gap-2 pt-4">
						<div className="flex justify-start items-center gap-2 pt-4">
							<button
								onClick={() =>
									setSelect((prev) => ({ ...prev, search: !select.search }))
								}
								className={`border border-gray-100 flex gap-1 items-center p-2 text-sm rounded-full hover:bg-gray-50 text-gray-500 transition-all hover:px-4 duration-100 ease-in ${
									select.search && "bg-gray-800 hover:bg-gray-900 text-gray-300"
								}`}
							>
								<Globe
									size={16}
									color={colors.gray[select.search ? 300 : 500]}
								/>
								<span>Search</span>
							</button>
							<button
								onClick={() =>
									setSelect((prev) => ({ ...prev, reason: !select.reason }))
								}
								className={`border border-gray-100 flex gap-1 items-center p-2 text-sm rounded-full hover:bg-gray-50 text-gray-500 transition-all hover:px-4 duration-100 ease-in ${
									select.reason && "bg-gray-800 hover:bg-gray-900 text-gray-300"
								}`}
							>
								<Lightbulb
									size={16}
									color={colors.gray[select.reason ? 300 : 500]}
								/>
								<span>Reason</span>
							</button>
							<button
								className={`border border-gray-100 flex gap-1 items-center p-2 text-sm rounded-full hover:bg-gray-50 text-gray-500 transition-all hover:px-4 duration-100 ease-in`}
							>
								<File size={16} color={colors.gray[500]} />
								<span>Add image</span>
							</button>
						</div>
						<div className="relative flex gap-2">
							<div
								className={`absolute bottom-full mb-2 w-[calc(100vw-2rem)] md:w-96 -left-4 border bg-white p-4 rounded-xl z-50 transition-opacity duration-300 ${
									showModel ? "opacity-100 visible" : "opacity-0 invisible"
								}`}
							>
								<div className="modal w-full flex flex-col">
									{Object.entries(models).map(([model, displayName]) => (
										<label
											key={model}
											className="flex p-2 gap-2 bg-zinc-50 bg-opacity-50 rounded-xl hover:bg-zinc-50 cursor-pointer"
										>
											<input
												type="checkbox"
												name="model"
												value={model}
												checked={active === model}
												onChange={() => handleModelChange(model)}
												className="rounded bg-gray-800 accent-gray-900 checked:bg-gray-900"
											/>
											<div className="flex items-center justify-between">
												<p className={`font-semibold text-gray-700`}>
													{displayName}
												</p>
											</div>
										</label>
									))}
								</div>
							</div>
							<div
								onClick={() => setShowModel(!showModel)}
								className="cursor-pointer hover:rotate-180 group-hover:animate-spin transition-all duration-800 ease-in bg-gray-50 p-2 rounded-xl"
							>
								<Option size={18} />
							</div>
							<button
								type="button"
								className="bg-gray-800 p-2 text-sm rounded-full hover:bg-gray-900 text-gray-400"
							>
								<ArrowUp size={18} />
							</button>
						</div>
					</div>
				</div>
			</form>
		</div>
	);
};

export default ChatInputForm;

Task kanban board

Task Kanban board

Simple kanban tasks board made using React, Talwind

To Do4

📝

Prepare presentation

Status: Not Started

📧

Send email updates

Status: In Progress

🔍

Research new tools

Status: Not Started

📅

Plan team meeting

Status: Not Started

In Progress3

💻

Develop new feature

Status: In Progress

📖

Write documentation

Status: In Progress

🧪

Test application

Status: In Progress

Completed3

✅

Fix bugs

Status: Completed

🚀

Deploy application

Status: Completed

👩‍🏫

Conduct user training

Status: Completed

import React, { useState } from "react";
import { toast } from "react-toastify";

const TaskKanbanBoard = () => {
	const [taskSections, setTaskSections] = useState([
		{
			id: "to-do",
			name: "To Do",
			tasks: [
				{
					id: "201",
					name: "Prepare presentation",
					progress: "Not Started",
					icon: "📝",
				},
				{
					id: "202",
					name: "Send email updates",
					progress: "In Progress",
					icon: "📧",
				},
				{
					id: "205",
					name: "Research new tools",
					progress: "Not Started",
					icon: "🔍",
				},
				{
					id: "206",
					name: "Plan team meeting",
					progress: "Not Started",
					icon: "📅",
				},
			],
		},
		{
			id: "in-progress",
			name: "In Progress",
			tasks: [
				{
					id: "203",
					name: "Develop new feature",
					progress: "In Progress",
					icon: "💻",
				},
				{
					id: "207",
					name: "Write documentation",
					progress: "In Progress",
					icon: "📖",
				},
				{
					id: "208",
					name: "Test application",
					progress: "In Progress",
					icon: "🧪",
				},
			],
		},
		{
			id: "completed",
			name: "Completed",
			tasks: [
				{
					id: "204",
					name: "Fix bugs",
					progress: "Completed",
					icon: "✅",
				},
				{
					id: "209",
					name: "Deploy application",
					progress: "Completed",
					icon: "🚀",
				},
				{
					id: "210",
					name: "Conduct user training",
					progress: "Completed",
					icon: "👩‍🏫",
				},
			],
		},
	]);

	const [isModalOpen, setIsModalOpen] = useState(false);
	const [newTask, setNewTask] = useState({ name: "", icon: "" });

	const handleDragStart = (event, task) => {
		event.dataTransfer.setData("text/plain", task.id);
		event.target.style.opacity = "0.5";
	};

	const handleDragEnd = (event) => {
		event.target.style.opacity = "1";
	};

	const handleDrop = (event, sectionId) => {
		event.preventDefault();
		const taskId = event.dataTransfer.getData("text/plain");
		const taskToMove = taskSections
			.flatMap((section) => section.tasks)
			.find((task) => task.id === taskId);

		if (taskToMove) {
			setTaskSections((prevSections) => {
				const updatedSections = prevSections.map((section) => {
					if (section.id === sectionId) {
						return {
							...section,
							tasks: [...section.tasks, taskToMove],
						};
					}
					return {
						...section,
						tasks: section.tasks.filter((task) => task.id !== taskId),
					};
				});
				return updatedSections;
			});
			toast.success(`Task "${taskToMove.name}" moved to "${sectionId}"`); // Show toast notification
		}
	};

	const handleDragOver = (event) => {
		event.preventDefault();
	};

	const handleAddNewTask = () => {
		setIsModalOpen(true);
	};

	const handleCloseModal = () => {
		setIsModalOpen(false);
		setNewTask({ name: "", icon: "" });
	};

	const handleSubmit = (event) => {
		event.preventDefault();
		if (newTask.name && newTask.icon) {
			const newTaskId = Date.now().toString();
			setTaskSections((prevSections) => {
				const updatedSections = prevSections.map((section) => {
					if (section.id === "to-do") {
						return {
							...section,
							tasks: [...section.tasks, { id: newTaskId, ...newTask }],
						};
					}
					return section;
				});
				return updatedSections;
			});
			toast.success(`Task "${newTask.name}" added!`);
			handleCloseModal();
		}
	};

	return (
		<div>
			<div className="my-4 px-4">
				<p className="text-xl">Task Kanban board</p>
        <p>Simple kanban tasks board made using React, Talwind</p>
				<button
					className="bg-gray-800 hover:bg-gray-900 rounded text-white text-xs px-4 py-2 transition-all duration-100 ease-in hover:px-6"
					onClick={handleAddNewTask}
				>
					Add new
				</button>
			</div>

			{isModalOpen && (
				<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
					<div className="modal-content bg-white rounded-xl shadow-lg p-6">
						<div className="flex justify-between items-center">
							<p>Add new task</p>
							<span
								className="close cursor-pointer text-gray-500 hover:text-gray-800"
								onClick={handleCloseModal}
							>
								&times;
							</span>
						</div>
						<form onSubmit={handleSubmit} className="mt-4">
							<input
								type="text"
								placeholder="Task Name"
								value={newTask.name}
								onChange={(e) =>
									setNewTask({ ...newTask, name: e.target.value })
								}
								required
								className="border border-gray-300 rounded px-2 py-1 hover:bg-gray-50 w-full mb-4 outline-none"
							/>
							<input
								type="text"
								placeholder="Task Icon"
								value={newTask.icon}
								onChange={(e) =>
									setNewTask({ ...newTask, icon: e.target.value })
								}
								required
								className="border border-gray-300 rounded px-2 py-1 hover:bg-gray-50 w-full mb-4 outline-none"
							/>
							<button
								type="submit"
								className="bg-gray-800 hover:bg-gray-900 rounded text-white text-xs px-4 py-2 transition-all duration-100 ease-in hover:px-6"
							>
								Submit
							</button>
						</form>
					</div>
				</div>
			)}

			<div className="flex flex-col md:flex-row gap-4 px-4">
				{taskSections.map((section) => (
					<div
						key={section.id}
						className="py-4 w-full bg-white shadow-lg rounded-xl p-4 border hover:px-5 transition-all duration-100 ease-in"
						onDrop={(event) => handleDrop(event, section.id)}
						onDragOver={handleDragOver}
					>
						<p className="font-semibold text-lg text-gray-800 mb-4 flex justify-between items-center">
							{section.name}
							<span className="text text-gray-600">{section.tasks.length}</span>
						</p>
						{section.tasks.map((task) => {
							let bgColor = "bg-gray-50"; // Default color
							if (section.name === "To Do") {
								bgColor = "bg-blue-50";
							} else if (section.name === "In Progress") {
								bgColor = "bg-pink-50";
							} else if (section.name === "Completed") {
								bgColor = "bg-green-50";
							}
							return (
								<div
									key={task.id}
									className={`border border-gray-100 rounded-xl p-3 my-2 ${bgColor} bg-opacity-50 transition-all duration-200 ease-in-out hover:shadow-xl hover:${bgColor}`}
									draggable
									onDragStart={(event) => handleDragStart(event, task)}
									onDragEnd={handleDragEnd}
								>
									<div className="flex items-center">
										<span className="mr-2">{task.icon}</span>
										<div className="flex-1">
											<div className="font-medium text-gray-900">
												{task.name}
											</div>
											<div className="text-sm text-gray-600">
												Status: {task.progress}
											</div>
										</div>
									</div>
								</div>
							);
						})}
					</div>
				))}
			</div>
		</div>
	);
};
export default TaskKanbanBoard;

Social links

Facebook

Github

Twitter

Instagram

import {
	FaFacebook,
	FaGithub,
	FaInstagram,
	FaLinkedin,
	FaTwitter,
} from "react-icons/fa";
import colors from "tailwindcss/colors";

const links = [
	{
		name: "Facebook",
		icon: <FaFacebook size={24} color={colors.blue[400]} />,
		color: colors.blue[400],
	},
	{
		name: "LinkedIn",
		icon: <FaLinkedin size={24} color={colors.indigo[400]} />,
		color: colors.indigo[400],
	},
	{
		name: "Github",
		icon: <FaGithub size={24} color={colors.gray[600]} />,
		color: colors.gray[600],
	},
	{
		name: "Twitter",
		icon: <FaTwitter size={24} color={colors.blue[900]} />,
		color: colors.blue[900],
	},
	{
		icon: <FaInstagram size={24} color={colors.pink[400]} />,
		name: "Instagram",
		color: colors.pink[400],
	},
];
const SocialLinker = () => {
	return (
		<div className="flex justify-center items-center min-h-screen w-full">
			<div className="flex justify-between items-center gap-5 w-auto">
				{links.map((item) => {
					return (
						<div
							className={`relative group bg-white hover:shadow-xl hover:scale-105 transform transition-all duration-100 ease-in shadow-md cursor-pointer border border-gray-100 p-2 rounded-full`}
							key={item.name}
						>
							<span
								className="absolute left-0 right-0 text-center w-0 h-0 opacity-0 transform group-hover:-translate-y-10 group-hover:visible group-hover:opacity-100 duration-200 transition-all ease-in"
								style={{ color: item.color }}
							>
								{item.name}
							</span>
							{item.icon}
						</div>
					);
				})}
			</div>
		</div>
	);
};
export default SocialLinker;

Context menu

Right-click to open the context menu

import React, { useState } from "react";
import {
	FaSyncAlt,
	FaArrowLeft,
	FaArrowRight,
	FaTools,
	FaBookmark,
	FaGlobe,
	FaUserCircle,
} from "react-icons/fa";

const ContextMenu = () => {
	const [isVisible, setIsVisible] = useState(false);
	const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });

	const options = [
		{
			name: "Back",
			icon: <FaArrowLeft />,
			shortcut: "⌘ + [",
			disabled: false,
		},
		{
			name: "Forward",
			icon: <FaArrowRight />,
			shortcut: "⌘ + ]",
			disabled: true,
		},
		{ name: "Reload", icon: <FaSyncAlt />, shortcut: "⌘ + R" },
		{ name: "More Tools", icon: <FaTools />, submenu: true },
		{ separator: true },
		{
			name: "Show Bookmarks",
			icon: <FaBookmark />,
			shortcut: "⌘ + B",
			checked: true,
		},
		{ name: "Show Full URLs", icon: <FaGlobe /> },
		{ separator: true },
		{
			name: "People",
			options: [
				{ name: "Pedro Duarte", icon: <FaUserCircle /> },
				{ name: "Colm Tuite", icon: <FaUserCircle /> },
			],
		},
	];

	const handleContextMenu = (e) => {
		e.preventDefault();
		setMenuPosition({ x: e.pageX, y: e.pageY });
		setIsVisible(true);
	};

	const handleClick = () => {
		if (isVisible) setIsVisible(false);
	};

	return (
		<div className="flex justify-center items-center w-full h-screen relative">
			<div
				className="p-4 text-lg font-semibold text-gray-700 max-w-5xl min-w-1/4 h-80 border border-dotted border-gray-400 rounded-xl"
				onClick={handleClick}
				onContextMenu={handleContextMenu}
			>
				Right-click to open the context menu
			</div>

			{isVisible && (
				<div
					className="absolute bg-white border border-gray-200 rounded-md shadow-lg z-50 w-1/5 pb-2"
					style={{ top: `${menuPosition.y}px`, left: `${menuPosition.x}px` }}
				>
					{options.map((option, index) => {
						if (option.separator) {
							return <hr key={index} className="my-1 border-gray-200" />;
						}
						if (option.options) {
							return (
								<div key={index} className="flex flex-col py-1">
									<span className="text mb-2 font-semibold text-gray-500 px-4">
										{option.name}
									</span>
									{option.options.map((subOption, subIndex) => (
										<div
											key={subIndex}
											className="flex items-center gap-3 py-1 pl-4 cursor-pointer hover:bg-gray-100"
										>
											<span className="text-blue-600">{subOption.icon}</span>
											<span>{subOption.name}</span>
										</div>
									))}
								</div>
							);
						}
						return (
							<div
								key={index}
								className={`flex items-center justify-between gap-3 px-4 py-2 cursor-pointer ${
									option.disabled
										? "text-gray-400 cursor-not-allowed"
										: "hover:bg-gray-100"
								}`}
								onClick={() => {
									if (!option.disabled) {
										setIsVisible(false);
									}
								}}
							>
								<div className="flex items-center gap-3">
									<span
										className={`text-gray-600 ${
											option.checked ? "text-blue-500" : ""
										}`}
									>
										{option.icon}
									</span>
									<span>{option.name}</span>
								</div>
								{option.shortcut && (
									<span className="text-xs text-gray-500">
										{option.shortcut}
									</span>
								)}
							</div>
						);
					})}
				</div>
			)}
		</div>
	);
};

export default ContextMenu;

Welcome text component

उ

import React, { useState, useEffect, useRef } from "react";

const WelcomeText = () => {
	const [textIndex, setTextIndex] = useState(0);
	const [direction, setDirection] = useState("forward");
	const [displayText, setDisplayText] = useState("");
	const [underline, setUnderline] = useState(false);
	const textRef = useRef(null);
	const fullText = "उकाई";
	const typingSpeed = 800;
	const erasingSpeed = 200;

	const percentage = 1 - textIndex / fullText.length;

	useEffect(() => {
		if (direction === "forward") {
			if (textIndex <= fullText.length) {
				setDisplayText(fullText.substring(0, textIndex));
				const timer = setTimeout(() => {
					setTextIndex(textIndex + 1);
				}, typingSpeed);
				return () => clearTimeout(timer);
			} else {
				setDirection("backward");
				setUnderline(true);
				setTextIndex(fullText.length);
			}
		} else {
			if (textIndex >= 0) {
				setDisplayText(fullText.substring(0, textIndex));
				const timer = setTimeout(() => {
					setTextIndex(textIndex - 1);
				}, erasingSpeed);
				return () => clearTimeout(timer);
			} else {
				setDirection("forward");
				setUnderline(false);
				setTextIndex(0);
			}
		}
	}, [textIndex, direction]);

	return (
		<div className="flex flex-col items-center justify-center h-screen bg-black text-white">
			<div
				className={`whitespace-nowrap overflow-hidden text-gray-${
					percentage * 500
				}`}
				style={{ fontSize: "20rem" }}
			>
				<span
					ref={textRef}
					className={`inline-block ${
						underline ? "underline" : ""
					} transition-all duration-500`}
				>
					{displayText}
				</span>
			</div>
		</div>
	);
};

export default WelcomeText;

User profile details

Shrey Vijayvargiya

@shreysletter

199 followers

299 following

Shrey Vijayvargiya

import React from "react";

const PopDetails = () => {
	return (
		<div className="flex flex-col justify-center items-center w-full h-screen">
			<div className="max-w-xl group relative">
				<div className="overflow-hidden absolute left-0 right-0 bottom-10 group-hover:h-44 w-full h-0 invisible opacity-0 group-hover:opacity-100 my-4 group-hover:visible transform transition-all duration-500 ease-in bg-gray-50 p-4 rounded-2xl hover:scale-105">
					<div className="flex justify-between items-center">
						<img src="/avatar.png" className="w-12 h-12" />
						<button className="p-2 text-sm rounded-full bg-gray-100 hover:bg-gray-200">
							Subscribe
						</button>
					</div>
					<div className="mt-4">
						<p className="text-xl">Shrey Vijayvargiya</p>
						<p className="text-gray-800 text-sm">@shreysletter</p>
					</div>
					<div className="mt-2">
						<div className="flex justify-start gap-2 items-center truncate">
							<p>
								199 <span className="text-gray-800 text-sm">followers</span>
							</p>
							<p>
								299 <span className="text-gray-800 text-sm">following</span>
							</p>
						</div>
					</div>
				</div>
				<div className="flex justify-start items-center gap-1 relative rounded-full px-2 py-1 w-60 border border-white hover:border hover:border-gray-200 cursor-pointer group transition-all duration-500">
					<img
						src="/avatar.png"
						className="w-0 h-0 group-hover:w-10 group-hover:h-10 opacity-0 invisible group-hover:visible group-hover:opacity-100 rounded-full transition-all duration-500 ease-in-out group-hover:ml-1"
					/>
					<p className="group-hover:underline group-hover:px-1 group-hover:text-center text-gray-700 transition-all duration-500 ease-in-out group-hover:text-black group-hover:font-semibold font-cool">
						Shrey Vijayvargiya
					</p>
				</div>
			</div>
		</div>
	);
};
export default PopDetails;

iHateReading

A platform by a developer for a developer

Products

Policies

Email us

iHateReading