page.tsx
5.42 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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
import React from 'react';
import { Box, Grid, Typography, Paper, useMediaQuery, Card, CardContent, CardMedia } from '@mui/material';
import { Timeline } from '@mui/lab';
import Header from '@/components/Header';
const SECTIONS = [
{
title: "Team",
description: "Core team members are all from ATL/Foxconn 12+working experience",
imgSrc: "/about_img/5.png",
},
{
title: "Patents",
description: "More than 120 invention patents, covering materials, design, process, equipment and so on",
imgSrc: "/about_img/6.png",
},
{
title: "Hardware",
description: "Independent battery pilot line and equipment production line",
imgSrc: "/about_img/7.png",
},
];
const CompanyProfile = () => {
// const theme = useTheme();
const isMobile = true
// useMediaQuery(theme.breakpoints.down('sm'));
return (
<>
<Header />
<Box className="p-0 sm:p-4">
{!isMobile && (
<Box className="my-8 sm:my-16 text-blue-800 text-h4 text-center">
<strong>Company Profile</strong>
</Box>
)}
<Grid container className="pb-16 ma-0">
<Grid item xs={12} sm={5} className="p-0 relative">
<img src="/imgs/pc/about/1.jpg" alt="Company" className="w-full" />
{isMobile && (
<Box className="py-4 absolute bottom-0 w-full text-center bg-blue-700 text-white">
<strong>Company Profile</strong>
</Box>
)}
</Grid>
<Grid item xs className="leading-8">
<Typography color="textPrimary">
<strong>1.</strong> 2015.2.11 was established in Songshan Lake High-tech Zone;
</Typography>
<Typography color="textPrimary">
<strong>2.</strong> Registered capital of 1000W;
</Typography>
<Typography color="textPrimary">
<strong>3.</strong> Main business of new energy technology development
</Typography>
<Typography color="textPrimary">
<strong>4.</strong> Customized/ equipment / testing / materials / new product development, etc.;
</Typography>
<Typography color="textPrimary">
<strong>5.</strong> In 2017, it was approved as a national high-tech enterprise;
</Typography>
<Typography color="textPrimary">
<strong>6.</strong> 120+ invention patents; 100 + authorized;
</Typography>
<Typography color="textPrimary">
<strong>7.</strong> The plant area is 6,000 m<sup>2</sup>, with 70 employees (the core team is from Ningde ATL/ Foxconn).
</Typography>
{/* Repeat for other items */}
</Grid>
{/* {isMobile && (
<Grid item xs={12} className="leading-6 text-white bg-blue-600 px-10 pb-8">
<ul className="list-disc">
<li className="mb-1 border-white border-0 border-b-2 border-solid">
2015.2.11 was established in Songshan Lake High-tech Zone;
</li>
</ul>
</Grid>
)} */}
</Grid>
</Box>
<Paper className="py-8 sm:py-16" style={{
background: `url(${isMobile ? '/mobile/about-bg.png' : '/about_img/bg.png'}) no-repeat`,
backgroundSize: '100% 100%',
}}>
<div className="container mx-auto">
<Typography variant="h5" component="div" className="mb-8 text-center text-blue-800 sm:mb-6">
<strong>Milestone</strong>
</Typography>
<Timeline />
</div>
</Paper>
<Paper className="bg-gray-200 pt-8 sm:pt-16 pb-32" style={{
background: isMobile ? 'url(/mobile/about-bg.png) no-repeat center/cover' : 'url(/about_img/bg.png) no-repeat center/cover',
}}>
<Box className="container mx-auto">
<Typography variant="h5" className="mb-8 text-center text-blue-800 sm:mb-6" component="div">
<strong>R&D Ability</strong>
</Typography>
<Typography className="mb-6 text-center max-w-xl mx-auto text-gray-800" variant="body1">
The combination of hardware and software creates strong research and development capabilities.
</Typography>
<Typography className="mb-16 text-center max-w-xl mx-auto text-gray-800" variant="body1">
The invention patents cover new materials such as silicon carbon, graphene, lithium sulfur, sodium electricity and lithium metal, as well as gel process, pre-lithium process and flexible battery design.
</Typography>
<Grid container spacing={4}>
{SECTIONS.map((section, index) => (
<Grid item xs={12} sm={4} key={index}>
<Card variant="outlined" className={isMobile ? 'rounded-lg' : ''}>
<CardMedia
component="img"
image={section.imgSrc}
alt={section.title}
className={isMobile ? 'rounded-t-lg' : ''}
/>
<CardContent className={`bg-blue-800 ${isMobile ? 'rounded-b-lg text-white' : 'text-gray-800'}`}>
<Typography variant="h6">{section.title}</Typography>
<Typography variant="body2">{section.description}</Typography>
</CardContent>
</Card>
</Grid>
))}
</Grid>
</Box>
</Paper>
</>
);
};
export default CompanyProfile;