{title}
{description}
@@ -91,17 +232,195 @@ function Feature({Svg, title, description, link}, index) { ); } +function StaticCard({ title, description }) { + return ( +
+
+ );
+}
+
+function StepCard() {
+ return (
+
+
+ {title}
+{description}
+
+
+ );
+}
+
+function FeatureSection({header, features, showLink, isDetailed}) {
+ const firstRowFeatures = features.slice(0, 3);
+ const secondRowFeatures = features.slice(3, 6);
+ return (
+
+ Step 1:
+
+
+ Ship your data
+
+
+
+ );
+}
+
+function PopularLinks() {
+ return (
+ {header}
+
+ {firstRowFeatures.map((props, idx) => (
+
+
+ {isDetailed ?
+
+ ))}
+
+ {secondRowFeatures.map((props, idx) => (
+
+ {showLink && (
+
+ {isDetailed ?
+
+ ))}
+
+
+ See All Integrations
+
+
+ )}
+
+ Popular:
+ Agent quick setup
+ |
+ K8S
+ |
+ Metrics
+ |
+ Integration setup
+ |
+ API
+
+ );
+}
+
+function WhatsNew() {
+ return (
+
+
+ );
+}
+
+function BestPracticesAndToolsSection() {
+ return (
+ What's New
+
+ {WhatsNewFeatures.map((props, idx) => (
+
+
+
+ ))}
+
+
+
+
+ {props.Svg &&
+
+
+
+ {props.title}
+{props.description}
+
+
+ );
+}
+
+function ContactSupportSection() {
+ return (
+ Best Practices and Tools
+
+ {BestPracticesAndTools.map((column, idx) => (
+
+
+
+ ))}
+
+ 
+
+
+ {column.title}
+-
+ {column.links.map((link, linkIdx) => (
+
- + {link.text} + + ))} +
+
+ );
+}
+
export default function HomepageFeatures() {
return (
Not finding the help you need?
+
+ Contact Support
+
+
-
- {FeatureList.map((props, idx) => (
-
);
}
-
diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css
index c93abffd..0d70e8b9 100644
--- a/src/components/HomepageFeatures/styles.module.css
+++ b/src/components/HomepageFeatures/styles.module.css
@@ -1,43 +1,260 @@
.features {
+ margin-top: 20px;
+}
+
+.featuresContainer {
display: flex;
+ flex-direction: column;
align-items: center;
- padding: 2rem 0;
width: 100%;
}
-.featureSvg {
- height: 50px;
- width: 50px;
+.centeredRow {
+ justify-content: center;
}
.featureCard {
- display: block;
- padding: 20px;
- margin: 10px;
- background-color: var(--ifm-background-color);
- border-radius: 10px;
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
- transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+ margin-bottom: 10px;
+ padding: 10px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ background-color: #f9f9f9;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 80px; /* Adjust the height as needed */
+ width: 80px; /* Adjust the width to be narrower */
+}
+
+.featureCardWithDetails {
+ margin-bottom: 10px;
+ padding: 10px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ background-color: #f9f9f9;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ height: auto; /* Adjust the height as needed */
+ width: 100%; /* Adjust the width to be narrower */
+}
+
+.staticCard {
+ margin-bottom: 20px;
+}
+
+.featureSvg {
+ width: 40px;
+ height: 40px;
+}
+
+.searchContainer {
+ display: flex;
+ justify-content: center;
+ width: 100%;
+}
+
+.searchContainer .docusaurus-search-container {
+ width: 100%;
+ max-width: 600px; /* Make the search bar wider */
+}
+
+.searchContainer input {
+ width: 100%;
+}
+
+.mainTitle {
+ font-size: 2.5rem;
+ font-weight: bold;
+ margin-bottom: 20px;
+}
+
+.stepTitle {
+ font-size: 2rem;
+ font-weight: bold;
+ margin-bottom: 20px;
+}
+
+.stepSubtitle {
+ font-size: 1.5rem;
+ font-weight: bold;
+ margin-bottom: 20px;
+}
+
+.popularLinks {
+ margin-top: 10px;
+ font-size: 1rem;
+}
+
+.popularLinks a {
+ margin: 0 10px;
+}
+
+.separator {
+ margin: 0 10px;
+}
+
+.seeAllLink {
+ display: inline-block;
+ padding: 10px 20px;
+ border: 2px solid #007bff;
+ border-radius: 30px; /* Oval shape */
text-decoration: none;
- color: inherit;
+ color: #007bff;
+ font-weight: bold;
}
-.featureCard:hover {
- transform: translateY(-5px);
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+.seeAllLink:hover {
+ background-color: #007bff;
+ color: #fff;
+}
+
+/* styles.module.css */
+
+.features {
+ background-color: var(--ifm-background-color);
+ padding: var(--ifm-spacing-vertical) 0;
}
.featuresContainer {
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.featureContainer {
+ text-align: center;
+ margin-bottom: var(--ifm-spacing-vertical);
+}
+
+.featureCard {
+ border-radius: var(--ifm-radius);
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.featureCard:hover {
+ transform: scale(1.05);
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+}
+
+.featureTitle {
+ margin-top: var(--ifm-spacing-sm);
+ font-weight: normal;
+ text-align: center;
+}
+
+.featureSvg {
+ width: 100%;
+ height: auto;
+}
+
+.featureCardWithDetails {
+ border: 1px solid var(--ifm-color-gray-200);
+ border-radius: var(--ifm-radius);
+ padding: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);
+ margin: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);
+ text-align: center;
+}
+
+.staticCard {
+ border: 1px solid var(--ifm-color-gray-200);
+ border-radius: var(--ifm-radius);
+ padding: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);
+ margin: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);
+ text-align: center;
+}
+
+.whatsNew {
+ width: 100%;
+}
+
+.whatsNewCard {
+ border: 1px solid var(--ifm-color-gray-200);
+ border-radius: var(--ifm-radius);
+ padding: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);
+ margin: var(--ifm-spacing-vertical);
+ text-align: center;
+}
+
+.popularLinks {
display: flex;
justify-content: center;
+ gap: var(--ifm-spacing-sm); /* Smaller space between elements */
}
-.centeredRow {
+.popularLink {
+ font-weight: bold;
+}
+
+.separator {
+ margin: 0 var(--ifm-spacing-xs); /* Smaller margin between separators */
+}
+
+.searchContainer {
display: flex;
- flex-wrap: wrap;
- justify-content: center; /* Centers the row */
+ justify-content: center;
+}
+
+.seeAllLink {
+ padding: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);
+ background-color: var(--ifm-color-primary);
+ color: white;
+ border-radius: var(--ifm-radius);
+ text-decoration: none;
+}
+
+.bestPracticesAndTools {
+ margin-top: 40px;
+}
+
+.bestPracticesColumn {
+ text-align: center;
+}
+
+.contactSupportButton {
+ padding: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);
+ background-color: var(--ifm-color-primary);
+ color: white;
+ border-radius: var(--ifm-radius);
+ text-decoration: none;
+}
+
+.contactSupportSection {
+ margin-top: 40px;
+}
+
+.mainTitle {
+ font-size: 2.5rem;
+ margin: 60px 0; /* Increased margin above and below */
+}
+
+.gettingStartedTitle {
+ font-size: 2rem;
+ margin: 40px 0; /* Increased margin above and below */
+}
+
+.stepTitle {
+ font-size: 2rem;
+ margin-bottom: 20px;
+}
+
+.stepSubtitle {
+ font-size: 1.5rem;
+ margin-bottom: 20px;
+}
+
+.stepCard {
+ text-align: center;
+ margin: 20px 0; /* Adjust this value to control the margin above and below the card */
+}
+
+.stepCard .stepTitle {
+ font-size: 2rem;
+ font-weight: bold;
+ margin-bottom: 10px; /* Adjust this value to control the space between Step 1: and Ship your data */
}
-.smallCard {
- height: 60%; /* Adjust this value as per your requirement */
+.stepCard .stepDescription {
+ font-size: 1rem;
}
diff --git a/src/components/SearchHeader.js b/src/components/SearchHeader.js
new file mode 100644
index 00000000..eeebf461
--- /dev/null
+++ b/src/components/SearchHeader.js
@@ -0,0 +1,21 @@
+import '@docsearch/css'; // Import default styles for DocSearch
+import React from 'react';
+import { DocSearch } from '@docsearch/react';
+import { useAlgoliaContextualFacetFilters } from '@docusaurus/theme-search-algolia/client';
+
+
+function SearchHeader() {
+ const facetFilters = useAlgoliaContextualFacetFilters();
+ return (
+
+
+
+
+ Logz.io Documentation
+
+
+
+
+
+
+
+
+ Getting Started with Logz.io
{/* Centered heading here */} +
+
+
+
+
+
+
+
+ Step 2: Get the 360 Observability Suite
{/* Centered heading for Step 2 */} +
+
+
+ {ObservabilitySuiteFeatures.map((props, idx) => (
+
+
+
+ ))}
+
+
+
+
+
+
+
+ );
+}
+
+export default NavbarContent;
diff --git a/src/theme/Navbar/Layout/index.js b/src/theme/Navbar/Layout/index.js
new file mode 100644
index 00000000..646a9e0a
--- /dev/null
+++ b/src/theme/Navbar/Layout/index.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import Layout from '@theme-original/Navbar/Layout';
+
+export default function LayoutWrapper(props) {
+ return (
+ <>
+
+
+
+ {rightItems.map((item, i) => (
+
+