add left layout
This commit is contained in:
parent
79ccfced22
commit
f7e8a7642f
Binary file not shown.
|
Before Width: | Height: | Size: 78 KiB After Width: | Height: | Size: 53 KiB |
BIN
public/img/hero/04.jpg
Normal file
BIN
public/img/hero/04.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 222 KiB |
BIN
public/img/hero/05.png
Normal file
BIN
public/img/hero/05.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 213 KiB |
BIN
public/img/hero/06.png
Normal file
BIN
public/img/hero/06.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 209 KiB |
BIN
public/img/icons/unicons/labor.png
Normal file
BIN
public/img/icons/unicons/labor.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
383
src/pages/authentication/AboutApp.jsx
Normal file
383
src/pages/authentication/AboutApp.jsx
Normal file
@ -0,0 +1,383 @@
|
|||||||
|
const AboutApp = ({ onClose }) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="col-md">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col text-center mb-5 text-uppercase">
|
||||||
|
<h2>Why MarcoPMS?</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="row">
|
||||||
|
<div className="col">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 col-sm-1 col-lg-2 pt-2 pt-lg-4 mt-2">
|
||||||
|
<i class="bx bx-chevron-right-circle"></i>
|
||||||
|
<i class="bx bx-arrow-right-stroke-circle ps-lg-2"></i>
|
||||||
|
<i class="icon-integrate ps-lg-2"></i>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-sm-11 col-lg-10 pt-sm-2 pt-lg-4">
|
||||||
|
<h4 class="ms-sm-2 ms-lg-1">900+ Vendor-Backed Integrations</h4>
|
||||||
|
<p class="ms-sm-2 ms-lg-1">
|
||||||
|
Datadog offers wide coverage across any technology, with
|
||||||
|
support and log processing templates provided by Datadog
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 col-sm-1 col-lg-2 pt-2 pt-lg-4 mt-2">
|
||||||
|
<i class="icon-logs-2 ps-lg-2"></i>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-sm-11 col-lg-10 pt-sm-2 pt-lg-4">
|
||||||
|
<h4 class="ms-sm-2 ms-lg-1">Logging Without Limits™</h4>
|
||||||
|
<p class="ms-sm-2 ms-lg-1">
|
||||||
|
Simple, but powerful techniques for prioritizing logs and
|
||||||
|
staying in budget–without manual backups or dropping data
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="row">
|
||||||
|
<div className="col">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 col-sm-1 col-lg-2 pt-2 pt-lg-4 mt-2">
|
||||||
|
<i class="icon-integrate ps-lg-2"></i>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-sm-11 col-lg-10 pt-sm-2 pt-lg-4">
|
||||||
|
<h4 class="ms-sm-2 ms-lg-1">900+ Vendor-Backed Integrations</h4>
|
||||||
|
<p class="ms-sm-2 ms-lg-1">
|
||||||
|
Datadog offers wide coverage across any technology, with
|
||||||
|
support and log processing templates provided by Datadog
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 col-sm-1 col-lg-2 pt-2 pt-lg-4 mt-2">
|
||||||
|
<i class="icon-logs-2 ps-lg-2"></i>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-sm-11 col-lg-10 pt-sm-2 pt-lg-4">
|
||||||
|
<h4 class="ms-sm-2 ms-lg-1">Logging Without Limits™</h4>
|
||||||
|
<p class="ms-sm-2 ms-lg-1">
|
||||||
|
Simple, but powerful techniques for prioritizing logs and
|
||||||
|
staying in budget–without manual backups or dropping data
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="row">
|
||||||
|
<div className="col mt-10">
|
||||||
|
<h2>Product Features?</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="row">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-5 order-lg-2">
|
||||||
|
<h4>Investigate and Troubleshoot Issues Faster</h4>
|
||||||
|
<div class="mt-2 ">
|
||||||
|
<ul class="dashed text-start">
|
||||||
|
<li>
|
||||||
|
Search, filter, and analyze logs on the fly—no complex
|
||||||
|
query language required
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Automatically detect unanticipated outliers, anomalies,
|
||||||
|
and log errors without the need to read every log file
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Visualize and explore collected logs using an intuitive,
|
||||||
|
facet-driven navigation and powerful log analytics
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Respond to only the most important issues with composite
|
||||||
|
alerts based on boolean logic
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-7">
|
||||||
|
<div>
|
||||||
|
<video
|
||||||
|
class="shadow-card-nohover w-100"
|
||||||
|
preload="none"
|
||||||
|
playsinline=""
|
||||||
|
autoplay=""
|
||||||
|
muted=""
|
||||||
|
loop=""
|
||||||
|
poster="https://imgix.datadoghq.com/img/logs-realtime-analytics-2018.png?auto=format"
|
||||||
|
>
|
||||||
|
<source
|
||||||
|
src="https://imgix.datadoghq.com/video/products/log-management/log_patterns_to_analytics-v02.mp4"
|
||||||
|
type="video/mp4"
|
||||||
|
/>
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="row mt-10">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-5 order-lg-2">
|
||||||
|
<h4>Investigate and Troubleshoot Issues Faster</h4>
|
||||||
|
<div class="mt-2">
|
||||||
|
<ul class="dashed text-start">
|
||||||
|
<li>
|
||||||
|
Search, filter, and analyze logs on the fly—no complex
|
||||||
|
query language required
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Automatically detect unanticipated outliers, anomalies,
|
||||||
|
and log errors without the need to read every log file
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Visualize and explore collected logs using an intuitive,
|
||||||
|
facet-driven navigation and powerful log analytics
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Respond to only the most important issues with composite
|
||||||
|
alerts based on boolean logic
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-7">
|
||||||
|
<video
|
||||||
|
class="shadow-card-nohover w-100"
|
||||||
|
preload="none"
|
||||||
|
playsinline=""
|
||||||
|
autoplay=""
|
||||||
|
muted=""
|
||||||
|
loop=""
|
||||||
|
poster="https://imgix.datadoghq.com/img/logs-realtime-analytics-2018.png?auto=format"
|
||||||
|
>
|
||||||
|
<source
|
||||||
|
src="https://imgix.datadoghq.com/video/products/log-management/log_patterns_to_analytics-v02.mp4"
|
||||||
|
type="video/mp4"
|
||||||
|
/>
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="row mt-10">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-5 order-lg-2">
|
||||||
|
<h4>Investigate and Troubleshoot Issues Faster</h4>
|
||||||
|
<div class="mt-2">
|
||||||
|
<ul class="dashed text-start">
|
||||||
|
<li>
|
||||||
|
Search, filter, and analyze logs on the fly—no complex
|
||||||
|
query language required
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Automatically detect unanticipated outliers, anomalies,
|
||||||
|
and log errors without the need to read every log file
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Visualize and explore collected logs using an intuitive,
|
||||||
|
facet-driven navigation and powerful log analytics
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Respond to only the most important issues with composite
|
||||||
|
alerts based on boolean logic
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-7">
|
||||||
|
<div>
|
||||||
|
<video
|
||||||
|
class="shadow-card-nohover w-100"
|
||||||
|
preload="none"
|
||||||
|
playsinline=""
|
||||||
|
autoplay=""
|
||||||
|
muted=""
|
||||||
|
loop=""
|
||||||
|
poster="https://imgix.datadoghq.com/img/logs-realtime-analytics-2018.png?auto=format"
|
||||||
|
>
|
||||||
|
<source
|
||||||
|
src="https://imgix.datadoghq.com/video/products/log-management/log_patterns_to_analytics-v02.mp4"
|
||||||
|
type="video/mp4"
|
||||||
|
/>
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="row mt-10">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-5 order-lg-2">
|
||||||
|
<h4>Investigate and Troubleshoot Issues Faster</h4>
|
||||||
|
<div class="mt-2">
|
||||||
|
<ul class="dashed text-start">
|
||||||
|
<li>
|
||||||
|
Search, filter, and analyze logs on the fly—no complex
|
||||||
|
query language required
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Automatically detect unanticipated outliers, anomalies,
|
||||||
|
and log errors without the need to read every log file
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Visualize and explore collected logs using an intuitive,
|
||||||
|
facet-driven navigation and powerful log analytics
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Respond to only the most important issues with composite
|
||||||
|
alerts based on boolean logic
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-7">
|
||||||
|
<div>
|
||||||
|
<video
|
||||||
|
class="shadow-card-nohover w-100"
|
||||||
|
preload="none"
|
||||||
|
playsinline=""
|
||||||
|
autoplay=""
|
||||||
|
muted=""
|
||||||
|
loop=""
|
||||||
|
poster="https://imgix.datadoghq.com/img/logs-realtime-analytics-2018.png?auto=format"
|
||||||
|
>
|
||||||
|
<source
|
||||||
|
src="https://imgix.datadoghq.com/video/products/log-management/log_patterns_to_analytics-v02.mp4"
|
||||||
|
type="video/mp4"
|
||||||
|
/>
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* <div
|
||||||
|
id="carouselExample"
|
||||||
|
className="carousel slide"
|
||||||
|
data-bs-ride="carousel"
|
||||||
|
>
|
||||||
|
<div className="carousel-indicators">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
data-bs-target="#carouselExample"
|
||||||
|
data-bs-slide-to="0"
|
||||||
|
className=""
|
||||||
|
aria-label="Slide 1"
|
||||||
|
></button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
data-bs-target="#carouselExample"
|
||||||
|
data-bs-slide-to="1"
|
||||||
|
aria-label="Slide 2"
|
||||||
|
className="active"
|
||||||
|
aria-current="true"
|
||||||
|
></button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
data-bs-target="#carouselExample"
|
||||||
|
data-bs-slide-to="2"
|
||||||
|
aria-label="Slide 3"
|
||||||
|
className=""
|
||||||
|
></button>
|
||||||
|
</div>
|
||||||
|
<div className="carousel-inner">
|
||||||
|
<div className="carousel-item">
|
||||||
|
<img
|
||||||
|
className="d-block w-100"
|
||||||
|
src="/img/hero/03.jpg"
|
||||||
|
style={{ opacity: "80%" }}
|
||||||
|
alt="First slide"
|
||||||
|
/>
|
||||||
|
<div className="carousel-caption d-none d-md-block">
|
||||||
|
<h3>First slide</h3>
|
||||||
|
<p>
|
||||||
|
Eos mutat malis maluisset et, agam ancillae quo te, in vim
|
||||||
|
congue pertinacia.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="carousel-item active">
|
||||||
|
<img
|
||||||
|
className="d-block w-100"
|
||||||
|
src="/img/hero/04.jpg"
|
||||||
|
alt="Second slide"
|
||||||
|
style={{ opacity: "80%" }}
|
||||||
|
/>
|
||||||
|
<div className="carousel-caption d-none d-md-block">
|
||||||
|
<h3>Second slide</h3>
|
||||||
|
<p>In numquam omittam sea.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="carousel-item">
|
||||||
|
<img
|
||||||
|
className="d-block w-100"
|
||||||
|
src="/img/hero/01.jpg"
|
||||||
|
alt="Third slide"
|
||||||
|
style={{ opacity: "80%" }}
|
||||||
|
/>
|
||||||
|
<div className="carousel-caption d-none d-md-block">
|
||||||
|
<h3>Third slide</h3>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, virtute consequat ea qui, minim
|
||||||
|
graeco mel no.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="carousel-item">
|
||||||
|
<img
|
||||||
|
className="d-block w-100"
|
||||||
|
src="/img/hero/02.jpg"
|
||||||
|
alt="Third slide"
|
||||||
|
style={{ opacity: "80%" }}
|
||||||
|
/>
|
||||||
|
<div className="carousel-dark carousel-caption d-none d-md-block">
|
||||||
|
<h3>Third slide</h3>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, virtute consequat ea qui, minim
|
||||||
|
graeco mel no.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
className="carousel-control-prev"
|
||||||
|
href="#carouselExample"
|
||||||
|
role="button"
|
||||||
|
data-bs-slide="prev"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className="carousel-control-prev-icon"
|
||||||
|
aria-hidden="true"
|
||||||
|
></span>
|
||||||
|
<span className="visually-hidden">Previous</span>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
className="carousel-control-next"
|
||||||
|
href="#carouselExample"
|
||||||
|
role="button"
|
||||||
|
data-bs-slide="next"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className="carousel-control-next-icon"
|
||||||
|
aria-hidden="true"
|
||||||
|
></span>
|
||||||
|
<span className="visually-hidden">Next</span>
|
||||||
|
</a>
|
||||||
|
</div> */}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AboutApp;
|
||||||
@ -1,29 +1,27 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import "./page-auth.css";
|
import "./page-auth.css";
|
||||||
|
import AboutApp from "./AboutApp";
|
||||||
// import { hero1 } from "/public/img/backgrounds/18.jpg";
|
// import { hero1 } from "/public/img/backgrounds/18.jpg";
|
||||||
export const AuthWrapper = ({ children }) => {
|
export const AuthWrapper = ({ children }) => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div class="authentication-wrapper authentication-cover">
|
<div className="authentication-wrapper authentication-cover">
|
||||||
<div class="authentication-inner row m-0">
|
<div className="authentication-inner row m-0">
|
||||||
{/* <!-- /Left Text --> */}
|
{/* <!-- /Left Text --> */}
|
||||||
<div class="d-none d-lg-flex col-lg-7 col-xl-8 align-items-center p-5">
|
<div className="d-none d-lg-flex col-lg-7 col-xl-8 align-items-center p-5">
|
||||||
<div class="w-100 d-flex justify-content-center">
|
<div className="w-100 d-flex justify-content-center ">
|
||||||
<img
|
<AboutApp></AboutApp>
|
||||||
src="/img/hero/03.jpg"
|
|
||||||
class="img-fluid"
|
|
||||||
alt="Login image"
|
|
||||||
width="700"
|
|
||||||
style={{ width: "100%", opacity: "80%" }}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* <!-- /Left Text --> */}
|
{/* <!-- /Left Text --> */}
|
||||||
|
|
||||||
{/* <!-- Login --> */}
|
{/* <!-- Login --> */}
|
||||||
<div class="d-flex col-12 col-lg-5 col-xl-4 align-items-center authentication-bg p-sm-12 p-6">
|
<div className="d-flex col-12 col-lg-5 col-xl-4 align-items-center authentication-bg p-sm-12 p-6">
|
||||||
<div class="w-px-400 mx-auto mt-12 pt-5">
|
<div
|
||||||
|
className="w-px-400 mx-auto mt-12 pt-5"
|
||||||
|
style={{ position: "fixed", top: "0" }}
|
||||||
|
>
|
||||||
{" "}
|
{" "}
|
||||||
<div className="app-brand justify-content-center">
|
<div className="app-brand justify-content-center">
|
||||||
<Link
|
<Link
|
||||||
@ -45,32 +43,6 @@ export const AuthWrapper = ({ children }) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* <div className="container-xxl">
|
|
||||||
<div className="authentication-wrapper authentication-basic container-p-y">
|
|
||||||
<div className="authentication-inner">
|
|
||||||
<div className="card">
|
|
||||||
<div className="card-body">
|
|
||||||
<div className="app-brand justify-content-center">
|
|
||||||
<Link
|
|
||||||
aria-label="Go to Home Page"
|
|
||||||
to="/"
|
|
||||||
className="app-brand-link gap-2"
|
|
||||||
>
|
|
||||||
<span className="app-brand-logo rounded-circle ">
|
|
||||||
<img
|
|
||||||
src="/img/brand/marco.png"
|
|
||||||
alt="marco-logo"
|
|
||||||
className="app-brand-logo-login"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div> */}
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user