import { ScrollView } from '@/components/ScrollView';
import { PageLayout } from '@/layouts/PageLayout';
import StyledButton from '@/components/StyledButton';
import { AppContianer } from '@/layouts/AppContianer';
import { Features } from './Features';
import { Advantages } from './Advantages';
import Baas33img from '@/assets/img/baas33.png'
import {baasBalls} from '@/config/ballSetting'

import { HeroBaas } from './HeroBaas';

import { baasBg } from '@/config/bgSetting';
import { Service } from './Service';
import { useContext, useEffect } from 'react';
import { AppContext } from '@/store/AppProvider';
import { useNavigate } from 'react-router';
import { LazyImg } from '@/components/LazyImg';
export interface IAppProps {
}

export default function Baas33 () {
  const navigate = useNavigate()
  const b =['#sdfiw2','#fud8fu','#sdif822']

  return (
    <ScrollView>
      <div className="vertival-content">
      <PageLayout ballConfig={baasBalls[0].setting}>
        <>
          <div className="translate-y-[8vh] relative">
          <AppContianer className='z-[9999] labtop:px-[120px]'>
      
                <div>
                  <div className="title-1-cn">复杂美区块链开放服务平台</div>
                  <div className="flex gap-x-5 mt-5 ">
                    <StyledButton text='开发者实验室'  color="black" ></StyledButton>
                    <StyledButton text='开发者文档'  color="black" onClick={()=>navigate('/docs/1')}></StyledButton>
                    <StyledButton text='一键搭建'  color="red"></StyledButton>
                  </div>
                </div>
                </AppContianer>
                <div>
                <LazyImg 
                  img={Baas33img}
                  animate='baas33'
                  className="w-[110%]"
                ></LazyImg>
                <div className=" -translate-y-[5rem] flex justify-center gap-x-20 title-2-cn">
                  <div>高效</div>
                  <div>稳定</div>
                  <div>低成本</div>
                  <div>安装便捷</div>
                </div>
                </div>
              </div>
           

        </>
      </PageLayout>
      <PageLayout ballConfig={baasBalls[1].setting} gradientConfig={baasBg[1].config}>
        <Features></Features>
      </PageLayout>

      <PageLayout ballConfig={baasBalls[2].setting} gradientConfig={baasBg[2].config}>
        <Advantages/>
      </PageLayout>

      <PageLayout ballConfig={baasBalls[3].setting} gradientConfig={baasBg[3].config}>
        <Service/>
      </PageLayout>
      </div>
    </ScrollView>
  );
}
