Update src/app/playground/page.tsx

Merge version_1 into main

src/app/datasets/page.tsx

@@ -30,7 +30,7 @@ export default function DatasetsPage() {
           brandName="Emphra"
           navItems={[
             { name: "Product", id: "product-demo" },
-            { name: "Playground", id: "ai-playground" },
+            { name: "Playground", id: "playground" },
             { name: "How It Works", id: "architecture" },
             { name: "Developers", id: "/developers" },
             { name: "Datasets", id: "/datasets" },
@@ -44,9 +44,7 @@ export default function DatasetsPage() {
         <TextSplitAbout
           title="Training Datasets"
           description={[
-            "Emphra's machine learning models are trained on millions of real conversations across diverse platforms. Our anonymized, ethically-sourced datasets power industry-leading emotion detection and toxicity classification.",
-            "Access curated datasets for research and model training. Each dataset includes labeled examples, emotion annotations, and behavioral outcomes. Perfect for training your own behavioral design systems or validating cross-platform communication patterns.",
-          ]}
+            "Emphra's machine learning models are trained on millions of real conversations across diverse platforms. Our anonymized, ethically-sourced datasets power industry-leading emotion detection and toxicity classification.",            "Access curated datasets for research and model training. Each dataset includes labeled examples, emotion annotations, and behavioral outcomes. Perfect for training your own behavioral design systems or validating cross-platform communication patterns."]}
           useInvertedBackground={false}
           showBorder={true}
           buttons={[
@@ -67,47 +65,17 @@ export default function DatasetsPage() {
           animationType="slide-up"
           metrics={[
             {
-              id: "1",
-              title: "Core Emotion Dataset",
-              subtitle: "Multi-platform conversations with emotion labels",
-              category: "Training",
-              value: "2.1M samples",
-            },
+              id: "1",              title: "Core Emotion Dataset",              subtitle: "Multi-platform conversations with emotion labels",              category: "Training",              value: "2.1M samples"},
             {
-              id: "2",
-              title: "Toxicity Benchmark",
-              subtitle: "Harmful language detection and classification",
-              category: "Classification",
-              value: "850K samples",
-            },
+              id: "2",              title: "Toxicity Benchmark",              subtitle: "Harmful language detection and classification",              category: "Classification",              value: "850K samples"},
             {
-              id: "3",
-              title: "Intervention Outcomes",
-              subtitle: "User responses to reflection prompts",
-              category: "Behavioral",
-              value: "340K samples",
-            },
+              id: "3",              title: "Intervention Outcomes",              subtitle: "User responses to reflection prompts",              category: "Behavioral",              value: "340K samples"},
             {
-              id: "4",
-              title: "Cross-cultural Dataset",
-              subtitle: "Multi-language emotion and context analysis",
-              category: "Multilingual",
-              value: "1.2M samples",
-            },
+              id: "4",              title: "Cross-cultural Dataset",              subtitle: "Multi-language emotion and context analysis",              category: "Multilingual",              value: "1.2M samples"},
             {
-              id: "5",
-              title: "Real-time Analytics",
-              subtitle: "Live platform metrics and trends",
-              category: "Analytics",
-              value: "Updated daily",
-            },
+              id: "5",              title: "Real-time Analytics",              subtitle: "Live platform metrics and trends",              category: "Analytics",              value: "Updated daily"},
             {
-              id: "6",
-              title: "Research Repository",
-              subtitle: "Open datasets for academic research",
-              category: "Academic",
-              value: "500K samples",
-            },
+              id: "6",              title: "Research Repository",              subtitle: "Open datasets for academic research",              category: "Academic",              value: "500K samples"},
           ]}
         />
       </div>
@@ -121,35 +89,17 @@ export default function DatasetsPage() {
           tagAnimation="slide-up"
           features={[
             {
-              id: "1",
-              title: "Emotion Annotations",
-              author: "Multi-label Classification",
-              description:
-                "Messages labeled with primary and secondary emotions: joy, sadness, anger, fear, surprise, disgust, and neutral. Expert human annotators with inter-rater reliability scores.",
-              tags: ["Emotions", "Annotated"],
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/a-real-time-message-analysis-interface-s-1772711816611-c36e97ae.png?_wi=2",
-              imageAlt: "Emotion annotation interface",
-            },
+              id: "1",              title: "Emotion Annotations",              author: "Multi-label Classification",              description:
+                "Messages labeled with primary and secondary emotions: joy, sadness, anger, fear, surprise, disgust, and neutral. Expert human annotators with inter-rater reliability scores.",              tags: ["Emotions", "Annotated"],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/a-real-time-message-analysis-interface-s-1772711816611-c36e97ae.png?_wi=2",              imageAlt: "Emotion annotation interface"},
             {
-              id: "2",
-              title: "Behavioral Outcomes",
-              author: "User Response Tracking",
-              description:
-                "Track how users respond to interventions. Includes reflection completion rates, message edits, rewrites accepted, and long-term behavior changes.",
-              tags: ["Behavioral", "Outcomes"],
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/an-animated-circular-emotion-risk-meter--1772711816389-2dbf9e30.png?_wi=2",
-              imageAlt: "Behavioral outcomes tracking",
-            },
+              id: "2",              title: "Behavioral Outcomes",              author: "User Response Tracking",              description:
+                "Track how users respond to interventions. Includes reflection completion rates, message edits, rewrites accepted, and long-term behavior changes.",              tags: ["Behavioral", "Outcomes"],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/an-animated-circular-emotion-risk-meter--1772711816389-2dbf9e30.png?_wi=2",              imageAlt: "Behavioral outcomes tracking"},
             {
-              id: "3",
-              title: "Contextual Metadata",
-              author: "Rich Data Enrichment",
-              description:
-                "Platform type, user demographics (anonymized), conversation history, topic classification, and environmental context. All data formatted for easy integration with PyTorch and TensorFlow.",
-              tags: ["Metadata", "Context"],
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/a-beautiful-modal-dialog-box-appearing-o-1772711816098-26f1f8b7.png?_wi=2",
-              imageAlt: "Contextual metadata system",
-            },
+              id: "3",              title: "Contextual Metadata",              author: "Rich Data Enrichment",              description:
+                "Platform type, user demographics (anonymized), conversation history, topic classification, and environmental context. All data formatted for easy integration with PyTorch and TensorFlow.",              tags: ["Metadata", "Context"],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/a-beautiful-modal-dialog-box-appearing-o-1772711816098-26f1f8b7.png?_wi=2",              imageAlt: "Contextual metadata system"},
           ]}
           animationType="slide-up"
           textboxLayout="default"
@@ -183,17 +133,15 @@ export default function DatasetsPage() {
           copyrightText="© 2025 Emphra. All rights reserved."
           columns={[
             {
-              title: "Product",
-              items: [
+              title: "Product",              items: [
                 { label: "Features", href: "product-demo" },
-                { label: "Playground", href: "ai-playground" },
+                { label: "Playground", href: "playground" },
                 { label: "How It Works", href: "architecture" },
                 { label: "Pricing", href: "#" },
               ],
             },
             {
-              title: "Developers",
-              items: [
+              title: "Developers",              items: [
                 { label: "API Docs", href: "/developers" },
                 { label: "Datasets", href: "/datasets" },
                 { label: "GitHub", href: "https://github.com" },
@@ -201,12 +149,11 @@ export default function DatasetsPage() {
               ],
             },
             {
-              title: "Company",
-              items: [
+              title: "Company",              items: [
                 { label: "About", href: "#" },
                 { label: "Blog", href: "#" },
                 { label: "Privacy Policy", href: "#" },
-                { label: "Contact", href: "#" },
+                { label: "Contact", href: "contact" },
               ],
             },
           ]}

src/app/developers/page.tsx

@@ -29,7 +29,7 @@ export default function DevelopersPage() {
           brandName="Emphra"
           navItems={[
             { name: "Product", id: "product-demo" },
-            { name: "Playground", id: "ai-playground" },
+            { name: "Playground", id: "playground" },
             { name: "How It Works", id: "architecture" },
             { name: "Developers", id: "/developers" },
             { name: "Datasets", id: "/datasets" },
@@ -43,9 +43,7 @@ export default function DevelopersPage() {
         <TextSplitAbout
           title="API Documentation"
           description={[
-            "Emphra's REST API provides complete access to our behavioral analysis engine. Integrate real-time emotion detection, toxicity scoring, and empathy-driven interventions directly into your platform.",
-            "Our comprehensive documentation includes code examples in Python, Node.js, and Go. Rate limits are generous for enterprise customers, with real-time analytics dashboards to monitor your integration performance.",
-          ]}
+            "Emphra's REST API provides complete access to our behavioral analysis engine. Integrate real-time emotion detection, toxicity scoring, and empathy-driven interventions directly into your platform.",            "Our comprehensive documentation includes code examples in Python, Node.js, and Go. Rate limits are generous for enterprise customers, with real-time analytics dashboards to monitor your integration performance."]}
           useInvertedBackground={false}
           showBorder={true}
           buttons={[
@@ -64,35 +62,17 @@ export default function DevelopersPage() {
           tagAnimation="slide-up"
           features={[
             {
-              id: "1",
-              title: "REST API Endpoints",
-              author: "Core Integration",
-              description:
-                "Well-documented REST endpoints for message analysis, user behavior tracking, and custom intervention configuration. Built for high throughput with 99.9% uptime SLA.",
-              tags: ["REST", "Production-Ready"],
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/a-large-text-input-area-for-the-ai-playg-1772711816995-20b12817.png",
-              imageAlt: "API endpoint documentation",
-            },
+              id: "1",              title: "REST API Endpoints",              author: "Core Integration",              description:
+                "Well-documented REST endpoints for message analysis, user behavior tracking, and custom intervention configuration. Built for high throughput with 99.9% uptime SLA.",              tags: ["REST", "Production-Ready"],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/a-large-text-input-area-for-the-ai-playg-1772711816995-20b12817.png?_wi=4",              imageAlt: "API endpoint documentation"},
             {
-              id: "2",
-              title: "SDK Libraries",
-              author: "Multi-Language Support",
-              description:
-                "Official SDKs for Python, Node.js, Go, and Java. Simplified integration with built-in error handling, retry logic, and request batching for optimal performance.",
-              tags: ["SDKs", "Client Libraries"],
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/a-scenario-selection-interface-showing-b-1772711815990-0eb2d330.png",
-              imageAlt: "SDK libraries interface",
-            },
+              id: "2",              title: "SDK Libraries",              author: "Multi-Language Support",              description:
+                "Official SDKs for Python, Node.js, Go, and Java. Simplified integration with built-in error handling, retry logic, and request batching for optimal performance.",              tags: ["SDKs", "Client Libraries"],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/a-scenario-selection-interface-showing-b-1772711815990-0eb2d330.png?_wi=3",              imageAlt: "SDK libraries interface"},
             {
-              id: "3",
-              title: "Webhook Integration",
-              author: "Real-time Events",
-              description:
-                "Receive real-time webhooks when messages trigger interventions or when users engage with reflection prompts. Configure endpoints for custom business logic and analytics pipelines.",
-              tags: ["Webhooks", "Events"],
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/a-text-passage-with-dynamic-word-highlig-1772711822066-4cbf97f5.png",
-              imageAlt: "Webhook event system",
-            },
+              id: "3",              title: "Webhook Integration",              author: "Real-time Events",              description:
+                "Receive real-time webhooks when messages trigger interventions or when users engage with reflection prompts. Configure endpoints for custom business logic and analytics pipelines.",              tags: ["Webhooks", "Events"],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/a-text-passage-with-dynamic-word-highlig-1772711822066-4cbf97f5.png?_wi=4",              imageAlt: "Webhook event system"},
           ]}
           animationType="slide-up"
           textboxLayout="default"
@@ -126,17 +106,15 @@ export default function DevelopersPage() {
           copyrightText="© 2025 Emphra. All rights reserved."
           columns={[
             {
-              title: "Product",
-              items: [
+              title: "Product",              items: [
                 { label: "Features", href: "product-demo" },
-                { label: "Playground", href: "ai-playground" },
+                { label: "Playground", href: "playground" },
                 { label: "How It Works", href: "architecture" },
                 { label: "Pricing", href: "#" },
               ],
             },
             {
-              title: "Developers",
-              items: [
+              title: "Developers",              items: [
                 { label: "API Docs", href: "/developers" },
                 { label: "Datasets", href: "/datasets" },
                 { label: "GitHub", href: "https://github.com" },
@@ -144,12 +122,11 @@ export default function DevelopersPage() {
               ],
             },
             {
-              title: "Company",
-              items: [
+              title: "Company",              items: [
                 { label: "About", href: "#" },
                 { label: "Blog", href: "#" },
                 { label: "Privacy Policy", href: "#" },
-                { label: "Contact", href: "#" },
+                { label: "Contact", href: "contact" },
               ],
             },
           ]}

src/app/page.tsx

@@ -32,7 +32,7 @@ export default function HomePage() {
           brandName="Emphra"
           navItems={[
             { name: "Product", id: "product-demo" },
-            { name: "Playground", id: "ai-playground" },
+            { name: "Playground", id: "playground" },
             { name: "How It Works", id: "architecture" },
             { name: "Developers", id: "/developers" },
             { name: "Datasets", id: "/datasets" },
@@ -52,13 +52,9 @@ export default function HomePage() {
           background={{ variant: "plain" }}
           mediaItems={[
             {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/a-sophisticated-ai-interface-mockup-show-1772711816919-d319aba4.png",
-              imageAlt: "Emphra AI interface analyzing message sentiment",
-            },
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/a-sophisticated-ai-interface-mockup-show-1772711816919-d319aba4.png",              imageAlt: "Emphra AI interface analyzing message sentiment"},
             {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/a-sleek-behavioral-analytics-dashboard-s-1772711816479-a250a75a.png",
-              imageAlt: "Emotion Risk Score dashboard with metrics",
-            },
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/a-sleek-behavioral-analytics-dashboard-s-1772711816479-a250a75a.png",              imageAlt: "Emotion Risk Score dashboard with metrics"},
           ]}
           mediaAnimation="slide-up"
           rating={5}
@@ -80,45 +76,21 @@ export default function HomePage() {
           tagAnimation="slide-up"
           features={[
             {
-              id: "1",
-              title: "Real-time Message Analysis",
-              author: "Core Feature",
-              description:
-                "Type comments, send messages, and watch as Emphra instantly computes the Emotion Risk Score (ERS), detects emotions, and flags potentially harmful language.",
-              tags: ["Interactive", "Real-time"],
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/a-real-time-message-analysis-interface-s-1772711816611-c36e97ae.png?_wi=1",
-              imageAlt: "Real-time message analysis interface",
-            },
+              id: "1",              title: "Real-time Message Analysis",              author: "Core Feature",              description:
+                "Type comments, send messages, and watch as Emphra instantly computes the Emotion Risk Score (ERS), detects emotions, and flags potentially harmful language.",              tags: ["Interactive", "Real-time"],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/a-real-time-message-analysis-interface-s-1772711816611-c36e97ae.png?_wi=1",              imageAlt: "Real-time message analysis interface"},
             {
-              id: "2",
-              title: "Emotion Risk Visualization",
-              author: "Advanced Analytics",
-              description:
-                "See emotion detection, toxicity probability, and ERS score displayed live. Words are highlighted in yellow for moderate risk and red for high risk.",
-              tags: ["Visualization", "Analytics"],
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/an-animated-circular-emotion-risk-meter--1772711816389-2dbf9e30.png?_wi=1",
-              imageAlt: "Emotion Risk Meter visualization",
-            },
+              id: "2",              title: "Emotion Risk Visualization",              author: "Advanced Analytics",              description:
+                "See emotion detection, toxicity probability, and ERS score displayed live. Words are highlighted in yellow for moderate risk and red for high risk.",              tags: ["Visualization", "Analytics"],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/an-animated-circular-emotion-risk-meter--1772711816389-2dbf9e30.png?_wi=1",              imageAlt: "Emotion Risk Meter visualization"},
             {
-              id: "3",
-              title: "Empathy Reflection Interface",
-              author: "Intervention Design",
-              description:
-                "When a message exceeds the ERS threshold, a beautiful modal appears with the animated Emotion Risk Meter, highlighted risky words, and gentle reflection prompts.",
-              tags: ["Modal", "Intervention"],
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/a-beautiful-modal-dialog-box-appearing-o-1772711816098-26f1f8b7.png?_wi=1",
-              imageAlt: "Empathy reflection modal interface",
-            },
+              id: "3",              title: "Empathy Reflection Interface",              author: "Intervention Design",              description:
+                "When a message exceeds the ERS threshold, a beautiful modal appears with the animated Emotion Risk Meter, highlighted risky words, and gentle reflection prompts.",              tags: ["Modal", "Intervention"],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/a-beautiful-modal-dialog-box-appearing-o-1772711816098-26f1f8b7.png?_wi=1",              imageAlt: "Empathy reflection modal interface"},
             {
-              id: "4",
-              title: "Smart Rewrite Suggestions",
-              author: "AI-Generated",
-              description:
-                "The system automatically generates safer versions of messages. Users can preview rewrites or send the original message anyway after a 3-second mindful pause.",
-              tags: ["AI-Generated", "Suggestions"],
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/a-side-by-side-comparison-showing-the-or-1772711816072-6c9acb7a.png",
-              imageAlt: "AI-generated rewrite suggestion interface",
-            },
+              id: "4",              title: "Smart Rewrite Suggestions",              author: "AI-Generated",              description:
+                "The system automatically generates safer versions of messages. Users can preview rewrites or send the original message anyway after a 3-second mindful pause.",              tags: ["AI-Generated", "Suggestions"],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/a-side-by-side-comparison-showing-the-or-1772711816072-6c9acb7a.png?_wi=1",              imageAlt: "AI-generated rewrite suggestion interface"},
           ]}
           animationType="slide-up"
           textboxLayout="default"
@@ -126,6 +98,37 @@ export default function HomePage() {
         />
       </div>
 
+      {/* Playground Section */}
+      <div id="playground" data-section="playground">
+        <FeatureCardTwentyFour
+          title="Interactive Playground"
+          description="Test Emphra's capabilities directly in your browser. Type messages and see real-time emotion detection, toxicity scoring, and empathy-driven suggestions."
+          tag="Try It Now"
+          tagAnimation="slide-up"
+          features={[
+            {
+              id: "1",              title: "Emotion Risk Score Calculator",              author: "Live Testing",              description:
+                "Enter any message and instantly see the Emotion Risk Score (ERS), primary emotion detected, secondary emotions, and toxicity probability. Perfect for understanding how Emphra analyzes language.",              tags: ["Calculator", "Real-time"],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/a-large-text-input-area-for-the-ai-playg-1772711816995-20b12817.png?_wi=1",              imageAlt: "Emotion Risk Score calculator interface"},
+            {
+              id: "2",              title: "Scenario Testing",              author: "Context Analysis",              description:
+                "Choose from different conversation scenarios and social platforms. See how Emphra's analysis adapts to different contexts, user relationships, and platform norms.",              tags: ["Scenarios", "Context"],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/a-scenario-selection-interface-showing-b-1772711815990-0eb2d330.png?_wi=1",              imageAlt: "Scenario selection interface"},
+            {
+              id: "3",              title: "Smart Rewrite Generation",              author: "AI Suggestions",              description:
+                "Get AI-powered suggestions to rewrite messages with lower emotional risk. See side-by-side comparisons of original and suggested versions with ERS improvements highlighted.",              tags: ["AI", "Suggestions"],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/a-text-passage-with-dynamic-word-highlig-1772711822066-4cbf97f5.png?_wi=1",              imageAlt: "Word highlight and suggestion interface"},
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          buttons={[
+            { text: "Open Playground", href: "/playground" },
+          ]}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
       {/* Social Proof Section */}
       <div id="social-proof" data-section="social-proof">
         <SocialProofOne
@@ -136,14 +139,7 @@ export default function HomePage() {
           useInvertedBackground={false}
           names={["Meta", "Discord", "Twitch", "Reddit", "LinkedIn", "Slack", "Telegram"]}
           logos={[
-            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/meta-facebook-logo-wordmark-in-white-lig-1772711816349-9751db92.png",
-            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/discord-logo-purple-gaming-icon-in-white-1772711815132-a577aa90.png",
-            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/twitch-logo-purple-gaming-streaming-plat-1772711816312-5b5d2c4f.png",
-            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/reddit-logo-orange-red-mascot-in-white-l-1772711815215-5f32a763.png",
-            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/linkedin-logo-professional-network-blue--1772711816864-de6838a1.png",
-            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/slack-logo-colorful-chat-messaging-app-i-1772711819014-e4810bb5.png",
-            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/telegram-logo-blue-messaging-app-in-whit-1772711816055-6c3c89a1.png",
-          ]}
+            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/meta-facebook-logo-wordmark-in-white-lig-1772711816349-9751db92.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/discord-logo-purple-gaming-icon-in-white-1772711815132-a577aa90.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/twitch-logo-purple-gaming-streaming-plat-1772711816312-5b5d2c4f.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/reddit-logo-orange-red-mascot-in-white-l-1772711815215-5f32a763.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/linkedin-logo-professional-network-blue--1772711816864-de6838a1.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/slack-logo-colorful-chat-messaging-app-i-1772711819014-e4810bb5.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/telegram-logo-blue-messaging-app-in-whit-1772711816055-6c3c89a1.png"]}
           speed={40}
           showCard={true}
         />
@@ -160,47 +156,17 @@ export default function HomePage() {
           animationType="slide-up"
           metrics={[
             {
-              id: "1",
-              title: "Messages Analyzed",
-              subtitle: "Real-time across all platforms",
-              category: "Volume",
-              value: "2.3B+",
-            },
+              id: "1",              title: "Messages Analyzed",              subtitle: "Real-time across all platforms",              category: "Volume",              value: "2.3B+"},
             {
-              id: "2",
-              title: "Interventions Triggered",
-              subtitle: "Reflection prompts shown this month",
-              category: "Safety",
-              value: "145M",
-            },
+              id: "2",              title: "Interventions Triggered",              subtitle: "Reflection prompts shown this month",              category: "Safety",              value: "145M"},
             {
-              id: "3",
-              title: "Average ERS Reduction",
-              subtitle: "After user reflection and rewrite",
-              category: "Effectiveness",
-              value: "34%",
-            },
+              id: "3",              title: "Average ERS Reduction",              subtitle: "After user reflection and rewrite",              category: "Effectiveness",              value: "34%"},
             {
-              id: "4",
-              title: "Healthier Conversations",
-              subtitle: "Platforms reporting improved tone",
-              category: "Adoption",
-              value: "89%",
-            },
+              id: "4",              title: "Healthier Conversations",              subtitle: "Platforms reporting improved tone",              category: "Adoption",              value: "89%"},
             {
-              id: "5",
-              title: "User Behavior Streaks",
-              subtitle: "Consecutive days of respectful communication",
-              category: "Engagement",
-              value: "18 days avg",
-            },
+              id: "5",              title: "User Behavior Streaks",              subtitle: "Consecutive days of respectful communication",              category: "Engagement",              value: "18 days avg"},
             {
-              id: "6",
-              title: "Toxicity Reduction",
-              subtitle: "Overall platform toxicity decrease",
-              category: "Impact",
-              value: "27%",
-            },
+              id: "6",              title: "Toxicity Reduction",              subtitle: "Overall platform toxicity decrease",              category: "Impact",              value: "27%"},
           ]}
         />
       </div>
@@ -214,41 +180,17 @@ export default function HomePage() {
           tagAnimation="slide-up"
           testimonials={[
             {
-              id: "1",
-              name: "Sarah Chen",
-              role: "Head of Trust & Safety",
-              company: "Global Social Platform",
-              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/professional-portrait-photograph-of-a-co-1772711816414-aecc241f.png",
-              imageAlt: "Sarah Chen professional portrait",
-            },
+              id: "1",              name: "Sarah Chen",              role: "Head of Trust & Safety",              company: "Global Social Platform",              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/professional-portrait-photograph-of-a-co-1772711816414-aecc241f.png",              imageAlt: "Sarah Chen professional portrait"},
             {
-              id: "2",
-              name: "Marcus Rodriguez",
-              role: "VP Product",
-              company: "Community Platform",
-              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/professional-portrait-photograph-of-a-co-1772711818670-f568faf4.png",
-              imageAlt: "Marcus Rodriguez professional portrait",
-            },
+              id: "2",              name: "Marcus Rodriguez",              role: "VP Product",              company: "Community Platform",              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/professional-portrait-photograph-of-a-co-1772711818670-f568faf4.png",              imageAlt: "Marcus Rodriguez professional portrait"},
             {
-              id: "3",
-              name: "Priya Patel",
-              role: "Director of Community",
-              company: "Gaming Network",
-              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/professional-portrait-photograph-of-a-co-1772711816189-72b0fdad.png",
-              imageAlt: "Priya Patel professional portrait",
-            },
+              id: "3",              name: "Priya Patel",              role: "Director of Community",              company: "Gaming Network",              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/professional-portrait-photograph-of-a-co-1772711816189-72b0fdad.png",              imageAlt: "Priya Patel professional portrait"},
             {
-              id: "4",
-              name: "James Thompson",
-              role: "CEO",
-              company: "Creator Platform",
-              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/professional-portrait-photograph-of-a-co-1772711816173-19db6bd4.png",
-              imageAlt: "James Thompson professional portrait",
-            },
+              id: "4",              name: "James Thompson",              role: "CEO",              company: "Creator Platform",              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/professional-portrait-photograph-of-a-co-1772711816173-19db6bd4.png",              imageAlt: "James Thompson professional portrait"},
           ]}
           kpiItems={[
             { value: "92%", label: "User Satisfaction" },
@@ -287,17 +229,15 @@ export default function HomePage() {
           copyrightText="© 2025 Emphra. All rights reserved."
           columns={[
             {
-              title: "Product",
-              items: [
+              title: "Product",              items: [
                 { label: "Features", href: "product-demo" },
-                { label: "Playground", href: "ai-playground" },
+                { label: "Playground", href: "playground" },
                 { label: "How It Works", href: "architecture" },
                 { label: "Pricing", href: "#" },
               ],
             },
             {
-              title: "Developers",
-              items: [
+              title: "Developers",              items: [
                 { label: "API Docs", href: "/developers" },
                 { label: "Datasets", href: "/datasets" },
                 { label: "GitHub", href: "https://github.com" },
@@ -305,8 +245,7 @@ export default function HomePage() {
               ],
             },
             {
-              title: "Company",
-              items: [
+              title: "Company",              items: [
                 { label: "About", href: "#" },
                 { label: "Blog", href: "#" },
                 { label: "Privacy Policy", href: "#" },

src/app/playground/page.tsx

@@ -0,0 +1,178 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import HeroSplitDualMedia from "@/components/sections/hero/HeroSplitDualMedia";
+import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
+import ContactSplit from "@/components/sections/contact/ContactSplit";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import { Mail, Zap } from "lucide-react";
+
+export default function PlaygroundPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="mediumSmall"
+      sizing="largeSmall"
+      background="none"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="normal"
+    >
+      {/* Navbar */}
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          brandName="Emphra"
+          navItems={[
+            { name: "Product", id: "product-demo" },
+            { name: "Playground", id: "playground" },
+            { name: "How It Works", id: "architecture" },
+            { name: "Developers", id: "/developers" },
+            { name: "Datasets", id: "/datasets" },
+          ]}
+          button={{ text: "Start Demo", href: "product-demo" }}
+        />
+      </div>
+
+      {/* Playground Hero */}
+      <div id="hero" data-section="hero">
+        <HeroSplitDualMedia
+          title="Interactive Playground"
+          description="Test Emphra's AI capabilities in real-time. Type messages, adjust settings, and see how our behavioral design technology analyzes emotion, detects toxicity, and suggests empathetic rewrites."
+          tag="Try It Live"
+          tagIcon={Zap}
+          tagAnimation="slide-up"
+          background={{ variant: "plain" }}
+          mediaItems={[
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/a-large-text-input-area-for-the-ai-playg-1772711816995-20b12817.png?_wi=2",              imageAlt: "Message input interface"},
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/a-text-passage-with-dynamic-word-highlig-1772711822066-4cbf97f5.png?_wi=2",              imageAlt: "Real-time word highlighting"},
+          ]}
+          mediaAnimation="slide-up"
+          rating={5}
+          ratingText="Experiment Risk-Free"
+          buttons={[
+            { text: "Start Testing", href: "#playground-section" },
+            { text: "View Examples", href: "#examples" },
+          ]}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      {/* Playground Interactive Section */}
+      <div id="playground-section" data-section="playground-section">
+        <FeatureCardTwentyFour
+          title="Emotion Risk Score Calculator"
+          description="Enter any message below and instantly see Emphra's analysis. Get real-time insights into emotional risk, toxicity probability, and AI-generated suggestions."
+          tag="Real-time Analysis"
+          tagAnimation="slide-up"
+          features={[
+            {
+              id: "1",              title: "Input Your Message",              author: "Step 1",              description:
+                "Type or paste any message you'd like to analyze. The playground accepts messages from social platforms, messaging apps, comments, emails, and more. No character limits—test as much as you want.",              tags: ["Input", "Text"],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/a-large-text-input-area-for-the-ai-playg-1772711816995-20b12817.png?_wi=3",              imageAlt: "Text input area for playground"},
+            {
+              id: "2",              title: "Emotion Risk Analysis",              author: "Step 2",              description:
+                "See the Emotion Risk Score (ERS) calculated instantly. View primary and secondary emotions detected, toxicity probability, and risk severity with visual indicators.",              tags: ["Analysis", "Metrics"],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/an-animated-circular-emotion-risk-meter--1772711816389-2dbf9e30.png?_wi=1",              imageAlt: "Emotion Risk Score visualization"},
+            {
+              id: "3",              title: "Risky Words Highlighted",              author: "Step 3",              description:
+                "Words contributing to the risk score are highlighted. Yellow indicates moderate risk, red indicates high risk. See exactly which words trigger the AI's concern and why.",              tags: ["Highlighting", "Details"],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/a-text-passage-with-dynamic-word-highlig-1772711822066-4cbf97f5.png?_wi=3",              imageAlt: "Word highlighting interface"},
+            {
+              id: "4",              title: "Get AI Suggestions",              author: "Step 4",              description:
+                "Receive AI-generated rewrite suggestions that maintain your message's intent while reducing emotional risk. Compare original vs. suggested ERS scores and choose what works best for you.",              tags: ["Suggestions", "AI"],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/a-side-by-side-comparison-showing-the-or-1772711816072-6c9acb7a.png?_wi=2",              imageAlt: "Rewrite suggestion comparison"},
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      {/* Examples Section */}
+      <div id="examples" data-section="examples">
+        <FeatureCardTwentyFour
+          title="Example Scenarios"
+          description="Try these example messages to see how Emphra handles different contexts and emotional tones."
+          tag="Learn by Example"
+          tagAnimation="slide-up"
+          features={[
+            {
+              id: "1",              title: "Social Media Comment",              author: "Example Type",              description:
+                "Platform: Twitter/X | Tone: Critical feedback | ERS Impact: Tests how Emphra differentiates constructive criticism from hostile comments on public platforms.",              tags: ["Social", "Critical"],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/a-scenario-selection-interface-showing-b-1772711815990-0eb2d330.png?_wi=2",              imageAlt: "Social media context"},
+            {
+              id: "2",              title: "Direct Message",              author: "Example Type",              description:
+                "Platform: Slack/Teams | Tone: Frustration with colleague | ERS Impact: Shows how context (one-on-one vs. group) affects emotion analysis and suggests professional alternatives.",              tags: ["Direct", "Professional"],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/a-beautiful-modal-dialog-box-appearing-o-1772711816098-26f1f8b7.png?_wi=1",              imageAlt: "Direct message context"},
+            {
+              id: "3",              title: "Gaming Community",              author: "Example Type",              description:
+                "Platform: Discord/Twitch | Tone: Competitive trash talk | ERS Impact: Demonstrates platform-aware analysis—different communities have different norms that Emphra understands.",              tags: ["Gaming", "Context-aware"],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/a-real-time-message-analysis-interface-s-1772711816611-c36e97ae.png?_wi=1",              imageAlt: "Gaming community context"},
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      {/* Contact Section */}
+      <div id="contact" data-section="contact">
+        <ContactSplit
+          tag="Questions?"
+          title="Get Started with Emphra"
+          description="Sign up to integrate Emphra into your platform or get early access to new playground features and analysis capabilities."
+          tagIcon={Mail}
+          tagAnimation="slide-up"
+          background={{ variant: "sparkles-gradient" }}
+          useInvertedBackground={false}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWcPVXraO20W5OctawbAEGfXhv/a-modern-contact-signup-interface-showin-1772711816440-0289b860.png?_wi=1"
+          imageAlt="Contact interface"
+          mediaPosition="right"
+          mediaAnimation="slide-up"
+          inputPlaceholder="your@email.com"
+          buttonText="Get Started"
+          termsText="We respect your privacy. Unsubscribe anytime."
+        />
+      </div>
+
+      {/* Footer */}
+      <div id="footer" data-section="footer">
+        <FooterBaseReveal
+          copyrightText="© 2025 Emphra. All rights reserved."
+          columns={[
+            {
+              title: "Product",              items: [
+                { label: "Features", href: "product-demo" },
+                { label: "Playground", href: "playground" },
+                { label: "How It Works", href: "architecture" },
+                { label: "Pricing", href: "#" },
+              ],
+            },
+            {
+              title: "Developers",              items: [
+                { label: "API Docs", href: "/developers" },
+                { label: "Datasets", href: "/datasets" },
+                { label: "GitHub", href: "https://github.com" },
+                { label: "Integration Guide", href: "#" },
+              ],
+            },
+            {
+              title: "Company",              items: [
+                { label: "About", href: "#" },
+                { label: "Blog", href: "#" },
+                { label: "Privacy Policy", href: "#" },
+                { label: "Contact", href: "contact" },
+              ],
+            },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}