Merge version_1 into main
Merge version_1 into main
This commit was merged in pull request #1.
This commit is contained in:
279
src/app/page.tsx
279
src/app/page.tsx
@@ -1,234 +1,57 @@
|
|||||||
"use client"
|
"use client";
|
||||||
|
|
||||||
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
|
export default function HomePage() {
|
||||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
const features = [
|
||||||
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
{
|
||||||
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
|
title: "Dependency Injection", description: "Built-in dependency injection container makes your code more testable and maintainable", imageSrc: "/images/di.a0b12f44-1768997608322.svg", imageAlt: "Dependency Injection architecture"
|
||||||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
},
|
||||||
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
{
|
||||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
title: "Microservices", description: "Build scalable applications with microservices architecture", imageSrc: "/images/microservices.e0074903-1768997608338.svg", imageAlt: "Microservices architecture"
|
||||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
},
|
||||||
import { Code, Server, Shield, Zap, Users, Globe, TrendingUp, ShoppingCart, Quote, Star } from 'lucide-react';
|
{
|
||||||
|
title: "Ecosystem", description: "Rich ecosystem of modules and plugins for rapid development", imageSrc: "/images/ecosystem.eaa69289-1768997608340.svg", imageAlt: "Ecosystem overview"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Type Safety", description: "Built with TypeScript for better developer experience and fewer runtime errors", imageSrc: "/images/type-safety.34453790-1768997608341.svg", imageAlt: "TypeScript type safety"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Modular", description: "Modular architecture allows you to use only what you need", imageSrc: "/images/puzzle.c9dfc495-1768997608342.svg", imageAlt: "Modular architecture"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "3D Graphics", description: "Advanced 3D graphics capabilities for modern web applications", imageSrc: "/images/3d.cfabe065-1768997608344.svg", imageAlt: "3D graphics"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
export default function Page() {
|
|
||||||
return (
|
return (
|
||||||
<ThemeProvider
|
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
|
||||||
defaultButtonVariant="directional-hover"
|
<div className="container mx-auto px-4 py-16">
|
||||||
defaultTextAnimation="background-highlight"
|
<div className="text-center mb-16">
|
||||||
borderRadius="rounded"
|
<h1 className="text-5xl md:text-7xl font-bold text-white mb-6">
|
||||||
contentWidth="compact"
|
Build Better Apps
|
||||||
sizing="largeSmallSizeLargeTitles"
|
</h1>
|
||||||
background="floatingGradient"
|
<p className="text-xl text-gray-300 max-w-2xl mx-auto">
|
||||||
cardStyle="gradient-mesh"
|
A progressive Node.js framework for building efficient and scalable server-side applications
|
||||||
primaryButtonStyle="radial-glow"
|
</p>
|
||||||
secondaryButtonStyle="layered"
|
</div>
|
||||||
headingFontWeight="semibold"
|
|
||||||
>
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
<div id="nav" data-section="nav">
|
{features.map((feature, index) => (
|
||||||
<NavbarLayoutFloatingInline
|
<div key={index} className="bg-white/10 backdrop-blur-sm rounded-lg p-6 hover:bg-white/20 transition-colors">
|
||||||
navItems={[
|
<img
|
||||||
{ name: 'Features', id: 'features' },
|
src={feature.imageSrc}
|
||||||
{ name: 'About', id: 'about' },
|
alt={feature.imageAlt}
|
||||||
{ name: 'Testimonials', id: 'testimonials' },
|
className="w-16 h-16 mb-4"
|
||||||
{ name: 'Contact', id: 'contact' }
|
/>
|
||||||
]}
|
<h3 className="text-xl font-semibold text-white mb-2">
|
||||||
brandName="NestJS"
|
{feature.title}
|
||||||
button={{ text: 'Get Started', href: 'https://docs.nestjs.com' }}
|
</h3>
|
||||||
/>
|
<p className="text-gray-300">
|
||||||
|
{feature.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div id="hero" data-section="hero">
|
|
||||||
<HeroLogo
|
|
||||||
logoText="NestJS"
|
|
||||||
description="A progressive Node.js framework for building efficient, reliable and scalable server-side applications"
|
|
||||||
buttons={[
|
|
||||||
{ text: 'Get Started', href: 'https://docs.nestjs.com' },
|
|
||||||
{ text: 'Learn More', href: 'about' }
|
|
||||||
]}
|
|
||||||
imageSrc="/images/header.e5c9eff6-1768997609338.webp"
|
|
||||||
imageAlt="NestJS framework architecture"
|
|
||||||
showDimOverlay={false}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="features" data-section="features">
|
|
||||||
<FeatureCardOne
|
|
||||||
features={[
|
|
||||||
{
|
|
||||||
title: 'Dependency Injection",
|
|
||||||
description: 'Built-in dependency injection container makes your code more testable and maintainable',
|
|
||||||
imageSrc: '/images/di.a0b12f44-1768997608322.svg',
|
|
||||||
imageAlt: 'Dependency Injection architecture'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Microservices',
|
|
||||||
description: 'Create microservices with ease using NestJS built-in transport layer abstraction',
|
|
||||||
imageSrc: '/images/microservices.e0074903-1768997608338.svg',
|
|
||||||
imageAlt: 'Microservices architecture'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Ecosystem',
|
|
||||||
description: 'Rich ecosystem of modules and integrations for rapid development',
|
|
||||||
imageSrc: '/images/ecosystem.eaa69289-1768997608340.svg',
|
|
||||||
imageAlt: 'NestJS ecosystem'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Type Safety',
|
|
||||||
description: 'Built with TypeScript from the ground up for better development experience',
|
|
||||||
imageSrc: '/images/type-safety.34453790-1768997608341.svg',
|
|
||||||
imageAlt: 'TypeScript type safety'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Modular Architecture',
|
|
||||||
description: 'Organize your application into modules for better maintainability',
|
|
||||||
imageSrc: '/images/puzzle.c9dfc495-1768997608342.svg',
|
|
||||||
imageAlt: 'Modular architecture'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Developer Experience',
|
|
||||||
description: 'Exceptional developer experience with CLI tools and hot reloading',
|
|
||||||
imageSrc: '/images/magic-wand.ff01fe1d-1768997608344.svg',
|
|
||||||
imageAlt: 'Developer experience'
|
|
||||||
}
|
|
||||||
]}
|
|
||||||
title="Powerful Features"
|
|
||||||
description="Everything you need to build modern, scalable Node.js applications"
|
|
||||||
textboxLayout="default"
|
|
||||||
gridVariant="three-columns-all-equal-width"
|
|
||||||
animationType="slide-up"
|
|
||||||
useInvertedBackground="invertDefault"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="about" data-section="about">
|
|
||||||
<AboutMetric
|
|
||||||
title="At NestJS, we provide a robust platform that empowers developers to build enterprise-grade applications with ease"
|
|
||||||
metrics={[
|
|
||||||
{ icon: TrendingUp, label: 'GitHub Stars', value: '67K+' },
|
|
||||||
{ icon: Users, label: 'Weekly Downloads', value: '3.5M+' },
|
|
||||||
{ icon: Globe, label: 'Companies Using', value: '1000+' },
|
|
||||||
{ icon: ShoppingCart, label: 'Years Active', value: '7+' }
|
|
||||||
]}
|
|
||||||
useInvertedBackground="noInvert"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="testimonials" data-section="testimonials">
|
|
||||||
<TestimonialCardSix
|
|
||||||
testimonials={[
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
name: 'Sarah Johnson',
|
|
||||||
handle: '@sarahdev',
|
|
||||||
testimonial: 'NestJS has transformed our backend development. The modular architecture and TypeScript support make building scalable applications a breeze.',
|
|
||||||
icon: Quote
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '2',
|
|
||||||
name: 'Michael Chen',
|
|
||||||
handle: '@mchen_dev',
|
|
||||||
testimonial: 'The dependency injection system in NestJS is game-changing. Our code is now more testable and maintainable than ever before.',
|
|
||||||
icon: Star
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '3',
|
|
||||||
name: 'Emily Rodriguez',
|
|
||||||
handle: '@emily_codes',
|
|
||||||
testimonial: 'Building microservices with NestJS is incredibly straightforward. The documentation and community support are outstanding.',
|
|
||||||
icon: Quote
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '4',
|
|
||||||
name: 'David Wilson',
|
|
||||||
handle: '@davidw_tech',
|
|
||||||
testimonial: 'The developer experience with NestJS is unmatched. Hot reloading, CLI tools, and excellent TypeScript integration make development fast.',
|
|
||||||
icon: Star
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '5',
|
|
||||||
name: 'Lisa Parker',
|
|
||||||
handle: '@lisa_backend',
|
|
||||||
testimonial: 'NestJS ecosystem is rich and mature. Finding solutions for common problems is easy with their extensive module library.',
|
|
||||||
icon: Quote
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '6',
|
|
||||||
name: 'James Taylor',
|
|
||||||
handle: '@jamest_dev',
|
|
||||||
testimonial: 'The learning curve was minimal coming from Express. NestJS provides structure without sacrificing flexibility.',
|
|
||||||
icon: Star
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '7',
|
|
||||||
name: 'Anna Schmidt',
|
|
||||||
handle: '@anna_codes',
|
|
||||||
testimonial: 'Production-ready applications with NestJS are robust and maintainable. Our team productivity has increased significantly.',
|
|
||||||
icon: Quote
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '8',
|
|
||||||
name: 'Robert Kim',
|
|
||||||
handle: '@robert_backend',
|
|
||||||
testimonial: 'The decorators and metadata approach makes the code very clean and expressive. Love the Angular-inspired architecture.',
|
|
||||||
icon: Star
|
|
||||||
}
|
|
||||||
]}
|
|
||||||
title="What Developers Say"
|
|
||||||
description="Hear from the community of developers who trust NestJS for their applications"
|
|
||||||
textboxLayout="default"
|
|
||||||
animationType="slide-up"
|
|
||||||
useInvertedBackground="invertDefault"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="contact" data-section="contact">
|
|
||||||
<ContactSplit
|
|
||||||
tag="Get Started"
|
|
||||||
title="Ready to build amazing applications?"
|
|
||||||
description="Join thousands of developers who are already using NestJS to build scalable, maintainable applications"
|
|
||||||
imageSrc="/images/devtools.7a9f095a-1768997608850.png"
|
|
||||||
imageAlt="NestJS development tools"
|
|
||||||
mediaPosition="right"
|
|
||||||
inputPlaceholder="Enter your email"
|
|
||||||
buttonText="Get Updates"
|
|
||||||
termsText="Stay updated with the latest NestJS news and releases. Unsubscribe at any time."
|
|
||||||
useInvertedBackground="noInvert"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<FooterBase
|
|
||||||
columns={[
|
|
||||||
{
|
|
||||||
title: 'Framework',
|
|
||||||
items: [
|
|
||||||
{ label: 'Documentation', href: 'https://docs.nestjs.com' },
|
|
||||||
{ label: 'Getting Started', href: 'https://docs.nestjs.com/first-steps' },
|
|
||||||
{ label: 'CLI', href: 'https://docs.nestjs.com/cli/overview' },
|
|
||||||
{ label: 'Recipes', href: 'https://docs.nestjs.com/recipes/repl' }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Community',
|
|
||||||
items: [
|
|
||||||
{ label: 'GitHub', href: 'https://github.com/nestjs/nest' },
|
|
||||||
{ label: 'Discord', href: 'https://discord.gg/nestjs' },
|
|
||||||
{ label: 'Twitter', href: 'https://twitter.com/nestframework' },
|
|
||||||
{ label: 'Stack Overflow', href: 'https://stackoverflow.com/questions/tagged/nestjs' }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Support',
|
|
||||||
items: [
|
|
||||||
{ label: 'Professional Support', href: 'https://enterprise.nestjs.com' },
|
|
||||||
{ label: 'Courses', href: 'https://courses.nestjs.com' },
|
|
||||||
{ label: 'OpenCollective', href: 'https://opencollective.com/nest' },
|
|
||||||
{ label: 'Enterprise', href: 'https://enterprise.nestjs.com' }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]}
|
|
||||||
logoText="NestJS"
|
|
||||||
copyrightText="© 2025 | NestJS. MIT License."
|
|
||||||
/>
|
|
||||||
</ThemeProvider>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user