aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
625 lines (622 loc) • 24.6 kB
JavaScript
'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useState, useRef } from 'react';
import { cn } from '../../lib/utilsComprehensive.js';
import { motion } from 'framer-motion';
import { useReducedMotion } from '../../hooks/useReducedMotion.js';
import { useAutoTextContrast } from '../../hooks/useAutoTextContrast.js';
import { GlassWipeSlider, FeatureComparison, ComparisonImage, SLIDER_PRESETS, ComparisonContent, AURAONE_COMPARISON_EXAMPLES } from './GlassWipeSlider.js';
// Example 1: AuraOne vs Scale AI Performance Comparison
function AuraOneVsScaleAIComparison({
className
}) {
useReducedMotion();
const [position, setPosition] = useState(50);
const {
labels,
metrics
} = AURAONE_COMPARISON_EXAMPLES.SCALE_AI;
const sectionRef = useRef(null);
useAutoTextContrast(sectionRef, {
observe: true
});
return jsxs("div", {
ref: sectionRef,
className: cn("glass-w-full glass-auto-gap glass-auto-gap-2xl glass-focus", className),
"aria-label": "AuraOne vs Scale AI wipe slider comparison",
role: "region",
children: [jsxs("div", {
className: 'text-center glass-auto-gap glass-auto-gap-sm',
children: [jsx("h3", {
className: 'glass-text-2xl font-bold text-primary',
children: "AuraOne vs Scale AI"
}), jsx("p", {
className: 'text-primary/70',
children: "See the dramatic performance improvements"
})]
}), jsx(GlassWipeSlider, {
beforeContent: jsxs("div", {
className: 'relative glass-w-full glass-h-full glass-gradient-primary glass-gradient-primary glass-gradient-primary glass-flex glass-flex-col glass-items-center glass-justify-center text-center glass-p-8',
children: [jsxs("div", {
className: 'glass-foundation-complete bg-glass-gradient-subtle glass-glass-backdrop-blur-md-medium glass-radius-xl glass-p-6 glass-container-md glass-contrast-guard',
children: [jsx("div", {
className: 'glass-text-secondary glass-text-4xl font-bold mb-2',
children: "Scale AI"
}), jsxs("div", {
className: 'text-primary/80 glass-text-sm glass-auto-gap glass-auto-gap-sm',
children: [jsx("div", {
children: "\u2022 Complex setup process"
}), jsx("div", {
children: "\u2022 2-4 week training cycles"
}), jsx("div", {
children: "\u2022 High infrastructure costs"
}), jsx("div", {
children: "\u2022 Limited scalability"
})]
}), jsx("div", {
className: "glass-mt-4 glass-text-xs glass-text-secondary",
children: "Traditional ML Platform"
})]
}), jsx("div", {
className: 'absolute glass-bottom-4 glass-left-4 glass-text-secondary/60 glass-text-xs',
children: "Legacy Approach"
})]
}),
afterContent: jsxs("div", {
className: 'relative glass-w-full glass-h-full glass-gradient-primary glass-gradient-primary glass-gradient-primary glass-flex glass-flex-col glass-items-center glass-justify-center text-center glass-p-8',
children: [jsxs("div", {
className: 'glass-foundation-complete bg-glass-gradient-strong glass-glass-backdrop-blur-md-medium glass-radius-xl glass-p-6 glass-container-md glass-border glass-border-cyan-400/20 glass-contrast-guard',
children: [jsx("div", {
className: 'glass-text-secondary glass-text-4xl font-bold mb-2',
children: "AuraOne"
}), jsxs("div", {
className: 'text-primary/90 glass-text-sm glass-auto-gap glass-auto-gap-sm',
children: [jsx("div", {
children: "\u2022 One-click deployment"
}), jsx("div", {
children: "\u2022 Sub-week training cycles"
}), jsx("div", {
children: "\u2022 80% cost reduction"
}), jsx("div", {
children: "\u2022 Infinite scalability"
})]
}), jsx("div", {
className: "glass-mt-4 glass-text-xs glass-text-secondary",
children: "Next-Gen AI Platform"
})]
}), jsx("div", {
className: 'absolute glass-bottom-4 glass-right-4 glass-text-secondary/60 glass-text-xs',
children: "Future-Ready"
})]
}),
labels: labels,
metrics: metrics,
showMetrics: true,
initialPosition: 75,
onPositionChange: setPosition,
onSnapToPreset: preset => {
// Handle preset snap - implement based on your needs
if (process.env.NODE_ENV === "development") {
console.log("Snapped to:", preset);
}
},
className: 'h-[500px] glass-shadow-2xl',
"aria-label": "Comparison slider"
}), jsxs("div", {
className: 'text-center text-primary/60 glass-text-sm',
children: ["Current position: ", Math.round(position), "% \u2022 Use keyboard navigation or drag the handle"]
})]
});
}
// Example 2: Feature Comparison with Vertical Orientation
function VerticalFeatureComparison({
className
}) {
const beforeFeatures = [{
name: "Manual Configuration",
available: true,
highlight: false
}, {
name: "Basic Analytics",
available: true,
highlight: false
}, {
name: "Limited Templates",
available: true,
highlight: false
}, {
name: "Auto-scaling",
available: false,
highlight: true
}, {
name: "Real-time Monitoring",
available: false,
highlight: true
}, {
name: "Enterprise Security",
available: false,
highlight: true
}];
const afterFeatures = [{
name: "One-click Setup",
available: true,
highlight: false
}, {
name: "Advanced Analytics",
available: true,
highlight: false
}, {
name: "1000+ Templates",
available: true,
highlight: false
}, {
name: "Auto-scaling",
available: true,
highlight: true
}, {
name: "Real-time Monitoring",
available: true,
highlight: true
}, {
name: "Enterprise Security",
available: true,
highlight: true
}];
const sectionRef = useRef(null);
useAutoTextContrast(sectionRef, {
observe: true
});
return jsxs("div", {
ref: sectionRef,
className: cn("glass-w-full glass-auto-gap glass-auto-gap-2xl glass-focus", className),
"aria-label": "Vertical feature comparison slider",
role: "region",
children: [jsxs("div", {
className: 'text-center glass-auto-gap glass-auto-gap-sm',
children: [jsx("h3", {
className: 'glass-text-2xl font-bold text-primary',
children: "Feature Evolution"
}), jsx("p", {
className: 'text-primary/70',
children: "Swipe vertically to compare capabilities"
})]
}), jsx(GlassWipeSlider, {
orientation: "vertical",
height: "600px",
beforeContent: jsx(FeatureComparison, {
beforeFeatures: beforeFeatures,
afterFeatures: afterFeatures,
title: "Competitor Platform"
}),
afterContent: jsx(FeatureComparison, {
beforeFeatures: afterFeatures,
afterFeatures: beforeFeatures,
title: "AuraOne Platform"
}),
labels: {
before: "Standard Platform",
after: "AuraOne Platform",
beforeDescription: "Limited capabilities",
afterDescription: "Full-featured solution"
},
initialPosition: 30,
handleSize: "lg",
trackStyle: "bold",
className: "glass-container-2xl glass-mx-auto glass-shadow-2xl",
"aria-label": "Vertical comparison slider"
})]
});
}
// Example 3: Performance Metrics Dashboard Comparison
function PerformanceMetricsComparison({
className
}) {
const performanceMetrics = [{
label: "Training Speed",
beforeValue: "12",
afterValue: "3",
unit: " hours",
highlight: true
}, {
label: "Model Accuracy",
beforeValue: "89.2",
afterValue: "96.8",
unit: "%",
highlight: true
}, {
label: "Resource Usage",
beforeValue: "85",
afterValue: "23",
unit: "%",
highlight: true
}, {
label: "Cost per Model",
beforeValue: "$2,400",
afterValue: "$480",
unit: "",
highlight: true
}];
const sectionRef = useRef(null);
useAutoTextContrast(sectionRef, {
observe: true
});
return jsxs("div", {
ref: sectionRef,
className: cn("glass-w-full glass-auto-gap glass-auto-gap-2xl glass-focus", className),
"aria-label": "Performance metrics dashboard comparison",
role: "region",
children: [jsxs("div", {
className: 'text-center glass-auto-gap glass-auto-gap-sm',
children: [jsx("h3", {
className: 'glass-text-2xl font-bold text-primary',
children: "Performance Impact"
}), jsx("p", {
className: 'text-primary/70',
children: "Real metrics from enterprise customers"
})]
}), jsx(GlassWipeSlider, {
beforeContent: jsx("div", {
className: 'relative glass-w-full glass-h-full glass-gradient-primary glass-gradient-primary via-red-900/50 glass-gradient-primary glass-p-8',
children: jsx("div", {
className: "glass-h-full glass-flex glass-items-center glass-justify-center",
children: jsxs("div", {
className: 'glass-foundation-complete bg-glass-gradient-subtle glass-glass-backdrop-blur-md-medium glass-radius-xl glass-p-8 glass-container-md text-center glass-contrast-guard',
children: [jsx("h4", {
className: 'glass-text-xl font-bold glass-text-secondary glass-mb-6',
children: "Legacy Platform"
}), jsxs("div", {
className: "glass-grid glass-grid-cols-2 glass-gap-4 glass-text-sm",
children: [jsxs("div", {
className: "glass-auto-gap glass-auto-gap-xs",
children: [jsx("div", {
className: 'text-primary/60',
children: "Training Time"
}), jsx("div", {
className: 'glass-text-2xl font-bold glass-text-secondary',
children: "12h"
})]
}), jsxs("div", {
className: "glass-auto-gap glass-auto-gap-xs",
children: [jsx("div", {
className: 'text-primary/60',
children: "Accuracy"
}), jsx("div", {
className: 'glass-text-2xl font-bold glass-text-secondary',
children: "89%"
})]
}), jsxs("div", {
className: "glass-auto-gap glass-auto-gap-xs",
children: [jsx("div", {
className: 'text-primary/60',
children: "Resources"
}), jsx("div", {
className: 'glass-text-2xl font-bold glass-text-secondary',
children: "85%"
})]
}), jsxs("div", {
className: "glass-auto-gap glass-auto-gap-xs",
children: [jsx("div", {
className: 'text-primary/60',
children: "Cost"
}), jsx("div", {
className: 'glass-text-2xl font-bold glass-text-secondary',
children: "$2.4K"
})]
})]
}), jsx("div", {
className: "glass-mt-6 glass-text-xs glass-text-secondary",
children: "High overhead, slow results"
})]
})
})
}),
afterContent: jsx("div", {
className: 'relative glass-w-full glass-h-full glass-gradient-primary glass-gradient-primary via-green-900/50 glass-gradient-primary glass-p-8',
children: jsx("div", {
className: "glass-h-full glass-flex glass-items-center glass-justify-center",
children: jsxs("div", {
className: 'glass-foundation-complete bg-glass-gradient-strong glass-glass-backdrop-blur-md-medium glass-radius-xl glass-p-8 max-w-md text-center glass-border glass-border-green/20 glass-contrast-guard',
children: [jsx("h4", {
className: 'glass-text-xl font-bold glass-text-secondary mb-6',
children: "AuraOne Platform"
}), jsxs("div", {
className: "glass-grid glass-grid-cols-2 glass-gap-4 glass-text-sm",
children: [jsxs("div", {
className: "glass-auto-gap glass-auto-gap-xs",
children: [jsx("div", {
className: 'text-primary/60',
children: "Training Time"
}), jsx("div", {
className: 'glass-text-2xl font-bold glass-text-secondary',
children: "3h"
})]
}), jsxs("div", {
className: "glass-auto-gap glass-auto-gap-xs",
children: [jsx("div", {
className: 'text-primary/60',
children: "Accuracy"
}), jsx("div", {
className: 'glass-text-2xl font-bold glass-text-secondary',
children: "97%"
})]
}), jsxs("div", {
className: "glass-auto-gap glass-auto-gap-xs",
children: [jsx("div", {
className: 'text-primary/60',
children: "Resources"
}), jsx("div", {
className: 'glass-text-2xl font-bold glass-text-secondary',
children: "23%"
})]
}), jsxs("div", {
className: "glass-auto-gap glass-auto-gap-xs",
children: [jsx("div", {
className: 'text-primary/60',
children: "Cost"
}), jsx("div", {
className: 'glass-text-2xl font-bold glass-text-secondary',
children: "$480"
})]
})]
}), jsx("div", {
className: 'mt-6 text-green-200/60 glass-text-xs',
children: "Optimized efficiency, superior results"
})]
})
})
}),
labels: {
before: "Traditional ML",
after: "AuraOne",
beforeDescription: "Resource intensive",
afterDescription: "Optimized performance"
},
metrics: performanceMetrics,
showMetrics: true,
initialPosition: 20,
enableMomentum: true,
momentumMultiplier: 0.4,
height: "500px",
className: "glass-shadow-2xl"
})]
});
}
// Example 4: Image Comparison with Custom Styling
function ImageBeforeAfterComparison({
className
}) {
return jsxs("div", {
className: cn("w-full glass-auto-gap glass-auto-gap-2xl", className),
children: [jsxs("div", {
className: 'text-center glass-auto-gap glass-auto-gap-sm',
children: [jsx("h3", {
className: 'glass-text-2xl font-bold text-primary',
children: "Visual Results"
}), jsx("p", {
className: 'text-primary/70',
children: "Model training results comparison"
})]
}), jsx(GlassWipeSlider, {
beforeContent: jsx(ComparisonImage, {
src: "data:image/svg+xml,%3Csvg width='800' height='400' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='%23f0f0f0'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.3em' fill='%23666'%3EImage Content%3C/text%3E%3C/svg%3E",
alt: "Before optimization - noisy results",
className: 'opacity-90'
}),
afterContent: jsx(ComparisonImage, {
src: "data:image/svg+xml,%3Csvg width='800' height='400' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='%23f0f0f0'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.3em' fill='%23666'%3EImage Content%3C/text%3E%3C/svg%3E",
alt: "After optimization - clean results",
loading: "eager"
}),
labels: {
before: "Raw Output",
after: "AuraOne Enhanced",
beforeDescription: "Unprocessed results",
afterDescription: "AI-optimized output"
},
showProgress: true,
showLabels: true,
enableSnapping: true,
snapThreshold: 8,
handleSize: "lg",
trackStyle: "minimal",
gradientOverlay: true,
height: "400px",
className: 'glass-radius-xl glass-shadow-2xl overflow-hidden'
})]
});
}
// Example 5: Interactive Preset Demo
function PresetPositionDemo({
className
}) {
const prefersReducedMotion = useReducedMotion();
const [currentPosition, setCurrentPosition] = useState(50);
const [activePreset, setActivePreset] = useState(null);
return jsxs("div", {
className: cn("w-full glass-auto-gap glass-auto-gap-2xl", className),
children: [jsxs("div", {
className: 'text-center glass-auto-gap glass-auto-gap-sm',
children: [jsx("h3", {
className: 'glass-text-2xl font-bold text-primary',
children: "Preset Positions Demo"
}), jsx("p", {
className: 'text-primary/70',
children: "Click buttons to jump to preset positions"
})]
}), jsx("div", {
className: "glass-flex glass-flex-wrap glass-justify-center glass-gap-3",
children: Object.entries(SLIDER_PRESETS).map(([key, value]) => jsxs("button", {
onClick: e => {
setCurrentPosition(value);
setActivePreset(value);
setTimeout(() => setActivePreset(null), 600);
},
className: cn("glass-px-4 glass-py-2 glass-radius-lg glass-foundation-complete bg-glass-gradient-subtle glass-backdrop-blur-md-medium border border-white/20", "glass-text-primary/80 glass-text-sm font-medium transition-all duration-200 glass-focus glass-touch-target glass-contrast-guard", "hover:bg-white/10 hover:border-white/30 hover:scale-105", currentPosition === value && "bg-blue-500/20 border-blue-400/50 text-blue-300"),
children: [key.replace("_", " "), " (", value, "%)"]
}, key))
}), jsx(GlassWipeSlider, {
beforeContent: jsx(ComparisonContent, {
background: "gradient",
children: jsxs("div", {
className: 'text-center glass-auto-gap glass-auto-gap-lg',
children: [jsx("div", {
className: 'glass-text-4xl font-bold text-primary',
children: "Before"
}), jsx("div", {
className: 'text-primary/70',
children: "Traditional approach with limitations"
}), jsxs("div", {
className: 'glass-grid glass-grid-cols-2 glass-gap-4 glass-text-sm max-w-xs',
children: [jsx("div", {
className: "glass-foundation-complete glass-surface-red/10 glass-radius-lg glass-p-3",
children: jsx("div", {
className: 'glass-text-secondary font-semibold',
children: "Slow"
})
}), jsx("div", {
className: "glass-foundation-complete glass-surface-red/10 glass-radius-lg glass-p-3",
children: jsx("div", {
className: 'glass-text-secondary font-semibold',
children: "Expensive"
})
}), jsx("div", {
className: "glass-foundation-complete glass-surface-red/10 glass-radius-lg glass-p-3",
children: jsx("div", {
className: 'glass-text-secondary font-semibold',
children: "Complex"
})
}), jsx("div", {
className: "glass-foundation-complete glass-surface-red/10 glass-radius-lg glass-p-3",
children: jsx("div", {
className: 'glass-text-secondary font-semibold',
children: "Limited"
})
})]
})]
})
}),
afterContent: jsx(ComparisonContent, {
background: "gradient",
children: jsxs("div", {
className: 'text-center glass-auto-gap glass-auto-gap-lg',
children: [jsx("div", {
className: 'glass-text-4xl font-bold text-primary',
children: "After"
}), jsx("div", {
className: 'text-primary/70',
children: "AuraOne platform advantages"
}), jsxs("div", {
className: 'glass-grid glass-grid-cols-2 glass-gap-4 glass-text-sm max-w-xs',
children: [jsx("div", {
className: "glass-foundation-complete glass-surface-green/10 glass-radius-lg glass-p-3",
children: jsx("div", {
className: 'glass-text-secondary font-semibold',
children: "Fast"
})
}), jsx("div", {
className: "glass-foundation-complete glass-surface-green/10 glass-radius-lg glass-p-3",
children: jsx("div", {
className: 'glass-text-secondary font-semibold',
children: "Affordable"
})
}), jsx("div", {
className: "glass-foundation-complete glass-surface-green/10 glass-radius-lg glass-p-3",
children: jsx("div", {
className: 'glass-text-secondary font-semibold',
children: "Simple"
})
}), jsx("div", {
className: "glass-foundation-complete glass-surface-green/10 glass-radius-lg glass-p-3",
children: jsx("div", {
className: 'glass-text-secondary font-semibold',
children: "Scalable"
})
})]
})]
})
}),
initialPosition: currentPosition,
onPositionChange: setCurrentPosition,
onSnapToPreset: preset => {
if (process.env.NODE_ENV === "development") {
console.log("Snapped to preset:", preset);
}
setActivePreset(preset);
setTimeout(() => setActivePreset(null), 600);
},
labels: {
before: "Competitor",
after: "AuraOne"
},
enableSnapping: true,
snapThreshold: 10,
enableMomentum: true,
height: "350px",
className: "glass-shadow-2xl"
}), jsxs("div", {
className: 'text-center glass-auto-gap glass-auto-gap-sm',
children: [jsxs("div", {
className: 'text-primary/80',
children: ["Current Position:", " ", jsxs("span", {
className: 'font-mono font-semibold glass-text-secondary',
children: [Math.round(currentPosition), "%"]
})]
}), activePreset !== null && jsxs(motion.div, {
initial: {
opacity: 0,
scale: 0.9
},
animate: prefersReducedMotion ? {} : {
opacity: 1,
scale: 1
},
exit: {
opacity: 0,
scale: 0.9
},
className: 'chip chip-blue glass-text-sm',
children: ["Jumped to ", activePreset, "%"]
})]
})]
});
}
// Master example component showcasing all features
function GlassWipeSliderShowcase({
className
}) {
return jsxs("div", {
className: cn("w-full glass-auto-gap glass-auto-gap-4xl py-8", className),
children: [jsxs("div", {
className: 'text-center glass-auto-gap glass-auto-gap-lg glass-mb-12',
children: [jsx("h2", {
className: 'glass-text-3xl font-bold text-primary',
children: "GlassWipe Slider Showcase"
}), jsx("p", {
className: 'text-primary/70 max-w-2xl glass-mx-auto',
children: "Production-ready comparison sliders with smooth animations, accessibility, and competitive analysis features for AuraOne."
})]
}), jsx(AuraOneVsScaleAIComparison, {}), jsx(VerticalFeatureComparison, {}), jsx(PerformanceMetricsComparison, {}), jsx(ImageBeforeAfterComparison, {}), jsx(PresetPositionDemo, {}), jsxs("div", {
className: 'text-center glass-auto-gap glass-auto-gap-lg pt-8',
children: [jsx("div", {
className: 'text-primary/60 glass-text-sm',
children: "All sliders support keyboard navigation, touch gestures, momentum scrolling, and preset snapping."
}), jsx("div", {
className: 'text-primary/50 glass-text-xs',
children: "Fully accessible with ARIA support and motion-aware animations."
})]
})]
});
}
function GlassWipeSliderExamples({
className,
children,
...rest
}) {
return jsxs("div", {
className: className,
...rest,
children: [jsx(GlassWipeSliderShowcase, {}), children]
});
}
export { AuraOneVsScaleAIComparison, GlassWipeSliderExamples, GlassWipeSliderShowcase, ImageBeforeAfterComparison, PerformanceMetricsComparison, PresetPositionDemo, VerticalFeatureComparison };
//# sourceMappingURL=GlassWipeSliderExamples.js.map