Initial commit

.env.production

@@ -0,0 +1 @@
+DISABLE_ESLINT_PLUGIN=true

.gitea/workflows/build.yml

@@ -0,0 +1,62 @@
+name: Build
+
+on:
+  workflow_dispatch:
+    inputs:
+      branch:
+        description: 'Branch to build'
+        required: true
+        default: 'main'
+
+permissions:
+  contents: read
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+
+    steps:
+      - name: Checkout branch
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ gitea.event.inputs.branch }}
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 24
+
+      - name: Install dependencies
+        run: |
+          set -euo pipefail
+          npm install --no-audit --silent 2>&1 | tee install.log
+        env:
+          NODE_OPTIONS: '--max-old-space-size=4096'
+
+      - name: Build (react-scripts build)
+        env:
+          CI: 'false'
+          NODE_OPTIONS: '--max-old-space-size=4096'
+        run: |
+          set -euo pipefail
+          npm run build 2>&1 | tee build.log
+        timeout-minutes: 5
+
+      - name: Verify build folder exists
+        run: test -d build || (echo "No build folder. Check build logs above."; exit 1)
+
+      - name: Upload logs on failure
+        if: failure()
+        uses: actions/upload-artifact@v3
+        with:
+          name: build-logs
+          path: |
+            install.log
+            build.log
+            npm-debug.log*
+          if-no-files-found: ignore
+
+      - name: Build completed
+        if: success()
+        run: echo "Build completed successfully"

package.json

@@ -0,0 +1,41 @@
+{
+  "name": "nestjs-website",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-scripts": "^5.0.1",
+    "lucide-react": "^0.400.0",
+    "framer-motion": "^11.0.0"
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.0",
+    "postcss": "^8.4.0",
+    "autoprefixer": "^10.4.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import Header from './components/Header';
+import Hero from './components/Hero';
+import Features from './components/Features';
+import EverythingSection from './components/EverythingSection';
+import DeploySection from './components/DeploySection';
+import CoursesSection from './components/CoursesSection';
+import EnterpriseSection from './components/EnterpriseSection';
+import LivePreviewSection from './components/LivePreviewSection';
+import SupportSection from './components/SupportSection';
+import NewsletterSection from './components/NewsletterSection';
+import Footer from './components/Footer';
+
+function App() {
+  return (
+    <div className="min-h-screen bg-background text-foreground">
+      <Header />
+      <Hero />
+      <Features />
+      <EverythingSection />
+      <DeploySection />
+      <CoursesSection />
+      <EnterpriseSection />
+      <LivePreviewSection />
+      <SupportSection />
+      <NewsletterSection />
+      <Footer />
+    </div>
+  );
+}
+
+export default App;

src/components/CoursesSection.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+
+function CoursesSection() {
+  const shouldReduceMotion = useReducedMotion();
+  
+  const fadeUpPreset = (delay, duration = 1.2) => {
+    if (shouldReduceMotion) return {};
+    return {
+      initial: { opacity: 0, y: 20 },
+      whileInView: { opacity: 1, y: 0 },
+      viewport: { once: true, amount: 0.2 },
+      transition: { delay, duration, ease: "easeOut" }
+    };
+  };
+
+  return (
+    <section className="py-20 bg-gray-100">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <motion.div 
+          {...fadeUpPreset(0.1)}
+          className="bg-white p-12 rounded-lg text-center"
+        >
+          <h2 className="text-3xl font-bold mb-4 text-gray-900">
+            Official NestJS Courses
+          </h2>
+          <p className="text-gray-600 mb-8 max-w-2xl mx-auto">
+            Learn everything you need to master NestJS and tackle modern backend applications at any scale.
+          </p>
+          <button className="btn-primary">
+            See courses
+          </button>
+        </motion.div>
+      </div>
+    </section>
+  );
+}
+
+export default CoursesSection;

src/components/DeploySection.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+
+function DeploySection() {
+  const shouldReduceMotion = useReducedMotion();
+  
+  const fadeUpPreset = (delay, duration = 1.2) => {
+    if (shouldReduceMotion) return {};
+    return {
+      initial: { opacity: 0, y: 20 },
+      whileInView: { opacity: 1, y: 0 },
+      viewport: { once: true, amount: 0.2 },
+      transition: { delay, duration, ease: "easeOut" }
+    };
+  };
+
+  return (
+    <section className="py-20 bg-gray-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+          <motion.div 
+            {...fadeUpPreset(0.1)}
+            className="bg-black text-white p-8 rounded-lg"
+          >
+            <h3 className="text-2xl font-bold mb-4">
+              Deploy, mau!
+            </h3>
+            <p className="text-white/80 mb-6">
+              Provision and manage your infrastracture on AWS without the hassle and extra DevOps work.
+            </p>
+            <button className="btn-primary">
+              Start now
+            </button>
+          </motion.div>
+          
+          <motion.div 
+            {...fadeUpPreset(0.2)}
+            className="bg-primary text-white p-8 rounded-lg"
+          >
+            <h3 className="text-2xl font-bold mb-4">
+              Explore your graph
+            </h3>
+            <p className="text-white/90 mb-6">
+              Identify dependencies and connections between modules, and dive deep into the inner workings of your classes.
+            </p>
+            <button className="bg-white text-primary px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition-colors">
+              Learn more
+            </button>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default DeploySection;

src/components/EnterpriseSection.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+
+function EnterpriseSection() {
+  const shouldReduceMotion = useReducedMotion();
+  
+  const fadeUpPreset = (delay, duration = 1.2) => {
+    if (shouldReduceMotion) return {};
+    return {
+      initial: { opacity: 0, y: 20 },
+      whileInView: { opacity: 1, y: 0 },
+      viewport: { once: true, amount: 0.2 },
+      transition: { delay, duration, ease: "easeOut" }
+    };
+  };
+
+  return (
+    <section className="py-20 bg-primary text-white support-bg relative">
+      <div className="absolute inset-0 bg-primary/90"></div>
+      
+      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+          <div>
+            <motion.h2 
+              {...fadeUpPreset(0.1)}
+              className="text-4xl md:text-5xl font-bold mb-6"
+            >
+              The open source platform designed for the future. Build enterprise.
+            </motion.h2>
+            
+            <motion.p 
+              {...fadeUpPreset(0.2)}
+              className="text-xl mb-8 text-white/90"
+            >
+              A complete development kit for building scalable server-side apps. Contact us to find out more about expertise consulting, on-site enterprise support, trainings, and private sessions.
+            </motion.p>
+            
+            <motion.button 
+              {...fadeUpPreset(0.3)}
+              className="bg-white text-primary px-8 py-4 rounded-full font-medium hover:bg-gray-100 transition-colors"
+            >
+              Learn more about support offerings
+            </motion.button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default EnterpriseSection;

src/components/EverythingSection.js

@@ -0,0 +1,103 @@
+import React from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+
+function EverythingSection() {
+  const shouldReduceMotion = useReducedMotion();
+  
+  const fadeUpPreset = (delay, duration = 1.2) => {
+    if (shouldReduceMotion) return {};
+    return {
+      initial: { opacity: 0, y: 20 },
+      whileInView: { opacity: 1, y: 0 },
+      viewport: { once: true, amount: 0.2 },
+      transition: { delay, duration, ease: "easeOut" }
+    };
+  };
+
+  const features = [
+    {
+      icon: 'https://nestjs.com/puzzle.c9dfc495.svg',
+      title: 'MODULARITY',
+      description: 'Streamline upkeep by organizing applications into self-contained modules.'
+    },
+    {
+      icon: 'https://nestjs.com/rocket.518dadfa.svg',
+      title: 'SCALABILITY',
+      description: 'Scale seamlessly with efficient, battle-tested components.'
+    },
+    {
+      icon: 'https://nestjs.com/di.a0b12f44.svg',
+      title: 'DEPENDENCY INJECTION',
+      description: 'Elevate testability with a sophisticated dependency injection system.'
+    },
+    {
+      icon: 'https://nestjs.com/type-safety.34453790.svg',
+      title: 'TYPE SAFETY',
+      description: 'Mitigate errors through the robust type safety features of TypeScript.'
+    },
+    {
+      icon: 'https://nestjs.com/ecosystem.eaa69289.svg',
+      title: 'RICH ECOSYSTEM',
+      description: 'Explore a rich ecosystem offering versatile tools to craft solutions tailored to your needs.'
+    },
+    {
+      icon: 'https://nestjs.com/chip.3b61cda8.svg',
+      title: 'ENTERPRISE-READY',
+      description: 'Trusted by thousands of leading companies and organizations worldwide.'
+    },
+    {
+      icon: 'https://nestjs.com/microservices.e0074903.svg',
+      title: 'MICROSERVICES',
+      description: 'Create loosely coupled, independently deployable services for increased agility and scalability.'
+    },
+    {
+      icon: 'https://nestjs.com/api.67807f71.svg',
+      title: 'WEB APPS',
+      description: 'Build REST APIs, GraphQL APIs, Queues, and real-time & event-driven applications in no time.'
+    }
+  ];
+
+  return (
+    <section className="py-20 bg-background">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <motion.div 
+          {...fadeUpPreset(0.1)}
+          className="text-center mb-16"
+        >
+          <h2 className="text-4xl md:text-5xl font-bold mb-6 text-foreground">
+            Everything you need..
+          </h2>
+          <p className="text-xl text-foreground/80 max-w-3xl mx-auto">
+            Build robust, powerful, and scalable server-side applications and stop reinventing the wheel.
+          </p>
+        </motion.div>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+          {features.map((feature, index) => (
+            <motion.div 
+              key={feature.title}
+              {...fadeUpPreset(index * 0.05)}
+              className="feature-card"
+            >
+              <div className="mb-6 flex justify-center">
+                <img 
+                  src={feature.icon} 
+                  alt={feature.title}
+                  className="h-12 w-12"
+                />
+              </div>
+              <h3 className="text-lg font-bold mb-4 text-primary">
+                {feature.title}
+              </h3>
+              <p className="text-foreground/70 text-sm leading-relaxed">
+                {feature.description}
+              </p>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default EverythingSection;

src/components/Features.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+
+function Features() {
+  const shouldReduceMotion = useReducedMotion();
+  
+  const fadeUpPreset = (delay, duration = 1.2) => {
+    if (shouldReduceMotion) return {};
+    return {
+      initial: { opacity: 0, y: 20 },
+      whileInView: { opacity: 1, y: 0 },
+      viewport: { once: true, amount: 0.2 },
+      transition: { delay, duration, ease: "easeOut" }
+    };
+  };
+
+  const features = [
+    {
+      icon: 'https://nestjs.com/3d.cfabe065.svg',
+      title: 'EXTENSIBLE',
+      description: 'Provides unparalleled flexibility through its meticulously crafted modular architecture.'
+    },
+    {
+      icon: 'https://nestjs.com/magic-wand.ff01fe1d.svg',
+      title: 'VERSATILE',
+      description: 'Serves as a robust, elegant, and well-structured foundation for all kinds of server-side applications.'
+    },
+    {
+      icon: 'https://nestjs.com/quality.d1d04ce8.svg',
+      title: 'PROGRESSIVE',
+      description: 'Introduces design patterns and well-established solutions to the Node.js landscape.'
+    }
+  ];
+
+  return (
+    <section className="py-20 bg-gray-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-12">
+          {features.map((feature, index) => (
+            <motion.div 
+              key={feature.title}
+              {...fadeUpPreset(index * 0.1)}
+              className="text-center"
+            >
+              <div className="mb-6 flex justify-center">
+                <img 
+                  src={feature.icon} 
+                  alt={feature.title}
+                  className="h-16 w-16"
+                />
+              </div>
+              <h3 className="text-xl font-bold mb-4 text-primary">
+                {feature.title}
+              </h3>
+              <p className="text-gray-600 leading-relaxed">
+                {feature.description}
+              </p>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default Features;

src/components/Footer.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Github, ExternalLink } from 'lucide-react';
+
+function Footer() {
+  return (
+    <footer className="bg-gray-100 py-12">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+        <div className="flex justify-center space-x-6 mb-6">
+          <a href="#" className="text-gray-400 hover:text-gray-600 transition-colors">
+            <Github className="h-6 w-6" />
+          </a>
+          <a href="#" className="text-gray-400 hover:text-gray-600 transition-colors">
+            <ExternalLink className="h-6 w-6" />
+          </a>
+          <a href="#" className="text-gray-400 hover:text-gray-600 transition-colors">
+            <ExternalLink className="h-6 w-6" />
+          </a>
+        </div>
+        
+        <div className="space-y-2 text-sm text-gray-600">
+          <p>Released under the MIT License</p>
+          <p>
+            Official NestJS Consulting{' '}
+            <a href="https://trilon.io/" className="text-primary hover:underline">
+              Trilon.io
+            </a>
+          </p>
+          <p>
+            Copyright © 2017- 2026{' '}
+            <a href="#" className="text-primary hover:underline">
+              Kamil Mysliwiec
+            </a>
+          </p>
+          <p>
+            Designed by{' '}
+            <a href="#" className="text-primary hover:underline">
+              Jakub Staron
+            </a>
+            , hosted by{' '}
+            <a href="#" className="text-primary hover:underline">
+              Netlify
+            </a>
+          </p>
+          <p>
+            <a href="#" className="text-primary hover:underline">
+              中文说明
+            </a>
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;

src/components/Header.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Github, ExternalLink, ChevronDown } from 'lucide-react';
+
+function Header() {
+  return (
+    <header className="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-sm border-b border-accent/20">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-16">
+          <div className="flex items-center">
+            <a href="https://nestjs.com/" className="flex items-center">
+              <img 
+                src="https://nestjs.com/logo-small-gradient.0ed287ce.svg" 
+                alt="NestJS - A progressive Node.js framework" 
+                className="h-8 w-auto"
+              />
+            </a>
+          </div>
+          
+          <nav className="hidden md:flex items-center space-x-8">
+            <a href="#" className="text-foreground hover:text-primary transition-colors">
+              DOCUMENTATION
+            </a>
+            <a href="#" className="text-foreground hover:text-primary transition-colors">
+              ENTERPRISE
+            </a>
+            <div className="flex items-center space-x-1">
+              <span className="bg-primary text-white text-xs px-2 py-1 rounded">
+                NEW
+              </span>
+              <a href="#" className="text-foreground hover:text-primary transition-colors flex items-center">
+                RESOURCES
+                <ChevronDown className="ml-1 h-4 w-4" />
+              </a>
+            </div>
+          </nav>
+          
+          <div className="flex items-center space-x-4">
+            <a href="#" className="text-foreground hover:text-primary transition-colors">
+              <Github className="h-5 w-5" />
+            </a>
+            <a href="#" className="text-foreground hover:text-primary transition-colors">
+              <ExternalLink className="h-5 w-5" />
+            </a>
+            <a href="#" className="text-foreground hover:text-primary transition-colors">
+              <ExternalLink className="h-5 w-5" />
+            </a>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export default Header;

src/components/Hero.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Github } from 'lucide-react';
+import { motion, useReducedMotion } from 'framer-motion';
+
+function Hero() {
+  const shouldReduceMotion = useReducedMotion();
+  
+  const fadeUpPreset = (delay, duration = 1.2) => {
+    if (shouldReduceMotion) return {};
+    return {
+      initial: { opacity: 0, y: 20 },
+      animate: { opacity: 1, y: 0 },
+      transition: { delay, duration, ease: "easeOut" }
+    };
+  };
+
+  return (
+    <section className="relative min-h-screen flex items-center justify-center hero-bg">
+      <div className="absolute inset-0 bg-black/60"></div>
+      
+      <div className="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+        <motion.h1 
+          {...fadeUpPreset(0.1)}
+          className="text-5xl md:text-7xl font-bold mb-6 text-white"
+        >
+          Hello, nest!
+        </motion.h1>
+        
+        <motion.p 
+          {...fadeUpPreset(0.2)}
+          className="text-xl md:text-2xl mb-12 text-white/90 max-w-3xl mx-auto leading-relaxed"
+        >
+          A progressive Node.js framework for building efficient, reliable and scalable server-side applications.
+        </motion.p>
+        
+        <motion.div 
+          {...fadeUpPreset(0.3)}
+          className="flex flex-col sm:flex-row gap-4 justify-center items-center"
+        >
+          <button className="btn-primary">
+            Documentation
+          </button>
+          <button className="btn-secondary flex items-center gap-2">
+            <Github className="h-5 w-5" />
+            Source code
+          </button>
+        </motion.div>
+      </div>
+    </section>
+  );
+}
+
+export default Hero;

src/components/LivePreviewSection.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+
+function LivePreviewSection() {
+  const shouldReduceMotion = useReducedMotion();
+  
+  const fadeUpPreset = (delay, duration = 1.2) => {
+    if (shouldReduceMotion) return {};
+    return {
+      initial: { opacity: 0, y: 20 },
+      whileInView: { opacity: 1, y: 0 },
+      viewport: { once: true, amount: 0.2 },
+      transition: { delay, duration, ease: "easeOut" }
+    };
+  };
+
+  return (
+    <section className="py-20 bg-black text-white">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+        <motion.h2 
+          {...fadeUpPreset(0.1)}
+          className="text-3xl font-bold mb-4"
+        >
+          Live preview
+        </motion.h2>
+        
+        <motion.p 
+          {...fadeUpPreset(0.2)}
+          className="text-white/80 mb-8 max-w-2xl mx-auto"
+        >
+          See how your application may potentially look like without leaving your personal browser.
+        </motion.p>
+      </div>
+    </section>
+  );
+}
+
+export default LivePreviewSection;

src/components/NewsletterSection.js

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+
+function NewsletterSection() {
+  const [email, setEmail] = useState('');
+  const shouldReduceMotion = useReducedMotion();
+  
+  const fadeUpPreset = (delay, duration = 1.2) => {
+    if (shouldReduceMotion) return {};
+    return {
+      initial: { opacity: 0, y: 20 },
+      whileInView: { opacity: 1, y: 0 },
+      viewport: { once: true, amount: 0.2 },
+      transition: { delay, duration, ease: "easeOut" }
+    };
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    console.log('Newsletter signup:', email);
+    setEmail('');
+  };
+
+  return (
+    <section className="py-20 bg-background">
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+        <motion.h2 
+          {...fadeUpPreset(0.1)}
+          className="text-3xl font-bold mb-4 text-foreground"
+        >
+          Join our Newsletter
+        </motion.h2>
+        
+        <motion.p 
+          {...fadeUpPreset(0.2)}
+          className="text-foreground/80 mb-8"
+        >
+          Subscribe to stay up to date with the latest Nest updates, features, and videos!
+        </motion.p>
+        
+        <motion.form 
+          {...fadeUpPreset(0.3)}
+          onSubmit={handleSubmit}
+          className="flex flex-col sm:flex-row gap-4 max-w-md mx-auto"
+        >
+          <input
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="Enter your email"
+            className="flex-1 px-4 py-3 rounded-full border border-accent bg-card text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary"
+            required
+          />
+          <button
+            type="submit"
+            className="btn-primary whitespace-nowrap"
+          >
+            Subscribe
+          </button>
+        </motion.form>
+      </div>
+    </section>
+  );
+}
+
+export default NewsletterSection;

src/components/SupportSection.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+
+function SupportSection() {
+  const shouldReduceMotion = useReducedMotion();
+  
+  const fadeUpPreset = (delay, duration = 1.2) => {
+    if (shouldReduceMotion) return {};
+    return {
+      initial: { opacity: 0, y: 20 },
+      whileInView: { opacity: 1, y: 0 },
+      viewport: { once: true, amount: 0.2 },
+      transition: { delay, duration, ease: "easeOut" }
+    };
+  };
+
+  const principalSponsors = [
+    { src: 'https://nestjs.com/trilon.22c96544.svg', alt: 'Trilon', link: 'https://trilon.io/' },
+    { src: 'https://nestjs.com/red-hat-logo.17d10010.svg', alt: 'Red Hat', link: 'https://www.redhat.com/' },
+    { src: 'https://nestjs.com/jetbrains-logo.d24f46f1.svg', alt: 'Jetbrains', link: 'https://www.jetbrains.com/' }
+  ];
+
+  const goldSponsors = [
+    { src: 'https://nestjs.com/movavi-logo.eee1bd94.svg', alt: 'Movavi', link: 'https://www.movavi.com/' },
+    { src: 'https://nestjs.com/handsontable-logo.9006297e.svg', link: 'https://handsontable.com/docs/react-data-grid/?utm_source=NestJS_homepage&utm_medium=sponsorship&utm_campaign=library_sponsorship_2024' },
+    { src: 'https://nestjs.com/arcjet-logo.79e2da28.svg', link: 'https://arcjet.com/?ref=nestjs' },
+    { src: 'https://nestjs.com/crawljobs-logo.53b333f7.svg', link: 'https://www.crawljobs.com/' }
+  ];
+
+  const silverSponsors = [
+    { src: 'https://nestjs.com/netlify-logo.9322c2d1.svg', link: 'https://www.netlify.com/' },
+    { src: 'https://nestjs.com/swingdev-logo.168e0bec.svg', link: 'https://www.swingdev.io/' },
+    { src: 'https://nestjs.com/route4me-logo.d07e8982.svg', link: 'https://www.route4me.com/' }
+  ];
+
+  return (
+    <section className="py-20 bg-gray-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+        <motion.h2 
+          {...fadeUpPreset(0.1)}
+          className="text-3xl font-bold mb-4 text-gray-900"
+        >
+          Support us
+        </motion.h2>
+        
+        <motion.p 
+          {...fadeUpPreset(0.2)}
+          className="text-gray-600 mb-12 max-w-3xl mx-auto"
+        >
+          Nest is an MIT-licensed open-source project. Hence, it grows thanks to the sponsors and support by the amazing backers. Please, consider supporting us!
+        </motion.p>
+        
+        <div className="space-y-12">
+          <motion.div {...fadeUpPreset(0.3)}>
+            <h3 className="text-xl font-bold mb-6 text-gray-900">PRINCIPAL SPONSORS</h3>
+            <div className="flex justify-center items-center space-x-8 flex-wrap gap-4">
+              {principalSponsors.map((sponsor, index) => (
+                <a key={index} href={sponsor.link} className="sponsor-logo">
+                  <img src={sponsor.src} alt={sponsor.alt} className="h-12" />
+                </a>
+              ))}
+            </div>
+          </motion.div>
+          
+          <motion.div {...fadeUpPreset(0.4)}>
+            <h3 className="text-xl font-bold mb-6 text-gray-900">GOLD SPONSORS</h3>
+            <div className="flex justify-center items-center space-x-8 flex-wrap gap-4">
+              {goldSponsors.map((sponsor, index) => (
+                <a key={index} href={sponsor.link} className="sponsor-logo">
+                  <img src={sponsor.src} alt={sponsor.alt || ''} className="h-10" />
+                </a>
+              ))}
+            </div>
+          </motion.div>
+          
+          <motion.div {...fadeUpPreset(0.5)}>
+            <h3 className="text-xl font-bold mb-6 text-gray-900">SILVER SPONSORS</h3>
+            <div className="flex justify-center items-center space-x-8 flex-wrap gap-4">
+              {silverSponsors.map((sponsor, index) => (
+                <a key={index} href={sponsor.link} className="sponsor-logo">
+                  <img src={sponsor.src} alt={sponsor.alt || ''} className="h-8" />
+                </a>
+              ))}
+            </div>
+          </motion.div>
+        </div>
+        
+        <motion.button 
+          {...fadeUpPreset(0.6)}
+          className="btn-primary mt-12"
+        >
+          Become a sponsor / backer
+        </motion.button>
+      </div>
+    </section>
+  );
+}
+
+export default SupportSection;

src/index.css

@@ -0,0 +1,99 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #ffffffe6;
+  --primary-cta: #e63946;
+  --secondary-cta: #1a1a1a;
+  --accent: #737373;
+  --background-accent: #737373;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: var(--background);
+  color: var(--foreground);
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+.bg-background {
+  background-color: var(--background);
+}
+
+.bg-card {
+  background-color: var(--card);
+}
+
+.bg-primary {
+  background-color: var(--primary-cta);
+}
+
+.bg-secondary {
+  background-color: var(--secondary-cta);
+}
+
+.bg-accent {
+  background-color: var(--accent);
+}
+
+.text-foreground {
+  color: var(--foreground);
+}
+
+.text-primary {
+  color: var(--primary-cta);
+}
+
+.text-accent {
+  color: var(--accent);
+}
+
+.border-accent {
+  border-color: var(--accent);
+}
+
+.hero-bg {
+  background-image: url('https://nestjs.com/header.e5c9eff6.webp');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.support-bg {
+  background-image: url('https://nestjs.com/support.1356a495.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.btn-primary {
+  @apply bg-primary text-white px-6 py-3 rounded-full font-medium hover:opacity-90 transition-opacity;
+}
+
+.btn-secondary {
+  @apply bg-transparent border border-accent text-foreground px-6 py-3 rounded-full font-medium hover:bg-accent hover:text-background transition-colors;
+}
+
+.feature-card {
+  @apply bg-card p-6 rounded-lg text-center;
+}
+
+.sponsor-logo {
+  @apply opacity-60 hover:opacity-100 transition-opacity;
+}

src/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(<App />);

tailwind.config.js

@@ -0,0 +1,23 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: 'var(--background)',
+        card: 'var(--card)',
+        foreground: 'var(--foreground)',
+        primary: 'var(--primary-cta)',
+        secondary: 'var(--secondary-cta)',
+        accent: 'var(--accent)',
+        'background-accent': 'var(--background-accent)',
+      },
+      fontFamily: {
+        sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'sans-serif'],
+      },
+    },
+  },
+  plugins: [],
+}

vercel.json

@@ -0,0 +1,5 @@
+{
+  "installCommand": "npm install",
+  "buildCommand": "CI=false npm run build",
+  "outputDirectory": "build"
+}