Skip to content

Commit 2100c62

Browse files
vaibhavvvvvvaibhavvvvv
authored
Merge pull request #11 from Abhishekk24/feature
Success UI updates
2 parents 1e740f0 + f68ec15 commit 2100c62

12 files changed

Lines changed: 39 additions & 353 deletions

File tree

‎public/images/Success-1.png‎

343 KB
Loading

‎public/images/Success.png‎

26.2 KB
Loading

‎src/components/Cypherpunk.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ const Cypherpunk = () => {
1010
];
1111
return (
1212
<div className="cypherpunk-container">
13-
<div className="cypherpunk-box">
13+
<div className="cypherpunk-box ">
1414
<h1 className="cypherpunk-title">Cypherpunk Rewards Program</h1>
15-
<p className="cypherpunk-subtitle">
15+
<p className="cypherpunk-subtitle -mt-5">
1616
Empowering Community to Shape the Future
1717
</p>
1818
<div className="cypherpunk-images">
@@ -29,7 +29,7 @@ const Cypherpunk = () => {
2929
)
3030
)}
3131
</div>
32-
<div className="cypherpunk-footer font-bold">
32+
<div className="cypherpunk-footer font-bold py-4">
3333
<h2 className="cypherpunk-cta-text">
3434
CLAIM YOUR ROLE AND EARN REWARDS
3535
</h2>

‎src/components/Cyrene.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const Cyrene = () => {
77
<div className="cyrene-container">
88
<FadeUp>
99
<div className="cyrene-content">
10-
<h1 className="cyrene-title">Meet CyreneAI</h1>
10+
<h1 className="text-6xl text-center text-white mb-12">Meet CyreneAI</h1>
1111
<p className="cyrene-text font-sans">
1212
Multi-Agent Platform and AI Coordination layer on secure VPN network
1313
</p>

‎src/components/Erebrus.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const Erebrus = () => {
66
return (
77
<div className="erebrus-container">
88
<FadeUp>
9-
<h1 className="erebrus-title font-sans">Erebrus Decentralized VPN</h1>
9+
<h1 className="text-6xl text-center text-white mb-12 font-sans">Erebrus Decentralized VPN</h1>
1010
<p className="erebrus-text font-sans">
1111
Private, Secure, and censorship-free internet with <br /> CyreneAI
1212
integration

‎src/components/Subscribe.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ const Subscribe = () => {
2222
</div>
2323
</div>
2424

25-
<div className="community-section">
26-
<h1>Join Our Community. Join the Future.</h1>
25+
<div className="community-section ">
26+
<h1 >Join Our Community. Join the Future.</h1>
2727
<div className="community-buttons">
2828
<a
2929
href="https://discordapp.com/invite/5uaFhNpRF6"

‎src/components/Success-demo.jsx‎

Lines changed: 0 additions & 156 deletions
This file was deleted.

‎src/components/Success.jsx‎

Lines changed: 13 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -1,154 +1,29 @@
1-
import React, { useEffect, useState, useMemo } from "react";
1+
import React from "react";
22
import "../styles/Success.css";
3-
4-
const Achievement = ({ id, position, isVisible, heading, description, pinPosition }) => {
5-
return (
6-
<>
7-
{/* Achievement Text Content */}
8-
<div
9-
id={`achievement-${id}`}
10-
style={{
11-
position: "absolute",
12-
...position, // Position for title and description
13-
opacity: isVisible ? 1 : 0,
14-
transition: "opacity 0.5s ease, transform 0.5s ease",
15-
transform: isVisible ? "translateY(0)" : "translateY(50px)",
16-
backgroundColor: "transparent", // Transparent background
17-
padding: "10px",
18-
borderRadius: "8px",
19-
}}
20-
className="achievement"
21-
>
22-
<h3 style={{ color: "white", marginBottom: "5px" }}>{heading}</h3>
23-
<p style={{ color: "#11D9C5", margin: 0 }}>{description}</p>
24-
</div>
25-
26-
{/* Pin Icon for Each Achievement */}
27-
<img
28-
src="/images/pin-icon.png" // Direct URL for the pin icon
29-
alt="Pin Icon"
30-
style={{
31-
position: "absolute",
32-
...pinPosition, // Custom position for the pin icon
33-
transform: `translate(-50%, -50%) ${
34-
id % 2 === 0 ? "rotate(-180deg)" : ""
35-
}`, // Rotate even IDs by -180 degrees
36-
width: "40px",
37-
height: "120px",
38-
opacity: isVisible ? 1 : 0, // Sync visibility with the achievement
39-
transition: "opacity 0.5s ease",
40-
}}
41-
/>
42-
</>
43-
);
44-
};
3+
import { ZoomIn } from "./FadeAnimations";
454

465
const Success = () => {
47-
const achievements = useMemo(() => [
48-
{
49-
id: 1,
50-
position: { top: "40%", left: "15%" }, // Position for title and description
51-
heading: "Erebrus Launch",
52-
description: "Q2 2024",
53-
pinPosition: { top: "49%", left: "20%" }, // Custom pin position for ID 1
54-
},
55-
{
56-
id: 2,
57-
position: { top: "60%", left: "20%" }, // Position for title and description
58-
heading: "Mobile App peaq integration",
59-
description: "Q3 2024",
60-
pinPosition: { top: "56%", left: "27%" }, // Custom pin position for ID 2
61-
},
62-
{
63-
id: 3,
64-
position: { top: "36%", left: "27%" }, // Position for title and description
65-
heading: "Dwi-Fi Integrations Community Rewards",
66-
description: "Q3 2024",
67-
pinPosition: { top: "48%", left: "35%" }, // Custom pin position for ID 3
68-
},
69-
{
70-
id: 4,
71-
position: { top: "58%", left: "35%" }, // Position for title and description
72-
heading: "Solana Deployment Android Store Listing",
73-
description: "Q4 2024",
74-
pinPosition: { top: "53%", left: "43%" }, // Custom pin position for ID 4
75-
},
76-
{
77-
id: 5,
78-
position: { top: "30%", right: "45%" }, // Position for title and description
79-
heading: "Cypherpunk Rewards Program",
80-
description: "Q4 2024",
81-
pinPosition: { top: "44%", right: "50%" }, // Custom pin position for ID 5
82-
},
83-
{
84-
id: 6,
85-
position: { top: "52%", right: "35%" }, // Position for title and description
86-
heading: "Roaming Firewall Standard Nodes",
87-
description: "Q4 2024",
88-
pinPosition: { top: "47%", right: "40%" }, // Custom pin position for ID 6
89-
},
90-
{
91-
id: 7,
92-
position: { top: "22%", right: "28%" }, // Position for title and description
93-
heading: "CyreneAI AI Agent platform",
94-
description: "Q1 2025",
95-
pinPosition: { top: "35%", right: "35%" }, // Custom pin position for ID 7
96-
},
97-
{
98-
id: 8,
99-
position: { top: "43%", right: "20%" }, // Position for title and description
100-
heading: "NetSepio Token Launch",
101-
description: "Q2 2025",
102-
pinPosition: { top: "37%", right: "27%" }, // Custom pin position for ID 8
103-
},
104-
], []);
105-
106-
const [visibleSteps, setVisibleSteps] = useState([]);
107-
108-
useEffect(() => {
109-
const handleScroll = () => {
110-
const newVisibleSteps = [];
111-
achievements.forEach((achievement) => {
112-
const element = document.getElementById(`achievement-${achievement.id}`);
113-
if (element) {
114-
const rect = element.getBoundingClientRect();
115-
if (rect.top < window.innerHeight && rect.bottom > 0) {
116-
newVisibleSteps.push(achievement.id);
117-
}
118-
}
119-
});
120-
setVisibleSteps(newVisibleSteps);
121-
};
122-
123-
window.addEventListener("scroll", handleScroll);
124-
return () => window.removeEventListener("scroll", handleScroll);
125-
}, [achievements]);
126-
1276
return (
1287
<div
1298
style={{
1309
display: "flex",
13110
justifyContent: "center",
13211
alignItems: "center",
133-
height: "200vh",
134-
backgroundColor: "#040a20",
13512
textAlign: "center",
136-
position: "relative",
13+
paddingBottom: "10rem",
14+
backgroundColor: "#040a20",
15+
backgroundImage: "radial-gradient(900px 500px at 50% 50%, rgba(17, 217, 197, 0.1) 1%, rgba(4, 10, 32, 1) 100%, rgba(4, 10, 32, 0.4) 100%)",
16+
backdropFilter: "blur(400px)",
13717
}}
13818
>
139-
<h1 className="success-title">Road To Success</h1>
140-
<img
141-
src="/images/roadmap-rocket.png"
142-
alt="Road To Success"
143-
style={{ width: "95%", position: "absolute", top: "10%" }}
144-
/>
145-
{achievements.map((achievement) => (
146-
<Achievement
147-
key={achievement.id}
148-
{...achievement}
149-
isVisible={visibleSteps.includes(achievement.id)}
19+
<ZoomIn>
20+
<h1 className="text-6xl text-center text-white mb-12">Road To Success</h1>
21+
<img
22+
src="/images/Success-1.png"
23+
alt="Road To Success"
24+
style={{ width: "100%" }}
15025
/>
151-
))}
26+
</ZoomIn>
15227
</div>
15328
);
15429
};

‎src/components/Technology.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export function Technology() {
66
return (
77
<div className="bg-[#040a20] min-h-screen">
88
<div className="max-w-5xl mx-auto px-8 py-12">
9-
<h1 className="text-5xl text-center text-white mb-12">
9+
<h1 className="text-6xl text-center text-white mb-12">
1010
Cutting-Edge Technology
1111
</h1>
1212
<HoverEffect items={technologies} />

‎src/components/Winner.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const Winners = () => {
66
return (
77
<div className="winners-container">
88
<FadeUp>
9-
<h1 className="winners-title ">Join the Winners!</h1>
9+
<h1 className="text-6xl text-center text-white mb-12 ">Join the Winners!</h1>
1010
<div className="winners-content py-6">
1111
<div className="winners-images">
1212
{[

0 commit comments

Comments
 (0)