diff --git a/components/Companies/partners.tsx b/components/Companies/partners.tsx
index 393cca3..74f115f 100644
--- a/components/Companies/partners.tsx
+++ b/components/Companies/partners.tsx
@@ -3,24 +3,55 @@
import { cn } from "@/lib/utils";
import { Marquee } from "@/components/ui/marquee";
-const images = [
- "https://www.zarla.com/images/starbucks-logo-2400x2400-20220513.png?crop=1:1,smart&width=150&dpr=2",
- "https://www.zarla.com/images/apple-logo-2400x2400-20220512-3.png?crop=1:1,smart&width=150&dpr=2",
- "https://www.zarla.com/images/google-logo-2400x2400-20220519.png?crop=1:1,smart&width=150&dpr=2",
- "https://www.zarla.com/images/mercedes-benz-logo-2400x2400-20220513-2.png?crop=1:1,smart&width=150&dpr=2",
- "https://www.zarla.com/images/walmart-logo-2400x2400-20223105.png?crop=1:1,smart&width=150&dpr=2",
- "https://www.zarla.com/images/pepsi-logo-2400x2400-20220513-1.png?crop=1:1,smart&width=150&dpr=2",
+const supportedBy = [
+ { name: "Microsoft", logo: "https://upload.wikimedia.org/wikipedia/commons/4/44/Microsoft_logo.svg" },
+ { name: "NVIDIA", logo: "https://www.nvidia.com/content/dam/en-zz/Solutions/about-nvidia/logo-and-brand/02-nvidia-logo-color-grn-500x200-4c25-p@2x.png" },
+ { name: "Google for Startups", logo: "https://media.licdn.com/dms/image/v2/C560BAQFlPW0-1gr2pQ/company-logo_200_200/company-logo_200_200/0/1630602785941/launchpad_program_logo?e=2147483647&v=beta&t=Ppi0tawv2zHK00xSgrnOG7jNpmf7vejp37sMZDYEb5U" },
+];
+
+const partners = [
+ "https://hoonartek.com/wp-content/uploads/2025/01/Hoonartek-V25.svg",
+ "https://rpatech.b-cdn.net/wp-content/uploads/2025/01/colored.png",
+ "https://www.open-infotech.com/content/images/2024/08/Group-26082-1.svg",
+ "https://thecompetenza.com/wp-content/uploads/2023/04/comppp111.png",
+ "https://www.tftus.com/wp-content/uploads/2021/01/logo-1.png",
+ "https://everydayseries.ai/wp-content/uploads/2024/03/GIF-From-Online-1-300x169.gif",
+];
+
+const customers = [
+ "https://everydayseries.ai/wp-content/uploads/2024/03/trippyone-350x138.jpeg",
+ "https://everydayseries.ai/wp-content/uploads/2024/03/inxtinct-350x230.png",
+ "https://everydayseries.ai/wp-content/uploads/2024/03/qurious_tech_logo.jpeg",
+ "https://everydayseries.ai/wp-content/uploads/2024/03/moodit-icon-350x102.png",
+ "https://everydayseries.ai/wp-content/uploads/2024/03/CE-full-for-web.png",
+ "https://everydayseries.ai/wp-content/uploads/2024/03/logo_transparent-e1710074057580-350x230.png",
];
export function Partners() {
return (
- <div className="h-screen flex flex-col items-center justify-center space-y-10">
+ <div className="h-screen max-w-7xl mx-auto flex flex-col items-center justify-center space-y-10 ">
+
+ // Supported By
+ <div className="flex flex-col items-center space-y-6 mb-20">
+ <h1 className="text-white text-4xl">Supported By</h1>
+ <div className="flex space-x-10 items-center">
+ {supportedBy.map((support, index) => (
+ <div key={index} className="flex flex-col items-center">
+ <div className="overflow-hidden rounded-md" ><img src={support.logo} alt={support.name} className="h-32 w-32 object-cover"/></div>
+ <p className="text-gray-400 mt-2">{support.name}</p>
+ </div>
+ ))}
+ </div>
+ </div>
+
+ // Partners
<div className="flex flex-col items-center justify-center space-y-6">
<h1 className="text-white text-4xl">Partners</h1>
+ <p className="text-gray-400">Following are the partners for Advanced Nonlinear Technologies</p>
<div className="relative flex h-[200px] w-full flex-col items-center justify-center overflow-hidden rounded-lg bg-transparent">
<Marquee pauseOnHover className="[--duration:20s]">
<div className="flex space-x-6">
- {images.map((img, index) => (
+ {partners.map((img, index) => (
<img
key={index}
src={img}
@@ -35,12 +66,14 @@ export function Partners() {
</div>
</div>
+ // Customers
<div className="flex flex-col items-center justify-center space-y-6">
<h1 className="text-white text-4xl">Customers</h1>
+ <p className="text-gray-400">Our customers are our strengths and we provide AI solutions through our platform to them</p>
<div className="relative flex h-[200px] w-full flex-col items-center justify-center overflow-hidden rounded-lg bg-transparent md:shadow-xl">
<Marquee reverse pauseOnHover className="[--duration:20s]">
<div className="flex space-x-6">
- {images.map((img, index) => (
+ {customers.map((img, index) => (
<img
key={index}
src={img}
diff --git a/components/Features/features-bento.tsx b/components/Features/features-bento.tsx
index 7d29a42..6dea9af 100644
--- a/components/Features/features-bento.tsx
+++ b/components/Features/features-bento.tsx
@@ -1,6 +1,6 @@
"use client";
import { cn } from "@/lib/utils";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
import { BentoGrid, BentoGridItem } from "../ui/bento-grid";
import {
IconBoxAlignRightFilled,
@@ -57,6 +57,25 @@ export function BentoFeatures() {
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
@@ -88,16 +107,74 @@ const SkeletonOne = () => {
</motion.span>
</motion.p>
</div>
- <motion.img
- src="https://images.unsplash.com/photo-1603201667230-bd139210db18?q=80&w=1788&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
- className="p-4 rounded-xl"
- animate={{
- scale: isHovered ? 1.05 : 1,
- rotate: isHovered ? 1 : 0
- }}
- transition={{ type: "spring", stiffness: 300 }}
- alt="Feature preview"
- />
+
+ {/* 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>
);
};
@@ -176,7 +253,7 @@ const SkeletonThree = () => {
className="flex flex-col space-y-4"
animate={{ y: isHovered ? -10 : 0 }}
>
- <div className="flex items-center justify-between">
+ {/* <div className="flex items-center justify-between">
<div className="h-8 w-24 bg-purple-500/30 rounded-full" />
<motion.div
className="text-2xl font-bold text-green-400"
@@ -184,15 +261,40 @@ const SkeletonThree = () => {
>
$0
</motion.div>
- </div>
+ </div> */}
+
+ {/* Graph container */}
<motion.div
- className="h-16 w-full bg-gradient-to-r from-purple-500/20 to-blue-500/20 rounded-xl"
+ className="h-20 w-full bg-gradient-to-r from-purple-500/20 to-blue-500/20 rounded-xl relative overflow-hidden"
animate={{
scale: isHovered ? 1.02 : 1,
backgroundColor: isHovered ? "rgba(139, 92, 246, 0.3)" : "rgba(139, 92, 246, 0.2)"
}}
- />
- <div className="flex justify-between items-center">
+ >
+ {/* Growing graph line */}
+ <motion.div
+ className="absolute bottom-0 left-0 w-full h-full"
+ initial={{ opacity: 0.7 }}
+ animate={{ opacity: isHovered ? 1 : 0.7 }}
+ >
+ <svg width="100%" height="100%" viewBox="0 0 100 50" preserveAspectRatio="none">
+ <motion.path
+ d="M0,50 L0,35 C10,40 20,20 30,25 C40,30 50,10 60,15 C70,20 80,5 90,10 L100,5 L100,50 Z"
+ fill="rgba(52, 211, 153, 0.2)"
+ stroke="rgba(52, 211, 153, 0.8)"
+ strokeWidth="2"
+ initial={{ pathLength: 0.3, y: 20 }}
+ animate={{
+ pathLength: isHovered ? 1 : 0.3,
+ y: isHovered ? 0 : 20
+ }}
+ transition={{ duration: 1.5 }}
+ />
+ </svg>
+ </motion.div>
+ </motion.div>
+
+ {/* <div className="flex justify-between items-center">
<div className="h-6 w-16 bg-purple-500/30 rounded-full" />
<motion.div
className="text-xl font-bold text-green-400"
@@ -200,7 +302,7 @@ const SkeletonThree = () => {
>
$499
</motion.div>
- </div>
+ </div> */}
</motion.div>
</div>
</motion.div>
diff --git a/components/Hero/hero2.tsx b/components/Hero/hero2.tsx
index f744b60..1e1c125 100644
--- a/components/Hero/hero2.tsx
+++ b/components/Hero/hero2.tsx
@@ -67,50 +67,53 @@ const HeroCarousel = () => {
return (
<div className='h-screen flex flex-col items-end justify-end'>
- <div className="relative h-[92%] w-full overflow-hidden">
- {/* Slides */}
- <div className="relative h-full w-full">
- {slides.map((slide, index) => (
- <div
- key={index}
- className={`absolute inset-0 h-full w-full transition-all duration-700 ${
- currentSlide === index ? 'opacity-100' : 'opacity-0'
- }`}
- >
- {/* Background Image */}
- <div
- className="absolute inset-0 bg-cover bg-center bg-no-repeat transition-transform duration-700"
- style={{
- backgroundImage: `url(${slide.image})`,
- transform: currentSlide === index ? 'scale(1.05)' : 'scale(1)'
- }}
- />
- {/* Overlay */}
- <div className={`absolute inset-0 ${slide.overlayClass}`} />
-
- {/* Content */}
- <div className="relative flex h-full flex-col items-start justify-end py-40 px-20 text-left">
- <div className="max-w-3xl">
- <h1 className="mb-6 text-6xl text-white drop-shadow-lg">
- {slide.title}
- </h1>
- <p className="mb-8 text-xl text-white drop-shadow-lg">
- {slide.description}
- </p>
- <a
- href={slide.buttonLink}
- className="rounded-lg mt-10 bg-white px-8 py-3 text-lg font-semibold text-gray-900 transition-colors hover:bg-gray-100"
- >
- {slide.buttonText}
- </a>
+ <div className="relative h-[92%] w-full overflow-hidden">
+ {/* Slides */}
+ <div className="relative h-full w-full">
+ {slides.map((slide, index) => (
+ <div
+ key={index}
+ className={`absolute inset-0 h-full w-full transition-all duration-700 ${currentSlide === index
+ ? 'translate-x-0 opacity-100' // Show current slide
+ : currentSlide > index
+ ? '-translate-x-full opacity-0' // Slide left for previous slides
+ : 'translate-x-full opacity-0' // Slide right for next slides
+ }`}
+ >
+ {/* Background Image */}
+ <div
+ className="absolute inset-0 bg-cover bg-center bg-no-repeat transition-transform duration-700"
+ style={{
+ backgroundImage: `url(${slide.image})`,
+ transform: currentSlide === index ? 'scale(1.05)' : 'scale(1)'
+ }}
+ />
+ {/* Overlay */}
+ <div className={`absolute inset-0 ${slide.overlayClass}`} />
+
+ {/* Content */}
+ <div className="relative flex h-full flex-col items-start justify-end py-40 px-20 text-left">
+ <div className="max-w-3xl">
+ <h1 className="mb-6 text-6xl text-white drop-shadow-lg">
+ {slide.title}
+ </h1>
+ <p className="mb-8 text-xl text-white drop-shadow-lg">
+ {slide.description}
+ </p>
+ <a
+ href={slide.buttonLink}
+ className="rounded-lg mt-10 bg-white px-8 py-3 text-lg font-semibold text-gray-900 transition-colors hover:bg-gray-100"
+ >
+ {slide.buttonText}
+ </a>
+ </div>
</div>
</div>
- </div>
- ))}
- </div>
+ ))}
+ </div>
- {/* Navigation Buttons */}
- {/* <button
+ {/* Navigation Buttons */}
+ {/* <button
onClick={prevSlide}
className="absolute left-4 top-1/2 -translate-y-1/2 rounded-full bg-white/20 p-3 text-white backdrop-blur-sm transition-all hover:bg-white/30"
>
@@ -123,20 +126,19 @@ const HeroCarousel = () => {
<ChevronRight size={28} />
</button> */}
- {/* Slide Indicators */}
- <div className="absolute bottom-8 left-1/2 flex -translate-x-1/2 space-x-3">
- {slides.map((_, index) => (
- <button
- key={index}
- onClick={() => setCurrentSlide(index)}
- className={`h-2 rounded-full transition-all ${
- currentSlide === index ? 'w-8 bg-white' : 'w-2 bg-white/50'
- }`}
- />
- ))}
+ {/* Slide Indicators */}
+ <div className="absolute bottom-8 left-1/2 flex -translate-x-1/2 space-x-3">
+ {slides.map((_, index) => (
+ <button
+ key={index}
+ onClick={() => setCurrentSlide(index)}
+ className={`h-2 rounded-full transition-all ${currentSlide === index ? 'w-8 bg-white' : 'w-2 bg-white/50'
+ }`}
+ />
+ ))}
+ </div>
</div>
</div>
- </div>
);
};
diff --git a/components/footer.tsx b/components/footer.tsx
index be2ca0b..c8e7a2e 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -5,7 +5,7 @@ import { motion } from 'framer-motion';
const companyLinks = [
{ text: "About", url: "/about" },
{ text: "Careers", url: "/careers" },
- { text: "Blog", url: "/blog" },
+ { text: "Blogs", url: "/blogs" },
{ text: "Status", url: "/status" },
{ text: "Privacy", url: "/privacy" },
{ text: "Partner with us", url: "/partner" }
@@ -26,7 +26,7 @@ const communityLinks = [
const learnLinks = [
{ text: "Webinars", url: "/webinars" },
{ text: "Leadership", url: "/leadership" },
- { text: "Demos", url: "/demos" },
+ { text: "Demo", url: "/demo" },
{ text: "Videos", url: "/videos" },
{ text: "Guides", url: "/guides" },
{ text: "Articles", url: "/articles" },