Skip to content

Commit ebcdb87

Browse files
tannerlinsleytannerlinsley
committed
fix tanstack logo font weight and spacing
1 parent c2beda5 commit ebcdb87

File tree

2 files changed

+215
-294
lines changed

2 files changed

+215
-294
lines changed

‎frameworks/react-cra/add-ons/start/assets/src/routes/index.tsx.ejs‎

Lines changed: 109 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -1,154 +1,116 @@
1-
import { createFileRoute } from "@tanstack/react-router";
2-
<% if (!tailwind) { %>
3-
import logo from "../logo.svg";
4-
import "../App.css";
5-
<% } else { %>
6-
import {
7-
Zap,
8-
Server,
9-
Route as RouteIcon,
10-
Shield,
11-
Waves,
12-
Sparkles,
13-
} from "lucide-react";
14-
<% } %>
15-
16-
export const Route = createFileRoute("/")({
17-
component: App,
18-
});
19-
20-
function App() {
21-
<% if (tailwind) { %>
22-
const features = [
23-
{
24-
icon: <Zap className="w-12 h-12 text-cyan-400" />,
25-
title: "Powerful Server Functions",
26-
description:
27-
"Write server-side code that seamlessly integrates with your client components. Type-safe, secure, and simple.",
28-
},
29-
{
30-
icon: <Server className="w-12 h-12 text-cyan-400" />,
31-
title: "Flexible Server Side Rendering",
32-
description:
33-
"Full-document SSR, streaming, and progressive enhancement out of the box. Control exactly what renders where.",
34-
},
35-
{
36-
icon: <RouteIcon className="w-12 h-12 text-cyan-400" />,
37-
title: "API Routes",
38-
description:
39-
"Build type-safe API endpoints alongside your application. No separate backend needed.",
40-
},
41-
{
42-
icon: <Shield className="w-12 h-12 text-cyan-400" />,
43-
title: "Strongly Typed Everything",
44-
description:
45-
"End-to-end type safety from server to client. Catch errors before they reach production.",
46-
},
47-
{
48-
icon: <Waves className="w-12 h-12 text-cyan-400" />,
49-
title: "Full Streaming Support",
50-
description:
51-
"Stream data from server to client progressively. Perfect for AI applications and real-time updates.",
52-
},
53-
{
54-
icon: <Sparkles className="w-12 h-12 text-cyan-400" />,
55-
title: "Next Generation Ready",
56-
description:
57-
"Built from the ground up for modern web applications. Deploy anywhere JavaScript runs.",
58-
},
59-
];
60-
61-
return (
62-
<div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900">
63-
<section className="relative py-20 px-6 text-center overflow-hidden">
64-
<div className="absolute inset-0 bg-gradient-to-r from-cyan-500/10 via-blue-500/10 to-purple-500/10"></div>
65-
<div className="relative max-w-5xl mx-auto">
66-
<div className="flex items-center justify-center gap-6 mb-6">
67-
<img
68-
src="/tanstack-circle-logo.png"
69-
alt="TanStack Logo"
70-
className="w-24 h-24 md:w-32 md:h-32"
71-
/>
72-
<h1 className="text-6xl md:text-7xl font-bold text-white">
73-
<span className="text-gray-300">TANSTACK</span>{" "}
74-
<span className="bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent">
75-
START
76-
</span>
77-
</h1>
78-
</div>
79-
<p className="text-2xl md:text-3xl text-gray-300 mb-4 font-light">
80-
The framework for next generation AI applications
81-
</p>
82-
<p className="text-lg text-gray-400 max-w-3xl mx-auto mb-8">
83-
Full-stack framework powered by TanStack Router for React and Solid.
84-
Build modern applications with server functions, streaming, and type
85-
safety.
86-
</p>
87-
<div className="flex flex-col items-center gap-4">
88-
<a
89-
href="https://tanstack.com/start"
90-
target="_blank"
91-
rel="noopener noreferrer"
92-
className="px-8 py-3 bg-cyan-500 hover:bg-cyan-600 text-white font-semibold rounded-lg transition-colors shadow-lg shadow-cyan-500/50"
93-
>
94-
Documentation
95-
</a>
96-
<p className="text-gray-400 text-sm mt-2">
97-
Begin your TanStack Start journey by editing{" "}
98-
<code className="px-2 py-1 bg-slate-700 rounded text-cyan-400">
99-
/src/routes/index.tsx
100-
</code>
101-
</p>
102-
</div>
103-
</div>
104-
</section>
105-
106-
<section className="py-16 px-6 max-w-7xl mx-auto">
107-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
108-
{features.map((feature, index) => (
109-
<div
110-
key={index}
111-
className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-6 hover:border-cyan-500/50 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-500/10"
112-
>
113-
<div className="mb-4">{feature.icon}</div>
114-
<h3 className="text-xl font-semibold text-white mb-3">
115-
{feature.title}
116-
</h3>
117-
<p className="text-gray-400 leading-relaxed">
118-
{feature.description}
119-
</p>
120-
</div>
121-
))}
122-
</div>
123-
</section>
124-
</div>
125-
);
126-
<% } else { %>
127-
return (
128-
<div className="App">
129-
<header className="App-header">
130-
<img src={logo} className="App-logo" alt="logo" />
131-
<p>
132-
Edit <code>src/routes/index.tsx</code> and save to reload.
133-
</p>
134-
<a
135-
className="App-link"
136-
href="https://reactjs.org"
137-
target="_blank"
138-
rel="noopener noreferrer"
1+
import { createFileRoute } from "@tanstack/react-router"; <% if (!tailwind) { %>
2+
import logo from "../logo.svg"; import "../App.css"; <% } else { %> import {
3+
Zap, Server, Route as RouteIcon, Shield, Waves, Sparkles, } from "lucide-react";
4+
<% } %> export const Route = createFileRoute("/")({ component: App, }); function
5+
App() { <% if (tailwind) { %> const features = [ { icon:
6+
<Zap className="w-12 h-12 text-cyan-400" />, title: "Powerful Server Functions",
7+
description: "Write server-side code that seamlessly integrates with your client
8+
components. Type-safe, secure, and simple.", }, { icon:
9+
<Server className="w-12 h-12 text-cyan-400" />, title: "Flexible Server Side
10+
Rendering", description: "Full-document SSR, streaming, and progressive
11+
enhancement out of the box. Control exactly what renders where.", }, { icon:
12+
<RouteIcon className="w-12 h-12 text-cyan-400" />, title: "API Routes",
13+
description: "Build type-safe API endpoints alongside your application. No
14+
separate backend needed.", }, { icon:
15+
<Shield className="w-12 h-12 text-cyan-400" />, title: "Strongly Typed
16+
Everything", description: "End-to-end type safety from server to client. Catch
17+
errors before they reach production.", }, { icon:
18+
<Waves className="w-12 h-12 text-cyan-400" />, title: "Full Streaming Support",
19+
description: "Stream data from server to client progressively. Perfect for AI
20+
applications and real-time updates.", }, { icon:
21+
<Sparkles className="w-12 h-12 text-cyan-400" />, title: "Next Generation
22+
Ready", description: "Built from the ground up for modern web applications.
23+
Deploy anywhere JavaScript runs.", }, ]; return (
24+
<div
25+
className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900"
26+
>
27+
<section className="relative py-20 px-6 text-center overflow-hidden">
28+
<div
29+
className="absolute inset-0 bg-gradient-to-r from-cyan-500/10 via-blue-500/10 to-purple-500/10"
30+
></div>
31+
<div className="relative max-w-5xl mx-auto">
32+
<div className="flex items-center justify-center gap-6 mb-6">
33+
<img
34+
src="/tanstack-circle-logo.png"
35+
alt="TanStack Logo"
36+
className="w-24 h-24 md:w-32 md:h-32"
37+
/>
38+
<h1
39+
className="text-6xl md:text-7xl font-black text-white [letter-spacing:-0.08em]"
13940
>
140-
Learn React
141-
</a>
41+
<span className="text-gray-300">TANSTACK</span>{" "}
42+
<span
43+
className="bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent"
44+
>
45+
START
46+
</span>
47+
</h1>
48+
</div>
49+
<p className="text-2xl md:text-3xl text-gray-300 mb-4 font-light">
50+
The framework for next generation AI applications
51+
</p>
52+
<p className="text-lg text-gray-400 max-w-3xl mx-auto mb-8">
53+
Full-stack framework powered by TanStack Router for React and Solid.
54+
Build modern applications with server functions, streaming, and type
55+
safety.
56+
</p>
57+
<div className="flex flex-col items-center gap-4">
14258
<a
143-
className="App-link"
144-
href="https://tanstack.com"
59+
href="https://tanstack.com/start"
14560
target="_blank"
14661
rel="noopener noreferrer"
62+
className="px-8 py-3 bg-cyan-500 hover:bg-cyan-600 text-white font-semibold rounded-lg transition-colors shadow-lg shadow-cyan-500/50"
14763
>
148-
Learn TanStack
64+
Documentation
14965
</a>
150-
</header>
66+
<p className="text-gray-400 text-sm mt-2">
67+
Begin your TanStack Start journey by editing{" "}
68+
<code className="px-2 py-1 bg-slate-700 rounded text-cyan-400">
69+
/src/routes/index.tsx
70+
</code>
71+
</p>
72+
</div>
73+
</div>
74+
</section>
75+
76+
<section className="py-16 px-6 max-w-7xl mx-auto">
77+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
78+
{features.map((feature, index) => (
79+
<div
80+
key="{index}"
81+
className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-6 hover:border-cyan-500/50 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-500/10"
82+
>
83+
<div className="mb-4">{feature.icon}</div>
84+
<h3 className="text-xl font-semibold text-white mb-3">
85+
{feature.title}
86+
</h3>
87+
<p className="text-gray-400 leading-relaxed">{feature.description}</p>
88+
</div>
89+
))}
15190
</div>
152-
);
153-
<% } %>
154-
}
91+
</section>
92+
</div>
93+
); <% } else { %> return (
94+
<div className="App">
95+
<header className="App-header">
96+
<img src="{logo}" className="App-logo" alt="logo" />
97+
<p>Edit <code>src/routes/index.tsx</code> and save to reload.</p>
98+
<a
99+
className="App-link"
100+
href="https://reactjs.org"
101+
target="_blank"
102+
rel="noopener noreferrer"
103+
>
104+
Learn React
105+
</a>
106+
<a
107+
className="App-link"
108+
href="https://tanstack.com"
109+
target="_blank"
110+
rel="noopener noreferrer"
111+
>
112+
Learn TanStack
113+
</a>
114+
</header>
115+
</div>
116+
); <% } %> }

0 commit comments

Comments
 (0)