Skip to content

Commit a320dc3

Browse files
arunavo4arunavo4
committed
Updated deisgn
1 parent 97997bd commit a320dc3

File tree

8 files changed

+224
-99
lines changed

8 files changed

+224
-99
lines changed

‎www/src/components/CTA.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,16 @@ export function CTA() {
77
return (
88
<section className="py-16 sm:py-24 px-4 sm:px-6 lg:px-8">
99
<div className="max-w-4xl mx-auto">
10-
<div className="relative overflow-hidden rounded-2xl sm:rounded-3xl bg-card border p-6 sm:p-8 md:p-12 text-center">
10+
<div className="relative overflow-hidden rounded-2xl sm:rounded-3xl bg-card/80 backdrop-blur-sm border border-primary/10 p-6 sm:p-8 md:p-12 text-center shadow-xl">
11+
{/* Subtle gradient accent */}
12+
<div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-accent/5 pointer-events-none" />
13+
<div className="absolute -top-24 -right-24 w-48 h-48 bg-primary/20 rounded-full blur-3xl pointer-events-none" />
14+
<div className="absolute -bottom-24 -left-24 w-48 h-48 bg-accent/20 rounded-full blur-3xl pointer-events-none" />
1115

1216
<div className="relative">
1317
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold mb-4">
14-
Start Protecting Your Code Today
18+
Start Protecting Your
19+
<span className="text-gradient from-primary via-accent to-accent-purple"> Code Today</span>
1520
</h2>
1621
<p className="text-base sm:text-lg text-muted-foreground mb-6 sm:mb-8 max-w-2xl mx-auto px-4">
1722
Join developers who trust Gitea Mirror to keep their repositories safe and accessible.
@@ -22,13 +27,13 @@ export function CTA() {
2227
<GitHubStats />
2328

2429
<div className="flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4">
25-
<Button size="lg" className="group w-full sm:w-auto min-h-[48px]" asChild>
30+
<Button size="lg" className="group w-full sm:w-auto min-h-[48px] bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 shadow-lg shadow-primary/25 hover:shadow-xl hover:shadow-primary/30 transition-all duration-300" asChild>
2631
<a href="https://github.com/RayLabsHQ/gitea-mirror" target="_blank" rel="noopener noreferrer">
2732
Get Started Now
2833
<ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
2934
</a>
3035
</Button>
31-
<Button size="lg" variant="outline" className="w-full sm:w-auto min-h-[48px]" asChild>
36+
<Button size="lg" variant="outline" className="w-full sm:w-auto min-h-[48px] bg-background/80 backdrop-blur-sm hover:bg-primary/10 hover:border-primary/30 hover:text-foreground transition-all duration-300" asChild>
3237
<a href="https://github.com/RayLabsHQ/gitea-mirror/discussions" target="_blank" rel="noopener noreferrer">
3338
Join Community
3439
</a>

‎www/src/components/Features.tsx‎

Lines changed: 28 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,32 +12,44 @@ const features = [
1212
{
1313
title: "Automated Mirroring",
1414
description: "Set it and forget it. Automatically sync your GitHub repositories to Gitea on a schedule.",
15-
icon: RefreshCw
15+
icon: RefreshCw,
16+
gradient: "from-primary/10 to-accent/10",
17+
iconColor: "text-primary"
1618
},
1719
{
1820
title: "Bulk Operations",
1921
description: "Mirror entire organizations or user accounts with a single configuration.",
20-
icon: Building2
22+
icon: Building2,
23+
gradient: "from-accent/10 to-accent-teal/10",
24+
iconColor: "text-accent"
2125
},
2226
{
2327
title: "Preserve Structure",
2428
description: "Maintain your GitHub organization structure or customize how repos are organized.",
25-
icon: FolderTree
29+
icon: FolderTree,
30+
gradient: "from-accent-teal/10 to-primary/10",
31+
iconColor: "text-accent-teal"
2632
},
2733
{
2834
title: "Real-time Status",
2935
description: "Monitor mirror progress with live updates and detailed activity logs.",
30-
icon: Activity
36+
icon: Activity,
37+
gradient: "from-accent-coral/10 to-primary/10",
38+
iconColor: "text-accent-coral"
3139
},
3240
{
3341
title: "Secure & Private",
3442
description: "Self-hosted solution keeps your code on your infrastructure with full control.",
35-
icon: Lock
43+
icon: Lock,
44+
gradient: "from-accent-purple/10 to-primary/10",
45+
iconColor: "text-accent-purple"
3646
},
3747
{
3848
title: "Open Source",
3949
description: "Free, transparent, and community-driven development. Contribute and customize.",
40-
icon: Heart
50+
icon: Heart,
51+
gradient: "from-primary/10 to-accent-purple/10",
52+
iconColor: "text-primary"
4153
}
4254
];
4355

@@ -48,7 +60,7 @@ export function Features() {
4860
<div className="text-center mb-12 sm:mb-16">
4961
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight px-4">
5062
Everything You Need for
51-
<span className="text-primary block sm:inline"> Reliable Backups</span>
63+
<span className="text-gradient from-primary to-accent block sm:inline"> Reliable Backups</span>
5264
</h2>
5365
<p className="mt-4 text-base sm:text-lg text-muted-foreground max-w-2xl mx-auto px-4">
5466
Powerful features designed to keep your code safe and accessible, no matter what happens.
@@ -61,14 +73,17 @@ export function Features() {
6173
return (
6274
<div
6375
key={index}
64-
className="group relative p-6 sm:p-8 rounded-xl sm:rounded-2xl border bg-card hover:shadow-lg transition-all duration-300 hover:-translate-y-1 hover:border-primary/20"
76+
className={`group relative p-6 sm:p-8 rounded-xl sm:rounded-2xl border bg-gradient-to-br ${feature.gradient} backdrop-blur-sm hover:shadow-lg hover:shadow-primary/10 transition-all duration-300 hover:-translate-y-1 hover:border-primary/30 overflow-hidden`}
6577
>
66-
<div className="inline-flex p-2.5 sm:p-3 rounded-lg bg-muted mb-3 sm:mb-4 group-hover:bg-primary/10 transition-colors duration-300">
67-
<Icon className="w-5 h-5 sm:w-6 sm:h-6 text-muted-foreground group-hover:text-primary transition-colors duration-300" />
78+
<div className="absolute inset-0 bg-gradient-to-br from-transparent to-background/50 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
79+
<div className="relative">
80+
<div className={`inline-flex p-2.5 sm:p-3 rounded-lg bg-background/80 backdrop-blur-sm mb-3 sm:mb-4 ${feature.iconColor} shadow-sm`}>
81+
<Icon className="w-5 h-5 sm:w-6 sm:h-6" />
82+
</div>
83+
84+
<h3 className="text-lg sm:text-xl font-semibold mb-2">{feature.title}</h3>
85+
<p className="text-sm sm:text-base text-muted-foreground">{feature.description}</p>
6886
</div>
69-
70-
<h3 className="text-lg sm:text-xl font-semibold mb-2">{feature.title}</h3>
71-
<p className="text-sm sm:text-base text-muted-foreground">{feature.description}</p>
7287
</div>
7388
);
7489
})}

‎www/src/components/GitHubButton.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ export function GitHubButton() {
2222
}, []);
2323

2424
return (
25-
<Button variant="outline" size="sm" asChild>
26-
<a href="https://github.com/RayLabsHQ/gitea-mirror" target="_blank" rel="noopener noreferrer">
25+
<Button variant="outline" size="sm" className="hover:bg-primary/10 hover:border-primary/30 hover:text-foreground transition-all duration-300" asChild>
26+
<a href="https://github.com/RayLabsHQ/gitea-mirror" target="_blank" rel="noopener noreferrer" className="flex items-center">
2727
<Github className="w-4 h-4 mr-2" />
2828
<span>Star on GitHub</span>
2929
{stars !== null && (

‎www/src/components/Hero.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,11 @@ import { GitHubLogoIcon } from '@radix-ui/react-icons';
66
export function Hero() {
77
return (
88
<section className="relative min-h-[100vh] pt-20 pb-10 flex items-center justify-center px-4 sm:px-6 lg:px-8 overflow-hidden">
9-
{/* Subtle background pattern */}
10-
<div className="absolute inset-0 -z-10">
11-
<div className="absolute inset-0 bg-gradient-to-b from-muted/20 to-transparent"></div>
9+
{/* Elegant gradient background */}
10+
<div className="absolute inset-0 -z-10 overflow-hidden">
11+
<div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-accent/5"></div>
12+
<div className="absolute -top-1/2 -left-1/2 w-full h-full bg-gradient-radial from-primary/10 to-transparent blur-3xl"></div>
13+
<div className="absolute -bottom-1/2 -right-1/2 w-full h-full bg-gradient-radial from-accent/10 to-transparent blur-3xl"></div>
1214
</div>
1315

1416
<div className="max-w-7xl mx-auto text-center w-full">
@@ -32,7 +34,7 @@ export function Hero() {
3234
Keep Your Code
3335
</span>
3436
<br />
35-
<span className="text-primary">
37+
<span className="text-gradient from-primary via-accent to-accent-purple">
3638
Safe & Synced
3739
</span>
3840
</h1>
@@ -43,30 +45,28 @@ export function Hero() {
4345
</p>
4446

4547
<div className="mt-6 sm:mt-8 flex flex-wrap items-center justify-center gap-3 text-xs sm:text-sm text-muted-foreground px-4">
46-
<div className="flex items-center gap-2">
47-
<Shield className="w-3 h-3 sm:w-4 sm:h-4 text-muted-foreground" />
48-
<span>Self-Hosted</span>
48+
<div className="flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary">
49+
<Shield className="w-3 h-3 sm:w-4 sm:h-4" />
50+
<span className="font-medium">Self-Hosted</span>
4951
</div>
50-
<span className="text-border hidden xs:inline">•</span>
51-
<div className="flex items-center gap-2">
52-
<RefreshCw className="w-3 h-3 sm:w-4 sm:h-4 text-muted-foreground" />
53-
<span>Auto-Sync</span>
52+
<div className="flex items-center gap-2 px-3 py-1 rounded-full bg-accent/10 text-accent">
53+
<RefreshCw className="w-3 h-3 sm:w-4 sm:h-4" />
54+
<span className="font-medium">Auto-Sync</span>
5455
</div>
55-
<span className="text-border hidden xs:inline">•</span>
56-
<div className="flex items-center gap-2">
57-
<GitHubLogoIcon className="w-3 h-3 sm:w-4 sm:h-4 text-muted-foreground" />
58-
<span>Open Source</span>
56+
<div className="flex items-center gap-2 px-3 py-1 rounded-full bg-accent-purple/10 text-accent-purple">
57+
<GitHubLogoIcon className="w-3 h-3 sm:w-4 sm:h-4" />
58+
<span className="font-medium">Open Source</span>
5959
</div>
6060
</div>
6161

6262
<div className="mt-8 sm:mt-10 flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4 px-4">
63-
<Button size="lg" className="group w-full sm:w-auto min-h-[48px] text-base" asChild>
63+
<Button size="lg" className="group w-full sm:w-auto min-h-[48px] text-base bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 shadow-lg shadow-primary/25 hover:shadow-xl hover:shadow-primary/30 transition-all duration-300" asChild>
6464
<a href="https://github.com/RayLabsHQ/gitea-mirror" target="_blank" rel="noopener noreferrer">
6565
Get Started
6666
<ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
6767
</a>
6868
</Button>
69-
<Button size="lg" variant="outline" className="w-full sm:w-auto min-h-[48px] text-base" asChild>
69+
<Button size="lg" variant="outline" className="w-full sm:w-auto min-h-[48px] text-base border-primary/20 hover:bg-primary/10 hover:border-primary/30 hover:text-foreground transition-all duration-300" asChild>
7070
<a href="#features">
7171
View Features
7272
</a>

‎www/src/components/Installation.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -100,8 +100,8 @@ export function Installation() {
100100
onClick={() => setActiveMethod(method)}
101101
className={`flex items-center gap-3 px-4 sm:px-6 py-3 rounded-lg border transition-all min-h-[60px] ${
102102
activeMethod === method
103-
? 'bg-primary text-primary-foreground border-primary'
104-
: 'bg-card hover:bg-muted border-border'
103+
? 'bg-gradient-to-r from-primary to-accent text-primary-foreground border-transparent shadow-lg shadow-primary/25'
104+
: 'bg-card hover:bg-muted border-border hover:border-primary/30'
105105
}`}
106106
>
107107
<Icon className="w-5 h-5 flex-shrink-0" />
@@ -121,8 +121,8 @@ export function Installation() {
121121
{installMethods[activeMethod].steps.map((step, index) => (
122122
<div key={step.id} className="relative">
123123
<div className="flex items-start gap-3 sm:gap-4">
124-
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
125-
<span className="text-sm font-semibold text-primary">{index + 1}</span>
124+
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-gradient-to-br from-primary to-accent flex items-center justify-center shadow-md shadow-primary/20">
125+
<span className="text-sm font-semibold text-primary-foreground">{index + 1}</span>
126126
</div>
127127
<div className="flex-grow min-w-0">
128128
<h3 className="font-semibold mb-2 text-sm sm:text-base">{step.title}</h3>

‎www/src/components/Screenshots.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ export function Screenshots() {
9393
const current = screenshots[currentIndex];
9494

9595
return (
96-
<section id="screenshots" className="py-16 sm:py-24 px-4 sm:px-6 lg:px-8 bg-muted/30">
96+
<section id="screenshots" className="py-16 sm:py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-muted/30 via-primary/5 to-muted/30">
9797
<div className="max-w-7xl mx-auto">
9898
<div className="text-center mb-8 sm:mb-16">
9999
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight">

‎www/src/pages/index.astro‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ const structuredData = {
8989
<link rel="canonical" href={siteUrl} />
9090

9191
<!-- Additional Meta Tags -->
92-
<meta name="theme-color" content="#3b82f6" />
92+
<meta name="theme-color" content="#5b6fff" />
9393
<meta name="apple-mobile-web-app-capable" content="yes" />
9494
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
9595
<meta name="apple-mobile-web-app-title" content="Gitea Mirror" />
@@ -162,6 +162,21 @@ const structuredData = {
162162
linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
163163
background-size: 20px 20px;
164164
}
165+
166+
/* Smooth gradient animations */
167+
@keyframes gradient-shift {
168+
0%, 100% {
169+
background-position: 0% 50%;
170+
}
171+
50% {
172+
background-position: 100% 50%;
173+
}
174+
}
175+
176+
.animate-gradient {
177+
background-size: 200% 200%;
178+
animation: gradient-shift 15s ease infinite;
179+
}
165180
</style>
166181
</body>
167182
</html>

0 commit comments

Comments
 (0)