Skip to content

Commit 70c4d12

Browse files
monkeyWiemonkeyWie
committed
fmt
1 parent 4af99a2 commit 70c4d12

File tree

7 files changed

+405
-425
lines changed

7 files changed

+405
-425
lines changed

‎docs/src/components/features.tsx‎

Lines changed: 78 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,89 @@
1-
'use client';
1+
"use client";
22

3-
import { useTranslations } from 'next-intl';
4-
import { Home, Smartphone, Cloud, Layers, RefreshCw, Gift } from 'lucide-react';
3+
import { Cloud, Gift, Home, Layers, RefreshCw, Smartphone } from "lucide-react";
4+
import { useTranslations } from "next-intl";
55

66
export function Features() {
7-
const t = useTranslations('features');
7+
const t = useTranslations("features");
88

9-
const features = [
10-
{
11-
icon: Smartphone,
12-
emoji: '📱',
13-
key: 'localFirst'
14-
},
15-
{
16-
icon: Home,
17-
emoji: '🏠',
18-
key: 'selfHosted'
19-
},
20-
{
21-
icon: Gift,
22-
emoji: '🎁',
23-
key: 'freeGeneration'
24-
},
25-
{
26-
icon: Cloud,
27-
emoji: '☁️',
28-
key: 'oneClickDeploy'
29-
},
30-
{
31-
icon: Layers,
32-
emoji: '🤖',
33-
key: 'multiModel'
34-
},
35-
{
36-
icon: RefreshCw,
37-
emoji: '🔄',
38-
key: 'cloudSync'
39-
},
40-
];
9+
const features = [
10+
{
11+
icon: Smartphone,
12+
emoji: "📱",
13+
key: "localFirst",
14+
},
15+
{
16+
icon: Home,
17+
emoji: "🏠",
18+
key: "selfHosted",
19+
},
20+
{
21+
icon: Gift,
22+
emoji: "🎁",
23+
key: "freeGeneration",
24+
},
25+
{
26+
icon: Cloud,
27+
emoji: "☁️",
28+
key: "oneClickDeploy",
29+
},
30+
{
31+
icon: Layers,
32+
emoji: "🤖",
33+
key: "multiModel",
34+
},
35+
{
36+
icon: RefreshCw,
37+
emoji: "🔄",
38+
key: "cloudSync",
39+
},
40+
];
4141

42-
return (
43-
<section className="py-16 sm:py-20 lg:py-24 px-4 sm:px-6 lg:px-8">
44-
<div className="container mx-auto max-w-7xl">
45-
{/* Section Header */}
46-
<div className="text-center mb-16 sm:mb-20">
47-
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 sm:mb-6">
48-
<span className="gradient-text">{t('title')}</span>
49-
</h2>
50-
<p className="text-lg sm:text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
51-
{t('subtitle')}
52-
</p>
53-
</div>
42+
return (
43+
<section className="px-4 py-16 sm:px-6 sm:py-20 lg:px-8 lg:py-24">
44+
<div className="container mx-auto max-w-7xl">
45+
{/* Section Header */}
46+
<div className="mb-16 text-center sm:mb-20">
47+
<h2 className="mb-4 font-bold text-3xl sm:mb-6 sm:text-4xl lg:text-5xl">
48+
<span className="gradient-text">{t("title")}</span>
49+
</h2>
50+
<p className="mx-auto max-w-3xl text-lg text-muted-foreground leading-relaxed sm:text-xl">{t("subtitle")}</p>
51+
</div>
5452

55-
{/* Features Grid - Mobile First Approach */}
56-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 sm:gap-12">
57-
{features.map((feature, index) => {
58-
const Icon = feature.icon;
53+
{/* Features Grid - Mobile First Approach */}
54+
<div className="grid grid-cols-1 gap-8 sm:gap-12 md:grid-cols-2 lg:grid-cols-3">
55+
{features.map((feature, index) => {
56+
const Icon = feature.icon;
5957

60-
return (
61-
<div
62-
key={index}
63-
className="group relative"
64-
>
65-
{/* Feature Card */}
66-
<div className="linear-card p-6 sm:p-8 h-full transition-all duration-300 hover:scale-105 glow">
67-
{/* Icon Section */}
68-
<div className="flex items-center justify-center mb-6">
69-
<div className="w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-primary to-primary/80 rounded-2xl flex items-center justify-center shadow-lg glow group-hover:shadow-xl transition-shadow duration-300">
70-
<Icon className="w-10 h-10 sm:w-12 sm:h-12 text-primary-foreground" />
71-
</div>
72-
</div>
58+
return (
59+
<div key={index} className="group relative">
60+
{/* Feature Card */}
61+
<div className="linear-card glow h-full p-6 transition-all duration-300 hover:scale-105 sm:p-8">
62+
{/* Icon Section */}
63+
<div className="mb-6 flex items-center justify-center">
64+
<div className="glow flex h-20 w-20 items-center justify-center rounded-2xl bg-gradient-to-br from-primary to-primary/80 shadow-lg transition-shadow duration-300 group-hover:shadow-xl sm:h-24 sm:w-24">
65+
<Icon className="h-10 w-10 text-primary-foreground sm:h-12 sm:w-12" />
66+
</div>
67+
</div>
7368

74-
{/* Content */}
75-
<div className="text-center space-y-3">
76-
<h3 className="text-xl sm:text-2xl font-bold text-foreground">
77-
{t(`items.${feature.key}.title`)}
78-
</h3>
69+
{/* Content */}
70+
<div className="space-y-3 text-center">
71+
<h3 className="font-bold text-foreground text-xl sm:text-2xl">{t(`items.${feature.key}.title`)}</h3>
7972

80-
<p className="text-sm sm:text-base text-muted-foreground leading-relaxed">
81-
{t(`items.${feature.key}.subtitle`)}
82-
</p>
83-
</div>
73+
<p className="text-muted-foreground text-sm leading-relaxed sm:text-base">
74+
{t(`items.${feature.key}.subtitle`)}
75+
</p>
76+
</div>
8477

85-
86-
{/* Decorative Elements */}
87-
<div className="absolute top-4 right-4 w-2 h-2 bg-primary/30 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
88-
<div className="absolute bottom-4 left-4 w-1 h-1 bg-primary/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-100"></div>
89-
</div>
90-
</div>
91-
);
92-
})}
93-
</div>
94-
</div>
95-
</section>
96-
);
78+
{/* Decorative Elements */}
79+
<div className="absolute top-4 right-4 h-2 w-2 rounded-full bg-primary/30 opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
80+
<div className="absolute bottom-4 left-4 h-1 w-1 rounded-full bg-primary/20 opacity-0 transition-opacity delay-100 duration-300 group-hover:opacity-100"></div>
81+
</div>
82+
</div>
83+
);
84+
})}
85+
</div>
86+
</div>
87+
</section>
88+
);
9789
}

0 commit comments

Comments
 (0)