page.tsx 1.86 KB
"use client"
import Header from '@/components/Header';
import MainTileListOdd from '@/components/MainTitleList/ThreeCard';
import { useInit } from '@/hooks/init';
import { Container } from '@mui/material';
import React, { useState, useEffect } from 'react';
// import MainTitleList from '@/components/MainTitleList'; 
// import MainTitleListOdd from '@/components/MainTitleListOdd'; 
// import { isMobile } from '@/utils'; 
import Carousel from 'react-material-ui-carousel'

const HomePage = async () => {
  // const store = useCategoryStore();
  const [lab, setLab] = useState({ categoryDisplayName: '', list: [] });
  useInit()
  // useEffect(() => {
  //   if (store?.list?.[3]) {
  //     setLab(store.list[3]);
  //   }
  // }, [store]);

  const banners = [
    '/imgs/pc/home/banner/banner1.jpg',
    '/imgs/pc/home/banner/banner2.jpg',
    '/imgs/pc/home/banner/banner3.jpg',
    '/imgs/pc/home/banner/banner4.jpg',

  ];

  const mobileBanners = [
    '/mobile/banner-index1.png',
    '/mobile/banner-index2.png',
    '/mobile/banner-index3.png',
  ];

  return (
    <div className="tw-w-full">
      <Header />
      <div className='h-[600px] w-full'>
        <Carousel fullHeightHover  >
          {banners.map((banner) => (
            <img src={banner} alt="canrud" key={banner} className='w-full h-[500px]' />
          ))}
        </Carousel>
        <div className="tw-py-8 py-sm-16">
          <Container>
            {/* <MainTileListOdd 
            title="Material Reagents" 
            list={[]}
            desc="Leading global provider of energy storage research materials and providing other professional/universal experimental materials. "
            /> */}
            {/* <MainTitleListOdd
        :title="t('材料试剂')"
        :list="materials"
        
      /> */}
          </Container>
        </div>
      </div>
    </div>
  );
};


export default HomePage;