Skip to content

Commit 5d6c685

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Move Bitcoin price ticker to CoNetWorKing page
The Bitcoin price ticker was moved from the home page to the CoNetWorKing page for better UX/UI and page optimization.
1 parent b5f400e commit 5d6c685

File tree

2 files changed

+142
-162
lines changed

2 files changed

+142
-162
lines changed

‎src/components/FinancialFreedomSection.tsx‎

Lines changed: 71 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,9 @@
1-
import React, { useEffect } from 'react';
1+
2+
import React from 'react';
23
import { motion } from 'framer-motion';
34
import { Bitcoin, TrendingUp, Shield, Coins, Zap } from 'lucide-react';
5+
46
const FinancialFreedomSection = () => {
5-
useEffect(() => {
6-
// Load CoinMarketCap widget script
7-
const script = document.createElement('script');
8-
script.type = 'text/javascript';
9-
script.src = 'https://files.coinmarketcap.com/static/widget/currency.js';
10-
script.async = true;
11-
document.head.appendChild(script);
12-
return () => {
13-
if (document.head.contains(script)) {
14-
document.head.removeChild(script);
15-
}
16-
};
17-
}, []);
187
const benefits = [{
198
icon: TrendingUp,
209
title: "Scalable Growth",
@@ -32,23 +21,21 @@ const FinancialFreedomSection = () => {
3221
title: "Digital Assets",
3322
description: "NFTs & tokens"
3423
}];
35-
return <section className="py-20 relative overflow-hidden">
24+
25+
return (
26+
<section className="py-20 relative overflow-hidden">
3627
{/* Background gradient effect */}
3728
<div className="absolute inset-0 bg-gradient-radial from-alien-green/5 via-transparent to-transparent" />
3829

3930
<div className="container mx-auto px-4 relative z-10">
4031
{/* Header Section - Two Line Title */}
41-
<motion.div initial={{
42-
opacity: 0,
43-
y: 30
44-
}} whileInView={{
45-
opacity: 1,
46-
y: 0
47-
}} transition={{
48-
duration: 0.8
49-
}} viewport={{
50-
once: true
51-
}} className="text-center mb-16">
32+
<motion.div
33+
initial={{ opacity: 0, y: 30 }}
34+
whileInView={{ opacity: 1, y: 0 }}
35+
transition={{ duration: 0.8 }}
36+
viewport={{ once: true }}
37+
className="text-center mb-16"
38+
>
5239
<div className="space-y-4">
5340
<h2 className="text-5xl md:text-6xl text-alien-gold font-nasalization tracking-wider font-bold">
5441
₿£€$$
@@ -61,18 +48,13 @@ const FinancialFreedomSection = () => {
6148

6249
{/* Main Content - Centered Layout */}
6350
<div className="max-w-4xl mx-auto mb-16">
64-
<motion.div initial={{
65-
opacity: 0,
66-
y: 30
67-
}} whileInView={{
68-
opacity: 1,
69-
y: 0
70-
}} transition={{
71-
duration: 0.8,
72-
delay: 0.3
73-
}} viewport={{
74-
once: true
75-
}} className="card-border p-8 backdrop-blur-md text-center">
51+
<motion.div
52+
initial={{ opacity: 0, y: 30 }}
53+
whileInView={{ opacity: 1, y: 0 }}
54+
transition={{ duration: 0.8, delay: 0.3 }}
55+
viewport={{ once: true }}
56+
className="card-border p-8 backdrop-blur-md text-center"
57+
>
7658
<p className="text-xl text-gray-300 font-[Exo] leading-relaxed mb-8 text-center">
7759
Any individual or professional can understand the advantage of digital Money:
7860
</p>
@@ -106,131 +88,87 @@ const FinancialFreedomSection = () => {
10688
</div>
10789

10890
{/* Benefits Grid - Smaller and Complementary */}
109-
<motion.div initial={{
110-
opacity: 0,
111-
y: 30
112-
}} whileInView={{
113-
opacity: 1,
114-
y: 0
115-
}} transition={{
116-
duration: 0.8,
117-
delay: 0.4
118-
}} viewport={{
119-
once: true
120-
}} className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-16 max-w-4xl mx-auto">
121-
{benefits.map((benefit, index) => <motion.div key={index} initial={{
122-
opacity: 0,
123-
y: 20
124-
}} whileInView={{
125-
opacity: 1,
126-
y: 0
127-
}} transition={{
128-
duration: 0.5,
129-
delay: 0.1 * index
130-
}} viewport={{
131-
once: true
132-
}} className="card-border p-4 text-center hover:scale-105 transition-transform duration-300">
91+
<motion.div
92+
initial={{ opacity: 0, y: 30 }}
93+
whileInView={{ opacity: 1, y: 0 }}
94+
transition={{ duration: 0.8, delay: 0.4 }}
95+
viewport={{ once: true }}
96+
className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-16 max-w-4xl mx-auto"
97+
>
98+
{benefits.map((benefit, index) => (
99+
<motion.div
100+
key={index}
101+
initial={{ opacity: 0, y: 20 }}
102+
whileInView={{ opacity: 1, y: 0 }}
103+
transition={{ duration: 0.5, delay: 0.1 * index }}
104+
viewport={{ once: true }}
105+
className="card-border p-4 text-center hover:scale-105 transition-transform duration-300"
106+
>
133107
<benefit.icon className="h-6 w-6 text-alien-gold mx-auto mb-2" />
134108
<h5 className="font-bold text-xs text-alien-green font-nasalization mb-1">
135109
{benefit.title}
136110
</h5>
137111
<p className="text-xs text-gray-400 font-[Exo]">
138112
{benefit.description}
139113
</p>
140-
</motion.div>)}
114+
</motion.div>
115+
))}
141116
</motion.div>
142117

143-
{/* ABTC Token Highlight */}
144-
<motion.div initial={{
145-
opacity: 0,
146-
scale: 0.9
147-
}} whileInView={{
148-
opacity: 1,
149-
scale: 1
150-
}} transition={{
151-
duration: 0.8,
152-
delay: 0.5
153-
}} viewport={{
154-
once: true
155-
}} className="card-border p-8 max-w-6xl mx-auto text-center relative overflow-hidden mb-12">
118+
{/* ABTC Token Highlight - Simplified without widget */}
119+
<motion.div
120+
initial={{ opacity: 0, scale: 0.9 }}
121+
whileInView={{ opacity: 1, scale: 1 }}
122+
transition={{ duration: 0.8, delay: 0.5 }}
123+
viewport={{ once: true }}
124+
className="card-border p-8 max-w-6xl mx-auto text-center relative overflow-hidden"
125+
>
156126
{/* Background decorative elements */}
157127
<div className="absolute inset-0 bg-gradient-to-br from-alien-gold/5 via-transparent to-alien-green/5" />
158128
<div className="absolute top-0 left-0 w-32 h-32 bg-alien-gold/10 rounded-full blur-3xl" />
159129
<div className="absolute bottom-0 right-0 w-32 h-32 bg-alien-green/10 rounded-full blur-3xl" />
160130

161131
<div className="relative z-10">
162-
<motion.h3 initial={{
163-
opacity: 0,
164-
y: 20
165-
}} whileInView={{
166-
opacity: 1,
167-
y: 0
168-
}} transition={{
169-
duration: 0.6,
170-
delay: 0.6
171-
}} viewport={{
172-
once: true
173-
}} className="text-3xl md:text-4xl font-bold mb-4 text-alien-gold font-nasalization">
132+
<motion.h3
133+
initial={{ opacity: 0, y: 20 }}
134+
whileInView={{ opacity: 1, y: 0 }}
135+
transition={{ duration: 0.6, delay: 0.6 }}
136+
viewport={{ once: true }}
137+
className="text-3xl md:text-4xl font-bold mb-4 text-alien-gold font-nasalization"
138+
>
174139
A₿tc <span className="text-sm text-[#03ff19]">(Aurum nostrum non est aurum vulgi)</span>
175140
</motion.h3>
176141

177-
<motion.p initial={{
178-
opacity: 0,
179-
y: 20
180-
}} whileInView={{
181-
opacity: 1,
182-
y: 0
183-
}} transition={{
184-
duration: 0.6,
185-
delay: 0.7
186-
}} viewport={{
187-
once: true
188-
}} className="text-lg text-gray-300 mb-6 font-[Exo] max-w-3xl mx-auto">
142+
<motion.p
143+
initial={{ opacity: 0, y: 20 }}
144+
whileInView={{ opacity: 1, y: 0 }}
145+
transition={{ duration: 0.6, delay: 0.7 }}
146+
viewport={{ once: true }}
147+
className="text-lg text-gray-300 mb-6 font-[Exo] max-w-3xl mx-auto"
148+
>
189149
Aurum ₿itoin cryptoken serves as collateral and derivative of Bitcoin and gold,
190150
providing <span className="text-alien-green font-semibold">scalability</span>,
191151
<span className="text-alien-gold font-semibold"> stability</span> and
192152
<span className="text-alien-green font-semibold"> growth potential (Φπ)</span>...
193153
</motion.p>
194154

195-
<motion.div initial={{
196-
opacity: 0,
197-
scale: 0.9
198-
}} whileInView={{
199-
opacity: 1,
200-
scale: 1
201-
}} transition={{
202-
duration: 0.6,
203-
delay: 0.8
204-
}} viewport={{
205-
once: true
206-
}} className="inline-flex items-center gap-3 bg-gradient-to-r from-alien-space-dark to-alien-space px-6 py-3 rounded-full border border-alien-green/30 mb-8">
155+
<motion.div
156+
initial={{ opacity: 0, scale: 0.9 }}
157+
whileInView={{ opacity: 1, scale: 1 }}
158+
transition={{ duration: 0.6, delay: 0.8 }}
159+
viewport={{ once: true }}
160+
className="inline-flex items-center gap-3 bg-gradient-to-r from-alien-space-dark to-alien-space px-6 py-3 rounded-full border border-alien-green/30"
161+
>
207162
<Bitcoin className="h-5 w-5 text-alien-gold" />
208163
<span className="text-alien-green font-semibold font-[Exo]">Bitcoin-backed</span>
209164
<span className="text-gray-400">•</span>
210165
<span className="text-alien-gold font-semibold font-[Exo]">Interoperable</span>
211166
</motion.div>
212-
213-
{/* CoinMarketCap Widget */}
214-
<motion.div initial={{
215-
opacity: 0,
216-
y: 20
217-
}} whileInView={{
218-
opacity: 1,
219-
y: 0
220-
}} transition={{
221-
duration: 0.6,
222-
delay: 0.9
223-
}} viewport={{
224-
once: true
225-
}} className="max-w-2xl mx-auto">
226-
<div className="bg-alien-space-dark/50 rounded-lg border border-alien-gold/20 p-6">
227-
<h4 className="text-lg font-bold text-alien-gold font-nasalization mb-4 text-center">Bitcoin Price</h4>
228-
<div className="coinmarketcap-currency-widget" data-currencyid="1" data-base="USD" data-secondary="BTC" data-ticker="true" data-rank="true" data-marketcap="true" data-volume="true" data-statsticker="true" data-stats="USD"></div>
229-
</div>
230-
</motion.div>
231167
</div>
232168
</motion.div>
233169
</div>
234-
</section>;
170+
</section>
171+
);
235172
};
236-
export default FinancialFreedomSection;
173+
174+
export default FinancialFreedomSection;

‎src/pages/CoNetWorKing.tsx‎

Lines changed: 71 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useEffect } from 'react';
22
import StarBackground from '@/components/StarBackground';
33
import { Network, TrendingUp, Shield, Coins, Sprout, Pickaxe, Layers, Dna, FlaskConical, Gamepad2, Database, Zap, Leaf, Building, Users, Landmark, Globe } from 'lucide-react';
44
import { Button } from '@/components/ui/button';
@@ -29,6 +29,21 @@ const ServiceCard = ({ service }: { service: ServiceProps }) => (
2929
);
3030

3131
const CoNetWorKing: React.FC = () => {
32+
useEffect(() => {
33+
// Load CoinMarketCap widget script
34+
const script = document.createElement('script');
35+
script.type = 'text/javascript';
36+
script.src = 'https://files.coinmarketcap.com/static/widget/currency.js';
37+
script.async = true;
38+
document.head.appendChild(script);
39+
40+
return () => {
41+
if (document.head.contains(script)) {
42+
document.head.removeChild(script);
43+
}
44+
};
45+
}, []);
46+
3247
const services: ServiceProps[] = [
3348
{
3449
title: "AMM (Automated Market Maker)",
@@ -229,6 +244,61 @@ const CoNetWorKing: React.FC = () => {
229244
</div>
230245
</div>
231246

247+
{/* Real-time Network Stats with Bitcoin Widget */}
248+
<div className="mb-20">
249+
<h2 className="text-3xl font-bold text-alien-gold mb-12 text-center font-[Atomic Age]">
250+
Live Network & Market Data
251+
</h2>
252+
253+
{/* Bitcoin Price Widget */}
254+
<div className="mb-12 max-w-4xl mx-auto">
255+
<Card className="bg-alien-space-dark/70 backdrop-blur-md border border-alien-gold/30">
256+
<CardHeader className="text-center pb-4">
257+
<CardTitle className="text-alien-gold font-[Atomic Age] text-2xl flex items-center justify-center gap-3">
258+
<Coins className="h-8 w-8" />
259+
Bitcoin Real-Time Price
260+
</CardTitle>
261+
</CardHeader>
262+
<CardContent className="p-6">
263+
<div className="coinmarketcap-currency-widget"
264+
data-currencyid="1"
265+
data-base="USD"
266+
data-secondary="BTC"
267+
data-ticker="true"
268+
data-rank="true"
269+
data-marketcap="true"
270+
data-volume="true"
271+
data-statsticker="true"
272+
data-stats="USD">
273+
</div>
274+
</CardContent>
275+
</Card>
276+
</div>
277+
278+
{/* Network Stats Grid */}
279+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
280+
{networkStats.map((stat, index) => {
281+
const IconComponent = stat.icon;
282+
return (
283+
<Card key={index} className="bg-alien-space-dark/70 backdrop-blur-md border border-alien-gold/30 hover:border-alien-gold/60 transition-all duration-300 hover:scale-105">
284+
<CardContent className="p-6 text-center">
285+
<IconComponent className="h-8 w-8 text-alien-green mx-auto mb-4 animate-pulse" />
286+
<div className="text-2xl font-bold text-alien-gold font-[Atomic Age] mb-2">
287+
{stat.value}
288+
</div>
289+
<div className="text-gray-300 font-[Exo] text-sm mb-2">
290+
{stat.label}
291+
</div>
292+
<div className="text-alien-green font-[Exo] text-xs">
293+
{stat.change}
294+
</div>
295+
</CardContent>
296+
</Card>
297+
);
298+
})}
299+
</div>
300+
</div>
301+
232302
{/* Partners Section */}
233303
<div className="mb-20">
234304
<h2 className="text-3xl font-bold text-alien-gold mb-12 text-center font-[Atomic Age]">
@@ -288,34 +358,6 @@ const CoNetWorKing: React.FC = () => {
288358
))}
289359
</div>
290360
</div>
291-
292-
{/* Real-time Network Stats */}
293-
<div className="mb-16">
294-
<h2 className="text-3xl font-bold text-alien-gold mb-12 text-center font-[Atomic Age]">
295-
Live Network Stats
296-
</h2>
297-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
298-
{networkStats.map((stat, index) => {
299-
const IconComponent = stat.icon;
300-
return (
301-
<Card key={index} className="bg-alien-space-dark/70 backdrop-blur-md border border-alien-gold/30 hover:border-alien-gold/60 transition-all duration-300 hover:scale-105">
302-
<CardContent className="p-6 text-center">
303-
<IconComponent className="h-8 w-8 text-alien-green mx-auto mb-4 animate-pulse" />
304-
<div className="text-2xl font-bold text-alien-gold font-[Atomic Age] mb-2">
305-
{stat.value}
306-
</div>
307-
<div className="text-gray-300 font-[Exo] text-sm mb-2">
308-
{stat.label}
309-
</div>
310-
<div className="text-alien-green font-[Exo] text-xs">
311-
{stat.change}
312-
</div>
313-
</CardContent>
314-
</Card>
315-
);
316-
})}
317-
</div>
318-
</div>
319361

320362
{/* CTA Section */}
321363
<div className="bg-gradient-to-r from-alien-green/20 to-alien-gold/20 rounded-xl p-12 text-center backdrop-blur-md border border-alien-gold/30">

0 commit comments

Comments
 (0)