mirror of
https://github.com/FranP-code/create-better-t-stack.git
synced 2025-10-12 23:52:15 +00:00
updated testimonials and footer
This commit is contained in:
fgrreloaded
@@ -1,14 +1,62 @@
|
||||
import React from "react";
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<footer className="relative w-full mt-20">
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-purple-500/10 via-transparent to-transparent" />
|
||||
<footer className="relative w-full font-mono">
|
||||
<div className="max-w-6xl mx-auto px-4 py-12 relative">
|
||||
<div className="mt-12 pt-8 border-t border-gray-800">
|
||||
<div className="grid md:grid-cols-3 gap-8 mb-12">
|
||||
<div>
|
||||
<h3 className="text-white font-bold mb-3 text-lg">
|
||||
<span className="text-blue-500">$</span> better-t.stack
|
||||
</h3>
|
||||
<p className="text-gray-400">
|
||||
The ultimate TypeScript scaffolding tool for modern web
|
||||
development
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-white font-bold mb-3 text-lg">
|
||||
<span className="text-gray-400">$</span> links
|
||||
</h3>
|
||||
<ul className="text-gray-400 space-y-2">
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/better-t-stack/create-better-t-stack"
|
||||
className="hover:text-white transition-colors"
|
||||
>
|
||||
<span className="text-gray-500">-</span> GitHub
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.npmjs.com/package/create-better-t-stack"
|
||||
className="hover:text-white transition-colors"
|
||||
>
|
||||
<span className="text-gray-500">-</span> NPM
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs" className="hover:text-white transition-colors">
|
||||
<span className="text-gray-500">-</span> Documentation
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-white font-bold mb-3 text-lg">
|
||||
<span className="text-gray-400">$</span> contact
|
||||
</h3>
|
||||
<p className="text-gray-400">
|
||||
<span className="text-gray-500">echo</span>{" "}
|
||||
"hello@better-t-stack.dev"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-12 pt-8 border-t border-gray-800/30">
|
||||
<p className="text-center text-gray-500">
|
||||
© {new Date().getFullYear()} Better-T Stack. All rights reserved.
|
||||
</p>
|
||||
<p className="text-center text-gray-600 text-sm mt-2">
|
||||
Made with <span className="text-blue-500">TypeScript</span> ♥
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -1,42 +1,43 @@
|
||||
import React from "react";
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
name: "Alex Chen",
|
||||
role: "Senior Developer",
|
||||
company: "TechCorp",
|
||||
name: "$ user@dev.sh",
|
||||
role: "Senior",
|
||||
company: "TypeScript",
|
||||
avatar: ">_",
|
||||
content:
|
||||
"Better-T Stack has revolutionized our development workflow. The type safety and development experience is unmatched.",
|
||||
avatar: "AC",
|
||||
"The type safety across the entire stack is exactly what I've been looking for. Incredible productivity boost.",
|
||||
},
|
||||
{
|
||||
name: "Sarah Miller",
|
||||
role: "Tech Lead",
|
||||
company: "Innovation Labs",
|
||||
name: "$ sarah@code.io",
|
||||
role: "Lead",
|
||||
company: "Engineer",
|
||||
avatar: "~/",
|
||||
content:
|
||||
"This is the future of full-stack development. The integration between all tools is seamless and intuitive.",
|
||||
avatar: "SM",
|
||||
"Better-T Stack simplified our deployment pipeline and improved our team's development experience tremendously.",
|
||||
},
|
||||
{
|
||||
name: "James Wilson",
|
||||
role: "Frontend Architect",
|
||||
company: "DevForce",
|
||||
name: "$ alex@terminal.dev",
|
||||
role: "Full-Stack",
|
||||
company: "Dev",
|
||||
avatar: "[]",
|
||||
content:
|
||||
"Finally, a stack that prioritizes both developer experience and performance. It's a game-changer.",
|
||||
avatar: "JW",
|
||||
"After switching to Better-T, our build times dropped by 60% and bug reports decreased significantly.",
|
||||
},
|
||||
];
|
||||
|
||||
const Testimonials = () => {
|
||||
return (
|
||||
<section className="w-full py-24 px-4 bg-gradient-to-b from-transparent via-gray-900/50 to-transparent backdrop-blur-sm relative z-50">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<section className="py-20 relative">
|
||||
<div className="absolute inset-0 opacity-90 z-0" />
|
||||
|
||||
<div className="max-w-6xl mx-auto relative z-10">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-500">
|
||||
Loved by Developers Worldwide
|
||||
<h2 className="text-4xl font-bold text-white">
|
||||
<span className="text-gray-400">$</span> cat testimonials.log
|
||||
</h2>
|
||||
<p className="text-gray-400 mt-4 text-lg">
|
||||
Join thousands of developers crafting the future with Better-T Stack
|
||||
<p className="text-gray-400 mt-4 text-lg font-mono">
|
||||
<span className="text-gray-500">Output:</span> Users reporting
|
||||
success with Better-T Stack
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -44,31 +45,38 @@ const Testimonials = () => {
|
||||
{testimonials.map((testimonial) => (
|
||||
<div
|
||||
key={testimonial.name}
|
||||
className="group rounded-xl border border-gray-800 bg-gray-900/70 p-6 hover:border-gray-700 transition-colors duration-200"
|
||||
className="group rounded-md border border-gray-800 bg-black/30 p-6 hover:border-blue-500/30 transition-colors duration-200"
|
||||
>
|
||||
<div className="flex items-center space-x-4 mb-4">
|
||||
<div className="shrink-0">
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center text-white font-medium">
|
||||
<div className="w-10 h-10 rounded-sm bg-gradient-to-r from-gray-900 to-gray-800 flex items-center justify-center text-gray-300 font-mono">
|
||||
{testimonial.avatar}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-white font-semibold">
|
||||
{testimonial.name}
|
||||
</h3>
|
||||
<p className="text-sm">
|
||||
<span className="text-purple-400">{testimonial.role}</span>
|
||||
<span className="text-gray-500 mx-1">at</span>
|
||||
<span className="text-pink-400">{testimonial.company}</span>
|
||||
<h3 className="text-white font-mono">{testimonial.name}</h3>
|
||||
<p className="text-sm font-mono">
|
||||
<span className="text-gray-400">{testimonial.role}</span>
|
||||
<span className="text-gray-500 mx-1">@</span>
|
||||
<span className="text-gray-400">{testimonial.company}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-300 leading-relaxed">
|
||||
<p className="text-gray-300 leading-relaxed font-mono border-l-2 border-blue-700 pl-4">
|
||||
{testimonial.content}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="text-center mt-12">
|
||||
<div className="inline-block py-2 px-4 bg-black border border-gray-800 rounded-md">
|
||||
<span className="text-blue-500 font-bold mr-2">$</span>
|
||||
<span className="text-white font-mono">
|
||||
Join the growing community of developers
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -88,6 +88,44 @@ export default function HomePage() {
|
||||
</div>
|
||||
<TechConstellation />
|
||||
<CustomizableSection />
|
||||
<div className="w-full pt-16 relative overflow-hidden">
|
||||
<div className="max-w-6xl mx-auto relative">
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="hidden sm:flex items-center w-1/3">
|
||||
<div className="h-px flex-grow bg-gradient-to-r from-transparent to-blue-500/70" />
|
||||
<div className="h-8 w-8 rounded-full bg-gray-900 border border-gray-700 flex items-center justify-center relative">
|
||||
<div
|
||||
className="h-2 w-2 bg-blue-400 rounded-full animate-ping absolute"
|
||||
style={{ animationDuration: "2.5s" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative flex flex-col items-center justify-center px-6 z-10">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-indigo-500/10 blur-xl -z-10" />
|
||||
</div>
|
||||
|
||||
<div className="hidden sm:flex items-center w-1/3">
|
||||
<div className="h-8 w-8 rounded-full bg-gray-900 border border-gray-700 flex items-center justify-center relative">
|
||||
<div
|
||||
className="h-2 w-2 bg-indigo-400 rounded-full animate-ping absolute"
|
||||
style={{ animationDuration: "2.5s" }}
|
||||
/>
|
||||
</div>
|
||||
<div className="h-px flex-grow bg-gradient-to-l from-transparent to-indigo-500/70" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="sm:hidden h-px w-full mt-4 bg-gradient-to-r from-blue-500/30 via-indigo-500 to-blue-500/30" />
|
||||
|
||||
<div className="absolute -top-10 left-1/4 text-6xl text-gray-800/10 font-mono transform rotate-12">
|
||||
{"{"}
|
||||
</div>
|
||||
<div className="absolute -bottom-10 right-1/4 text-6xl text-gray-800/10 font-mono transform -rotate-12">
|
||||
{"}"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Testimonials />
|
||||
</main>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user