AI Grading Platform Landing Page with GSAP Animations

I'll create a stunning landing page for your AI grading platform with impressive GSAP animations. This will showcase how your platform helps teachers and students.

Installation Instructions

To use this landing page in your Next.js project:

1. Click the "Add to codebase" button in the top-right menu of the code block
2. Install GSAP by running:

3. Make sure you have the required shadcn/ui components installed:

   • Button
   • Card
   • If you don't have shadcn/ui set up, you can install it following the official documentation

Features of this Landing Page

1. Stunning GSAP Animations:

   • Scroll-triggered animations for each section
   • Staggered entrance effects
   • Smooth transitions between elements
   • Animated progress indicators

2. Comprehensive Sections:

   • Hero section with eye-catching animations
   • Features overview with animated cards
   • Dedicated sections for teachers and students
   • Step-by-step "How it Works" process
   • Testimonials carousel
   • Strong call-to-action

3. Responsive Design:

   • Fully responsive across all device sizes
   • Mobile-optimized layouts
   • Adaptive content organization

4. Accessibility:

   • Semantic HTML structure
   • Proper contrast ratios
   • Screen reader support
   • Keyboard navigation

This landing page effectively communicates the value of your AI grading platform while providing an engaging, modern user experience with impressive animations.

I'll update the Tailwind configuration to be compatible with Tailwind CSS v4. Here's the updated configuration:

Tailwind v4 Compatibility Notes

I've updated the configuration to be compatible with Tailwind CSS v4. Here are the key changes:

1. Color System:

   • Updated to use the new RGB color format with rgb(var(--color) / <alpha-value>) syntax
   • This allows for proper alpha value handling in Tailwind v4

2. Container Configuration:

   • Simplified to match v4's built-in container handling
   • Added responsive padding configuration

3. Dark Mode:

   • Updated to use the simplified v4 syntax

4. Plugins:

   • Removed external plugins as many features are now built into v4
   • You can add specific plugins if needed

5. Added globals.css:

   • Included CSS variables for the color system
   • These variables are referenced in the tailwind config

Next Steps

1. Make sure you have the latest version of Tailwind CSS v4 installed:

   npm install tailwindcss@latest

2. Install GSAP for the animations:

   npm install gsap
3. If you encounter any issues with shadcn/ui components, you may need to update them to be compatible with Tailwind v4 as well.

The rest of the code should work with the updated configuration. Let me know if you need any other adjustments!