|
| 1 | +import { useTranslation } from 'react-i18next'; |
| 2 | +import styled from 'styled-components'; |
| 3 | +import { |
| 4 | + DesktopOutlined, |
| 5 | + DatabaseOutlined, |
| 6 | + HddOutlined, |
| 7 | + ThunderboltOutlined, |
| 8 | + GlobalOutlined, |
| 9 | + ToolOutlined, |
| 10 | +} from '@ant-design/icons'; |
| 11 | + |
| 12 | +import PageHeader from '#/common/PageHeader.tsx'; |
| 13 | +import HeaderImage from '#/common/HeaderImage.tsx'; |
| 14 | + |
| 15 | +import getImageUrl from '@/utils/getImageUrl.ts'; |
| 16 | + |
| 17 | +const SpecsContainer = styled.div` |
| 18 | + background: var(--bg-secondary); |
| 19 | + padding: 80px 30px; |
| 20 | + min-height: 400px; |
| 21 | +
|
| 22 | + @media (max-width: 768px) { |
| 23 | + padding: 60px 20px; |
| 24 | + } |
| 25 | +`; |
| 26 | + |
| 27 | +const SpecsContent = styled.div` |
| 28 | + max-width: 1200px; |
| 29 | + margin: 0 auto; |
| 30 | +`; |
| 31 | + |
| 32 | +const SectionTitle = styled.h2` |
| 33 | + text-align: center; |
| 34 | + color: var(--text-primary); |
| 35 | + margin-bottom: 60px; |
| 36 | + font-weight: 700; |
| 37 | + font-size: clamp(1.8rem, 4vw, 2.5rem); |
| 38 | +`; |
| 39 | + |
| 40 | +const SpecsGrid = styled.div` |
| 41 | + display: grid; |
| 42 | + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); |
| 43 | + gap: 30px; |
| 44 | + margin-bottom: 60px; |
| 45 | +
|
| 46 | + @media (max-width: 768px) { |
| 47 | + grid-template-columns: 1fr; |
| 48 | + gap: 20px; |
| 49 | + } |
| 50 | +`; |
| 51 | + |
| 52 | +const SpecCard = styled.div` |
| 53 | + background: var(--bg-primary); |
| 54 | + border-radius: var(--radius-lg); |
| 55 | + padding: 30px; |
| 56 | + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| 57 | + transition: |
| 58 | + transform 0.3s ease, |
| 59 | + box-shadow 0.3s ease; |
| 60 | +
|
| 61 | + &:hover { |
| 62 | + transform: translateY(-5px); |
| 63 | + box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15); |
| 64 | + } |
| 65 | +`; |
| 66 | + |
| 67 | +const SpecIcon = styled.div` |
| 68 | + font-size: 3rem; |
| 69 | + margin-bottom: 15px; |
| 70 | + text-align: center; |
| 71 | + color: var(--color-primary); |
| 72 | +
|
| 73 | + .anticon { |
| 74 | + font-size: 3rem; |
| 75 | + } |
| 76 | +`; |
| 77 | + |
| 78 | +const SpecName = styled.h3` |
| 79 | + color: var(--text-primary); |
| 80 | + font-size: 1.3rem; |
| 81 | + font-weight: 600; |
| 82 | + margin-bottom: 10px; |
| 83 | + text-align: center; |
| 84 | +`; |
| 85 | + |
| 86 | +const SpecValue = styled.p` |
| 87 | + color: var(--text-secondary); |
| 88 | + font-size: 1rem; |
| 89 | + line-height: 1.6; |
| 90 | + text-align: center; |
| 91 | +`; |
| 92 | + |
| 93 | +const FeaturesContainer = styled.div` |
| 94 | + background: var(--color-primary-light); |
| 95 | + border-radius: var(--radius-lg); |
| 96 | + padding: 40px; |
| 97 | + margin-top: 40px; |
| 98 | +
|
| 99 | + @media (max-width: 768px) { |
| 100 | + padding: 30px 20px; |
| 101 | + } |
| 102 | +`; |
| 103 | + |
| 104 | +const FeaturesList = styled.ul` |
| 105 | + list-style: none; |
| 106 | + padding: 0; |
| 107 | + margin: 0; |
| 108 | +`; |
| 109 | + |
| 110 | +const FeatureItem = styled.li` |
| 111 | + color: var(--text-primary); |
| 112 | + font-size: 1.1rem; |
| 113 | + line-height: 1.8; |
| 114 | + margin-bottom: 15px; |
| 115 | + padding-left: 30px; |
| 116 | + position: relative; |
| 117 | +
|
| 118 | + &:before { |
| 119 | + content: '✓'; |
| 120 | + position: absolute; |
| 121 | + left: 0; |
| 122 | + color: var(--color-primary); |
| 123 | + font-weight: bold; |
| 124 | + font-size: 1.3rem; |
| 125 | + } |
| 126 | +
|
| 127 | + &:last-child { |
| 128 | + margin-bottom: 0; |
| 129 | + } |
| 130 | +`; |
| 131 | + |
| 132 | +const iconMap: Record<string, React.ReactNode> = { |
| 133 | + processor: <DesktopOutlined />, |
| 134 | + memory: <DatabaseOutlined />, |
| 135 | + storage: <HddOutlined />, |
| 136 | + power: <ThunderboltOutlined />, |
| 137 | + network: <GlobalOutlined />, |
| 138 | + maintenance: <ToolOutlined />, |
| 139 | +}; |
| 140 | + |
| 141 | +const Hardware = () => { |
| 142 | + const { t } = useTranslation(); |
| 143 | + |
| 144 | + const specs = t('hardware.specs', { returnObjects: true }) as Array<{ |
| 145 | + icon: string; |
| 146 | + name: string; |
| 147 | + value: string; |
| 148 | + }>; |
| 149 | + |
| 150 | + const features = t('hardware.features', { returnObjects: true }) as string[]; |
| 151 | + |
| 152 | + return ( |
| 153 | + <> |
| 154 | + <PageHeader |
| 155 | + backgroundComponent={ |
| 156 | + <HeaderImage imageUrl={getImageUrl(t('hardware.imageUrl'))} /> |
| 157 | + } |
| 158 | + headerTextArray={[t('hardware.title')]} |
| 159 | + subHeaderContentArray={[t('hardware.description')]} |
| 160 | + /> |
| 161 | + <SpecsContainer> |
| 162 | + <SpecsContent> |
| 163 | + <SectionTitle>{t('hardware.specsTitle')}</SectionTitle> |
| 164 | + <SpecsGrid> |
| 165 | + {Array.isArray(specs) && |
| 166 | + specs.map((spec, index) => ( |
| 167 | + <SpecCard key={index}> |
| 168 | + <SpecIcon>{iconMap[spec.icon]}</SpecIcon> |
| 169 | + <SpecName>{spec.name}</SpecName> |
| 170 | + <SpecValue>{spec.value}</SpecValue> |
| 171 | + </SpecCard> |
| 172 | + ))} |
| 173 | + </SpecsGrid> |
| 174 | + <FeaturesContainer> |
| 175 | + <SectionTitle>{t('hardware.featuresTitle')}</SectionTitle> |
| 176 | + <FeaturesList> |
| 177 | + {Array.isArray(features) && |
| 178 | + features.map((feature, index) => ( |
| 179 | + <FeatureItem key={index}>{feature}</FeatureItem> |
| 180 | + ))} |
| 181 | + </FeaturesList> |
| 182 | + </FeaturesContainer> |
| 183 | + </SpecsContent> |
| 184 | + </SpecsContainer> |
| 185 | + </> |
| 186 | + ); |
| 187 | +}; |
| 188 | + |
| 189 | +export default Hardware; |
0 commit comments