JustAPI Bot fix: comprehensive UI, docs, security, and deployment improvements · 7/14/2026
381467d
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
"use client";
import { FlipWords } from "@/components/ui/flip-words";
import { Spotlight } from "@/components/ui/spotlight";
import { ColourfulText } from "@/components/ui/colourful-text";
import { motion } from "framer-motion";
import { ArrowRight, GitGraph, Star, GitBranch, Zap } from "lucide-react";
export default function HeroSection() {
const words = ["Teams", "Developers", "Enterprises", "Startups"];
return (
<div className="h-[40rem] w-full rounded-md flex md:items-center md:justify-center bg-background/[0.96] antialiased dark:bg-grid-white/[0.02] bg-grid-black/[0.02] relative overflow-hidden">
{/* Spotlight effect */}
<Spotlight
className="-top-40 left-0 md:left-60 md:-top-20"
fill="hsl(var(--primary))"
/>
{/* Ambient glow effects */}
<div className="absolute top-0 left-1/4 w-96 h-96 bg-primary/10 rounded-full blur-[120px] pointer-events-none" />
<div className="absolute bottom-0 right-1/4 w-80 h-80 bg-purple-500/10 rounded-full blur-[100px] pointer-events-none" />
<div className="p-4 max-w-7xl mx-auto relative z-10 w-full pt-20 md:pt-0">
{/* Badge */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
className="flex justify-center mb-6"
>
<span className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-primary/20 bg-primary/5 text-sm text-primary">
<Star className="h-4 w-4 fill-primary" />
Open Source & Self-Hosted
</span>
</motion.div>
{/* Main heading with animated blue gradient */}
<motion.h1
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.1 }}
className="text-4xl md:text-7xl font-bold text-center"
>
<span className="bg-clip-text text-transparent bg-gradient-to-b dark:from-neutral-50 dark:to-neutral-400 from-neutral-900 to-neutral-500">
Self-hosted{" "}
</span>
<span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 via-cyan-500 to-blue-600 bg-[length:200%_auto] animate-gradient-x">
Git Platform
</span>
<br />
<span className="text-3xl md:text-6xl bg-clip-text text-transparent bg-gradient-to-b dark:from-neutral-50 dark:to-neutral-400 from-neutral-900 to-neutral-500">for Modern{" "}</span>
<FlipWords words={words} className="text-3xl md:text-6xl text-foreground" />
</motion.h1>
{/* Description */}
<motion.p
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.2 }}
className="mt-6 font-normal text-base text-muted-foreground max-w-xl text-center mx-auto"
>
Host your code, manage pull requests, run CI/CD pipelines, and collaborate securely.
GitHub-compatible, fully self-hosted, and open source.
</motion.p>
{/* CTA Buttons */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.3 }}
className="flex flex-col sm:flex-row gap-4 justify-center mt-10"
>
<a
href="/register"
className="group relative inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-8 py-3.5 text-sm font-semibold text-primary-foreground transition-all hover:bg-primary/90 hover:scale-105 shadow-md shadow-primary/20"
>
Get Started
<ArrowRight className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
{/* Glow effect */}
<span className="absolute inset-0 rounded-lg bg-primary blur-xl opacity-40 group-hover:opacity-60 transition-opacity" />
</a>
<a
href="/explore"
className="inline-flex items-center justify-center gap-2 rounded-lg border border-border bg-secondary/50 px-8 py-3.5 text-sm font-medium text-foreground backdrop-blur-sm hover:bg-secondary transition-all"
>
<GitGraph className="h-4 w-4" />
Explore Repositories
</a>
</motion.div>
{/* Stats */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.4 }}
className="flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-6 md:gap-8 mt-12 sm:mt-16"
>
<div className="flex items-center gap-2 text-muted-foreground">
<GitBranch className="h-5 w-5 text-primary" />
<span className="text-xl sm:text-2xl font-bold text-foreground">100%</span>
<span className="text-xs sm:text-sm">Open Source</span>
</div>
<div className="hidden sm:block w-px h-8 bg-border" />
<div className="flex items-center gap-2 text-muted-foreground">
<Zap className="h-5 w-5 text-yellow-500" />
<span className="text-xl sm:text-2xl font-bold text-foreground">Graphite</span>
<span className="text-xs sm:text-sm">Features</span>
</div>
<div className="hidden sm:block w-px h-8 bg-border" />
<div className="flex items-center gap-2 text-muted-foreground">
<Star className="h-5 w-5 text-orange-500" />
<span className="text-xl sm:text-2xl font-bold text-foreground">AI</span>
<span className="text-xs sm:text-sm">Powered Reviews</span>
</div>
</motion.div>
</div>
</div>
);
}