<mvc:View controllerName="homepage.controller.Main"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:f="sap.f" 
    xmlns:grid="sap.ui.layout.cssgrid"
    xmlns:core="sap.ui.core">
    <Page id="mainPage" showHeader="false" title="{i18n>title}">
        <content>
            <VBox id="gatewayContainer" class="gatewayContainer">

                <!-- header -->
                <FlexBox id="header" class="header" justifyContent="SpaceBetween" alignItems="Center">
                    <VBox id="logoBox">
                        <Image id="logoImg" class="logoImg" alt="logo" densityAware="false" press="onNavToTarget" src="image/logo_light.png" width="160px" height="auto" />
                    </VBox>
                    <VBox id="headerTextBox" alignContent="Center">
                        <!-- <Switch 
                            id="themeToggleSwitch"
                            state="true" 
                            customTextOn="&#x200B;"   
                            customTextOff="&#x200B;"
                            change="onToggleTheme" 
                            class="themeSwitch" /> -->
                            <!-- <Text id="headerText" textAlign="End" text="" />  Choose Your Next Growth System -->
                    </VBox>
                </FlexBox>
                <!-- header -->


                <!-- section 1 -->
                <FlexBox id="topTitle" class="topTitle" justifyContent="Center">
                    <VBox id="title" class="title" alignItems="Center" alignContent="Center" justifyContent="Center">
                        <VBox id="mainTitleBox" alignItems="Center">
                            <FormattedText id="mainTitleTop" 
                                class="maintitle" 
                                htmlText="&lt;strong&gt;Corporate operations&lt;/strong&gt; and &lt;strong&gt;marketing growth,&lt;/strong&gt;" />
                            <Text id="mainTitleBottom" class="maintitle" textAlign="Center" text="Please select the following direction."/>
                        </VBox>
                        <Text id="textBottom" class="textBottom" textAlign="Center"  text="From strategic consulting to data design, advertising operations, content automation, and performance analysis.
    SPRONEXT reconstructs the growth process of the brand into an AI-centric operating system." />
                    </VBox>
                </FlexBox>
                <!-- section 1 -->


                <!-- section 2 -->
                <grid:CSSGrid id="gridBox" gridTemplateColumns="repeat(auto-fit, minmax(280px, 1fr))" gridGap="1rem" width="100%">

                    <core:Fragment 
                        id="enterpriseCard" 
                        fragmentName="homepage.fragment.GatewayCard" 
                        type="XML" 
                        binding="{cardData>/enterprise}" />
                    <core:Fragment 
                        id="aiMarketingCard" 
                        fragmentName="homepage.fragment.GatewayCard" 
                        type="XML" 
                        binding="{cardData>/marketing}" />

                </grid:CSSGrid>
                <!-- section 2 -->


                <!-- object -->
                <VBox id="article1" class="article" ></VBox>
                <VBox id="article2" class="article2" ></VBox>
                <!-- object -->
            </VBox>
        </content>
    </Page>
</mvc:View>