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 {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';
export interface IAppProps {
}

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

  return (
    <ScrollView>
      <div className="vertival-content">
      <PageLayout ballConfig={baasBalls[0].setting}>
        <>
        <AppContianer className='z-[999999]'>
                <div className="translate-y-[8vh]">
                  <div className=" text-4xl  font-mono  tracking-widest font-medium">复杂美区块链开放服务平台</div>
                  <div className="flex gap-x-5 mt-5 ">
                    <StyledButton text='开发者实验室'  color="black"></StyledButton>
                    <StyledButton text='开发者文档'  color="black"></StyledButton>
                    <StyledButton text='一键搭建'  color="red"></StyledButton>
                  </div>
                </div>
        </AppContianer>
            <div className="w-full">
               <HeroBaas></HeroBaas>
            </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>
  );
}
