Merge pull request #81 from TheVijayVignesh/main

feat: Integrate EvOC Research Paper into Website and README

Author: Ashrockzzz2003

README.md

@@ -29,3 +29,27 @@ npm run dev
 ```bash
 npm run build && npm run start
 ```
+
+## Citation
+
+If you use EvOC in your research, please cite:
+
+```bibtex
+@inproceedings{10.1145/3712255.3726652,
+  author = {Murali, Ritwik and Sivamani, Ashwin Narayanan and Ramakrishnan, Abhinav and Arul, Hariharan and R, Ananya},
+  title = {Evolve On Click (EvOC) - An Intuitive Web Platform to Collaboratively Implement, Execute, and Visualize Evolutionary Algorithms},
+  year = {2025},
+  isbn = {9798400714641},
+  publisher = {Association for Computing Machinery},
+  address = {New York, NY, USA},
+  url = {https://doi.org/10.1145/3712255.3726652},
+  doi = {10.1145/3712255.3726652},
+  abstract = {This paper proposes "Evolve On Click" (EvOC) - an open-source intuitive web-based platform to simplify the implementation, execution, and visualization of Evolutionary Algorithms (EAs) including genetic programming, by providing a user-friendly interface. This facilitates easier accessibility of evolutionary algorithm software packages such as DEAP, to users with minimal programming experience. EvOC guides users through the EA design process, allowing them to experiment with different algorithms, parameters, and configurations without the need for programming expertise. The platform also incorporates features to show code created based on the configuration so that users can also learn from it, thus enhancing collaboration and enabling users to easily share their results with others. The architecture used by EvOC also supports ease of access for parallel and distributed EAs with real-time log streaming / monitoring and visualization of the evolution runs. By incorporating the latest DevOps techniques during the development process, EvOC does not require extensive maintenance and allows for the platform to be run as a service, supporting multiple users on a single instance. This paper details the design, implementation, and evaluation of EvOC towards increasing accessibility and ease of comfort with EAs for novice learners - thus broadening the reach of the community.},
+  booktitle = {Proceedings of the Genetic and Evolutionary Computation Conference Companion},
+  pages = {147–150},
+  numpages = {4},
+  keywords = {evolutionary algorithms, distributed artificial intelligence, distributed evolutionary algorithms in python, DEAP, software architectures, evolutionary computation},
+  location = {NH Malaga Hotel, Malaga, Spain},
+  series = {GECCO '25 Companion}
+}
+```

app/page.js

@@ -4,48 +4,70 @@ import Link from "next/link";
 
 export default function Home() {
     return (
-        <div className="min-h-screen flex flex-col items-center justify-between p-8 sm:p-20 bg-background font-[family-name:var(--font-geist-mono)]">
-            <main className="flex flex-col items-center gap-6 flex-grow justify-center">
-                <div className="flex items-center justify-center overflow-hidden h-40">
-                    <Image
-                        src="/LOGO.png"
-                        alt="EVOLVE OnClick logo"
-                        height={360}
-                        width={720}
-                    />
+        <div className="min-h-screen flex flex-col items-center p-8 sm:p-20 bg-background font-[family-name:var(--font-geist-mono)]">
+            <main className="flex flex-col items-center flex-grow w-full max-w-3xl">
+                <div className="flex flex-col items-center justify-center flex-1 w-full">
+                    <div className="flex items-center justify-center overflow-hidden h-40 mb-8">
+                        <Image
+                            src="/LOGO.png"
+                            alt="EVOLVE OnClick logo"
+                            height={360}
+                            width={720}
+                            priority
+                        />
+                    </div>
+
+                    <div className="flex flex-col sm:flex-row gap-4 items-center font-bold w-full max-w-md">
+                        <Link
+                            className="rounded-full border border-solid border-black transition-colors flex items-center justify-center bg-background text-foreground gap-2 hover:bg-gray-100 text-sm sm:text-base p-4 w-full h-12"
+                            href="/auth"
+                        >
+                            <Pickaxe size={24} />
+                            Get Started
+                        </Link>
+                        <Link
+                            className="rounded-full transition-colors flex items-center justify-center bg-yellow-400 text-black hover:bg-yellow-50 text-sm sm:text-base h-12 p-4 w-full border border-black gap-2"
+                            href="https://evolutionary-algorithms-on-click.github.io/user_docs/"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            <BookUp2 size={24} />
+                            Read our docs
+                        </Link>
+                    </div>
                 </div>
 
-                <div className="flex flex-col sm:flex-row gap-4 items-center font-bold">
-                    <Link
-                        className="rounded-full border border-solid border-black transition-colors flex items-center justify-center bg-background text-foreground gap-2 hover:bg-gray-100 text-sm sm:text-base p-4 w-full md:w-fit h-12"
-                        href="/auth"
-                    >
-                        <Pickaxe size={24} />
-                        Get Started
-                    </Link>
-                    <Link
-                        className="rounded-full transition-colors flex items-center justify-center bg-yellow-400 text-black hover:bg-yellow-50 text-sm sm:text-base h-12 p-4 w-full md:w-fit border border-black gap-2"
-                        href="https://evolutionary-algorithms-on-click.github.io/user_docs/"
-                        target="_blank"
-                    >
-                        <BookUp2 size={24} />
-                        Read our docs
-                    </Link>
+                <div className="mt-auto pt-12 w-full max-w-md">
+                    <div className="rounded-xl border border-black/20 bg-background p-4 sm:p-5 text-center">
+                        <p className="text-foreground/70 text-xs sm:text-sm mb-3">
+                            Explore the foundational research behind EvOC's
+                            innovative approach.
+                        </p>
+                        <a
+                            className="text-foreground text-xs sm:text-sm underline underline-offset-4 hover:text-yellow-400"
+                            href="https://dl.acm.org/doi/10.1145/3712255.3726652"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            Read the Research Paper
+                        </a>
+                    </div>
                 </div>
             </main>
-            <footer className="flex gap-6 flex-wrap items-center justify-center py-4">
+
+            <footer className="mt-12 flex items-center justify-center py-4 w-full">
                 <Link
-                    className="flex items-center gap-2 hover:underline hover:underline-offset-4 text-foreground"
+                    className="flex items-center gap-2 text-sm text-foreground hover:underline hover:underline-offset-4"
                     href="https://github.com/orgs/Evolutionary-Algorithms-On-Click/repositories"
                     target="_blank"
                     rel="noopener noreferrer"
                 >
                     <Image
                         aria-hidden
                         src="/org.jpg"
-                        alt="Globe icon"
-                        width={30}
-                        height={30}
+                        alt="Organization logo"
+                        width={24}
+                        height={24}
                         className="rounded-full"
                     />
                     Source Code →