From 1d44fc4658c6c46f81cf96df6cfe498b215a202a Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 18 Sep 2025 15:02:57 -0300
Subject: [PATCH] added logos and onboarding page

---
 frontend/components/logo/ibm-logo.tsx    | 18 ++++++++
 frontend/components/logo/ollama-logo.tsx | 30 ++++++++++++
 frontend/components/logo/openai-logo.tsx | 31 +++++++++++++
 frontend/src/app/onboarding/advanced.tsx |  7 +++
 frontend/src/app/onboarding/page.tsx     | 59 +++++++++++++++++++++++-
 5 files changed, 143 insertions(+), 2 deletions(-)
 create mode 100644 frontend/components/logo/ibm-logo.tsx
 create mode 100644 frontend/components/logo/ollama-logo.tsx
 create mode 100644 frontend/components/logo/openai-logo.tsx
 create mode 100644 frontend/src/app/onboarding/advanced.tsx

diff --git a/frontend/components/logo/ibm-logo.tsx b/frontend/components/logo/ibm-logo.tsx
new file mode 100644
index 00000000..6f7fc2cd
--- /dev/null
+++ b/frontend/components/logo/ibm-logo.tsx
@@ -0,0 +1,18 @@
+export default function IBMLogo(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      {...props}
+    >
+      <title>IBM Logo</title>
+      <path
+        d="M15.696 10.9901C15.7213 10.9901 15.7356 10.979 15.7356 10.9552V10.9313C15.7356 10.9076 15.7213 10.8964 15.696 10.8964H15.6359V10.9901H15.696ZM15.6359 11.1649H15.5552V10.8329H15.7055C15.7799 10.8329 15.8179 10.8773 15.8179 10.9378C15.8179 10.9901 15.7942 11.0235 15.7577 11.0378L15.8321 11.1649H15.7436L15.6818 11.0504H15.6359V11.1649ZM15.9255 11.0171V10.9759C15.9255 10.8424 15.821 10.7376 15.6833 10.7376C15.5456 10.7376 15.4412 10.8424 15.4412 10.9759V11.0171C15.4412 11.1505 15.5456 11.2554 15.6833 11.2554C15.821 11.2554 15.9255 11.1505 15.9255 11.0171ZM15.3668 10.9964C15.3668 10.8107 15.5077 10.6693 15.6833 10.6693C15.859 10.6693 16 10.8107 16 10.9964C16 11.1823 15.859 11.3237 15.6833 11.3237C15.5077 11.3237 15.3668 11.1823 15.3668 10.9964ZM10.8069 5.74885L10.6627 5.33301H8.28904V5.74885H10.8069ZM11.0821 6.54285L10.9379 6.12691H8.28904V6.54285H11.0821ZM12.8481 11.3067H14.9203V10.8908H12.8481V11.3067ZM12.8481 10.5126H14.9203V10.0968H12.8481V10.5126ZM12.8481 9.71873H14.0914V9.3028H12.8481V9.71873ZM12.8481 8.92474H14.0914V8.50889H12.8481V8.92474ZM12.8481 8.13084H14.0914V7.7149H11.7212L11.6047 8.05102L11.4882 7.7149H9.11794V8.13084H10.3613V7.74863L10.4951 8.13084H12.7143L12.8481 7.74863V8.13084ZM14.0914 6.921H11.9964L11.8522 7.33675H14.0914V6.921ZM9.11794 8.92474H10.3613V8.50889H9.11794V8.92474ZM9.11794 9.71873H10.3613V9.3028H9.11794V9.71873ZM8.28904 10.5126H10.3613V10.0968H8.28904V10.5126ZM8.28904 11.3067H10.3613V10.8908H8.28904V11.3067ZM12.5466 5.33301L12.4025 5.74885H14.9203V5.33301H12.5466ZM12.1273 6.54285H14.9203V6.12691H12.2714L12.1273 6.54285ZM9.11794 7.33675H11.3572L11.213 6.921H9.11794V7.33675ZM10.7727 8.92474H12.4366L12.5821 8.50889H10.6272L10.7727 8.92474ZM11.0505 9.71873H12.1588L12.3042 9.3028H10.9051L11.0505 9.71873ZM11.3283 10.5126H11.881L12.0265 10.0969H11.1828L11.3283 10.5126ZM11.604 11.3067L11.7487 10.8908H11.4606L11.604 11.3067ZM3.31561 11.3026L6.36754 11.3067C6.78195 11.3067 7.15365 11.1491 7.43506 10.8908H3.31561V11.3026ZM6.55592 9.3028V9.71873H7.94994C7.94994 9.57477 7.93029 9.43551 7.89456 9.3028H6.55592ZM4.14452 9.71873H5.38783V9.3028H4.14452V9.71873ZM6.55592 7.33675H7.89456C7.93029 7.20422 7.94994 7.06486 7.94994 6.921H6.55592V7.33675ZM4.14452 7.33675H5.38783V6.9209H4.14452V7.33675ZM6.36754 5.33301H3.31561V5.74885H7.43506C7.15365 5.49061 6.77892 5.33301 6.36754 5.33301ZM7.73778 6.12691H3.31561V6.54285H7.90448C7.86839 6.39502 7.81172 6.25539 7.73778 6.12691ZM4.14452 7.7149V8.13084H7.39152C7.5292 8.01333 7.64621 7.87268 7.73732 7.7149H4.14452ZM7.39152 8.50889H4.14452V8.92474H7.73732C7.64621 8.76695 7.5292 8.62631 7.39152 8.50889ZM3.31561 10.5126H7.73778C7.81172 10.3843 7.86839 10.2447 7.90448 10.0969H3.31561V10.5126ZM0 5.74885H2.90121V5.33301H0V5.74885ZM0 6.54285H2.90121V6.12691H0V6.54285ZM0.828996 7.33684H2.0723V6.921H0.828996V7.33684ZM0.828996 8.13084H2.0723V7.7149H0.828996V8.13084ZM0.828996 8.92474H2.0723V8.50889H0.828996V8.92474ZM0.828996 9.71873H2.0723V9.3028H0.828996V9.71873ZM0 10.5126H2.90121V10.0968H0V10.5126ZM0 11.3067H2.90121V10.8908H0V11.3067Z"
+        fill="#A1A1AA"
+      />
+    </svg>
+  );
+}
diff --git a/frontend/components/logo/ollama-logo.tsx b/frontend/components/logo/ollama-logo.tsx
new file mode 100644
index 00000000..50d8320d
--- /dev/null
+++ b/frontend/components/logo/ollama-logo.tsx
@@ -0,0 +1,30 @@
+export default function OllamaLogo(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="17"
+      height="16"
+      viewBox="0 0 17 16"
+      fill="none"
+      {...props}
+    >
+      <title>Ollama Logo</title>
+      <g clip-path="url(#clip0_2060_5748)">
+        <path
+          d="M4.67944 0.0576172C4.94223 -0.0366808 5.15143 -0.016476 5.44116 0.125C5.91976 0.37441 6.25025 1.04885 6.49292 2.2959L6.51929 2.44434L6.88354 2.28223C7.86769 1.85082 8.64306 1.88458 9.86987 2.42383C9.91704 2.45078 9.96389 2.39703 9.98413 2.30273C10.1931 1.22439 10.4493 0.610811 10.8132 0.293945C11.4266 -0.245299 12.1553 -0.0230936 12.5867 0.826172C12.89 1.4395 13.0042 2.12721 12.9773 3.23242L12.9568 4.19043L13.3484 4.60156C14.3255 5.62615 14.5614 7.35153 13.8943 8.58496L13.7253 8.89551L13.8601 9.21191C14.3522 10.3511 14.3324 11.8345 13.8201 12.7715L13.6443 13.0947L13.7859 13.4248C13.8668 13.6068 13.9613 13.9039 14.0017 14.0859C14.096 14.5041 14.1029 15.5757 14.0085 15.8184C13.9413 15.9932 13.914 16 13.4968 16C13.0047 16 13.0248 16.0266 13.1394 15.4199C13.2404 14.8672 13.1258 14.1526 12.8562 13.627C12.6069 13.1554 12.5998 12.9263 12.822 12.6299C13.1388 12.1985 13.2811 11.7128 13.2878 11.0117C13.2946 10.3175 13.193 9.93275 12.8425 9.25195C12.6405 8.8545 12.6476 8.65255 12.8767 8.46387C12.9308 8.41627 13.0581 8.19361 13.1658 7.95801C13.3208 7.60752 13.3551 7.45259 13.3484 7.00098C13.3484 6.0101 12.8757 5.20837 12.0466 4.75C11.6626 4.54113 11.5548 4.51358 11.1033 4.50684C10.8277 4.50683 10.5589 4.48001 10.5173 4.45312C10.4701 4.42616 10.3826 4.28423 10.3152 4.14941C10.1399 3.78545 9.70125 3.3748 9.24292 3.15234C8.8925 2.98387 8.77115 2.95607 8.23901 2.95605C7.72001 2.95605 7.57805 2.98366 7.2478 3.13867C6.76921 3.36112 6.32405 3.76538 6.12183 4.16309C6.0411 4.33126 5.95367 4.47222 5.92651 4.47949C5.89955 4.47949 5.65013 4.49316 5.37378 4.49316C4.71996 4.50664 4.23428 4.73581 3.76245 5.24805C3.2906 5.76708 3.12183 6.23255 3.12183 7.00098C3.11509 7.49291 3.14912 7.67504 3.2771 7.95801C3.35791 8.14657 3.49295 8.36207 3.56714 8.42969C3.82995 8.66555 3.8433 8.84102 3.63452 9.25195C3.28401 9.93275 3.18248 10.3175 3.18921 11.0117C3.19595 11.7128 3.33821 12.1985 3.65503 12.6299C3.87723 12.9263 3.87012 13.1553 3.62085 13.627C3.35128 14.1526 3.23666 14.8672 3.33765 15.4199C3.4522 16.0264 3.4728 16 2.9812 16C2.56356 16 2.53581 15.9933 2.46851 15.8184C2.37416 15.5757 2.38103 14.5041 2.47534 14.0859C2.51579 13.9039 2.61027 13.6068 2.69116 13.4248L2.83276 13.0947L2.65698 12.7715C2.38735 12.2861 2.26636 11.7329 2.26636 11.0049C2.26638 10.3377 2.37415 9.78507 2.60327 9.23242L2.73804 8.93555L2.50854 8.4707C1.88172 7.2103 2.13128 5.64639 3.12866 4.60156L3.52026 4.19043L3.49976 3.23242C3.47284 2.134 3.58712 1.43967 3.89038 0.839844C4.11957 0.38821 4.32892 0.178952 4.67944 0.0576172ZM7.38257 6.82617C7.90159 6.65092 8.75736 6.68461 9.29663 6.89355C9.81567 7.09578 10.3687 7.6012 10.5642 8.05957C10.7798 8.56509 10.7389 9.21173 10.4558 9.60938C9.97728 10.2968 9.39813 10.54 8.23901 10.54C7.36289 10.54 6.92444 10.4319 6.50659 10.1152C6.02804 9.75127 5.82548 9.39406 5.79175 8.88184C5.75804 8.33583 5.89952 7.93082 6.27026 7.52637C6.60046 7.16927 6.89062 6.98791 7.38257 6.82617ZM8.3396 7.33105C6.70163 7.24348 5.71788 8.83467 6.91772 9.64355C7.2479 9.86583 7.55167 9.93359 8.23901 9.93359C8.926 9.93356 9.22924 9.86576 9.55933 9.64355C10.4221 9.06388 10.2001 7.97864 9.11499 7.5C8.91951 7.41237 8.60249 7.34454 8.3396 7.33105ZM7.78687 8.1875C7.92842 8.09987 7.92187 8.09977 8.0769 8.18066C8.16448 8.23451 8.24529 8.22781 8.3396 8.18066C8.42038 8.14028 8.54167 8.12638 8.60913 8.14648C8.79113 8.20715 8.79113 8.55123 8.60913 8.65234C8.50812 8.70625 8.4744 8.79402 8.47437 8.98926C8.47437 9.21824 8.44763 9.26611 8.3064 9.2998C8.06383 9.36045 7.91564 9.21222 7.96265 8.96973C7.99635 8.81469 7.96856 8.74652 7.83374 8.63867C7.63866 8.4837 7.61855 8.28183 7.78687 8.1875ZM5.17847 6.83203C5.38052 6.83207 5.46861 6.8794 5.61011 7.04785C5.82577 7.30397 5.80544 7.57425 5.53589 7.85059C5.32028 8.07294 5.20535 8.10625 4.91577 8.03223C4.59221 7.9446 4.45683 7.60726 4.59839 7.25C4.65906 7.11525 4.75359 6.96024 4.81421 6.91309C4.87498 6.87267 5.04374 6.83203 5.17847 6.83203ZM11.2849 6.83203C11.6152 6.83203 11.7438 6.92049 11.8718 7.2373C12.0199 7.61448 11.8921 7.94442 11.5623 8.03223C11.2724 8.10638 11.1569 8.07303 10.9412 7.85059C10.6716 7.57425 10.6522 7.30397 10.8679 7.04785C11.0092 6.87983 11.1034 6.83211 11.2849 6.83203ZM4.96948 0.900391C4.86841 0.900391 4.63911 1.3317 4.54468 1.71582C4.40989 2.22801 4.34238 2.98992 4.39624 3.3877L4.44312 3.71777L4.6521 3.66406C4.77343 3.63036 5.01688 3.59063 5.19214 3.57715C5.374 3.56362 5.54908 3.50897 5.58276 3.45508C5.74422 3.21839 5.48102 1.66887 5.198 1.19043C5.10386 1.02909 5.00338 0.900927 4.96948 0.900391ZM11.5076 0.900391C11.3928 0.901308 11.1096 1.48104 11.0085 1.91211C10.8739 2.50484 10.8137 3.33956 10.8943 3.45508C10.928 3.50896 11.1031 3.56361 11.2849 3.57715C11.4602 3.59063 11.7036 3.63036 11.825 3.66406L12.0339 3.71777L12.0808 3.3877C12.1684 2.73379 11.9725 1.56114 11.7029 1.12305C11.6287 1.0018 11.5345 0.900391 11.5076 0.900391Z"
+          fill="#A1A1AA"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_2060_5748">
+          <rect
+            width="16"
+            height="16"
+            fill="white"
+            transform="translate(0.166504)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/frontend/components/logo/openai-logo.tsx b/frontend/components/logo/openai-logo.tsx
new file mode 100644
index 00000000..639c130e
--- /dev/null
+++ b/frontend/components/logo/openai-logo.tsx
@@ -0,0 +1,31 @@
+export default function OpenAILogo(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="17"
+      height="16"
+      viewBox="0 0 17 16"
+      fill="none"
+      {...props}
+    >
+      <title>OpenAI Logo</title>
+      <mask
+        id="mask0_2162_638"
+        style={{ maskType: "luminance" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="17"
+        height="16"
+      >
+        <path d="M16.4773 0H0.333252V16H16.4773V0Z" fill="white" />
+      </mask>
+      <g mask="url(#mask0_2162_638)">
+        <path
+          d="M6.52523 5.82397V4.30397C6.52523 4.17595 6.57329 4.07991 6.68523 4.01599L9.74132 2.25599C10.1573 2.016 10.6533 1.90406 11.1653 1.90406C13.0852 1.90406 14.3013 3.39209 14.3013 4.97602C14.3013 5.088 14.3013 5.21601 14.2853 5.34403L11.1172 3.48799C10.9253 3.37605 10.7332 3.37605 10.5412 3.48799L6.52523 5.82397ZM13.6612 11.744V8.11194C13.6612 7.88789 13.5652 7.7279 13.3732 7.61592L9.35724 5.27993L10.6692 4.52788C10.7812 4.46396 10.8772 4.46396 10.9892 4.52788L14.0453 6.28788C14.9254 6.79995 15.5173 7.88789 15.5173 8.94382C15.5173 10.1598 14.7973 11.2798 13.6612 11.7439V11.744ZM5.58124 8.54404L4.26924 7.77608C4.1573 7.71216 4.10925 7.61609 4.10925 7.48807V3.9681C4.10925 2.25616 5.42125 0.960064 7.19729 0.960064C7.86938 0.960064 8.49325 1.18412 9.02138 1.5841L5.86938 3.40816C5.67744 3.5201 5.58141 3.6801 5.58141 3.90418V8.54417L5.58124 8.54404ZM8.40528 10.176L6.52523 9.12002V6.88011L8.40528 5.82414L10.2852 6.88011V9.12002L8.40528 10.176ZM9.61327 15.0401C8.94122 15.0401 8.31735 14.816 7.78921 14.4161L10.9412 12.592C11.1331 12.48 11.2292 12.32 11.2292 12.096V7.45596L12.5573 8.22392C12.6692 8.28784 12.7172 8.38388 12.7172 8.51193V12.0319C12.7172 13.7438 11.3892 15.0399 9.61327 15.0399V15.0401ZM5.82123 11.4721L2.76514 9.71212C1.88507 9.20002 1.29315 8.11211 1.29315 7.05614C1.29315 5.82414 2.02916 4.72016 3.16509 4.25611V7.9041C3.16509 8.12815 3.26116 8.28814 3.4531 8.40012L7.45319 10.72L6.14119 11.4721C6.02925 11.536 5.93318 11.536 5.82123 11.4721ZM5.64533 14.0961C3.83731 14.0961 2.50928 12.7361 2.50928 11.0561C2.50928 10.928 2.52532 10.8 2.54122 10.672L5.69322 12.4961C5.88516 12.608 6.07726 12.608 6.2692 12.4961L10.2852 10.1762V11.6962C10.2852 11.8242 10.2372 11.9202 10.1252 11.9841L7.06914 13.7441C6.65312 13.9841 6.15709 14.0961 5.64517 14.0961H5.64533ZM9.61327 16C11.5493 16 13.1652 14.624 13.5334 12.8C15.3253 12.3359 16.4773 10.6559 16.4773 8.94399C16.4773 7.82393 15.9974 6.73602 15.1334 5.95199C15.2134 5.61596 15.2614 5.27994 15.2614 4.94407C15.2614 2.65611 13.4053 0.943991 11.2613 0.943991C10.8294 0.943991 10.4134 1.00792 9.99735 1.152C9.27724 0.44797 8.28523 0 7.19729 0C5.26129 0 3.64537 1.37592 3.27724 3.19998C1.48526 3.66402 0.333252 5.34403 0.333252 7.05598C0.333252 8.17603 0.8132 9.26395 1.67723 10.048C1.59723 10.384 1.54921 10.72 1.54921 11.0559C1.54921 13.3439 3.40525 15.056 5.54926 15.056C5.98119 15.056 6.39722 14.9921 6.81324 14.848C7.53318 15.552 8.52519 16 9.61327 16Z"
+          fill="white"
+        />
+      </g>
+    </svg>
+  );
+}
diff --git a/frontend/src/app/onboarding/advanced.tsx b/frontend/src/app/onboarding/advanced.tsx
new file mode 100644
index 00000000..2c869055
--- /dev/null
+++ b/frontend/src/app/onboarding/advanced.tsx
@@ -0,0 +1,7 @@
+export function AdvancedOnboarding({
+  modelProvider,
+}: {
+  modelProvider: string;
+}) {
+  return <div>AdvancedOnboarding</div>;
+}
diff --git a/frontend/src/app/onboarding/page.tsx b/frontend/src/app/onboarding/page.tsx
index c5045498..abe32727 100644
--- a/frontend/src/app/onboarding/page.tsx
+++ b/frontend/src/app/onboarding/page.tsx
@@ -1,13 +1,21 @@
 "use client";
 
-import { Suspense } from "react";
+import { Suspense, useState } from "react";
 import { useUpdateFlowSettingMutation } from "@/app/api/mutations/useUpdateFlowSettingMutation";
 import { useGetSettingsQuery } from "@/app/api/queries/useGetSettingsQuery";
+import IBMLogo from "@/components/logo/ibm-logo";
+import OllamaLogo from "@/components/logo/ollama-logo";
+import OpenAILogo from "@/components/logo/openai-logo";
 import { ProtectedRoute } from "@/components/protected-route";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useAuth } from "@/contexts/auth-context";
+import { AdvancedOnboarding } from "./advanced";
 
 function OnboardingPage() {
   const { isAuthenticated } = useAuth();
+
+  const [modelProvider, setModelProvider] = useState<string>("openai");
   // Fetch settings using React Query
   const { data: settings = {} } = useGetSettingsQuery({
     enabled: isAuthenticated,
@@ -23,7 +31,54 @@ function OnboardingPage() {
     },
   });
 
-  return <div className="space-y-8">Hello!</div>;
+  return (
+    <div
+      className="min-h-dvh relative flex gap-5 flex-col items-center justify-center bg-background p-4"
+      style={{
+        backgroundImage: "url('/images/background.png')",
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+      }}
+    >
+      <div className="flex flex-col items-center justify-center gap-4">
+        <h1 className="text-2xl font-medium font-chivo">
+          Configure your models
+        </h1>
+        <p className="text-sm text-muted-foreground">[description of task]</p>
+      </div>
+      <Card className="w-full max-w-[580px]">
+        <Tabs defaultValue={modelProvider} onValueChange={setModelProvider}>
+          <CardHeader>
+            <TabsList>
+              <TabsTrigger value="openai">
+                <OpenAILogo className="w-4 h-4" />
+                OpenAI
+              </TabsTrigger>
+              <TabsTrigger value="watsonx">
+                <IBMLogo className="w-4 h-4" />
+                IBM
+              </TabsTrigger>
+              <TabsTrigger value="ollama">
+                <OllamaLogo className="w-4 h-4" />
+                Ollama
+              </TabsTrigger>
+            </TabsList>
+          </CardHeader>
+          <CardContent>
+            <TabsContent value="openai">
+              <AdvancedOnboarding modelProvider={modelProvider} />
+            </TabsContent>
+            <TabsContent value="watsonx">
+              <AdvancedOnboarding modelProvider={modelProvider} />
+            </TabsContent>
+            <TabsContent value="ollama">
+              <AdvancedOnboarding modelProvider={modelProvider} />
+            </TabsContent>
+          </CardContent>
+        </Tabs>
+      </Card>
+    </div>
+  );
 }
 
 export default function ProtectedOnboardingPage() {