Skip to content

Commit

Permalink
Merge pull request #2 from shrishail356/eigentesting
Browse files Browse the repository at this point in the history 
Added Eigen-Agent Features Section with Enhanced Chatting Button
  • Loading branch information
@shrishail356
shrishail356 authored Feb 5, 2025
2 parents 945f173 + 1cf42b0 commit 7792702
Show file tree
Hide file tree
Showing 4 changed files with 351 additions and 16 deletions.
Binary file added public/videos/test.mp4
View file
Binary file not shown.
242 changes: 238 additions & 4 deletions src/app/eigen/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,244 @@
"use client";
import React from "react";

const EigenPage: React.FC = () => {
import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { ChevronRight, Zap, Send, Shield, Copy } from "lucide-react";
import NavBar from "@/components/Navbar";
import BackgroundParticles from "@/components/ui/BackgroundParticles";

const features = [
{
id: 1,
title: "Login & Setup",
icon: Shield,
description: "Quick 1-step setup process",
content: {
title: "Easy Onboarding",
description: "Google one-click login Base wallet",
video: "/videos/test.mp4",
},
},
{
id: 2,
title: "Get Testnet Faucet",
icon: Zap,
description: "Free tokens for testing",
networkSupport: "Testnet only",
content: {
prompt: "Get Testnet Faucet to my wallet",
description: "Copy, paste, and get free testnet tokens instantly",
video: "/videos/test.mp4",
},
},
{
id: 3,
title: "Send Tokens",
icon: Send,
description: "Transfer tokens easily",
networkSupport: "Testnet / Mainnet",
content: {
examples: [
{
command: "send 0.1 eth to 0xB7d4369AbFa74AED05d7db358dC3373d787B8997",
},
{
command: "send 10 USDC to 0xB7d4369AbFa74AED05d7db358dC3373d787B8997",
},
],
description: "Simple commands to send any tokens across wallets",
video: "/videos/test.mp4",
},
},
];

const EigenPage = () => {
const [selectedFeature, setSelectedFeature] = useState(features[0]);

const handleCopy = (textToCopy: string) => {
navigator.clipboard.writeText(textToCopy);
// Add a simple toast notification here if needed
};

const renderFeatureContent = (feature: (typeof features)[0]) => {
return (
<div className="h-full flex flex-col">
{/* Header */}
<div className="mb-8">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="p-2.5 rounded-xl bg-cyan-400/10">
<feature.icon className="w-6 h-6 text-cyan-400" />
</div>
<div>
<h3 className="text-xl font-semibold text-white">
{feature.title}
</h3>
<p className="text-base text-gray-400">{feature.description}</p>
</div>
</div>
{feature.networkSupport && (
<span className="text-sm px-4 py-2 rounded-full bg-white/5 border border-cyan-400/20 text-cyan-400 font-medium">
{feature.networkSupport}
</span>
)}
</div>
</div>

{/* Feature Content */}
<div className="space-y-8">
{feature.content.prompt && (
<div className="p-3 rounded-xl bg-white/5 border border-white/10">
<code className="flex items-center justify-between p-3 rounded-lg bg-black/30 text-cyan-400 font-mono text-base">
{feature.content.prompt!}
<button
onClick={() => handleCopy(feature.content.prompt!)}
className="ml-3 p-2 rounded-lg hover:bg-white/10 text-gray-400 hover:text-white transition-colors"
>
<Copy className="w-5 h-5" />
</button>
</code>
</div>
)}

{feature.content.examples && (
<div className="space-y-4">
{feature.content.examples.map((example, index) => (
<div
key={index}
className="p-3 rounded-xl bg-white/5 border border-white/10"
>
<code className="flex items-center justify-between p-3 rounded-lg bg-black/30 text-cyan-400 font-mono text-base">
<span className="truncate mr-3">{example.command}</span>
<button
onClick={() => handleCopy(example.command)}
className="p-2 rounded-lg hover:bg-white/10 text-gray-400 hover:text-white transition-colors"
>
<Copy className="w-5 h-5" />
</button>
</code>
</div>
))}
</div>
)}

{/* Video Container */}
<div className="relative mt-8">
<div className="relative h-[320px] rounded-xl overflow-hidden border border-white/10">
<video
className="w-full h-full object-cover"
autoPlay
loop
muted
playsInline
>
<source src={feature.content.video} type="video/mp4" />
</video>
</div>
</div>
</div>
</div>
);
};

return (
<div className="min-h-screen flex items-center justify-center bg-blue-500 text-white">
<h1 className="text-5xl font-bold">Eigen Landing Page</h1>
<div className="w-full min-h-screen bg-[#0A192F]">
<BackgroundParticles />
<NavBar />

<main className="w-full px-6 py-24">
{/* Header Section */}
<div className="max-w-3xl mx-auto text-center mb-20">
<h1 className="text-5xl font-bold text-white mb-6">
Eigen{" "}
<span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">
Agent
</span>
</h1>
<p className="text-xl text-gray-400">
Your friendly bridge bot that effortlessly moves tokens between
blockchains. No matter the asset, Eigen makes cross-chain transfers
quick and easy!
</p>
</div>

{/* Features Section */}
<div className="max-w-7xl mx-auto">
<div className="flex flex-col lg:flex-row gap-8">
{/* Feature Navigation */}
<div className="lg:w-1/3">
<div className="bg-white/5 backdrop-blur-lg rounded-xl border border-white/10">
{features.map((feature) => (
<motion.div
key={feature.id}
onClick={() => setSelectedFeature(feature)}
className={`p-6 cursor-pointer border-b border-white/10 last:border-0 transition-all ${
selectedFeature.id === feature.id
? "bg-gradient-to-r from-white/10 to-transparent"
: "hover:bg-white/5"
}`}
>
<div className="flex items-center justify-between group">
<div className="flex items-center gap-4">
<div
className={`p-2.5 rounded-xl ${
selectedFeature.id === feature.id
? "bg-cyan-400/10"
: "bg-white/5"
}`}
>
<feature.icon
className={`w-6 h-6 ${
selectedFeature.id === feature.id
? "text-cyan-400"
: "text-gray-400"
}`}
/>
</div>
<div>
<h3 className="text-lg font-medium text-white mb-1">
{feature.title}
</h3>
<p className="text-gray-400">{feature.description}</p>
</div>
</div>
<ChevronRight
className={`w-5 h-5 transition-transform ${
selectedFeature.id === feature.id
? "text-cyan-400 rotate-90"
: "text-gray-400"
}`}
/>
</div>
</motion.div>
))}
</div>
</div>

{/* Feature Content */}
<div className="lg:w-2/3">
<AnimatePresence mode="wait">
<motion.div
key={selectedFeature.id}
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -20 }}
transition={{ duration: 0.3 }}
className="bg-white/5 backdrop-blur-lg rounded-xl border border-white/10 p-8 h-full"
>
{renderFeatureContent(selectedFeature)}
</motion.div>
</AnimatePresence>
</div>
</div>
</div>

{/* Chat Button */}
<div className="text-center mt-12">
<button className="inline-block px-8 py-3 rounded-full bg-gradient-to-r from-cyan-500 to-blue-500 text-white font-semibold hover:bg-cyan-600 transition duration-200 shadow-md">
Chat with me
</button>
</div>
</main>
</div>
);
};
Expand Down
40 changes: 28 additions & 12 deletions src/components/Landingpage/WhatIs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,28 +47,28 @@ const WhatIs: React.FC = () => {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-100px" }}
transition={{ duration: 0.8 }}
className="max-w-7xl mx-auto px-4 sm:px-6 py-20 relative"
className="w-full max-w-[1400px] mx-auto px-6 lg:px-8 py-24 relative"
>
{/* Section Title */}
<motion.div
viewport={{ once: true }}
transition={{ duration: 0.6 }}
className="text-center mb-16"
className="text-center mb-20"
>
<h2 className="text-3xl sm:text-4xl font-bold mb-4">
<h2 className="text-4xl sm:text-5xl font-bold mb-6 tracking-tight">
What is{" "}
<span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-600">
W3Chat.io?
</span>
</h2>
<p className="text-gray-400 text-lg max-w-2xl mx-auto">
<p className="text-gray-400 text-lg sm:text-xl max-w-3xl mx-auto leading-relaxed">
Your comprehensive Web3 assistant platform powered by specialized AI
Agents, each designed to excel in specific blockchain interactions.
</p>
</motion.div>

{/* Bots Grid */}
<div className="grid md:grid-cols-3 gap-8">
<div className="grid md:grid-cols-3 gap-8 lg:gap-12">
{bots.map((bot, index) => (
<div
key={bot.name}
Expand All @@ -80,7 +80,7 @@ const WhatIs: React.FC = () => {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: index * 0.2 }}
className="relative"
className="relative h-full"
>
{/* Card Background with Mesh Gradient */}
<div className="absolute inset-0 rounded-2xl">
Expand All @@ -94,13 +94,13 @@ const WhatIs: React.FC = () => {
<motion.div
whileHover={{ y: -5 }}
transition={{ type: "spring", stiffness: 300 }}
className="relative backdrop-blur-sm border border-white/10 rounded-2xl p-6 h-full flex flex-col transition-all duration-300 group-hover:border-white/20"
className="relative backdrop-blur-sm border border-white/10 rounded-2xl p-8 h-full flex flex-col transition-all duration-300 hover:border-white/20 hover:shadow-lg hover:shadow-cyan-500/5"
>
<div className="flex flex-col items-center mb-6">
<motion.div
whileHover={{ scale: 1.05 }}
transition={{ type: "spring", stiffness: 300 }}
className={`w-24 h-24 mb-4 rounded-full overflow-hidden ring-2 ring-${bot.accentColor} ring-offset-1 ring-offset-[#0A192F] transition-all duration-300`}
className={`w-28 h-28 mb-6 rounded-full overflow-hidden ring-2 ring-${bot.accentColor} ring-offset-2 ring-offset-[#0A192F] transition-all duration-300 shadow-xl`}
>
<img
src={bot.image}
Expand All @@ -109,25 +109,41 @@ const WhatIs: React.FC = () => {
/>
</motion.div>
<div className="text-center">
<h3 className="text-2xl font-bold text-white mb-1">
<h3 className="text-2xl sm:text-3xl font-bold text-white mb-2">
{bot.name}
</h3>
<p
className={`text-${bot.accentColor} text-sm font-medium`}
className={`text-${bot.accentColor} text-base font-semibold tracking-wide`}
>
{bot.role}
</p>
</div>
</div>

<div className="text-center space-y-6 flex-grow flex flex-col justify-between">
<p className="text-gray-300 text-sm leading-relaxed">
<p className="text-gray-300 text-base leading-relaxed">
{bot.description}
</p>
<div className="mt-6 pt-6 border-t border-white/5">
<button className="group inline-flex items-center gap-2 text-sm font-medium text-cyan-400 hover:text-cyan-300 transition-colors">
Learn more
<ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
</button>
</div>
</div>
</motion.div>
</motion.div>
<div className="text-right mt-2"></div>
<div className="text-right mt-3">
<a
href={`/${bot.name.toLowerCase()}`}
target="_blank"
onClick={(e) => e.stopPropagation()}
className="inline-flex items-center gap-1.5 text-sm text-gray-400 hover:text-cyan-400 transition-colors"
>
<span>Open in new tab</span>
<ArrowRight className="w-3.5 h-3.5" />
</a>
</div>
</div>
))}
</div>
Expand Down
Loading

0 comments on commit 7792702

Please sign in to comment.