Drupal + Next.js + React + TailwindCSS

Come check my Drupal 11 website with Next.js, React, TailwindCSS

Click Here:
https://fg-stream-q6g2.vercel.app/carousel-stream


Backend — Drupal 11                                                                 
                                                                                      
  Platform & Runtime:                                                                 
  Drupal 11; PHP 8.3; Composer; Drush 13; Pantheon (hosting); DDEV (local dev); MySQL 
                                                                                      
  Contrib Modules:                                                                    
  JSON:API (core); jsonapi_extras; jsonapi_menu_items; paragraphs; paragraphs_ee;     
  paragraphs_features; paragraphs_browser; decoupled_router; pathauto; CKEditor 5;    
  Views; Taxonomy; Token; Path Alias; Big Pipe; Menu Link Content; Entity Reference   
  Revisions                                                                           
                  
  Custom Modules:                                                                   
  fg_components (auto-adds Components paragraph field to all content types);
  fg_field_effects (per-field animation selector, exposes effects via JSON:API)       
   
  Content Types:                                                                      
  Article; Blog Post; Landing Page; Page; Test 2
                                                                                    
  Paragraph Types:
  Hero Banner; 50/50; Description; Stream Carousel; Stream Cards; Article Teaser;
  Teasers; Presentation; CTA; Image Card; Rich Text; Text Block                       
   
  Field Types:                                                                        
  String; String Long; Text with Summary; Text Long; Image; Link; Entity Reference;
  Entity Reference Revisions; List (string)                                           
   
  Taxonomies:                                                                         
  Tags            
                                                                                    
  Menus:
  Main; Footer; Account; Admin; Tools

  URL / Routing:
  Pathauto (auto URL aliases per content type); Decoupled Router (translates path
  aliases to JSON:API resources)                                                      
   
  ---                                                                                 
  Frontend — Next.js
                                                                                    
  Core Framework:
  Next.js 16.2; React 19; TypeScript 5; App Router; Dynamic catch-all routing 

Styling:                                                                            
  Tailwind CSS 4; PostCSS; Autoprefixer; tw-animate-css; tailwind-merge; clsx;      
  class-variance-authority (CVA)                                                      
                  
  UI Components:                                                                    
  shadcn/ui; Radix UI; Lucide React (icons); badge; button; card (shadcn primitives)
                                                                                      
  Animation:
  GSAP 3 (GreenSock) — entry animations (fade, scale, zoom, bounce, elastic, rotate,  
  flip, blur); GSAP ScrollTrigger — scroll-triggered animations; GSAP continuous      
  animations (pulse, float, swing); Shadcn/tw-animate-css CSS class animations      
                                                                                      
  Paragraph Components:                                                               
  ParagraphResolver (dynamic switcher); HeroBanner; FiftyFifty; Description;        
  StreamCarousel; Presentation; ArticleTeaser; WithEffect (animation wrapper HOC)     
                  
  Layout Components:                                                                  
  Header; Footer; Hero; MobileMenu; Providers
                                                                                    
  Lib Utilities:
  drupal.ts (Decoupled Router + JSON:API fetch); effects.ts (GSAP & CSS animation
  definitions); menu.ts (JSON:API menu fetch with tree builder); utils.ts             
   
  Tooling:                                                                            
  ESLint 9; eslint-config-next; instrumentation.ts (Next.js observability hook)

The architecture is fully headless/decoupled: Drupal serves all content as JSON:API;
   the Next.js frontend fetches it at request time via decoupled_router (no hardcoded 
  paths), resolves paragraph types dynamically, and applies per-field GSAP or CSS
  animations driven by the fg_field_effects custom module.