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 { Link } from "react-router-dom";
|
||||
import "./page-auth.css";
|
||||
import AboutApp from "./AboutApp";
|
||||
// import { hero1 } from "/public/img/backgrounds/18.jpg";
|
||||
export const AuthWrapper = ({ children }) => {
|
||||
return (
|
||||
<>
|
||||
<div class="authentication-wrapper authentication-cover">
|
||||
<div class="authentication-inner row m-0">
|
||||
<div className="authentication-wrapper authentication-cover">
|
||||
<div className="authentication-inner row m-0">
|
||||
{/* <!-- /Left Text --> */}
|
||||
<div class="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">
|
||||
<img
|
||||
src="/img/hero/03.jpg"
|
||||
class="img-fluid"
|
||||
alt="Login image"
|
||||
width="700"
|
||||
style={{ width: "100%", opacity: "80%" }}
|
||||
/>
|
||||
<div className="d-none d-lg-flex col-lg-7 col-xl-8 align-items-center p-5">
|
||||
<div className="w-100 d-flex justify-content-center ">
|
||||
<AboutApp></AboutApp>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- /Left Text --> */}
|
||||
|
||||
{/* <!-- Login --> */}
|
||||
<div class="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="d-flex col-12 col-lg-5 col-xl-4 align-items-center authentication-bg p-sm-12 p-6">
|
||||
<div
|
||||
className="w-px-400 mx-auto mt-12 pt-5"
|
||||
style={{ position: "fixed", top: "0" }}
|
||||
>
|
||||
{" "}
|
||||
<div className="app-brand justify-content-center">
|
||||
<Link
|
||||
@ -45,32 +43,6 @@ export const AuthWrapper = ({ children }) => {
|
||||
</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