import React from 'react';
import { Flex, Layout } from 'antd';
import HeaderLeft from '../complates/HeaderLeft'
import HeaderRight from '../complates/HeaderRight'
import Introduction from '../complates/Introduction'
import ProcessFlow from '../complates/ProcessFlow'
import Example from '../complates/Examples'
import CheckeredQuery from '../complates/CheckeredQuery'
import Contact from '../complates/Contact'
import Sidebar from '../complates/Sidebar'

const { Header, Footer, Content } = Layout;
const headerStyle = {
    height: 64,
    paddingInline: 48,
    lineHeight: '64px',
    backgroundColor: '#fff',
    display: "flex",
    padding: "0 100px",
    justifyContent: "space-between",
    position: "fixed",
    width: '100%',
    zIndex: "100",
};

const contentStyle = {
    marginTop:64,
    backgroundColor: '#fff',
};
const footerStyle = {
    padding: "100px 0px 0px"
};

const layoutStyle = {
    borderRadius: 8,
    overflow: 'hidden',
    width: '100%',
};
function Home() {
    return (
        <Flex gap="middle" wrap>
            <Layout style={layoutStyle}>
                <Header style={headerStyle}>
                    <HeaderLeft />
                    <HeaderRight />
                </Header>
                <Content style={contentStyle}>
                    <div id="Introduction">
                        <Introduction />
                    </div>
                    <div id="ProcessFlow">
                        <ProcessFlow />
                    </div>
                    <div id="Example">
                        <Example />
                    </div>
                    <div id="CheckeredQuery">
                        <CheckeredQuery />
                    </div>
                    <Sidebar />
                </Content>
                <Footer style={footerStyle}>
                    <div id="Contact">
                        <Contact />
                    </div>
                </Footer>
            </Layout>
        </Flex>
    );
}

export default Home;