page.tsx
4.59 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
"use client"
import Header from '@/components/Header';
import Swiper from '@/components/Swiper';
import { Grid, Typography, Divider } from '@mui/material';
import Image from 'next/image';
import { useState, useEffect } from 'react';
const HARDWARES = [
{ title: '2000w laser-beam welding machine', imageUrl: '/imgs/pc/pack/1.png' },
{ title: '5000A resistance welding machine', imageUrl: '/imgs/pc/pack/2.png' },
{ title: 'Numerical control machine', imageUrl: '/imgs/pc/pack/3.png' },
{ title: '5V 60A', imageUrl: '/imgs/pc/pack/4.png' },
{ title: '5V3A', imageUrl: '/imgs/pc/pack/5.png' },
{ title: '100V/120A', imageUrl: '/imgs/pc/pack/6.png' },
{ title: 'Oscilloscope', imageUrl: '/imgs/pc/pack/7.png' }
];
const PackProduct = () => {
const [equipSlide, setEquipSlide] = useState(0);
const [isMobile, setIsMobile] = useState(false);
useEffect(() => {
const checkIfMobile = () => {
setIsMobile(window.innerWidth < 768);
};
checkIfMobile();
window.addEventListener('resize', checkIfMobile);
return () => {
window.removeEventListener('resize', checkIfMobile);
};
}, []);
useEffect(() => {
const interval = setInterval(() => {
setEquipSlide((currentSlide) => (currentSlide + 1) % HARDWARES.length);
}, 2000);
return () => clearInterval(interval);
}, []);
return (
<>
<Header />
<Image
layout="responsive"
className='block'
width={1200}
height={350}
objectFit="cover"
src={!isMobile ? "/imgs/pc/pack/banner.jpg" : "/mobile/banner-pack.png"}
alt="Pack Product Banner"
/>
<div className="font-weight-bold leading-[30px] text-white bg-[url('/imgs/pc/common/bg.png')] p-4 sm:p-8">
We are proud to introduce our PACK product to you. As a leader in the market application of scientific research projects, we focus on transforming scientific achievements into practical market applications. We provide a variety of cases to meet different project requirements, such as fast-charging mobile power supplies, smart flashlights, low-speed vehicles, and small-scale energy storage. We are committed to successfully applying the results of scientific research projects to the market and providing innovative solutions for our customers."
</div>
<div className="p-8">
<div className="mb-8 text-primary-blue text-center text-4xl mb-sm-6">
<b>Pack Hardware</b>
</div>
{isMobile ? (
// Mobile View
<div className="flex flex-col items-center">
{HARDWARES.map((hardware, index) => (
<div key={hardware.title} className={index === equipSlide ? 'block' : 'hidden'}>
<img src={hardware.imageUrl} alt={hardware.title} className="mb-2" />
<div className="text-center">{hardware.title}</div>
</div>
))}
</div>
) : (
<Swiper list={HARDWARES} />
)}
</div>
<div className="p-8 bg-grey-lighten-5">
<div className="mb-4 mb-sm-16 text-primary-blue text-4xl text-center ">
<b>Succeed Case</b>
</div>
<Grid container spacing={2} className="mb-8">
<Grid item xs={12} sm={8}>
<Image src="/imgs/pc/pack/8.png" alt="Case 8" layout="responsive" width="1200" height="358" objectFit="cover" />
</Grid>
<Grid item xs={12} sm={4} className="flex items-center justify-center">
<Typography variant="subtitle1" className="text-justify font-medium text-gray-800">
Canrd helps our customer to accomplish the requirement from PET current collector to power bank;
</Typography>
</Grid>
</Grid>
<Divider className="my-8 sm:my-16" />
<Grid container spacing={2} className="mb-16">
<Grid item xs={12} sm={4} className="flex items-center justify-center">
<Typography variant="body1" className="text-justify font-medium text-gray-800">
<p className="mb-3">
1. Canrd helps our customer to accomplish the requirement from sodium cathode to standard car;
</p>
<p>
2. Canrd is pleased to be the bridge between new material to cell and even to terminal application product which can accelerate the R&D development;
</p>
</Typography>
</Grid>
<Grid item xs={12} sm={8}>
<Image src="/imgs/pc/pack/9.png" alt="Case 9" layout="responsive" width="1200" height="358" objectFit="cover" />
</Grid>
</Grid>
</div>
</>
);
}
export default PackProduct