Skip to content

Commit 35eb3ac

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
feat: Implement AI features and policies
- Add "Lightning Fast Transactions" card to FeaturesSection. - Integrate AI button and chatbot widget. - Implement cookie consent banner and privacy policy page. - Add scroll-to-top button. - Improve descriptions for featured clubs. - Ensure pages load from the top on navigation.
1 parent 2d1cbeb commit 35eb3ac

File tree

10 files changed

+581
-77
lines changed

10 files changed

+581
-77
lines changed

‎src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import AlienTrip from './pages/AlienTrip';
99
import Clubs from './pages/Clubs';
1010
import CoNetWorKing from './pages/CoNetWorKing';
1111
import Contact from './pages/Contact';
12+
import PrivacyPolicy from './pages/PrivacyPolicy';
1213
import NotFound from './pages/NotFound';
1314
import './index.css'; // Solo se importa el archivo final
1415

@@ -34,6 +35,7 @@ function App() {
3435
<Route path="clubs" element={<Clubs />} />
3536
<Route path="conetworking" element={<CoNetWorKing />} />
3637
<Route path="contact" element={<Contact />} />
38+
<Route path="privacy-policy" element={<PrivacyPolicy />} />
3739
<Route path="*" element={<NotFound />} />
3840
</Route>
3941
</Routes>

‎src/components/AIChatbot.tsx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import React, { useState } from 'react';
2+
import { motion, AnimatePresence } from 'framer-motion';
3+
import { Brain, X, Minimize2 } from 'lucide-react';
4+
5+
const AIChatbot = () => {
6+
const [isOpen, setIsOpen] = useState(false);
7+
8+
return (
9+
<>
10+
{/* Floating Button */}
11+
<motion.button
12+
initial={{ opacity: 0, scale: 0.5 }}
13+
animate={{ opacity: 1, scale: 1 }}
14+
transition={{ delay: 0.5 }}
15+
onClick={() => setIsOpen(!isOpen)}
16+
className="fixed bottom-24 right-8 z-40 p-4 bg-gradient-to-br from-alien-gold to-alien-gold-dark backdrop-blur-md border-2 border-alien-gold-light rounded-full text-alien-space-dark hover:scale-110 transition-all duration-300 shadow-2xl hover:shadow-alien-gold/50"
17+
aria-label="Open AI Assistant"
18+
>
19+
<Brain className="h-7 w-7" />
20+
</motion.button>
21+
22+
{/* Chat Window */}
23+
<AnimatePresence>
24+
{isOpen && (
25+
<motion.div
26+
initial={{ opacity: 0, y: 100, scale: 0.8 }}
27+
animate={{ opacity: 1, y: 0, scale: 1 }}
28+
exit={{ opacity: 0, y: 100, scale: 0.8 }}
29+
transition={{ duration: 0.3 }}
30+
className="fixed bottom-24 right-8 z-50 w-[400px] h-[600px] max-w-[calc(100vw-2rem)] max-h-[calc(100vh-8rem)] bg-alien-space-dark/95 backdrop-blur-xl border-2 border-alien-gold/50 rounded-2xl shadow-2xl overflow-hidden"
31+
>
32+
{/* Header */}
33+
<div className="bg-gradient-to-r from-alien-gold/20 to-alien-gold-dark/20 border-b border-alien-gold/30 p-4 flex items-center justify-between">
34+
<div className="flex items-center gap-3">
35+
<div className="p-2 bg-alien-gold/30 rounded-full">
36+
<Brain className="h-5 w-5 text-alien-gold" />
37+
</div>
38+
<div>
39+
<h3 className="text-alien-gold font-bold font-nasalization">
40+
AI Assistant
41+
</h3>
42+
<p className="text-xs text-gray-400 font-[Exo]">Aitor AI</p>
43+
</div>
44+
</div>
45+
<button
46+
onClick={() => setIsOpen(false)}
47+
className="p-1.5 hover:bg-alien-gold/20 rounded-lg transition-colors"
48+
aria-label="Close chat"
49+
>
50+
<X className="h-5 w-5 text-alien-gold" />
51+
</button>
52+
</div>
53+
54+
{/* iframe Content */}
55+
<iframe
56+
src="https://aitor.lovable.app/"
57+
className="w-full h-[calc(100%-4rem)] border-none"
58+
title="Aitor AI Assistant"
59+
allow="microphone; camera"
60+
/>
61+
</motion.div>
62+
)}
63+
</AnimatePresence>
64+
</>
65+
);
66+
};
67+
68+
export default AIChatbot;

‎src/components/CookieConsent.tsx‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import React, { useState, useEffect } from 'react';
2+
import { motion, AnimatePresence } from 'framer-motion';
3+
import { Cookie, X } from 'lucide-react';
4+
import { Button } from '@/components/ui/button';
5+
import { Link } from 'react-router-dom';
6+
7+
const CookieConsent = () => {
8+
const [showBanner, setShowBanner] = useState(false);
9+
10+
useEffect(() => {
11+
const consent = localStorage.getItem('cookie-consent');
12+
if (!consent) {
13+
// Show banner after a short delay
14+
setTimeout(() => setShowBanner(true), 1000);
15+
}
16+
}, []);
17+
18+
const handleAccept = () => {
19+
localStorage.setItem('cookie-consent', 'accepted');
20+
setShowBanner(false);
21+
};
22+
23+
const handleDecline = () => {
24+
localStorage.setItem('cookie-consent', 'declined');
25+
setShowBanner(false);
26+
};
27+
28+
return (
29+
<AnimatePresence>
30+
{showBanner && (
31+
<motion.div
32+
initial={{ y: 100, opacity: 0 }}
33+
animate={{ y: 0, opacity: 1 }}
34+
exit={{ y: 100, opacity: 0 }}
35+
transition={{ duration: 0.3 }}
36+
className="fixed bottom-0 left-0 right-0 z-50 p-4"
37+
>
38+
<div className="container mx-auto max-w-6xl">
39+
<div className="bg-alien-space-dark/95 backdrop-blur-md border-2 border-alien-gold/30 rounded-xl p-6 shadow-2xl">
40+
<div className="flex flex-col lg:flex-row items-start lg:items-center gap-4">
41+
{/* Icon and Message */}
42+
<div className="flex items-start gap-4 flex-1">
43+
<div className="p-2 bg-alien-gold/20 rounded-lg flex-shrink-0">
44+
<Cookie className="h-6 w-6 text-alien-gold" />
45+
</div>
46+
<div className="flex-1">
47+
<h3 className="text-alien-gold font-bold font-nasalization mb-2">
48+
Cookie Notice
49+
</h3>
50+
<p className="text-gray-200 text-sm font-[Exo] leading-relaxed">
51+
We use cookies to enhance your experience, analyze site traffic, and provide
52+
personalized content. By clicking "Accept", you consent to our use of cookies.{' '}
53+
<Link
54+
to="/privacy-policy"
55+
className="text-alien-gold hover:text-alien-gold-light underline"
56+
onClick={() => setShowBanner(false)}
57+
>
58+
Learn more
59+
</Link>
60+
</p>
61+
</div>
62+
</div>
63+
64+
{/* Action Buttons */}
65+
<div className="flex gap-3 w-full lg:w-auto lg:flex-shrink-0">
66+
<Button
67+
onClick={handleDecline}
68+
variant="outline"
69+
className="flex-1 lg:flex-none border-alien-gold/50 text-alien-gold hover:bg-alien-gold/10 hover:border-alien-gold font-[Exo]"
70+
>
71+
Decline
72+
</Button>
73+
<Button
74+
onClick={handleAccept}
75+
className="flex-1 lg:flex-none bg-alien-gold text-alien-space-dark hover:bg-alien-gold-light font-[Exo] font-semibold"
76+
>
77+
Accept
78+
</Button>
79+
</div>
80+
81+
{/* Close Button */}
82+
<button
83+
onClick={handleDecline}
84+
className="absolute top-3 right-3 lg:relative lg:top-0 lg:right-0 p-1 text-gray-400 hover:text-alien-gold transition-colors"
85+
aria-label="Close"
86+
>
87+
<X className="h-5 w-5" />
88+
</button>
89+
</div>
90+
</div>
91+
</div>
92+
</motion.div>
93+
)}
94+
</AnimatePresence>
95+
);
96+
};
97+
98+
export default CookieConsent;

‎src/components/FeaturesSection.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { motion } from 'framer-motion';
3-
import { Globe, Shield, Users, Box, BarChart4 } from 'lucide-react';
3+
import { Globe, Shield, Users, Box, BarChart4, Zap } from 'lucide-react';
44
const features = [{
55
icon: <Box className="h-10 w-10" />,
66
title: "Cross-Chain Integration",
@@ -10,13 +10,17 @@ const features = [{
1010
title: "Interplanetary Governance",
1111
description: "Participate in decentralized decision-making across planetary boundaries with our advanced DAO structure."
1212
}, {
13-
icon: <Shield className="h-10 w-10" />,
14-
title: "Quantum Security",
15-
description: "Next-generation quantum-resistant cryptography ensures the safety of all transactions and governance actions."
13+
icon: <Zap className="h-10 w-10" />,
14+
title: "Lightning Fast Transactions",
15+
description: "Experience near instant transaction finality with our optimized consensus mechanisms and layer 2 scaling solutions."
1616
}, {
1717
icon: <Users className="h-10 w-10" />,
1818
title: "Multi-Species Collaboration",
1919
description: "Our platform is designed for collaboration between diverse entities, ensuring inclusive participation."
20+
}, {
21+
icon: <Shield className="h-10 w-10" />,
22+
title: "Quantum Security",
23+
description: "Next-generation quantum-resistant cryptography ensures the safety of all transactions and governance actions."
2024
}, {
2125
icon: <BarChart4 className="h-10 w-10" />,
2226
title: "Transparent Analytics",

‎src/components/Footer.tsx‎

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -117,23 +117,21 @@ const Footer = () => {
117117
<div>
118118
<h4 className="text-alien-gold font-nasalization font-bold mb-3 text-base text-glow">Resources</h4>
119119
<ul className="space-y-2 font-[Exo]">
120-
{[{
121-
href: "https://alienflowspace.gitbook.io/DAO",
122-
label: "Documentation"
123-
}, {
124-
href: "https://alienflowspace.gitbook.io/DAO",
125-
label: "Terms of Service"
126-
}, {
127-
href: "https://alienflowspace.gitbook.io/DAO",
128-
label: "Privacy Policy"
129-
}, {
130-
href: "https://alienflowspace.gitbook.io/DAO",
131-
label: "Cookie Policy"
132-
}].map((link, index) => <li key={index}>
133-
<a href={link.href} target="_blank" rel="noopener noreferrer" className="text-sm text-alien-green/80 hover:text-alien-gold transition-all duration-300 hover:translate-x-1 inline-block border-b border-transparent hover:border-alien-gold/30">
134-
{link.label}
135-
</a>
136-
</li>)}
120+
<li>
121+
<a href="https://alienflowspace.gitbook.io/DAO" target="_blank" rel="noopener noreferrer" className="text-sm text-alien-green/80 hover:text-alien-gold transition-all duration-300 hover:translate-x-1 inline-block border-b border-transparent hover:border-alien-gold/30">
122+
Documentation
123+
</a>
124+
</li>
125+
<li>
126+
<a href="https://alienflowspace.gitbook.io/DAO" target="_blank" rel="noopener noreferrer" className="text-sm text-alien-green/80 hover:text-alien-gold transition-all duration-300 hover:translate-x-1 inline-block border-b border-transparent hover:border-alien-gold/30">
127+
Terms of Service
128+
</a>
129+
</li>
130+
<li>
131+
<Link to="/privacy-policy" className="text-sm text-alien-green/80 hover:text-alien-gold transition-all duration-300 hover:translate-x-1 inline-block border-b border-transparent hover:border-alien-gold/30">
132+
Privacy & Cookie Policy
133+
</Link>
134+
</li>
137135
</ul>
138136
</div>
139137
</div>

‎src/components/Header/ConnectButton.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Button } from '@/components/ui/button';
33
import { useAppKit } from '@reown/appkit/react';
44
import { useAppKitAccount } from '@reown/appkit/react';
55
import { useDisconnect } from '@reown/appkit/react';
6+
import { Brain } from 'lucide-react';
67

78
const WALLET_ICON = "/lovable-uploads/AW.png";
89
const PORTAL_ICON_AVIF = "/lovable-uploads/AP1.avif";
@@ -19,6 +20,29 @@ const ConnectButton = () => {
1920

2021
return (
2122
<div className="flex flex-wrap items-center gap-3">
23+
{/* AI Button */}
24+
<a
25+
href="https://aitor.lovable.app/"
26+
target="_blank"
27+
rel="noopener noreferrer"
28+
className="no-underline"
29+
title="AI Assistant"
30+
aria-label="AI Assistant"
31+
tabIndex={-1}
32+
>
33+
<Button
34+
className="
35+
bg-alien-green hover:bg-alien-green-light text-alien-gold rounded-full
36+
flex items-center justify-center p-2 sm:p-3
37+
transition-all duration-200 ease-in-out
38+
hover:shadow-lg hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-alien-gold
39+
"
40+
type="button"
41+
>
42+
<Brain className={ICON_SIZE} />
43+
</Button>
44+
</a>
45+
2246
{isConnected && address ? (
2347
<>
2448
<span

‎src/components/Layout.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ import React, { useEffect } from 'react';
22
import { Outlet, useLocation } from 'react-router-dom';
33
import Header from './Header';
44
import Footer from './Footer';
5+
import CookieConsent from './CookieConsent';
6+
import ScrollToTop from './ScrollToTop';
7+
import AIChatbot from './AIChatbot';
58
import { initGoogleTranslate } from '@/lib/translator';
69

710
const Layout: React.FC = () => {
@@ -47,6 +50,9 @@ const Layout: React.FC = () => {
4750
</main>
4851

4952
<Footer />
53+
<CookieConsent />
54+
<ScrollToTop />
55+
<AIChatbot />
5056
</div>
5157
);
5258
};

‎src/components/ScrollToTop.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React, { useState, useEffect } from 'react';
2+
import { motion, AnimatePresence } from 'framer-motion';
3+
import { ChevronUp } from 'lucide-react';
4+
5+
const ScrollToTop = () => {
6+
const [isVisible, setIsVisible] = useState(false);
7+
8+
useEffect(() => {
9+
const toggleVisibility = () => {
10+
if (window.pageYOffset > 300) {
11+
setIsVisible(true);
12+
} else {
13+
setIsVisible(false);
14+
}
15+
};
16+
17+
window.addEventListener('scroll', toggleVisibility);
18+
19+
return () => window.removeEventListener('scroll', toggleVisibility);
20+
}, []);
21+
22+
const scrollToTop = () => {
23+
window.scrollTo({
24+
top: 0,
25+
behavior: 'smooth',
26+
});
27+
};
28+
29+
return (
30+
<AnimatePresence>
31+
{isVisible && (
32+
<motion.button
33+
initial={{ opacity: 0, scale: 0.5 }}
34+
animate={{ opacity: 1, scale: 1 }}
35+
exit={{ opacity: 0, scale: 0.5 }}
36+
transition={{ duration: 0.2 }}
37+
onClick={scrollToTop}
38+
className="fixed bottom-8 right-8 z-40 p-3 bg-alien-gold/20 backdrop-blur-md border-2 border-alien-gold/50 rounded-full text-alien-gold hover:bg-alien-gold hover:text-alien-space-dark transition-all duration-300 hover:scale-110 shadow-lg hover:shadow-alien-gold/50"
39+
aria-label="Scroll to top"
40+
>
41+
<ChevronUp className="h-6 w-6" />
42+
</motion.button>
43+
)}
44+
</AnimatePresence>
45+
);
46+
};
47+
48+
export default ScrollToTop;

0 commit comments

Comments
 (0)