Spaces:

dwarfplanet
/

fluxcx

Running

App Files Files Community

dwarfplanet commited on 8 days ago

Commit

417b8fb

verified ·

1 Parent(s): 43960af

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +229 -19
prompts.txt +2 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Fluxcx
-emoji: 🏢
-colorFrom: red
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: fluxcx
+emoji: 🐳
+colorFrom: purple
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,229 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FluxCX Everywhere - AI for Every Contact Center</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+        body {
+            font-family: 'Inter', sans-serif;
+            color: #0E1E25;
+        }
+        .hero-shadow {
+            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
+        }
+        .btn-shadow {
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+        }
+        .btn-arrow {
+            transition: transform 0.2s ease;
+        }
+        .btn-primary:hover .btn-arrow {
+            transform: translateX(4px);
+        }
+        .logo-hover {
+            transition: all 0.2s ease;
+        }
+        .logo-hover:hover {
+            filter: brightness(0) saturate(100%) invert(35%) sepia(22%) saturate(1493%) hue-rotate(143deg) brightness(91%) contrast(101%);
+        }
+        .video-container {
+            position: relative;
+            padding-bottom: 62.5%; /* 16:10 aspect ratio */
+        }
+        .video-container video {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        @media (max-width: 768px) {
+            .hero-grid {
+                grid-template-columns: 1fr;
+            }
+            .video-container {
+                padding-bottom: 75%; /* 4:3 for mobile */
+            }
+        }
+    </style>
+</head>
+<body class="bg-white">
+    <!-- Sticky Navigation -->
+    <nav class="sticky top-0 z-50 bg-white border-b border-gray-200 px-6 py-4">
+        <div class="max-w-7xl mx-auto flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <i class="fas fa-bolt text-[#007C82] text-xl"></i>
+                <span class="font-bold text-gray-900">FluxCX</span>
+            </div>
+            <button class="bg-[#007C82] hover:bg-[#006972] text-white px-4 py-2 rounded-lg font-medium btn-shadow transition-colors">
+                Install extension
+            </button>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <section class="py-12 px-6 max-w-7xl mx-auto">
+        <div class="grid hero-grid md:grid-cols-2 gap-12 items-center">
+            <!-- Left Column - Content -->
+            <div class="order-2 md:order-1">
+                <h1 class="text-4xl md:text-5xl font-extrabold leading-tight mb-6">
+                    FluxCX lives inside the tools you already use.
+                </h1>
+                <p class="text-xl text-gray-600 mb-8 max-w-lg">
+                    AI replies & summaries in Zendesk, Salesforce & more—no migration needed.
+                </p>
+                <div class="flex flex-col sm:flex-row gap-4 mb-8">
+                    <button class="btn-primary bg-[#007C82] hover:bg-[#006972] text-white px-6 py-3 rounded-lg font-medium btn-shadow transition-colors flex items-center justify-center">
+                        Install Chrome Extension <span class="btn-arrow ml-2">→</span>
+                    </button>
+                    <button class="border border-gray-300 hover:bg-gray-50 text-gray-700 px-6 py-3 rounded-lg font-medium transition-colors flex items-center justify-center">
+                        <i class="fas fa-play mr-2"></i> Watch 90-sec demo
+                    </button>
+                </div>
+                <div class="flex items-center space-x-6">
+                    <div class="flex items-center text-sm text-gray-500">
+                        <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
+                        SOC 2 Type II
+                    </div>
+                    <div class="flex items-center text-sm text-gray-500">
+                        <i class="fas fa-shield-alt mr-2"></i>
+                        GDPR-ready
+                    </div>
+                </div>
+            </div>
+            <!-- Right Column - Video Demo -->
+            <div class="order-1 md:order-2 rounded-2xl overflow-hidden hero-shadow">
+                <div class="video-container">
+                    <!-- Demo video placeholder - would be replaced with actual MP4/WebM -->
+                    <video autoplay loop muted playsinline poster="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80">
+                        <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
+                        Your browser does not support the video tag.
+                    </video>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Integrations Strip -->
+    <section class="py-8 px-6 max-w-7xl mx-auto">
+        <div class="text-center mb-8">
+            <p class="text-gray-500 mb-4">Works exactly the same in:</p>
+            <div class="flex flex-wrap justify-center items-center gap-8 md:gap-12">
+                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/z/zendesk.svg/1200px-zendesk.svg.png" alt="Zendesk" class="h-12 opacity-70 logo-hover" data-event="integration_logo_hover" title="Works exactly the same in Zendesk">
+                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Salesforce_logo.svg/1200px-Salesforce_logo.svg.png" alt="Salesforce" class="h-12 opacity-70 logo-hover" data-event="integration_logo_hover" title="Works exactly the same in Salesforce">
+                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Genesys_logo.svg/1200px-Genesys_logo.svg.png" alt="Genesys" class="h-12 opacity-70 logo-hover" data-event="integration_logo_hover" title="Works exactly the same in Genesys">
+                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/NICE_CXone_logo.svg/1200px-NICE_CXone_logo.svg.png" alt="NICE CXone" class="h-12 opacity-70 logo-hover" data-event="integration_logo_hover" title="Works exactly the same in NICE CXone">
+                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Intercom_logo.svg/1200px-Intercom_logo.svg.png" alt="Intercom" class="h-12 opacity-70 logo-hover" data-event="integration_logo_hover" title="Works exactly the same in Intercom">
+            </div>
+        </div>
+    </section>
+    <!-- Benefits Section -->
+    <section class="py-16 px-6 max-w-7xl mx-auto bg-gray-50 rounded-2xl">
+        <div class="grid md:grid-cols-3 gap-8">
+            <div class="bg-white p-8 rounded-xl border border-gray-200">
+                <div class="w-14 h-14 bg-[#E3F0F1] rounded-lg flex items-center justify-center mb-6">
+                    <i class="fas fa-plug text-[#007C82] text-2xl"></i>
+                </div>
+                <h3 class="font-semibold text-xl text-gray-900 mb-3">One-click installation</h3>
+                <p class="text-gray-600">No IT tickets required. Agents can install the Chrome extension themselves in seconds.</p>
+            </div>
+            <div class="bg-white p-8 rounded-xl border border-gray-200">
+                <div class="w-14 h-14 bg-[#E3F0F1] rounded-lg flex items-center justify-center mb-6">
+                    <i class="fas fa-robot text-[#007C82] text-2xl"></i>
+                </div>
+                <h3 class="font-semibold text-xl text-gray-900 mb-3">Same powerful AI</h3>
+                <p class="text-gray-600">All the AI replies, knowledge retrieval, and coaching you get in FluxCX's native interface.</p>
+            </div>
+            <div class="bg-white p-8 rounded-xl border border-gray-200">
+                <div class="w-14 h-14 bg-[#E3F0F1] rounded-lg flex items-center justify-center mb-6">
+                    <i class="fas fa-lock text-[#007C82] text-2xl"></i>
+                </div>
+                <h3 class="font-semibold text-xl text-gray-900 mb-3">Enterprise-grade security</h3>
+                <p class="text-gray-600">SOC 2 Type II certified and GDPR compliant, just like our core platform.</p>
+            </div>
+        </div>
+    </section>
+    <!-- CTA Section -->
+    <section class="py-16 px-6 max-w-3xl mx-auto text-center">
+        <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">Ready to bring FluxCX to your contact center?</h2>
+        <p class="text-xl text-gray-600 mb-8">
+            Join our waitlist to be among the first to experience FluxCX integrated with your existing tools.
+        </p>
+        <div class="flex flex-col sm:flex-row justify-center gap-4">
+            <button class="btn-primary bg-[#007C82] hover:bg-[#006972] text-white px-8 py-4 rounded-lg font-medium btn-shadow transition-colors flex items-center justify-center mx-auto sm:mx-0">
+                Join waitlist <span class="btn-arrow ml-2">→</span>
+            </button>
+            <button class="border border-gray-300 bg-white hover:bg-gray-50 text-gray-700 px-8 py-4 rounded-lg font-medium transition-colors">
+                Request demo
+            </button>
+        </div>
+    </section>
+    <script>
+        // Track logo hover events
+        document.querySelectorAll('[data-event="integration_logo_hover"]').forEach(logo => {
+            logo.addEventListener('mouseenter', () => {
+                console.log(`Tracking hover: ${logo.getAttribute('data-event')}`);
+                // In a real implementation, this would send data to analytics
+            });
+        });
+        // Track CTA clicks
+        document.querySelectorAll('.btn-primary').forEach(btn => {
+            btn.addEventListener('click', () => {
+                console.log('Tracking event: cta_install_extension');
+                // In a real implementation:
+                // gtag('event','cta_install_extension', {location:'hero'});
+            });
+        });
+        // Video interaction
+        const demoVideo = document.querySelector('video');
+        if (demoVideo) {
+            // Pause video at the end to show the "Copied" toast frame
+            demoVideo.addEventListener('ended', () => {
+                demoVideo.pause();
+            });
+            // Restart video on click
+            demoVideo.addEventListener('click', () => {
+                demoVideo.currentTime = 0;
+                demoVideo.play();
+            });
+        }
+        // Mobile responsive adjustments
+        function handleMobileLayout() {
+            if (window.innerWidth <= 768) {
+                // For mobile, we might want to adjust some spacing
+                document.querySelector('section.py-12').classList.add('pt-8');
+            }
+        }
+        // Run on load and resize
+        window.addEventListener('load', handleMobileLayout);
+        window.addEventListener('resize', handleMobileLayout);
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=dwarfplanet/fluxcx" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ ### Integration Vision & Implementation-Prompt — “FluxCX Everywhere” widget > Goal Re-position FluxCX as an overlay add-on that snaps into the agent desks of _any_ modern contact-centre stack (Zendesk, Salesforce Service Cloud, Intercom, Genesys, NICE CXone, Talkdesk, Freshdesk, Amazon Connect, etc.) with zero-switching cost for agents. --- ## 1 Product framing (for website & sales deck) \| Message pillar \| Supporting UI / copy element \| \|----------------\|------------------------------\| \| Works inside the tools you already use \| Carousel of ticket-view screenshots: Zendesk, Salesforce, Genesys – each shows right-side FluxCX widget. \| \| One-click browser add-on (Chrome/Edge) \| “Install extension” CTA + gif of side-panel sliding in. \| \| Same AI super-powers, no migration \| Short bullet list: real-time suggestions, knowledge retrieval, after-call work. \| \| Secure & compliant \| SOC 2 / GDPR badges persist. \| --- ## 2 Widget design spec (hand to UI designer) 1. Form factor * 360 px fixed width side-panel. * Dark-on-light FluxCX theme to contrast with host tool. * Docking modes: ▸ right rail (default), ▸ floating pop-over (mobile). 2. Top bar (48 px) * FluxCX bolt icon • word “FluxCX” • “Live” green dot. * Collapse ▼ icon. 3. Tab ribbon (40 px high) * AI Replies \| Knowledge \| Coaching \| ACW • hot-key badges (Alt + 1-4). * Channel-icon pill shows source (voice/chat/email). 4. Content area * Card list identical to agent workspace design – reuse component tokens. * Copy button reveals “Copied ✓” toast inline (no global toast). 5. Footer * Latency badge + Zendesk/SF logo toggle to show which API target the push goes to. 6. Host-tool theming guidelines * No shadows; rely on 1 px mint border to delineate widget. * Respect host font stack; fall back to Inter if none detected. --- ## 3 Technical integration brief (hand to front-end engineer) \| Layer \| Approach \| \|-------\|----------\| \| Delivery \| Publish as Manifest v3 Chrome extension (Edge compatible). \| \| Mounting \| `content.js` polls DOM for recognizable layouts (`#zendesk_root`, `.genesys-workspace-main`, etc.) then injects `<div id="fluxcx-widget"></div>` right before native sidebar. \| \| Sandbox \| Render widget in React+Vite with Shadow DOM* to avoid CSS bleed (fallback: CSS Module scoping). \| \| APIs* \| Background script maintains JWT with FluxCX API; communicates via `window.postMessage`. \| \| Event hooks \| Listens for ticket ID changes → calls `/context` endpoint to refresh transcript & suggestions. \| \| Error handling \| If host DOM not detected within 4 s show unobtrusive toast: “FluxCX widget not supported on this page.” \| --- ## 4 Website section prompt (persuasive web design) ``` Section title: “FluxCX meets your stack.” Sub-headline (≤15 words): “Plug-in AI that lives inside Zendesk, Salesforce, and every leading contact-centre platform.” Visual: • 3-screen collage (angled) – Zendesk ticket, Salesforce console, Genesys workspace – each with teal FluxCX sidebar highlighted. • Logos row: Zendesk, Salesforce, Genesys, NICE, Talkdesk, Freshdesk, Intercom, Amazon Connect (monochrome). Copy bullets (✓): ✓ One-click Chrome add-on – no IT tickets ✓ Same AI replies & summaries, wherever agents work ✓ SOC 2 Type II, GDPR-ready CTA: <Button variant="brand">Join wait-list →</Button> SEO filename for hero: `[email protected]` ``` Exclude pricing, footers, or extra nav; keep page single-purpose for wait-list. --- ## 5 Deliverables checklist 1. Figma * Widget component spec (collapsed + expanded). * Landing-page “Meets your stack” section desktop & mobile. 2. Chrome extension repo (`fluxcx-widget/`) * `manifest.json`, `content.js`, `background.js`, React build in `/dist`. 3. Website update * New section inserted below initial fold on `/ai-copilot-beta`. * Ally attribute: `<section aria-label="Platform integrations">`. 4. Tracking * Add `data-event="integration_logo_click"` to each logo link (GA4). Merge under feature flag `NEXT_PUBLIC_FLUX_WIDGET_PROMO=true`; keep existing functionality unchanged.
2	+ ### Design-refresh brief — Section “FluxCX meets your stack” (turn the current mock-up into a polished, conversion-oriented hero with an embedded product demo) --- #### 1 Objectives \| Priority \| What must improve \| Why \| \|----------\|------------------\|-----\| \| 1 \| Visual clarity & hierarchy (headline, benefits, CTA) \| Current type/CTA compete with large widget mock-up → cognitive overload. \| \| 2 \| Embedded demo above the fold \| Persuasive principle: “show, don’t tell” boosts comprehension & intent. \| \| 3 \| Professional polish (spacing, contrast, alignment) \| Screenshot + copy feel disconnected; needs cohesive grid & brand consistency. \| --- #### 2 Layout & content guidelines \| Zone \| Spec \| \|------\|------\| \| A — Navigation (sticky, 64 px) \| 1-row minimal nav: word-mark + bolt → right-aligned CTA “Install extension” (brand teal #007C82). Hide “Product/Solutions/Pricing” on /ai-copilot-beta to keep focus. \| \| B — Hero grid (12-col, 1280 px max) \| Left 6 cols<br>• H1 (Inter ExtraBold 48/52) → “FluxCX lives inside the tools you already use.”<br>• Subhead (H4 20/28, 400) ≤ 15 words → “AI replies & summaries in Zendesk, Salesforce & more—no migration needed.”<br>• Primary CTA “Install Chrome Extension →” (solid teal) <br>• Secondary CTA “Watch 90-sec demo” (ghost w/ ▲ play icon).<br><br>Right 6 cols<br>• Interactive browser mock-up (720 × 450 px)<br>  — Plays muted looped MP4/GIF on hover/autoplay.<br>  — Shows Zendesk ticket, agent clicks FluxCX tab, AI reply appears, pushes to Zendesk.<br>  — Rounded 16 px, subtle shadow 0 12 32 rgba(0,0,0,.08). \| \| C — Integrations strip \| Row of monochrome logos (48 px height, 24 px gap): Zendesk • Salesforce Service Cloud • Intercom • Genesys • NICE CXone. Tooltip on hover: “Works exactly the same in …”. \| \| D — Trust footer (mini) \| SOC 2, GDPR chips inline under CTAs (14 px) → satisfy risk-averse CX personas without crowding. \| > Mobile ≤ 640 px > • Stack blocks: demo video first, then headline/CTA (above-the-fold engagement). > • CTAs full-width, 20 px vertical gap. --- #### 3 Visual style tokens \| Token \| Value / Rule \| \|-------\|--------------\| \| Brand teal \| #007C82 (buttons, active states) \| \| Mint accent \| #E3F0F1 (active tab underline) \| \| Text primary \| #0E1E25 \| \| Background \| #FFFFFF \| \| Shadow \| 0 4 16 rgba(0,0,0,.06) (controls), 0 12 32 rgba(0,0,0,.08) (hero card) \| \| Radius \| 8 px components; 16 px hero container \| \| Spacing \| 8-pt grid; min 48 px outer padding desktop / 24 px mobile \| --- #### 4 Micro-interaction & persuasion touches * Demo overlay – when video ends, pause on frame with “AI Reply copied ✓” toast → proof of value. * CTAs – add micro-arrow `→` that animates 4 px on hover (Framer Motion). * Logo hover – brand teal tint + `data-event="integration_logo_hover"` for GA4. * Social proof deferred – hide testimonial carousel until real quotes ready; avoids fake credibility issues. --- #### 5 Deliverables for designer / FE dev 1. Figma * Desktop & mobile frames of the hero + integrations strip. * Component styles (buttons, chips, video frame). 2. Assets * 720×450 MP4 demo (loop 6 s, 2 MB max) + WebM fallback. * SVG logos (monochrome #4B585E, 48 px height). 3. Next.js implementation (`/components/HeroWithDemo.tsx`) * Uses `next/video` + `poster` image; LCP target < 1 s after first interact. * Accepts props for headline, subhead, videoSrc, ctaHref (reuse across pages). 4. Tracking hooks ```ts onClickInstall => gtag('event','cta_install_extension', {location:'hero'}); onClickWatchDemo => gtag('event','cta_watch_demo'); ``` 5. QA checklist - [ ] Lighthouse ≥ 95 Perf / 95 Acc. - [ ] Contrast passes WCAG 2.1 AA. - [ ] Video lazy-loads below 1280 px wide, otherwise `preload="metadata"`. - [ ] Mobile CLS < 0.1 (test iPhone SE). Keep all existing page functions, forms, and wait-list mechanics unchanged.