(SP 2) [Frontend] Update Features section content and improve mobile UX (#224)

* (SP 2) [Frontend] Update Features section content and improve mobile UX

- Features Section: Refined feature content and visuals.
- Mobile UX: Improved responsive layout and scaling for feature cards and interactive elements.
- Visual Enhancements: Added dynamic particle background effects to the Pricing section.

* fix(review): address accessibility, security, and performance feedback

* fix(review): resolve accessibility and hydration issues

* fix(perf): implement frame-rate independent animations

* fix(review): address accessibility, security, and performance feedback

* fix(review): enable SSR for features section and support HiDPI canvas

* fix(review): correct HiDPI logic for particle canvas measurements

Author: yevheniidatsenko

frontend/app/globals.css

@@ -331,6 +331,44 @@
     --card-rotate-offset: 3deg;
     animation-delay: 0.8s;
   }
+
+  /* Feature bubble floating animation */
+  .animate-float {
+    animation: float 3s ease-in-out infinite;
+    will-change: transform;
+  }
+
+  /* Slow spinning for orbit rings */
+  .animate-spin-slow {
+    animation: spin 20s linear infinite;
+  }
+  
+  .animate-spin-slower {
+    animation: spin 30s linear infinite reverse;
+  }
+
+  /* Dashed line flow animation */
+  .animate-dash-flow {
+    animation: dash-flow 2s linear infinite;
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-8px);
+  }
+}
+
+@keyframes dash-flow {
+  0% {
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dashoffset: 20;
+  }
 }
 
 /* Shop theme: scoped overrides (must not affect platform pages) */
@@ -420,3 +458,12 @@
 .scrollbar-hide::-webkit-scrollbar {
   display: none; /* Chrome, Safari and Opera */
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-float,
+  .animate-spin-slow,
+  .animate-spin-slower,
+  .animate-dash-flow {
+    animation: none !important;
+  }
+}

frontend/components/about/CommunitySection.tsx

@@ -1,32 +1,31 @@
 "use client"
 
-import { MessageCircle, Github, ArrowRight, ExternalLink } from "lucide-react"
-import { TESTIMONIALS, type Testimonial } from "@/data/about" 
-
+import { Github, ArrowRight, ExternalLink, MessageCircle } from "lucide-react"
 import Link from "next/link"
+import { TESTIMONIALS, type Testimonial } from "@/data/about"
+import { GradientBadge } from "@/components/ui/gradient-badge"
+import { SectionHeading } from "@/components/ui/section-heading"
 
 export function CommunitySection() {
   return (
-    <section className="w-full py-16 md:py-24 relative overflow-hidden bg-gray-50 dark:bg-transparent">
+    <section className="w-full py-20 lg:py-28 relative overflow-hidden bg-gray-50 dark:bg-transparent">
 
         <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[300px] h-[300px] bg-[#1e5eff]/5 dark:bg-[#ff2d55]/5 blur-[80px] rounded-full pointer-events-none" />
 
         <div className="w-full relative z-10">
 
-            <div className="max-w-7xl mx-auto px-4 mb-12 text-center">
-                <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5 text-gray-500 dark:text-gray-400 text-[10px] font-bold uppercase tracking-widest mb-4">
-                    <MessageCircle size={10} /> Community Love
-                </div>
+            <div className="container-main mb-12 text-center">
+                <GradientBadge icon={MessageCircle} text="Community Love" className="mb-4" />
 
-                <h2 className="text-3xl md:text-4xl font-black tracking-tight text-gray-900 dark:text-white mb-4">
-                    Approved by <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#1e5eff] to-[#174ad6] dark:from-[#ff2d55] dark:to-[#e0264b]">Survivors</span>
-                </h2>
-                <p className="text-gray-600 dark:text-gray-400 max-w-xl mx-auto text-base font-light leading-relaxed">
-                    Join thousands of developers who stopped guessing and started shipping. Real feedback from real engineers.
-                </p>
+                <SectionHeading 
+                    title="Approved by"
+                    highlight="Survivors"
+                    subtitle="Join thousands of developers who stopped guessing and started shipping. Real feedback from real engineers."
+                    className="mb-0"
+                />
             </div>
 
-            <div className="relative w-full pause-on-hover mb-16">
+            <div className="relative w-full pause-on-hover mb-8 md:mb-16">
 
                 <div className="pointer-events-none absolute left-0 top-0 z-10 h-full w-12 md:w-32 bg-gradient-to-r from-gray-50 dark:from-background to-transparent" />
                 <div className="pointer-events-none absolute right-0 top-0 z-10 h-full w-12 md:w-32 bg-gradient-to-l from-gray-50 dark:from-background to-transparent" />
@@ -45,31 +44,31 @@ export function CommunitySection() {
                 </div>
             </div>
 
-            <div className="max-w-7xl mx-auto px-4 text-center">
-                <div className="flex flex-col items-center gap-3 md:hidden">
-                    <span className="text-sm text-gray-600 dark:text-gray-400 font-medium">
-                        Have a success story or feature request?
-                    </span>
+            <div className="container-main text-center">
+                <div className="flex flex-col items-center gap-2 md:hidden">
                     <Link
                         href="https://github.com/DevLoversTeam/devlovers.net/discussions"
                         target="_blank"
-                        className="group inline-flex items-center gap-2 px-5 py-3 rounded-full
-                            bg-gray-900 dark:bg-white text-white dark:text-black
-                            text-xs font-bold uppercase tracking-wider
+                        rel="noopener noreferrer"
+                        className="group inline-flex items-center gap-1.5 px-4 py-2 rounded-full
+                            border border-gray-200 dark:border-white/10
+                            bg-white/50 dark:bg-white/5
+                            text-[10px] font-bold uppercase tracking-wider
+                            text-gray-700 dark:text-gray-300
                             transition-all duration-300
-                            hover:bg-[#1e5eff] dark:hover:bg-[#ff2d55]
-                            hover:text-white dark:hover:text-white
-                            hover:scale-[1.02]"
+                            hover:border-[#1e5eff]/40 dark:hover:border-[#ff2d55]/40
+                            hover:text-[#1e5eff] dark:hover:text-[#ff2d55]"
                     >
-                        <Github size={14} />
+                        <Github size={12} />
                         Join Discussion
-                        <ArrowRight size={12} className="group-hover:translate-x-1 transition-transform" />
+                        <ArrowRight size={10} className="group-hover:translate-x-0.5 transition-transform" />
                     </Link>
                 </div>
 
                 <Link
                     href="https://github.com/DevLoversTeam/devlovers.net/discussions"
                     target="_blank"
+                    rel="noopener noreferrer"
                     className="group relative hidden md:inline-flex items-center justify-center gap-4 p-1.5 pl-6 pr-1.5 rounded-full
                     bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10
                     transition-all duration-300 ease-out
@@ -94,8 +93,8 @@ export function CommunitySection() {
                     </span>
                 </Link>
 
-                <p className="mt-6 text-[10px] text-gray-400 dark:text-gray-600 uppercase tracking-widest font-bold opacity-60">
-                    We read every single thread
+                <p className="mt-3 md:mt-6 text-[8px] md:text-[10px] text-gray-400 dark:text-gray-600 uppercase tracking-widest md:font-bold md:opacity-60 opacity-70">
+                    We read every <span className="hidden md:inline">single </span>thread
                 </p>
             </div>
 
@@ -114,7 +113,7 @@ function TestimonialCard({
   color
 }: Testimonial) {
   return (
-    <div className="w-[280px] md:w-[320px] shrink-0 rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-[#0f0f0f] p-5 shadow-sm hover:shadow-md transition-all duration-300 hover:border-gray-300 dark:hover:border-white/20 hover:-translate-y-1">
+    <div className="w-[280px] md:w-[320px] shrink-0 rounded-xl border border-gray-200 dark:border-white/10 bg-white/10 dark:bg-neutral-900/10 backdrop-blur-md p-5 shadow-sm hover:shadow-md transition-all duration-300 hover:border-gray-300 dark:hover:border-white/20 hover:-translate-y-1">
       <div className="mb-3 flex items-start justify-between">
         <div className="flex items-center gap-3">
           <div className="flex h-9 w-9 items-center justify-center rounded-full bg-gray-100 dark:bg-white/10 border border-gray-200 dark:border-white/5 text-xs font-bold text-gray-700 dark:text-gray-200">