cyverse · VictoriaAQuang · Nov 22, 2024 · Nov 25, 2024 · Nov 25, 2024 · Dec 2, 2024
diff --git a/.gitignore → images/.gitignore b/.gitignore → images/.gitignore
diff --git a/images/AIIRA.png b/images/AIIRA.png
diff --git a/images/Allocations.png b/images/Allocations.png
diff --git a/images/Cacao Logo.png b/images/Cacao Logo.png
diff --git a/images/Coalesce.png b/images/Coalesce.png
diff --git a/Cyverse Cacao logo.png → images/Cyverse Cacao logo.png b/Cyverse Cacao logo.png → images/Cyverse Cacao logo.png
diff --git a/images/Cyverse Logo.png b/images/Cyverse Logo.png
diff --git a/images/Jetstream2.png b/images/Jetstream2.png
diff --git a/images/Screenshot 1 image.png b/images/Screenshot 1 image.png
diff --git a/images/Screenshot 2.png b/images/Screenshot 2.png
diff --git a/images/Screenshot 3.png b/images/Screenshot 3.png
diff --git a/images/allocations.png b/images/allocations.png
diff --git a/images/logo2-01.png b/images/logo2-01.png
diff --git a/images/logo2-02.png b/images/logo2-02.png
diff --git a/images/logo2-03.png b/images/logo2-03.png
diff --git a/images/logo2-04.png b/images/logo2-04.png
diff --git a/images/logo2-05.png b/images/logo2-05.png
diff --git a/index.html b/index.html
@@ -1,14 +1,240 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="Simplify and sweeten your cloud analysis with CACAO. Bring your own cloud allocations and manage it all from an attractive, informative dashboard.">
-    <title>CACAO | Unleashing Sweet Cloud Potential</title>
-    <link rel="stylesheet" href="style.css">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description"
+    content="Simplify and sweeten your cloud analysis with CACAO. Bring your own cloud allocations and manage it all from an attractive, informative dashboard.">
+  <title>CACAO | Unleashing Sweet Cloud Potential</title>
+  <link rel="stylesheet" href="style.css">
 </head>
+
 <body>
-  Placeholder
-    <img src="images/cacaoLogo.png" alt="Logo" width="200">
-</body>
-</html>
+  <!-- Navigation Section -->
+  <div class="nav">
+    <div class="cyverse-logo-wrapper">
+      <img class="cyverse-logo" src="images/cyverse_logo_2022.png" alt="CyVerse Logo">
+    </div>
+    <div class="nav-buttons">
+      <a href="https://docs.jetstream-cloud.org/ui/cacao/intro/" target="_blank">
+        <div class="text-wrapper-18">Guide</div>
+      </a>
+      <a href="https://docs.jetstream-cloud.org/ui/cacao/tutorials/" target="_blank">
+        <div class="text-wrapper-18">Tutorial</div>
+      </a>
+    </div>
+  </div>
+  <!-- Heading Section -->
+  <div class="left-col">
+    <div class="div-wrapper">
+      <p class="title">Unlock the Sweet Potential of the Cloud</p>
+    </div>
+    <div class="subtitle">
+      <p class="text-wrapper">Empower users to harness the full potential of multi-cloud environments.</p>
+    </div>
+    <div class="buttons">
+      <a href="#features" class="button">
+        <div class="div">Explore Features</div>
+      </a>
+      <a href="https://cacao.jetstream-cloud.org/" class="button-2" target="_blank" rel="noopener noreferrer">
+        <div class="text-wrapper-2">Launch with Jetstream</div>
+      </a>
+    </div>
+  </div>
+  <div class="right-col">
+    <img class="screenshot" src="images/Cacao Logo.png">
+  </div>
+  </div>
+  <!-- Row-cards Section -->
+  <div class="row-2">
+    <div class="role-card">
+      <div class="card-title">
+        <div class="text-wrapper-3">Scientists</div>
+      </div>
+      <div class="frame"><img class="adobestock" src="images/ScientistIcon.png" /></div>
+    </div>
+    <div class="role-card">
+      <div class="card-title">
+        <div class="text-wrapper-3">Developers</div>
+      </div>
+      <div class="frame-2"><img class="adobestock" src="images/DeveloperIcon.png" /></div>
+    </div>
+    <div class="role-card">
+      <div class="card-title">
+        <div class="text-wrapper-3">Educators</div>
+      </div>
+      <div class="frame-3"><img class="adobestock" src="images/Educator.png" /></div>
+    </div>
+  </div>
+  <!-- About Cacao -->
+  <div class="row-vertical">
+    <div class="question">
+      <div class="text">
+        <div class="div-wrapper">
+          <div class="text-wrapper-4">Why choose CACAO?</div>
+        </div>
+        <div class="div-wrapper">
+          <p class="p">
+            CACAO makes it easier to manage cloud resources by simplifying setup and deployment, so you can get
+            started quickly. This lets you spend more time on your development work and less on managing details.
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="question">
+      <div class="text">
+        <div class="div-wrapper">
+          <div class="text-wrapper-4">What is CACAO?</div>
+        </div>
+        <div class="div-wrapper">
+          <p class="p">
+            CACAO (Cloud-Assisted Collaborative Analysis and Optimization) is an open-source platform that helps
+            scientists, developers, and educators easily deploy and manage cloud resources with customizable
+            templates.
+          </p>
+        </div>
+      </div>
+    </div>
+    <!-- Features Section -->
+    <div class="row-vertical-2">
+      <div class="question">
+        <img class="img1" src="images/Allocations.png" />
+        <div class="text-2">
+          <div class="div-wrapper-2">
+            <p class="text-wrapper-5">Automate large cloud deployments and track resource</p>
+          </div>
+          <div class="div-wrapper-2">
+            <p class="text-wrapper-6">Saves you time, reduces errors, and speeds up application releases.</p>
+          </div>
+        </div>
+        <div class="image"></div>
+      </div>
+      <div class="question-2">
+        <img class="img2" src="images/templates.png" />
+        <div class="text-2">
+          <div class="div-wrapper-2">
+            <p class="text-wrapper-5">Customize, scale and manage cloud resources</p>
+          </div>
+          <div class="div-wrapper">
+            <p class="text-wrapper-8">
+              Simplify cloud management with quick adjustments to meet your project needs, boosting productivity.
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="question-3">
+        <img class="img3" src="images/vms4workshop.png" />
+        <div class="text-3">
+          <div class="div-wrapper-2">
+            <div class="text-wrapper-7">Collaborate and educate</div>
+          </div>
+          <div class="div-wrapper-2">
+            <p class="text-wrapper-9">
+              A platform where you, as a researcher, developer or educator, can share and reuse cloud setups.
+            </p>
+          </div>
+        </div>
+
+      </div>
+    </div>
+    <!-- Info Cards Section -->
+    <div class="row-verdical-cards">
+      <div class="Recipes-card">
+        <img class="book" src="images/Recipes Vector.svg" />
+        <div class="frame-5">
+          <div class="recipes">
+            <div class="text-wrapper-10">Recipes</div>
+          </div>
+          <div class="flexcontainer-wrapper">
+            <div class="flexcontainer">
+              <p class="span-wrapper">
+                <span class="span">CACAO uses simple, pre-made templets, Metadata-driven.<br /></span>
+              </p>
+              <p class="span-wrapper">
+                <span class="span">Create templet from scratch, or import already made templet.<br /></span>
+              </p>
+              <p class="span-wrapper">
+                <span class="span"><br /></span>
+              </p>
+              <p class="span-wrapper"><span class="span"></span></p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="Workshop-card">
+        <div class="frame-6">
+          <img class="squares" src="images/squares.svg" />
+          <div class="frame-7">
+            <div class="text-wrapper-11">Workshops</div>
+          </div>
+          <div class="research-or-teaching-wrapper">
+            <p class="research-or-teaching">
+              Research or teaching by sharing multiple cloud programs with collaborators reducing installation time.
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="Automation-card">
+        <div class="frame-8">
+          <img class="eye" src="images/eye.svg" />
+          <div class="div-wrapper-3">
+            <div class="text-wrapper-11">Automation</div>
+          </div>
+          <div class="track-your-resource-wrapper">
+            <p class="track-your-resource">
+              Track your resource usage,&nbsp;&nbsp;and set up multiple users account at once.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="row-verdical-cards-2">
+      <div class="Cloud-card">
+        <div class="frame-9">
+          <img class="element-cloud-icon" src="images/Cloud.svg" />
+          <div class="frame-10">
+            <div class="text-wrapper-12">Cloud Support</div>
+          </div>
+          <div class="frame-11">
+            <p class="text-wrapper-13">
+              Supports OpenStack-based research clouds such as NSF Jetstream2, and Amazon Web Services (AWS)
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="Collaborate-card">
+        <img class="element" src="images/Collabration.svg" />
+        <div class="collaborative">
+          <div class="text-wrapper-14">Collaborative</div>
+        </div>
+        <div class="text-4">
+          <p class="text-wrapper-15">
+            Includes collaboration platforms like Google Colab, powered by Jupyter Notebook.
+          </p>
+        </div>
+      </div>
+      <div class="Open-card">
+        <div class="frame-12">
+          <img class="logo" src="images/Lock icons.svg" />
+          <div class="div-wrapper-3">
+            <div class="text-wrapper-10">Open</div>
+          </div>
+          <div class="text-5">
+            <p class="text-wrapper-16">
+              Open-sourced, break free from tier limits, time restrictions, preemption, and storage quotas.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Footer Section -->
+    <footer class="footer">
+      <div class="logo-wrapper"><img class="logo-2" src="images/Cyverse Logo.png" /></div>
+      <div class="img-wrapper"><img class="logo-3" src="images/Jetstream2.png" /></div>
+      <div class="img-wrapper1"><img class="logo-4" src="images/AIIRA.png" /></div>
+      <div class="logo-wrapper"><img class="logo-5" src="images/Coalesce.png" /></div>
+
+    </footer>
+
+</html>