Landing Page Work in Progress

Author: bokulbackiibm

landing_page.qmd

@@ -1,18 +1,37 @@
 ---
-output: html
+format:
+  html:
+    theme: [src/custom.scss , landing_page.scss]
+
 ---
 
 # Project Name
 
 Subtitle
 
+:::: {.columns}
+
+::: {.column width="40%"}
+ <button onclick="window.location.href='problem_statement.qmd';" class = "btn btn-our-doc">Our Documentation</button>
+:::
+
+::: {.column width="60%"}
+![](images/IBMlogo.png){width=400}
+:::
 
- <button onclick="window.location.href='problem_statement.qmd';" class = "btn btn-our-doc">Our Documentation</button> |![IBM Logo](images/IBMlogo.png){width=500}
+:::: 
 
+### Next Steps
 
+:::: {.columns}
 
-# Product Links
+::: {.column width="50%"}  
+<button onclick="window.location.href='problem_statement.qmd';" class = "btn btn-external-link">L ink 1</button> 
+:::
 
-[Quarto Official Website](https://quarto.org) | [GitHub](https://github.com)
+::: {.column width="50%"}
+<button onclick="window.location.href='problem_statement.qmd';" class = "btn btn-external-link">Link 2</button>
+:::
 
+:::: 
 

landing_page.scss

@@ -0,0 +1,37 @@
+/*-- scss:rules --*/
+.btn-our-doc {
+    cursor: pointer;
+    background: #0f62fe !important; /* IBM primary blue color */
+    color: white;
+    border-radius: 999em;
+    align-items: center;
+    gap: .5em;
+    font-size: 16px;
+    padding: 1.5rem;
+    margin-top: 110px;
+}
+
+
+.btn-external-link {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: .5rem;
+    border-radius: .5em;
+    padding: 1rem;
+    box-shadow: blue;
+    position: relative;
+    border-color: #e4e4e7;
+    padding-right: 200px;
+}
+
+@media (min-width: 1200px) {
+    h1, .h1 {
+        font-size: 3.5rem;
+    }
+}
+
+@media (min-width: 1200px) {
+    h3, .h3 {
+        font-size: 2rem;
+    }
+}

src/custom.scss

@@ -187,7 +187,7 @@ nav .nav-link i, nav .dropdown-item i {
 
 /* Only apply hover effect to nav items with content */
 .nav-page:has(a):hover {
-    background-color: #c6c3c3;
+    background-color: #E8E8E8;
 }
 
 /* Remove hover effect from empty nav items */
@@ -298,4 +298,4 @@ a[role=listitem] {
 .footerLogo {
     color: #f7f2f2; /* Light gray logo color */
     vertical-align: top; /* Aligns logo to the top */
-}
+}