mirror of
https://github.com/codebox283/everydayserieswebsite.git
synced 2025-06-19 20:20:54 +00:00
364 lines
28 KiB
TypeScript
364 lines
28 KiB
TypeScript
"use client";
|
|
import { cn } from "@/lib/utils";
|
|
import React, { useState, useEffect } from "react";
|
|
import { BentoGrid, BentoGridItem } from "../ui/bento-grid";
|
|
import {
|
|
IconBoxAlignRightFilled,
|
|
IconClipboardCopy,
|
|
IconFileBroken,
|
|
IconSignature,
|
|
IconTableColumn,
|
|
} from "@tabler/icons-react";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import { FaPlay } from "react-icons/fa";
|
|
|
|
export function BentoFeatures() {
|
|
const variants = {
|
|
hidden: { opacity: 0, y: 50 },
|
|
visible: { opacity: 1, y: 0 },
|
|
};
|
|
|
|
return (
|
|
<motion.div
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
variants={variants}
|
|
transition={{ duration: 0.5 }}
|
|
className="max-w-6xl mx-auto py-20"
|
|
>
|
|
<div className="text-center mb-16">
|
|
<motion.h2
|
|
// className="text-4xl md:text-5xl bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-blue-500"
|
|
className="text-4xl md:text-5xl bg-clip-text text-white"
|
|
variants={{
|
|
hidden: { opacity: 0, y: 20 },
|
|
visible: { opacity: 1, y: 0 }
|
|
}}
|
|
>
|
|
All-in-One Platform for AI-Powered Services
|
|
</motion.h2>
|
|
</div>
|
|
|
|
<BentoGrid className="md:auto-rows-[20rem]">
|
|
{items.map((item, i) => (
|
|
<BentoGridItem
|
|
key={i}
|
|
title={item.title}
|
|
description={item.description}
|
|
header={item.header}
|
|
className={cn("[&>p:text-lg] ", item.className)}
|
|
icon={item.icon}
|
|
/>
|
|
))}
|
|
</BentoGrid>
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
const SkeletonOne = () => {
|
|
const [isHovered, setIsHovered] = useState(false);
|
|
const [animationState, setAnimationState] = useState('idle');
|
|
|
|
// Control animation cycle
|
|
useEffect(() => {
|
|
if (isHovered) {
|
|
const animationSequence = async () => {
|
|
setAnimationState('drag');
|
|
setTimeout(() => setAnimationState('drop'), 1500);
|
|
setTimeout(() => setAnimationState('complete'), 2000);
|
|
setTimeout(() => setAnimationState('drag'), 3500);
|
|
};
|
|
|
|
animationSequence();
|
|
const interval = setInterval(animationSequence, 4000);
|
|
return () => clearInterval(interval);
|
|
} else {
|
|
setAnimationState('idle');
|
|
}
|
|
}, [isHovered]);
|
|
|
|
return (
|
|
<motion.div
|
|
className="flex flex-1 w-full h-full min-h-[6rem] bg-gradient-to-br from-purple-900/50 to-blue-900/50 flex-col space-y-2 rounded-xl overflow-hidden"
|
|
onHoverStart={() => setIsHovered(true)}
|
|
onHoverEnd={() => setIsHovered(false)}
|
|
>
|
|
<div className="flex flex-col space-y-2 p-6">
|
|
<motion.h2
|
|
className="text-4xl font-bold text-white"
|
|
animate={{ scale: isHovered ? 1.05 : 1 }}
|
|
>
|
|
No Coding Needed
|
|
</motion.h2>
|
|
<motion.div
|
|
className="h-2 w-32 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full mt-4"
|
|
animate={{ width: isHovered ? "40%" : "8rem" }}
|
|
/>
|
|
<motion.p
|
|
className="text-neutral-300 mt-2 flex items-center gap-2"
|
|
animate={{ x: isHovered ? 10 : 0 }}
|
|
>
|
|
Learn more
|
|
<motion.span
|
|
animate={{ x: isHovered ? 5 : 0 }}
|
|
transition={{ repeat: isHovered ? Infinity : 0, duration: 0.6 }}
|
|
>
|
|
→
|
|
</motion.span>
|
|
</motion.p>
|
|
</div>
|
|
|
|
{/* Drag and drop animation container */}
|
|
<div className="relative p-6 h-64 flex items-center justify-center">
|
|
{/* Drop zone */}
|
|
<motion.div
|
|
className="absolute w-36 h-36 rounded-lg border-2 border-dashed border-indigo-400/50 flex items-center justify-center"
|
|
style={{ right: '20%', bottom: '20%' }}
|
|
animate={{
|
|
borderColor: animationState === 'drag' ? 'rgba(129, 140, 248, 0.8)' : 'rgba(129, 140, 248, 0.5)',
|
|
scale: animationState === 'drag' ? 1.05 : 1,
|
|
backgroundColor: animationState === 'complete' ? 'rgba(129, 140, 248, 0.15)' : 'rgba(129, 140, 248, 0.05)'
|
|
}}
|
|
>
|
|
<motion.div
|
|
className="text-indigo-300 text-sm font-medium"
|
|
animate={{ opacity: animationState === 'complete' ? 0 : 0.8 }}
|
|
>
|
|
Drop here
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
{/* File being dragged */}
|
|
<motion.div
|
|
className="absolute flex flex-col items-center justify-center gap-1"
|
|
style={{ left: '20%', top: '20%' }}
|
|
animate={{
|
|
x: animationState === 'idle' ? 0 : animationState === 'drag' ? 100 : animationState === 'drop' || animationState === 'complete' ? 130 : 0,
|
|
y: animationState === 'idle' ? 0 : animationState === 'drag' ? 80 : animationState === 'drop' || animationState === 'complete' ? 100 : 0,
|
|
opacity: animationState === 'complete' ? 0 : 1,
|
|
scale: animationState === 'drag' ? 1.1 : animationState === 'drop' ? 0.95 : 1,
|
|
rotate: animationState === 'drag' ? 2 : 0,
|
|
}}
|
|
transition={{
|
|
type: animationState === 'drop' ? 'spring' : 'tween',
|
|
stiffness: 200,
|
|
damping: 15
|
|
}}
|
|
>
|
|
{/* File icon */}
|
|
<div className="w-16 h-20 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-lg shadow-lg flex flex-col overflow-hidden">
|
|
<div className="h-3 w-full bg-white/20"></div>
|
|
<div className="flex-1 flex items-center justify-center text-white font-bold text-xs">
|
|
WORKFLOW
|
|
</div>
|
|
</div>
|
|
<motion.div
|
|
className="text-indigo-200 text-xs"
|
|
animate={{ opacity: animationState === 'idle' ? 1 : 0 }}
|
|
>
|
|
Drag me
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
{/* Success checkmark that appears after drop */}
|
|
<motion.div
|
|
className="absolute text-green-400 text-2xl"
|
|
style={{ right: '20%', bottom: '20%' }}
|
|
animate={{
|
|
opacity: animationState === 'complete' ? 1 : 0,
|
|
scale: animationState === 'complete' ? [0, 1.2, 1] : 0,
|
|
}}
|
|
transition={{ duration: 0.3 }}
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
|
</svg>
|
|
</motion.div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
const SkeletonTwo = () => {
|
|
return (
|
|
<motion.div
|
|
className="flex flex-1 w-full h-full min-h-[2rem] bg-gradient-to-br from-purple-900/20 to-blue-900/20 flex-col items-center justify-center rounded-xl cursor-pointer"
|
|
>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1484522676511-0f51cc572bb0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fHR5cGluZ3xlbnwwfHwwfHx8MA%3D%3D"
|
|
alt="Typing Image"
|
|
className="object-cover h-full w-full rounded-xl"
|
|
/>
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
const SkeletonThree = () => {
|
|
const [isHovered, setIsHovered] = useState(false);
|
|
|
|
return (
|
|
<motion.div
|
|
className="flex flex-1 w-full h-full min-h-[6rem] bg-gradient-to-br from-purple-900/20 to-blue-900/20 flex-col items-center justify-center rounded-xl"
|
|
onHoverStart={() => setIsHovered(true)}
|
|
onHoverEnd={() => setIsHovered(false)}
|
|
>
|
|
<img
|
|
src="data:image/jpeg;base64,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"
|
|
alt="Typing Image"
|
|
className="object-cover h-full w-full rounded-xl"
|
|
/>
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
const SkeletonFour = () => {
|
|
return (
|
|
<motion.div
|
|
className="flex flex-1 w-full h-full min-h-[6rem] bg-gradient-to-br from-purple-900/20 to-blue-900/20 flex-col items-center justify-center p-8 rounded-xl"
|
|
>
|
|
<div className="flex flex-col space-y-4 w-full">
|
|
<motion.div
|
|
className="bg-purple-500/20 p-4 rounded-xl cursor-pointer group relative overflow-hidden"
|
|
whileHover={{ scale: 1.02 }}
|
|
>
|
|
<motion.div
|
|
className="absolute inset-0 bg-purple-500/20 translate-x-[-100%] group-hover:translate-x-0 transition-transform duration-300"
|
|
/>
|
|
<div className="relative flex items-center space-x-4">
|
|
<motion.div
|
|
className="p-2 bg-purple-500/40 rounded-lg"
|
|
whileHover={{ rotate: 360 }}
|
|
transition={{ duration: 0.4 }}
|
|
>
|
|
<IconBoxAlignRightFilled className="h-6 w-6 text-purple-200" />
|
|
</motion.div>
|
|
<span className="text-white font-medium">Form Builder</span>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
className="bg-white/10 p-4 rounded-xl cursor-pointer group relative overflow-hidden"
|
|
whileHover={{ scale: 1.02 }}
|
|
>
|
|
<motion.div
|
|
className="absolute inset-0 bg-white/10 translate-x-[-100%] group-hover:translate-x-0 transition-transform duration-300"
|
|
/>
|
|
<div className="relative flex items-center space-x-4">
|
|
<motion.div
|
|
className="p-2 bg-white/20 rounded-lg"
|
|
whileHover={{ rotate: 360 }}
|
|
transition={{ duration: 0.4 }}
|
|
>
|
|
<IconClipboardCopy className="h-6 w-6 text-white" />
|
|
</motion.div>
|
|
<span className="text-white font-medium">Newsletter Creator</span>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
|
|
// const SkeletonFive = () => {
|
|
// return (
|
|
// <motion.div
|
|
// className="flex flex-1 w-full h-full min-h-[6rem] dark:bg-dot-white/[0.2] bg-dot-black/[0.2] flex-col items-center justify-center p-8"
|
|
// >
|
|
// <div className="grid grid-cols-2 gap-4 w-full">
|
|
// <div className="bg-purple-500/20 p-4 rounded-xl aspect-square flex items-center justify-center">
|
|
// <motion.div
|
|
// animate={{ rotate: 360 }}
|
|
// transition={{ duration: 8, repeat: Infinity, ease: "linear" }}
|
|
// className="w-12 h-12 rounded-full border-4 border-purple-500 border-t-transparent"
|
|
// />
|
|
// </div>
|
|
// <div className="bg-blue-500/20 p-4 rounded-xl aspect-square flex items-center justify-center">
|
|
// <motion.div
|
|
// initial={{ scale: 0.8 }}
|
|
// animate={{ scale: 1.2 }}
|
|
// transition={{ duration: 2, repeat: Infinity, repeatType: "reverse" }}
|
|
// className="w-12 h-12 bg-gradient-to-tr from-blue-500 to-purple-500 rounded-lg"
|
|
// />
|
|
// </div>
|
|
// <div className="bg-green-500/20 p-4 rounded-xl aspect-square flex items-center justify-center">
|
|
// <motion.div
|
|
// initial={{ opacity: 0.5 }}
|
|
// animate={{ opacity: 1 }}
|
|
// transition={{ duration: 2, repeat: Infinity, repeatType: "reverse" }}
|
|
// className="w-12 h-12 bg-gradient-to-br from-green-500 to-blue-500 rounded-full"
|
|
// />
|
|
// </div>
|
|
// <div className="bg-pink-500/20 p-4 rounded-xl aspect-square flex items-center justify-center">
|
|
// <motion.div
|
|
// animate={{
|
|
// scale: [1, 1.2, 1],
|
|
// rotate: [0, 90, 0]
|
|
// }}
|
|
// transition={{ duration: 4, repeat: Infinity }}
|
|
// className="w-12 h-12 bg-gradient-to-bl from-pink-500 to-purple-500 rounded-lg"
|
|
// />
|
|
// </div>
|
|
// </div>
|
|
// </motion.div>
|
|
// );
|
|
// };
|
|
|
|
const items = [
|
|
{
|
|
title: "Drag & Drop No-Code Builder",
|
|
description: (
|
|
<span className="text-sm">
|
|
Easily create robust MicroSaaS applications using our intuitive drag-and-drop interface. Empower yourself to design custom workflows without writing a single line of code, streamlining operations and enhancing efficiency.
|
|
</span>
|
|
),
|
|
header: <SkeletonOne />,
|
|
className: "md:col-span-1 md:row-span-2",
|
|
icon: <IconClipboardCopy className="h-4 w-4 text-neutral-500" />,
|
|
},
|
|
{
|
|
title: "Writing Simplified",
|
|
description: (
|
|
<span className="text-sm">
|
|
Transform your writing process with the power of AI. Use the built-in AI writer to generate, refine, or continue content effortlessly.
|
|
</span>
|
|
),
|
|
header: <SkeletonTwo />,
|
|
className: "md:col-span-1",
|
|
icon: <IconFileBroken className="h-4 w-4 text-neutral-500" />,
|
|
},
|
|
{
|
|
title: "Monetize Smarter",
|
|
description: (
|
|
<span className="text-sm">
|
|
Launch your own community or tap into our marketplace to sell AI subscriptions to SMBs and beyond. Transform your ideas into profitable ventures.
|
|
</span>
|
|
),
|
|
header: <SkeletonThree />,
|
|
className: "md:col-span-1",
|
|
icon: <IconSignature className="h-4 w-4 text-neutral-500" />,
|
|
},
|
|
{
|
|
title: "Integrated Creative Tools",
|
|
description: (
|
|
<span className="text-sm">
|
|
From forms to video editors, AI writers to newsletter creators, we've got you covered. Access a comprehensive suite of tools designed to enhance your creative workflow.
|
|
</span>
|
|
),
|
|
header: <SkeletonFour />,
|
|
className: "md:col-span-2",
|
|
icon: <IconTableColumn className="h-4 w-4 text-neutral-500" />,
|
|
},
|
|
// {
|
|
// title: "Smart Templates",
|
|
// description: (
|
|
// <span className="text-sm">
|
|
// Access a library of intelligent templates that adapt to your needs. Each template is powered by AI to provide personalized starting points.
|
|
// </span>
|
|
// ),
|
|
// header: <SkeletonFive />,
|
|
// className: "md:col-span-1",
|
|
// icon: <IconBoxAlignRightFilled className="h-4 w-4 text-neutral-500" />,
|
|
// }
|
|
];
|