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-sm-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">
                    <div className="abc 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 class="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>

                    <div className="abc2 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="">
                                <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: 430px){
            border-left: 0px;
        }
        @media (min-width: 547px) and (max-width: 767px) {
            border-left: 0px;
        }
        @media (min-width: 792px) and (max-width: 997px) {
            border-left: 0px;
        }
    }

    // .abc{
    //     @media (min-width: 455px){
    //         margin: 32px;
    //     }
    //     @media (min-width: 290px) and (max-width: 454px) {
    //         margin: 2px;
    //         margin-top: 7px;
    //     }
    // }

    // .abc2{
    //     @media (min-width: 455px){
    //         margin-top: 45px;
    //     }
    //     @media (min-width: 290px) and (max-width: 454px) {
    //         margin: 2px;
    //         margin-top: 25px;
    //     }
    // }

    //below 791 it should be below. column layout (request for info)

    // .button_abc{
    //     @media (min-width: 455px){
    //         margin-top: 5px
    //     }
    //     @media (min-width: 290px) {
    //         margin: 2px;
    //         margin-top: 25px;
    //     }
    // }





All the content withing the group should be one below the other for the size of the screen beow 792. Bot the div and grid sections in the Group should be of the same size of the above card section in mobile view (anything below 792px) Write the code for this. The content inside group should be next to each other in width=(5,7) when the width of the screen is above 792px