mirror of
https://github.com/codebox283/everydayserieswebsite.git
synced 2025-06-19 21:00:53 +00:00
landing page changes
This commit is contained in:
codebox283
parent
bce89e7fd8
commit
e50c0ad513
@ -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}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -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" },
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user