diff --git a/frontend/src/assets/logo.svg b/frontend/src/assets/logo.svg
new file mode 100644
index 00000000..9d7540f8
--- /dev/null
+++ b/frontend/src/assets/logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/frontend/src/pages/layout/Layout.module.css b/frontend/src/pages/layout/Layout.module.css
index cda5f9cf..b7b81a04 100644
--- a/frontend/src/pages/layout/Layout.module.css
+++ b/frontend/src/pages/layout/Layout.module.css
@@ -1,3 +1,5 @@
+/* Layout.module.css */
+
.layout {
display: flex;
flex-direction: column;
@@ -25,55 +27,71 @@
text-decoration: none;
}
-.headerLogo {
- height: 40px;
-}
-
.headerTitle {
margin-left: 12px;
font-weight: 600;
}
-.headerNavList {
- display: flex;
- list-style: none;
- padding-left: 0;
+.headerRightText {
+ font-weight: normal;
+ margin-left: 40px;
+ color: #002f87;
}
-.headerNavPageLink {
- color: #f2f2f2;
- text-decoration: none;
- opacity: 0.75;
+/* Add the following styles for the main content */
+
+.mainContent {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 40px 20px;
+ text-align: center;
+}
- transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
- transition-duration: 500ms;
- transition-property: opacity;
+.logoContainer {
+ margin-bottom: 40px;
}
-.headerNavPageLink:hover {
- opacity: 1;
+.companyLogo {
+ max-width: 150px;
+ width: 100%;
+ height: auto;
+ background-color: transparent;
}
-.headerNavPageLinkActive {
- color: #f2f2f2;
- text-decoration: none;
+.examplesSection {
+ width: 100%;
+ max-width: 800px; /* Adjust the width as needed */
}
-.headerNavLeftMargin {
- margin-left: 20px;
+.examplesSection h2 {
+ margin-bottom: 20px;
+ font-size: 24px;
+ color: #333;
}
-.headerRightText {
- font-weight: normal;
- margin-left: 40px;
- color: #002f87;
+.examplesGrid {
+ display: flex;
+ flex-direction: row; /* Change to row for horizontal layout */
+ align-items: center;
+ justify-content: center;
+ gap: 20px;
+ flex-wrap: wrap; /* Allows wrapping on smaller screens */
+ padding: 20px;
}
-.microsoftLogo {
- height: 23px;
- font-weight: 600;
+.exampleBubble {
+ background-color: #fff;
+ border-radius: 12px;
+ padding: 16px 24px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s ease;
+ max-width: 200px;
+ text-align: center;
}
-.githubLogo {
- height: 20px;
+.exampleText {
+ margin: 0;
+ font-size: 16px;
+ color: #333;
}
diff --git a/frontend/src/pages/layout/Layout.tsx b/frontend/src/pages/layout/Layout.tsx
index 91c03c35..2461e45e 100644
--- a/frontend/src/pages/layout/Layout.tsx
+++ b/frontend/src/pages/layout/Layout.tsx
@@ -1,8 +1,18 @@
import { Outlet, Link } from "react-router-dom";
import styles from "./Layout.module.css";
+import companyLogo from "../../assets/logo.svg";
const Layout = () => {
+ const examples = [
+ "Provide a summary of my contract in plain English",
+ "What was our sales revenue last quarter?",
+ "What is the sentiment of the customer reviews?",
+ ];
+
+ const showExamples = process.env.REACT_APP_UI_EXAMPLES;
+ console.log("showExamples", showExamples);
+
return (
@@ -16,7 +26,28 @@ const Layout = () => {
Chat On Your Data
-
+ {/* Main content starts here */}
+ {showExamples && (
+
+
+
+
+
Examples
+
+ {examples.map((example, index) => (
+
+ ))}
+
+