Untitled

import React from 'react';
import { withPage, Navigate } from '@d-lift/core';
import {
    Card,
    Page,
    Button,
    Para,
    Group,
    Column,
    Label,
    Row,
    Grid,
    Image,
    Header,
} from '@d-lift/uxcomponents';
import BodySection from '../../Layout/BodySection';
import './home.scss';
import RFIUtil from '@/Util/RFIUtil';

const Home = () => {
    return (
        <Page>
            <BodySection>
                <Card className="ux-rfi-grid-home">
                    <Row className="d-flex mt-2 mb-2 flex-column flex-md-row">
                        <div className="col-md-6 col-sm-12">
                            <Header
                                className="ux-rfi-heading"
                                labelKey="HST_knowledge_collab"></Header>
                            <Para className="ux-rfi-content mt-2" labelKey="header_content"></Para>
                        </div>
                        <div className="col-md-6 col-sm-12">
                            <Image src="../../../images/landingPageImg.png" className="img-fluid" />
                        </div>
                    </Row>
                </Card>

                <Group width="5,7">
                    {/* Section 1 */}
                    <div className="m-5">
                        <div className="p-2 ux-rfi-green-bg rounded-top ux-rfi-black-border border-bottom-0">
                            <Para>
                                <Label
                                    className="pt-2 pl-2 ux-rfi-green-bg-font ux-rfi-font"
                                    labelKey="green_card_content"></Label>
                                <Label
                                    className="pt-1 pl-2 ux-rfi-green-bg-font ux-rfi-font"
                                    labelKey="green_card_content_2"></Label>
                            </Para>
                        </div>
                        <div className="bg-white pt-2 rounded-bottom ux-rfi-black-border border-top-0 d-flex justify-content-center">
                            <Button
                                id="knowledgeBase-btn"
                                className="ux-rfi-white-button"
                                labelKey="knowledge_base"></Button>
                        </div>
                    </div>

                    {/* Section 2 */}
                    <div className="m-5 ux-rfi-black-border-round">
                        <div className="d-flex justify-content-center">
                            <Label
                                className="ux-rfi-round-label"
                                labelKey="requests_for_info"></Label>
                        </div>

                        <Grid>
                            <Row className="flex-column flex-md-row">
                                <Column className="mt-3">
                                    <Para
                                        className="ux-rfi-content2"
                                        labelKey="white_card_left_content"></Para>
                                    <div className="d-flex justify-content-center">
                                        <Button
                                            id="search-rfi-btn"
                                            className="ux-rfi-white-button mt-4 pr-6"
                                            labelKey="search_rfi"
                                            mode="link"
                                            click={() => Navigate.to('/search')}></Button>
                                    </div>
                                </Column>

                                <Column className="mt-3 ux-rfi-vertical-line">
                                    <Para
                                        className="ux-rfi-content2"
                                        labelKey="white_card_right_content"></Para>
                                    <div className="d-flex justify-content-center">
                                        <Button
                                            id="request-info-btn"
                                            className="ux-rfi-white-button mt-4"
                                            labelKey="request_info"
                                            mode="link"
                                            disabled={!RFIUtil.isAdmin() && !RFIUtil.isPOC()}
                                            click={() => Navigate.to('/create-rfi')}></Button>
                                    </div>
                                </Column>
                            </Row>
                        </Grid>
                    </div>
                </Group>
            </BodySection>
        </Page>
    );
};

export default withPage(
    {
        Description: 'Home Page',
        ContentManager: true,
        LayoutStyle: 'rfi-dashboard',
        TemplateOptions: { cardWorkFlow: true },
    },
    Home,
);







.ux-rfi-heading {
    font-family: Roboto !important;
    font-size: 1.7rem;
    font-weight: 400;
    text-align: left;
}

.ux-rfi-content {
    @extend .ux-rfi-heading;
    font-size: 1rem !important;
    padding-top: 10px;
}

.ux-rfi-grid-home {
    background-color: #CEE3B7 !important;
    padding-left: 20px;
    padding-right: 20px;
}

.ux-rfi-green-bg {
    background-color: #70A71C !important;
}

.ux-card-body {
    padding: none !important;
}

.ux-rfi-font {
    font-family: sans-serif !important;
}

.ux-rfi-green-bg-font {
    @extend .ux-rfi-font;
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: 400;
    text-align: left;
}

.ux-rfi-content2 {
    @extend .ux-rfi-font;
    @extend .ux-rfi-green-bg-font;
    font-size: 0.8rem !important;
    color: #000000;
}

.ux-rfi-round-label {
    @extend .ux-rfi-font;
    color: black;
    font-size: 1rem;
    border: 2px solid #000000;
    border-radius: 50px;
    padding: 5px 10px;
    text-align: center;
    margin-top: -30px;
    background-color: white;
}

.ux-rfi-vertical-line {
    height: 60%;
    border-left: 2px solid #70A71C;
    @media (max-width: 768px) {
        border-left: 0px;
    }
}