Untitled

import React, { useEffect } from 'react';
import { withPage, Navigate, useAppState, Lift } from '@d-lift/core';
import { Page, Button, Para, Row, 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 className="hero-section">
                    <div className="overlay">
                        <Header
                            className="ux-rfi-heading"
                            labelKey="HHS_knowledgebase"
                        ></Header>
                        <Para className="ux-rfi-content mt-2" labelKey="header_content"></Para>
                    </div>
                </div>
                <Row className="button-container">
                    <Button
                        id="knowledgeBase-btn"
                        className="ux-rfi-white-button"
                        labelKey="knowledge_base"
                        click={() => Navigate.to('/hhs-knowledgebase')}
                    ></Button>
                </Row>
                {RFIUtil.isAdmin() || RFIUtil.isPOC() ? (
                    <div className="white-block">
                        <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 /> : null}
            </BodySection>
        </Page>
    );
};

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







.hero-section {
    position: relative;
    width: 100%;
    height: 100vh; /* Full screen height */
    background: url('../../../images/hero-books.png') no-repeat center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.overlay {
    background: rgba(0, 0, 0, 0.7); /* Black background with 70% opacity */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
    padding: 30px;
    max-width: 600px;
    width: 80%;
    text-align: center;
    color: white;
    border-radius: 10px;
}

.button-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.white-block {
    width: 60%;
    margin: 3rem auto; /* Center the white block */
    padding: 20px;
    border: 2px solid #000000;
    border-radius: 10px;
    background-color: white;
}

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

.ux-rfi-content {
    font-family: Roboto !important;
    font-size: 1rem !important;
    padding-top: 10px;
    color: #ffffff;
}

.ux-rfi-content2 {
    font-family: sans-serif !important;
    font-size: 0.8rem !important;
    color: #000000;
}

.ux-rfi-round-label {
    font-family: sans-serif !important;
    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-white-button {
    background-color: #ffffff;
    color: #000000;
}

.ux-rfi-vertical-line {
    border-right: 2px solid #70a71c;
}

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

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