Untitled

import React, { useEffect } from 'react';
import { withPage, Navigate, useAppState, Lift } from '@d-lift/core';
import { Card, Page, Button, Para, Group, Label, Row, Image, Header } from '@d-lift/uxcomponents';
import BodySection from '../../Layout/BodySection';
import './home.scss';
import ConstantKeys from '@/Constants/ConstantKeys';
import RFIUtil from '@/Util/RFIUtil';
import ExcelUpload from './Components/ExcelUpload';

const Home = () => {
    const [refDataLoaded, setRefDataLoaded] = useAppState('refDataLoaded', false);
    useEffect(() => {
        if (!refDataLoaded) {
            Lift.spinner.show();
            RFIUtil.isRefDataLoaded(ConstantKeys.REF_TABLE.REF_TABLES_CACHE, setRefDataLoaded);
        }
        if (refDataLoaded) {
            Lift.spinner.hide();
        }
    }, [refDataLoaded]);

    return (
        <Page ref-table-list="PROGRAM, CATEGORY, OFFERING, STATE,DEADLINE, STATUS">
            <BodySection>
                <div>
                    {/* <Image src="../../../images/hero-books.png" className="img-fluid  hero-section"> */}
                    <div className=" hero-section">
                        <Row className="overlay-body d-flex justify-content-center">
                            <Header
                                className="ux-rfi-heading d-flex justify-content-center"
                                labelKey="HHS_knowledgebase"></Header>
                            <Para className="ux-rfi-content mt-2" labelKey="header_content"></Para>
                        </Row>
                        <Row className="button-container">
                            <Button
                                id="knowledgeBase-btn"
                                className="ux-rfi-white-button"
                                labelKey="knowledge_base"
                                click={() => Navigate.to('/hhs-knowledgebase')}></Button>
                        </Row>
                    </div>
                    {/* </Image> */}
                </div>

                {RFIUtil.isAdmin() || RFIUtil.isPOC() ? (
                    <div className="white-block ux-rfi-black-border-round">
                        <div className="d-flex justify-content-center">
                            <Label
                                className="ux-rfi-round-label"
                                labelKey="requests_for_info"></Label>
                        </div>

                        <div className="mt-3">
                            <Group width="6,6" colClass="ux-rfi-vertical-line">
                                <Para
                                    className="ux-rfi-content2 "
                                    labelKey="white_card_left_content"></Para>

                                <Para
                                    className="ux-rfi-content2"
                                    labelKey="white_card_right_content"></Para>
                            </Group>

                            <Group width="6,6" colClass="ux-rfi-vertical-line">
                                <div className="d-flex justify-content-center ">
                                    <Button
                                        id="search-rfi-btn"
                                        className="ux-rfi-white-button mt-3"
                                        labelKey="search_rfi"
                                        mode="link"
                                        click={() => Navigate.to('/search')}></Button>
                                </div>

                                <div className="d-flex justify-content-center">
                                    <Button
                                        id="request-info-btn"
                                        className="ux-rfi-white-button  mt-3"
                                        labelKey="request_info"
                                        mode="link"
                                        disabled={!RFIUtil.isAdmin() && !RFIUtil.isPOC()}
                                        click={() => Navigate.to('/create-rfi')}></Button>
                                </div>
                            </Group>
                        </div>
                    </div>
                ) : (
                    <Row className="d-flex justify-content-center text-center m-5 rfi-unauth-container">
                        <Para
                            labelKey="unauthorized_msg"
                            className="ux-rfi-font font-weight-bold m-auto p-3"></Para>
                    </Row>
                )}
                {RFIUtil.isAdmin() ? <ExcelUpload></ExcelUpload> : null}
            </BodySection>
        </Page>
    );
};

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



update the above code to display the overlay in center, then display the button below the overlay placed in center. then the white-block should also get displayed in the screen center.

Also update the below css file to remove any unused css classes and make the necessary changes

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

.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 {
    border-right: 2px solid #70a71c;
    @media (max-width: 319px) {
        border-right: 0px;
    }
    @media (min-width: 427px) and (max-width: 767px) {
        border-right: 0px;
    }
    @media (min-width: 792px) and (max-width: 820px) {
        border-right: 0px;
    }
}

.green-block,
.white-block {
    width: 60%;
    @media (min-width: 1025px) {
        margin: 3rem !important;
    }

    @media (max-width: 1025px) {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    @media (max-width: 426px) {
        min-width: 320px !important;
    }
    @media (max-width: 350px) {
        min-width: 200px !important;
    }
}

.rfi-unauth-container {
    background-color: #f2e48c;
    border: 4px solid #e38824;
}

.ux-row {
    margin-right: 0px;
    margin-left: 0px;
}


// new

.hero-section {
    position: relative;
    width: 100%;
    height: 100%; /* or any desired height */
    background: no-repeat center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f2e48c;
}

.overlay-body{
    background: rgba(0, 0, 0, 0.7); /* Black background with 50% opacity */
    box-shadow:  0 4px 8px 0 rgba(0, 0, 0, 0.25);
    margin: 80px;
    padding: 30px;
    max-width: 600px;
    width: 80%;
}

.button-container {
    display: flex;
    justify-content: center;
}