forked from cardosofelipe/fast-next-template
Felipe Cardoso
ebd307cab4
- Update PROJECT_NAME to Syndarix in backend config - Update all frontend components with Syndarix branding - Replace all GitHub URLs with Gitea Syndarix repo URLs - Update metadata, headers, footers with new branding - Update tests to match new URLs - Update E2E tests for new repo references - Preserve "Built on PragmaStack" attribution in docs Closes #13 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
100 lines
3.7 KiB
TypeScript
100 lines
3.7 KiB
TypeScript
/**
|
|
* Philosophy Section
|
|
* "For Developers, By Developers" section explaining why this template exists
|
|
*/
|
|
|
|
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { X, Check } from 'lucide-react';
|
|
|
|
const wontFind = [
|
|
'Vendor lock-in to specific services',
|
|
'Hidden costs or upgrade prompts',
|
|
'Poorly documented "magic"',
|
|
'Outdated dependencies',
|
|
];
|
|
|
|
const willFind = [
|
|
'Pragmatic Speed: Ship features, not config',
|
|
'Clarity over Magic: Explicit is better than implicit',
|
|
'Robustness: Security and testing baked in',
|
|
'Active development and improvements',
|
|
];
|
|
|
|
export function PhilosophySection() {
|
|
return (
|
|
<section className="container mx-auto px-6 py-16 md:py-24">
|
|
<div className="mx-auto max-w-4xl">
|
|
<motion.div
|
|
className="text-center mb-12"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: '-100px' }}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
<h2 className="text-3xl md:text-4xl font-bold mb-6">Why Syndarix?</h2>
|
|
<div className="space-y-4 text-lg text-muted-foreground leading-relaxed">
|
|
<p>
|
|
We built this template after rebuilding the same authentication, authorization, and
|
|
admin infrastructure for the fifth time. Instead of yet another tutorial or
|
|
boilerplate generator, we created a complete, tested, documented codebase that you can
|
|
clone and customize.
|
|
</p>
|
|
<p className="text-foreground font-semibold text-xl">
|
|
No vendor lock-in. No subscriptions. No license restrictions.
|
|
</p>
|
|
<p>Just clean, modern code with patterns that scale. MIT licensed forever.</p>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-8 mt-12">
|
|
{/* What You Won't Find */}
|
|
<motion.div
|
|
className="h-full rounded-lg border bg-card p-6"
|
|
initial={{ opacity: 0, x: -20 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true, margin: '-100px' }}
|
|
transition={{ duration: 0.5 }}
|
|
>
|
|
<h3 className="text-xl font-semibold mb-4 flex items-center gap-2">
|
|
<X className="h-5 w-5 text-destructive" aria-hidden="true" />
|
|
What You Won't Find Here
|
|
</h3>
|
|
<ul className="space-y-3">
|
|
{wontFind.map((item) => (
|
|
<li key={item} className="flex items-start gap-3">
|
|
<X className="h-5 w-5 text-destructive flex-shrink-0 mt-0.5" aria-hidden="true" />
|
|
<span className="text-muted-foreground">{item}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</motion.div>
|
|
|
|
{/* What You Will Find */}
|
|
<motion.div
|
|
className="h-full rounded-lg border bg-card p-6"
|
|
initial={{ opacity: 0, x: 20 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true, margin: '-100px' }}
|
|
transition={{ duration: 0.5 }}
|
|
>
|
|
<h3 className="text-xl font-semibold mb-4 flex items-center gap-2">
|
|
<Check className="h-5 w-5 text-success" aria-hidden="true" />
|
|
What You Will Find
|
|
</h3>
|
|
<ul className="space-y-3">
|
|
{willFind.map((item) => (
|
|
<li key={item} className="flex items-start gap-3">
|
|
<Check className="h-5 w-5 text-success flex-shrink-0 mt-0.5" aria-hidden="true" />
|
|
<span className="text-muted-foreground">{item}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|