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';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
||||
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
|
||||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||||
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import { Code, Server, Shield, Zap, Users, Globe, TrendingUp, ShoppingCart, Quote, Star } from 'lucide-react';
|
||||
export default function HomePage() {
|
||||
const 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: "Build scalable applications with microservices architecture", imageSrc: "/images/microservices.e0074903-1768997608338.svg", imageAlt: "Microservices architecture"
|
||||
},
|
||||
{
|
||||
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 (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="compact"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="floatingGradient"
|
||||
cardStyle="gradient-mesh"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: 'Features', id: 'features' },
|
||||
{ name: 'About', id: 'about' },
|
||||
{ name: 'Testimonials', id: 'testimonials' },
|
||||
{ name: 'Contact', id: 'contact' }
|
||||
]}
|
||||
brandName="NestJS"
|
||||
button={{ text: 'Get Started', href: 'https://docs.nestjs.com' }}
|
||||
/>
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
|
||||
<div className="container mx-auto px-4 py-16">
|
||||
<div className="text-center mb-16">
|
||||
<h1 className="text-5xl md:text-7xl font-bold text-white mb-6">
|
||||
Build Better Apps
|
||||
</h1>
|
||||
<p className="text-xl text-gray-300 max-w-2xl mx-auto">
|
||||
A progressive Node.js framework for building efficient and scalable server-side applications
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{features.map((feature, index) => (
|
||||
<div key={index} className="bg-white/10 backdrop-blur-sm rounded-lg p-6 hover:bg-white/20 transition-colors">
|
||||
<img
|
||||
src={feature.imageSrc}
|
||||
alt={feature.imageAlt}
|
||||
className="w-16 h-16 mb-4"
|
||||
/>
|
||||
<h3 className="text-xl font-semibold text-white mb-2">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="text-gray-300">
|
||||
{feature.description}
|
||||
</p>
|
||||
</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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user