Skip to content

Commit 8179b96

Browse files
bashnkobashnko
committed
feat(web): add metadata, brand-logo, and favicon for pwa
1 parent 7f58751 commit 8179b96

11 files changed

Lines changed: 191 additions & 64 deletions

File tree

‎web/public/images/tabby-icon.png‎

4.44 KB
Loading

‎web/public/images/tabby-texture.png‎

-922 KB
Binary file not shown.

‎web/public/images/tabby.png‎

310 KB
Loading

‎web/public/manifest.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "Tabby - API Stress Testing Made Simple",
3+
"short_name": "Tabby",
4+
"description": "A powerful terminal-based HTTP testing tool with automated data generation, loop mode for stress testing, and template support.",
5+
"icons": [
6+
{
7+
"src": "/images/tabby-icon.png",
8+
"sizes": "96x96",
9+
"type": "image/png"
10+
},
11+
{
12+
"src": "/images/tabby.png",
13+
"sizes": "512x512",
14+
"type": "image/png",
15+
"purpose": "any maskable"
16+
}
17+
],
18+
"theme_color": "#BFA573",
19+
"background_color": "#0A0A0A",
20+
"display": "standalone",
21+
"start_url": "/",
22+
"scope": "/",
23+
"orientation": "portrait-primary"
24+
}

‎web/src/app/(home)/_components/hero.tsx‎

Lines changed: 86 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,120 @@
1+
"use client";
2+
13
import { Icons } from "@/components/icons/icons";
24
import { Section } from "@/components/section";
35
import { TabbyButton } from "@/components/tabby-items/tabby-button";
46
import { Button } from "@/components/ui/button";
57
import { Terminal } from "lucide-react";
6-
import * as motion from "motion/react-client";
7-
import Image from "next/image";
8+
import { motion } from "motion/react";
89
import Link from "next/link";
9-
import tabbyTexture from "../../../../public/images/tabby-texture.png";
1010

1111
const Hero = () => (
12-
<Section className="relative w-full overflow-hidden bg-dashed px-4 py-16 sm:px-16 sm:py-24 md:py-32">
13-
<motion.div
14-
initial={{ opacity: 0 }}
15-
animate={{ opacity: 1 }}
16-
transition={{
17-
duration: 0.6,
18-
scale: { type: "spring", visualDuration: 0.4, bounce: 0.5 },
19-
}}
20-
whileInView={{ opacity: 1 }}
21-
viewport={{ once: true }}
22-
className="-z-10 absolute inset-0 h-full w-full overflow-hidden"
12+
<Section className="relative w-full overflow-hidden bg-dashed px-4 py-20 sm:px-16 sm:py-28 md:py-36">
13+
{/* Ambient gradient background - creates depth and warmth */}
14+
<div className="absolute inset-0 -z-10 overflow-hidden">
15+
{/* Primary warm glow - top right, brand-aligned */}
16+
<motion.div
17+
initial={{ opacity: 0 }}
18+
animate={{ opacity: 1 }}
19+
transition={{ duration: 1.2, ease: "easeOut" }}
20+
className="absolute -top-[20%] -right-[10%] h-[600px] w-[600px] md:h-[800px] md:w-[800px]"
21+
>
22+
<div
23+
className="absolute inset-0 rounded-full blur-[120px] opacity-[0.15] dark:opacity-[0.08] transition-opacity duration-700"
24+
style={{
25+
background: "radial-gradient(circle, rgba(191, 165, 115, 1) 0%, rgba(191, 165, 115, 0.4) 40%, transparent 70%)",
26+
}}
27+
/>
28+
</motion.div>
29+
30+
{/* Secondary accent glow - bottom left for balance */}
31+
<motion.div
32+
initial={{ opacity: 0 }}
33+
animate={{ opacity: 1 }}
34+
transition={{ duration: 1.4, delay: 0.2, ease: "easeOut" }}
35+
className="absolute -bottom-[30%] -left-[15%] h-[500px] w-[500px] md:h-[700px] md:w-[700px]"
36+
>
37+
<div
38+
className="absolute inset-0 rounded-full blur-[100px] opacity-[0.12] dark:opacity-[0.06] transition-opacity duration-700"
39+
style={{
40+
background: "radial-gradient(circle, rgba(161, 135, 95, 1) 0%, rgba(140, 120, 80, 0.3) 50%, transparent 70%)",
41+
}}
42+
/>
43+
</motion.div>
44+
45+
{/* Subtle center ambient - ties the composition together */}
46+
<motion.div
47+
initial={{ opacity: 0 }}
48+
animate={{ opacity: 1 }}
49+
transition={{ duration: 1.6, delay: 0.4, ease: "easeOut" }}
50+
className="absolute top-[20%] left-[30%] h-[400px] w-[400px] md:h-[500px] md:w-[500px]"
51+
>
52+
<div
53+
className="absolute inset-0 rounded-full blur-[150px] opacity-[0.08] dark:opacity-[0.04] transition-opacity duration-700"
54+
style={{
55+
background: "radial-gradient(circle, rgba(180, 160, 120, 0.8) 0%, transparent 60%)",
56+
}}
57+
/>
58+
</motion.div>
59+
</div>
60+
61+
{/* Content */}
62+
<motion.div
63+
initial={{ opacity: 0, y: 20 }}
64+
animate={{ opacity: 1, y: 0 }}
65+
transition={{ duration: 0.6, delay: 0.1, ease: "easeOut" }}
66+
className="mx-auto flex flex-col items-center justify-center gap-10"
2367
>
24-
<Image
25-
src={tabbyTexture}
26-
alt="Tabby Texture Background"
27-
fill
28-
className="pointer-events-none absolute inset-0 select-none object-cover opacity-60 dark:opacity-40"
29-
priority
30-
/>
31-
{/* Gradient overlay for better text readability */}
32-
<div className="absolute inset-0 bg-gradient-to-t from-background via-background/80 to-transparent" />
33-
</motion.div>
34-
<div className="mx-auto flex flex-col items-center justify-center gap-8">
68+
{/* Badge */}
3569
<Button
3670
variant="outline"
3771
size="sm"
38-
className="group gap-4 bg-muted/70"
72+
className="group gap-2 border-border/60 bg-background/50 backdrop-blur-sm hover:border-[#BFA573]/40 hover:bg-[#BFA573]/5 transition-all duration-300"
3973
asChild
4074
>
4175
<Link href="/playground">
76+
<span className="relative flex h-2 w-2">
77+
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#BFA573] opacity-75" />
78+
<span className="relative inline-flex h-2 w-2 rounded-full bg-[#BFA573]" />
79+
</span>
4280
Try the Playground
43-
<Icons.arrowUpRight className="group-hover:-rotate-12 size-4 transition-transform" />
81+
<Icons.arrowUpRight className="size-3.5 text-muted-foreground group-hover:text-[#BFA573] transition-colors" />
4482
</Link>
4583
</Button>
46-
<div className="flex flex-col items-center gap-6">
47-
<h1 className="max-w-3xl text-center font-bold text-4xl tracking-tight sm:text-5xl md:text-7xl">
48-
API Stress Testing
84+
85+
{/* Headline */}
86+
<div className="flex flex-col items-center gap-5">
87+
<h1 className="max-w-4xl text-center font-bold text-4xl tracking-tight sm:text-5xl md:text-6xl lg:text-7xl">
88+
<span className="bg-gradient-to-b from-foreground to-foreground/70 bg-clip-text text-transparent">
89+
API Stress Testing
90+
</span>
4991
<br />
50-
<span className="text-muted-foreground/70">Made Simple</span>
92+
<span className="bg-gradient-to-r from-[#BFA573] via-[#D4BC8E] to-[#BFA573] bg-clip-text text-transparent">
93+
Made Simple
94+
</span>
5195
</h1>
52-
<p className="max-w-lg text-center text-muted-foreground leading-relaxed md:text-lg">
96+
<p className="max-w-xl text-center text-muted-foreground/90 leading-relaxed text-base md:text-lg">
5397
A powerful terminal-based HTTP testing tool with automated data
5498
generation, loop mode for stress testing, and template support.
5599
</p>
56100
</div>
57-
<div className="flex flex-row gap-3">
58-
<TabbyButton size="lg" asChild>
101+
102+
{/* CTAs */}
103+
<div className="flex flex-col sm:flex-row items-center gap-3">
104+
<TabbyButton size="lg" className="min-w-[180px]" asChild>
59105
<Link href="/docs">
60-
Documentation
61-
<Icons.arrowUpRight className="size-4 transition-transform group-hover:-rotate-12" />
106+
Get Started
107+
<Icons.arrowRight className="size-4 transition-transform group-hover:translate-x-0.5" />
62108
</Link>
63109
</TabbyButton>
64-
<Button size="lg" className="group gap-4" variant="outline" asChild>
110+
<Button size="lg" className="group min-w-[180px] gap-2" variant="outline" asChild>
65111
<Link href="/playground">
66-
<Terminal className="size-4 transition-transform group-hover:-rotate-12" />
67-
Try Playground
112+
<Terminal className="size-4 text-muted-foreground group-hover:text-foreground transition-colors" />
113+
Playground
68114
</Link>
69115
</Button>
70116
</div>
71-
</div>
117+
</motion.div>
72118
</Section>
73119
);
74120

‎web/src/app/(home)/about/_components/hero.tsx‎

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,33 @@ import Balancer from 'react-wrap-balancer';
44

55
const Hero = () => (
66
<Section className='relative w-full overflow-hidden px-4 py-16 sm:px-16 sm:py-24 md:py-32'>
7-
<div className='mx-auto flex flex-col items-center justify-center gap-8'>
8-
<div className='flex flex-col items-center gap-6 text-center'>
9-
<Image
10-
src={'/icon.png'}
11-
alt='Tabby Logo'
12-
height={200}
13-
width={200}
14-
priority
15-
className='transition-transform hover:scale-110'
16-
/>
17-
<h1 className='max-w-2xl bg-gradient-to-b bg-opacity-50 from-foreground to-muted-foreground/70 bg-clip-text font-regular text-4xl text-transparent tracking-tighter sm:text-6xl md:text-7xl'>
18-
<Balancer>HTTP testing from your terminal</Balancer>
7+
<div className='mx-auto flex flex-col items-center justify-center gap-6'>
8+
<div className='flex flex-col items-center gap-4 text-center'>
9+
<div className='relative'>
10+
{/* Glow effect behind logo */}
11+
<div
12+
className='absolute inset-0 blur-[60px] opacity-30 dark:opacity-20 scale-150'
13+
style={{
14+
background: 'radial-gradient(circle, rgba(191, 165, 115, 0.8) 0%, transparent 70%)',
15+
}}
16+
/>
17+
<Image
18+
src='/images/tabby.png'
19+
alt='Tabby Logo'
20+
height={140}
21+
width={140}
22+
priority
23+
className='relative transition-transform duration-300 hover:scale-105'
24+
/>
25+
</div>
26+
<h1 className='max-w-2xl font-bold text-3xl tracking-tight sm:text-4xl md:text-5xl'>
27+
<span className='bg-gradient-to-b from-foreground to-foreground/70 bg-clip-text text-transparent'>
28+
<Balancer>About Tabby</Balancer>
29+
</span>
1930
</h1>
20-
<p className='mx-auto max-w-2xl text-lg text-muted-foreground/90 md:text-xl'>
31+
<p className='mx-auto max-w-xl text-base text-muted-foreground/90 md:text-lg'>
2132
<Balancer>
22-
A powerful CLI tool for API testing with automated data generation,
23-
loop mode, and template support.
33+
A fast, simple HTTP testing tool built with Go.
2434
</Balancer>
2535
</p>
2636
</div>

‎web/src/app/apple-icon.png‎

13.5 KB
Loading

‎web/src/app/favicon.ico‎

14.7 KB
Binary file not shown.

‎web/src/app/icon.png‎

-137 KB
Loading

‎web/src/app/layout.config.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export const owner = 'Tabby';
99

1010
export const baseOptions: BaseLayoutProps = {
1111
nav: {
12-
title,
12+
title: <span style={{ color: '#BFA573' }}>{title}</span>,
1313
},
1414
};
1515

0 commit comments

Comments
 (0)