Skip to content

Commit fec00ea

Browse files
Thanus-KumaarThanus-Kumaar
committed
EvoLearn Ecosystem pages
1 parent 299ce8d commit fec00ea

File tree

4 files changed

+254
-171
lines changed

4 files changed

+254
-171
lines changed

‎app/bin/page.js‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -78,13 +78,12 @@ export default function Results() {
7878

7979
return (
8080
<main className="flex flex-col font-[family-name:var(--font-geist-mono)] p-8">
81-
<div className="text-center mb-8">
82-
<h1 className="text-3xl sm:text-4xl font-bold text-gray-800">
83-
Evolve OnClick
84-
</h1>
85-
<p className="text-gray-600">
86-
Run and Visualize algorithms with just a click.
87-
</p>
81+
<div className="flex flex-col items-center mb-8">
82+
<div className="flex items-center gap-3 mb-2">
83+
<div className="w-10 h-10 bg-gray-900 rounded-xl flex items-center justify-center text-white font-black text-xl shadow-lg rotate-3">E</div>
84+
<h1 className="text-4xl font-black text-gray-900 tracking-tighter uppercase italic">EvoLearn</h1>
85+
</div>
86+
<p className="text-[8px] font-bold text-gray-400 uppercase tracking-[0.3em] ml-10">The Evolutionary Ecosystem</p>
8887
</div>
8988

9089
{userData.fullName && (
@@ -108,13 +107,13 @@ export default function Results() {
108107

109108
<div className="flex flex-row gap-4 mt-4 mb-8 ml-auto mr-auto">
110109
<Link
111-
href="/create"
110+
href="/"
112111
className="rounded-full border border-solid border-black/[.08] transition-colors flex items-center justify-center bg-background text-foreground hover:bg-[#000000] hover:text-background text-sm sm:text-base px-4 py-2 mt-8"
113112
>
114113
← Go Back
115114
</Link>
116115
<Link
117-
href="/create"
116+
href="/"
118117
className="rounded-full border border-solid border-black/[.08] transition-colors flex items-center justify-center bg-background text-foreground hover:bg-[#000000] hover:text-background text-sm sm:text-base px-4 py-2 mt-8"
119118
>
120119
{"Create ->"}

‎app/create/custom-ea/page.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -175,11 +175,12 @@ export default function CustomEA() {
175175
<Loader type={"full"} message={"Creating Problem Statement..."} />
176176
) : (
177177
<main className="flex flex-col justify-center items-center justify-items-center min-h-screen font-[family-name:var(--font-geist-mono)] p-8">
178-
<div className="text-center">
179-
<h1 className="text-3xl sm:text-4xl font-bold">
180-
Evolve OnClick
181-
</h1>
182-
<p>Run and Visualize algorithms with just a click.</p>
178+
<div className="flex flex-col items-center mb-8">
179+
<div className="flex items-center gap-3 mb-2">
180+
<div className="w-10 h-10 bg-gray-900 rounded-xl flex items-center justify-center text-white font-black text-xl shadow-lg rotate-3">E</div>
181+
<h1 className="text-4xl font-black text-gray-900 tracking-tighter uppercase italic">EvoLab</h1>
182+
</div>
183+
<p className="text-[8px] font-bold text-gray-400 uppercase tracking-[0.3em] ml-10">The Evolutionary Ecosystem</p>
183184
</div>
184185

185186
{userData.fullName && (
@@ -203,7 +204,7 @@ export default function CustomEA() {
203204

204205
<div className="flex flex-row gap-4">
205206
<Link
206-
href="/create"
207+
href="/"
207208
className="rounded-full border border-solid border-black/[.08] transition-colors flex items-center justify-center bg-background text-foreground hover:bg-[#000000] hover:text-background text-sm sm:text-base px-4 py-2 mt-8"
208209
>
209210
← Go Back

‎app/create/page.js‎

Lines changed: 60 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use client";
22

3-
import { LogOut } from "lucide-react";
3+
import { LogOut, ArrowLeft } from "lucide-react";
44
import Image from "next/image";
55
import Link from "next/link";
66
import { useEffect, useState } from "react";
@@ -22,9 +22,17 @@ export default function ChooseGpOrNotGp() {
2222
}
2323
}, []);
2424

25+
const eaTypes = [
26+
{ href: "/create/non-gp", emoji: "🚀", title: "Evolutionary Algorithm", desc: "DE & Non-GP Approach", color: "from-green-50 to-green-100" },
27+
{ href: "/create/gp", emoji: "🧬", title: "Genetic Programming", desc: "Evolve Programs", color: "from-blue-50 to-blue-100" },
28+
{ href: "/create/pso", emoji: "🕊️", title: "Particle Swarm", desc: "Swarm Intelligence", color: "from-purple-50 to-purple-100" },
29+
{ href: "/create/bo", emoji: "🔍", title: "Bayesian Optimization", desc: "Guided Exploration", color: "from-rose-50 to-rose-100"},
30+
{ href: "/create/ml", emoji: "🤖", title: "ML Model Tuning", desc: "Fine-tune ML models with EA", color: "from-yellow-50 to-yellow-100" },
31+
];
32+
2533
return (
2634
<main className="flex flex-col items-center min-h-screen p-4 bg-gradient-to-br from-gray-50 to-gray-100 font-[family-name:var(--font-geist-mono)]">
27-
<header className="flex flex-col w-full justify-center items-center p-4">
35+
<header className="flex flex-col w-full justify-center items-center p-8">
2836
<div className="flex items-center space-x-2 h-32">
2937
<Image
3038
src="/LOGO.png"
@@ -34,107 +42,65 @@ export default function ChooseGpOrNotGp() {
3442
className="rounded-md"
3543
/>
3644
</div>
37-
{userData.fullName && (
38-
<div className="mt-4 flex flex-row gap-2 bg-gray-900 rounded-full px-4 text-[#6eff39] items-center border border-gray-700 shadow-sm">
39-
<div className="py-2">
40-
<p className="text-xs">
41-
{userData.fullName} {"</>"} @{userData.userName}
42-
</p>
43-
</div>
44-
<button
45-
onClick={() => {
46-
localStorage.clear();
47-
window.location.href = "/auth";
48-
}}
49-
className="text-[#ff2e2e] font-semibold border-l border-gray-600 pl-3 py-2 flex flex-row justify-center items-center hover:opacity-80 transition-opacity"
50-
>
51-
<LogOut className="mx-1" size={16} />
52-
</button>
53-
</div>
54-
)}
55-
</header>
56-
57-
<div className="container mx-auto px-4 py-8 space-y-12">
5845

59-
<section>
60-
<div className="mb-6">
61-
<h2 className="text-2xl font-bold text-gray-800 border-l-4 border-green-500 pl-3">Learn</h2>
62-
<div className="mt-2">
63-
<h1 className="text-lg font-bold text-gray-800">Unleash the Power of Evolution</h1>
64-
<p className="text-sm text-gray-500">Explore different evolutionary algorithms to optimize your solutions.</p>
65-
</div>
66-
</div>
67-
<div className="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-5 gap-4">
68-
{[
69-
{ href: "/create/non-gp", emoji: "🚀", title: "Evolutionary Algorithm", desc: "DE & Non-GP Approach", color: "from-green-50 to-green-100" },
70-
{ href: "/create/gp", emoji: "🧬", title: "Genetic Programming", desc: "Evolve Programs", color: "from-blue-50 to-blue-100" },
71-
{ href: "/create/pso", emoji: "🕊️", title: "Particle Swarm", desc: "Swarm Intelligence", color: "from-purple-50 to-purple-100" },
72-
{ href: "/create/bo", emoji: "🔍", title: "Bayesian Optimization", desc: "Guided Exploration", color: "from-rose-50 to-rose-100"},
73-
{ href: "/create/ml", emoji: "🤖", title: "ML Model Tuning", desc: "Fine-tune ML models with EA", color: "from-yellow-50 to-yellow-100" },
74-
].map((item, idx) => (
75-
<Link key={idx} href={item.href} className="block group">
76-
<div className={`bg-gradient-to-br h-full rounded-xl p-6 flex flex-col items-center justify-center shadow-sm hover:shadow-md transition-all border border-gray-100 group-hover:-translate-y-1 ${item.color}`}>
77-
<div className="text-4xl mb-3">{item.emoji}</div>
78-
<div className="font-bold text-md text-center text-gray-700">{item.title}</div>
79-
<div className="text-xs text-gray-500 text-center mt-1">{item.desc}</div>
80-
</div>
81-
</Link>
82-
))}
83-
</div>
84-
</section>
46+
<div className="flex items-center gap-4">
47+
<Link
48+
href="/"
49+
className="flex items-center gap-2 px-4 py-2 bg-white text-gray-700 rounded-full text-xs font-bold border border-gray-200 hover:bg-gray-50 transition-all shadow-sm"
50+
>
51+
<ArrowLeft size={14} />
52+
Back to Workspace
53+
</Link>
8554

86-
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
87-
<section>
88-
<div className="mb-6">
89-
<h2 className="text-2xl font-bold text-gray-800 border-l-4 border-teal-500 pl-3">Build</h2>
90-
<div className="mt-2">
91-
<h3 className="text-lg font-bold text-gray-800">Build Your Own</h3>
92-
<p className="text-sm text-gray-500">Dive into advanced customization with a blank notebook.</p>
55+
{userData.fullName && (
56+
<div className="flex flex-row gap-2 bg-gray-900 rounded-full px-4 text-[#6eff39] items-center border border-gray-700 shadow-sm">
57+
<div className="py-2">
58+
<p className="text-xs">
59+
{userData.fullName} {"</>"} @{userData.userName}
60+
</p>
9361
</div>
94-
</div>
95-
<div className="bg-gradient-to-br from-teal-50 to-teal-100 rounded-xl p-6 flex flex-col items-center justify-center shadow-sm border border-teal-200 h-full">
96-
<div className="text-4xl mb-3">🎨</div>
97-
<div className="font-bold text-md text-center text-gray-700">Custom Notebook Development</div>
98-
<div className="text-xs text-gray-500 text-center mt-1 mb-4">Start with a blank slate for advanced problem-solving</div>
99-
<Link
100-
href="/create/custom-ea"
101-
className="bg-teal-600 hover:bg-teal-700 text-white px-6 py-2 rounded-full text-sm font-semibold transition-colors shadow-sm"
62+
<button
63+
onClick={() => {
64+
localStorage.clear();
65+
window.location.href = "/auth";
66+
}}
67+
className="text-[#ff2e2e] font-semibold border-l border-gray-600 pl-3 py-2 flex flex-row justify-center items-center hover:opacity-80 transition-opacity"
10268
>
103-
Create Notebook
104-
</Link>
69+
<LogOut className="mx-1" size={16} />
70+
</button>
10571
</div>
106-
</section>
107-
<section>
108-
<div className="mb-6">
109-
<h2 className="text-2xl font-bold text-gray-800 border-l-4 border-indigo-500 pl-3">Visualize</h2>
110-
<div className="mt-2">
111-
<h3 className="text-lg font-bold text-gray-800">Visualise Engine</h3>
112-
<p className="text-sm text-gray-500">Explore and visualize evolutionary algorithm behaviors.</p>
72+
)}
73+
</div>
74+
</header>
75+
76+
<div className="container mx-auto px-4 py-12 max-w-6xl">
77+
<div className="mb-12 text-center">
78+
<h2 className="text-3xl font-black text-gray-800 uppercase tracking-tighter mb-2">EvoC Engine</h2>
79+
<p className="text-gray-500">Select an evolutionary paradigm to begin your optimization journey.</p>
80+
</div>
81+
82+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-6">
83+
{eaTypes.map((item, idx) => (
84+
<Link key={idx} href={item.href} className="block group">
85+
<div className={`bg-gradient-to-br h-full rounded-2xl p-8 flex flex-col items-center justify-center shadow-sm hover:shadow-xl transition-all border border-gray-100 group-hover:-translate-y-2 ${item.color}`}>
86+
<div className="text-5xl mb-6 transform group-hover:scale-110 transition-transform">{item.emoji}</div>
87+
<div className="font-black text-lg text-center text-gray-800 leading-tight mb-2 uppercase tracking-tighter">{item.title}</div>
88+
<div className="text-[10px] font-bold text-gray-500 text-center uppercase tracking-widest">{item.desc}</div>
11389
</div>
114-
</div>
115-
<div className="bg-gradient-to-br from-indigo-50 to-indigo-100 rounded-xl p-6 flex flex-col items-center justify-center shadow-sm border border-indigo-200 h-full">
116-
<div className="text-4xl mb-3">📊</div>
117-
<div className="font-bold text-md text-center text-gray-700">EvoViz Analytics</div>
118-
<div className="text-xs text-gray-500 text-center mt-1 mb-4">Interactive dashboard for population analytics</div>
119-
<a
120-
href="https://evolutionary-algorithms-on-click.github.io/EvoViz/"
121-
target="_blank"
122-
rel="noopener noreferrer"
123-
className="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-full text-sm font-semibold transition-colors shadow-sm"
124-
>
125-
Launch EvoViz
126-
</a>
127-
</div>
128-
</section>
90+
</Link>
91+
))}
92+
</div>
93+
94+
<div className="mt-20 p-8 bg-white/50 border border-dashed border-gray-300 rounded-3xl text-center">
95+
<p className="text-gray-400 text-sm italic">
96+
Looking for the custom experimentation area? Head back to the <Link href="/" className="text-orange-500 font-bold hover:underline">Workspace</Link> and select EvoLab.
97+
</p>
12998
</div>
13099
</div>
131100

132-
<footer className="flex justify-center space-x-4 p-12 w-full mt-auto">
133-
<Link href="/" className="bg-white hover:bg-gray-100 text-gray-600 rounded-full px-6 py-2 text-sm transition-colors border border-gray-200 shadow-sm">
134-
← Home
135-
</Link>
136-
<Link href="/bin" className="bg-white hover:bg-gray-100 text-gray-600 rounded-full px-6 py-2 text-sm transition-colors border border-gray-200 shadow-sm">
137-
Previous Runs →
101+
<footer className="mt-auto py-8">
102+
<Link href="/bin" className="bg-white hover:bg-gray-100 text-gray-600 rounded-full px-6 py-2 text-sm font-bold transition-all border border-gray-200 shadow-sm">
103+
View Previous Runs →
138104
</Link>
139105
</footer>
140106
</main>

0 commit comments

Comments
 (0)