From e50c0ad5136777855773bbf3df6fa17a029b6f73 Mon Sep 17 00:00:00 2001
From: codebox283 <87943295+codebox283@users.noreply.github.com>
Date: Tue, 25 Feb 2025 10:28:46 +0530
Subject: [PATCH] landing page changes

---
 components/Companies/partners.tsx      |  53 ++++++++--
 components/Features/features-bento.tsx | 136 +++++++++++++++++++++----
 components/Hero/hero2.tsx              | 108 ++++++++++----------
 components/footer.tsx                  |   4 +-
 4 files changed, 219 insertions(+), 82 deletions(-)

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" },