From d51f84a3a366d52a4112ad6aa94625bf861626da Mon Sep 17 00:00:00 2001 From: dk Date: Mon, 9 Feb 2026 17:52:14 +0000 Subject: [PATCH] Initial commit --- .env | 2 + .gitea/workflows/build.yml | 57 + .gitignore | 38 + README.md | 36 + THEME_PROVIDER_OPTIONS.txt | 116 + colorThemes.css | 473 + colorThemes.json | 384 + docs/ACCESSIBILITY.md | 500 + docs/CARDSTACK_SECTIONS.md | 491 + docs/COMPONENT_IMPLEMENTATION.md | 433 + docs/PREVIEW_PAGE_STANDARDS.md | 499 + docs/README.md | 145 + docs/REGISTRY_STANDARDS.md | 487 + docs/THEME_AND_STYLING.md | 521 + eslint.config.mjs | 55 + fontThemes.json | 301 + next.config.ts | 26 + package-lock.json | 8299 ++++++++++++++ package.json | 46 + postcss.config.mjs | 5 + public/audio/click.mp3 | Bin 0 -> 1769 bytes public/base/bg-texture.avif | Bin 0 -> 15448 bytes public/brand/logo-dot.svg | 52 + public/brand/logo.svg | 74 + public/brand/logowhite.svg | 58 + public/images/noise.webp | Bin 0 -> 251220 bytes public/placeholders/iphone.jpg | Bin 0 -> 62785 bytes public/placeholders/placeholder-logo.svg | 19 + public/placeholders/placeholder1.webp | Bin 0 -> 1196224 bytes public/placeholders/placeholder2.jpg | Bin 0 -> 61157 bytes public/placeholders/placeholder3.avif | Bin 0 -> 20690 bytes public/placeholders/placeholder4.webp | Bin 0 -> 427338 bytes public/placeholders/placeholder5.jpg | Bin 0 -> 5015450 bytes registry.json | 9729 +++++++++++++++++ src/app/blog/page.tsx | 157 + src/app/favicon.ico | Bin 0 -> 25931 bytes src/app/globals.css | 595 + src/app/layout.tsx | 1266 +++ src/app/page.tsx | 200 + src/components/Accordion.tsx | 146 + src/components/ServiceWrapper.tsx | 22 + src/components/Textbox.tsx | 290 + .../background/AnimatedAuroraBackground.tsx | 44 + .../background/AnimatedGridBackground.tsx | 112 + .../background/AuroraBackground.tsx | 32 + .../background/BlurBottomBackground.tsx | 58 + .../background/CanvasRevealBackground.tsx | 74 + .../background/CanvasRevealEffect.tsx | 304 + src/components/background/CardPattern.tsx | 56 + .../background/CellWaveBackground.tsx | 103 + .../background/CircleGradientBackground.tsx | 48 + .../background/DotGridBackground.tsx | 45 + .../background/DownwardRaysBackground.tsx | 130 + src/components/background/FluidBackground.tsx | 277 + src/components/background/GlowingEffect.tsx | 272 + .../background/GlowingOrbBackground.tsx | 52 + .../background/GradientBarsBackground.tsx | 74 + src/components/background/GridBackround.tsx | 45 + src/components/background/HeroBackgrounds.tsx | 116 + src/components/background/NoiseBackground.tsx | 31 + .../NoiseDiagonalGradientBackground.tsx | 35 + .../background/NoiseGradientBackground.tsx | 35 + src/components/background/PlainBackground.tsx | 21 + .../background/RadialGradientBackground.tsx | 40 + .../background/RotatedRaysBackground.tsx | 130 + .../background/RotatingGradientBackground.tsx | 77 + src/components/background/Sparkles.tsx | 460 + .../background/SparklesGradientBackground.tsx | 56 + .../FloatingGradientBackground.css | 102 + .../FloatingGradientBackground.tsx | 38 + src/components/bento/Bento3DCardGrid.tsx | 122 + src/components/bento/Bento3DStackCards.tsx | 117 + src/components/bento/Bento3DTaskList.tsx | 97 + .../bento/BentoAnimatedBarChart.tsx | 77 + src/components/bento/BentoChatAnimation.tsx | 96 + src/components/bento/BentoGlobe.tsx | 204 + src/components/bento/BentoIconInfoCards.tsx | 72 + .../bento/BentoLineChart/BentoLineChart.tsx | 145 + .../bento/BentoLineChart/CustomTooltip.tsx | 64 + src/components/bento/BentoLineChart/utils.ts | 33 + src/components/bento/BentoMap.tsx | 1460 +++ src/components/bento/BentoMarquee.tsx | 71 + src/components/bento/BentoOrbitingIcons.tsx | 104 + src/components/bento/BentoPhoneAnimation.tsx | 115 + src/components/bento/BentoRevealIcon.tsx | 83 + src/components/bento/BentoTimeline.tsx | 115 + src/components/button/Button.tsx | 43 + .../ButtonBounceEffect/BounceButton.css | 30 + .../ButtonBounceEffect/ButtonBounceEffect.tsx | 74 + .../ButtonDirectionalHover.tsx | 83 + .../DirectionalButton.css | 37 + .../useDirectionalHover.ts | 48 + .../ButtonElasticEffect.tsx | 55 + .../ButtonElasticEffect/useElasticEffect.ts | 59 + src/components/button/ButtonExpandHover.tsx | 92 + src/components/button/ButtonHoverBubble.tsx | 83 + .../ButtonHoverMagnetic.tsx | 57 + .../ButtonHoverMagnetic/useMagneticEffect.ts | 73 + src/components/button/ButtonIconArrow.tsx | 66 + .../ButtonShiftHover/ButtonShiftHover.tsx | 73 + .../button/ButtonShiftHover/ShiftButton.css | 29 + .../button/ButtonSlideBackground.tsx | 75 + .../ButtonTextShift/ButtonTextShift.tsx | 74 + .../ButtonTextShift/TextShiftButton.css | 21 + .../ButtonTextStagger/ButtonTextStagger.tsx | 74 + .../ButtonTextStagger/StaggerButton.css | 29 + src/components/button/ButtonTextUnderline.tsx | 53 + src/components/button/SelectorButton.tsx | 125 + src/components/button/types.ts | 95 + src/components/button/useButtonClick.ts | 74 + src/components/button/useCharAnimation.ts | 31 + src/components/cardStack/CardList.tsx | 117 + src/components/cardStack/CardStack.tsx | 215 + src/components/cardStack/CardStackTextBox.tsx | 88 + .../cardStack/hooks/useCardAnimation.ts | 121 + .../cardStack/hooks/useDepth3DAnimation.ts | 118 + .../cardStack/hooks/usePhoneAnimations.ts | 108 + .../cardStack/hooks/usePrevNextButtons.ts | 40 + .../cardStack/hooks/useScrollProgress.ts | 30 + .../cardStack/hooks/useTimelineHorizontal.ts | 243 + .../layouts/carousels/AngledCarousel.tsx | 144 + .../layouts/carousels/AutoCarousel.tsx | 138 + .../layouts/carousels/ButtonCarousel.tsx | 172 + .../layouts/carousels/FullWidthCarousel.tsx | 151 + .../cardStack/layouts/grid/GridLayout.tsx | 140 + .../cardStack/layouts/grid/gridConfigs.ts | 239 + .../layouts/timelines/TimelineBase.tsx | 143 + .../layouts/timelines/TimelineCardStack.tsx | 141 + .../timelines/TimelineHorizontalCardStack.tsx | 169 + .../layouts/timelines/TimelinePhoneView.tsx | 258 + .../layouts/timelines/TimelineProcessFlow.tsx | 198 + src/components/cardStack/types.ts | 133 + src/components/form/ContactForm.tsx | 101 + src/components/form/EmailSignupForm.tsx | 77 + src/components/form/Input.tsx | 47 + src/components/form/Textarea.tsx | 47 + src/components/form/WaitlistForm.tsx | 99 + src/components/navbar/HamburgerButton.tsx | 57 + src/components/navbar/Logo.tsx | 47 + .../navbar/NavbarLayoutFloatingInline.tsx | 77 + .../NavbarLayoutFloatingOverlay.tsx | 90 + .../useMenuAnimation.ts | 40 + .../useResponsive.ts | 18 + .../useScrollDetection.ts | 18 + .../NavbarStyleApple/NavbarStyleApple.tsx | 87 + .../navbar/NavbarStyleApple/useScrollState.ts | 28 + .../NavbarStyleCentered.css | 40 + .../NavbarStyleCentered.tsx | 155 + .../NavbarStyleFullscreen.css | 58 + .../NavbarStyleFullscreen.tsx | 111 + .../navbar/expandingMenu/ExpandingMenu.tsx | 149 + .../expandingMenu/useResponsiveMenuWidth.ts | 23 + .../navbar/mobileMenu/MobileMenu.tsx | 79 + .../navbar/mobileMenu/useMenuAnimation.ts | 40 + .../sections/AnimationContainer.tsx | 45 + src/components/sections/about/AboutMetric.tsx | 101 + .../about/InlineImageSplitTextAbout.tsx | 121 + src/components/sections/about/MediaAbout.tsx | 98 + .../sections/about/MediaSplitTabsAbout.tsx | 163 + .../sections/about/MetricSplitMediaAbout.tsx | 158 + src/components/sections/about/SplitAbout.tsx | 171 + .../sections/about/TestimonialAboutCard.tsx | 127 + src/components/sections/about/TextAbout.tsx | 64 + .../sections/about/TextSplitAbout.tsx | 87 + src/components/sections/blog/BlogCardOne.tsx | 247 + .../sections/blog/BlogCardThree.tsx | 292 + src/components/sections/blog/BlogCardTwo.tsx | 242 + .../sections/contact/ContactCenter.tsx | 91 + .../sections/contact/ContactFaq.tsx | 188 + .../sections/contact/ContactSplit.tsx | 127 + .../sections/contact/ContactSplitForm.tsx | 203 + .../sections/contact/ContactText.tsx | 86 + src/components/sections/faq/FaqBase.tsx | 144 + src/components/sections/faq/FaqDouble.tsx | 169 + src/components/sections/faq/FaqSplitMedia.tsx | 187 + src/components/sections/faq/FaqSplitText.tsx | 151 + .../sections/feature/FeatureBento.tsx | 287 + .../sections/feature/FeatureCardEight.tsx | 151 + .../sections/feature/FeatureCardMedia.tsx | 255 + .../sections/feature/FeatureCardNine.tsx | 199 + .../sections/feature/FeatureCardNineteen.tsx | 193 + .../sections/feature/FeatureCardOne.tsx | 172 + .../sections/feature/FeatureCardSeven.tsx | 159 + .../sections/feature/FeatureCardSix.tsx | 153 + .../sections/feature/FeatureCardSixteen.tsx | 161 + .../sections/feature/FeatureCardTen.tsx | 257 + .../sections/feature/FeatureCardTwelve.tsx | 177 + .../feature/FeatureCardTwentyFour.tsx | 194 + .../sections/feature/FeatureCardTwentyOne.tsx | 220 + .../feature/FeatureCardTwentyThree.tsx | 235 + .../sections/feature/FeatureCardTwentyTwo.tsx | 169 + .../sections/feature/FeatureProcessSteps.tsx | 189 + .../featureBorderGlow/FeatureBorderGlow.tsx | 148 + .../FeatureBorderGlowItem.tsx | 88 + .../feature/featureBorderGlow/constants.ts | 8 + .../featureCardThree/FeatureCardThree.css | 32 + .../featureCardThree/FeatureCardThree.tsx | 176 + .../featureCardThree/FeatureCardThreeItem.tsx | 144 + .../featureCardThree/useDynamicDimensions.ts | 122 + .../FeatureHoverPattern.tsx | 151 + .../FeatureHoverPatternItem.tsx | 122 + .../feature/featureHoverPattern/constants.ts | 17 + .../usePatternInteraction.ts | 137 + src/components/sections/footer/FooterBase.tsx | 108 + .../sections/footer/FooterBaseCard.tsx | 108 + .../sections/footer/FooterBaseReveal.tsx | 126 + src/components/sections/footer/FooterCard.tsx | 81 + .../sections/footer/FooterLogoEmphasis.tsx | 120 + .../sections/footer/FooterLogoReveal.tsx | 89 + .../sections/footer/FooterMedia.tsx | 143 + .../sections/footer/FooterSimple.tsx | 75 + .../sections/hero/HeroBillboard.tsx | 116 + .../sections/hero/HeroBillboardCarousel.tsx | 149 + .../sections/hero/HeroBillboardGallery.tsx | 189 + .../hero/HeroBillboardRotatedCarousel.tsx | 121 + .../sections/hero/HeroBillboardScroll.tsx | 162 + src/components/sections/hero/HeroLogo.tsx | 127 + .../sections/hero/HeroLogoBillboard.tsx | 143 + .../sections/hero/HeroLogoBillboardSplit.tsx | 167 + src/components/sections/hero/HeroOverlay.tsx | 142 + src/components/sections/hero/HeroSplit.tsx | 164 + src/components/sections/hero/HeroSplitKpi.tsx | 277 + .../heroCarouselLogo/HeroCarouselLogo.tsx | 173 + .../heroCarouselLogo/useCarouselFullscreen.ts | 103 + .../sections/metrics/MetricCardEleven.tsx | 268 + .../sections/metrics/MetricCardFourteen.tsx | 120 + .../sections/metrics/MetricCardOne.tsx | 204 + .../sections/metrics/MetricCardSeven.tsx | 188 + .../sections/metrics/MetricCardTen.tsx | 239 + .../sections/metrics/MetricCardThree.tsx | 180 + .../sections/metrics/MetricCardTwo.tsx | 175 + .../sections/pricing/PricingCardEight.tsx | 242 + .../sections/pricing/PricingCardFive.tsx | 225 + .../sections/pricing/PricingCardNine.tsx | 206 + .../sections/pricing/PricingCardOne.tsx | 200 + .../sections/pricing/PricingCardThree.tsx | 240 + .../sections/pricing/PricingCardTwo.tsx | 240 + .../sections/product/ProductCardFour.tsx | 214 + .../sections/product/ProductCardOne.tsx | 202 + .../sections/product/ProductCardThree.tsx | 245 + .../sections/product/ProductCardTwo.tsx | 242 + .../sections/socialProof/SocialProofOne.tsx | 122 + .../sections/socialProof/SocialProofThree.tsx | 148 + .../sections/socialProof/SocialProofTwo.tsx | 134 + .../sections/team/TeamCardEleven.tsx | 190 + src/components/sections/team/TeamCardFive.tsx | 142 + src/components/sections/team/TeamCardOne.tsx | 188 + src/components/sections/team/TeamCardSix.tsx | 194 + src/components/sections/team/TeamCardTen.tsx | 128 + src/components/sections/team/TeamCardTwo.tsx | 234 + .../testimonial/TestimonialCardFifteen.tsx | 109 + .../testimonial/TestimonialCardFive.tsx | 230 + .../testimonial/TestimonialCardOne.tsx | 213 + .../testimonial/TestimonialCardSix.tsx | 197 + .../testimonial/TestimonialCardTen.tsx | 228 + .../testimonial/TestimonialCardThirteen.tsx | 234 + .../testimonial/TestimonialCardTwelve.tsx | 101 + .../testimonial/TestimonialCardTwo.tsx | 210 + src/components/shared/AvatarGroup.tsx | 90 + src/components/shared/Badge.tsx | 35 + src/components/shared/FavoriteButton.tsx | 60 + .../shared/FillWidthText/FillWidthText.tsx | 49 + .../shared/FillWidthText/useFillWidthText.ts | 109 + src/components/shared/FooterColumns.tsx | 62 + src/components/shared/MediaContent.tsx | 53 + src/components/shared/OverlayArrowButton.tsx | 31 + src/components/shared/PricingBadge.tsx | 28 + src/components/shared/PricingFeatureList.tsx | 44 + src/components/shared/ProductImage.tsx | 68 + src/components/shared/QuantityButton.tsx | 25 + src/components/shared/SocialLinks.tsx | 50 + .../shared/SvgTextLogo/SvgTextLogo.tsx | 51 + .../shared/SvgTextLogo/useSvgTextLogo.ts | 34 + src/components/shared/Tag.tsx | 39 + src/components/shared/TestimonialAuthor.tsx | 73 + src/components/text/TextAnimation.tsx | 286 + src/components/text/TextNumberCount.tsx | 106 + src/components/text/types.ts | 1 + src/hooks/useClickOutside.ts | 38 + src/lib/buttonUtils.ts | 114 + src/lib/utils.ts | 20 + src/providers/themeProvider/ThemeProvider.tsx | 126 + .../themeProvider/config/constants.ts | 552 + src/providers/themeProvider/config/types.ts | 43 + .../themeProvider/styles/cardStyles.ts | 107 + .../styles/primaryButtonStyles.ts | 39 + .../styles/secondaryButtonStyles.ts | 33 + .../utils/detectLightBackground.ts | 21 + src/tag/Tag.tsx | 80 + src/tag/useTagEffects.ts | 54 + src/types/button.ts | 36 + src/types/navigation.ts | 11 + src/utils/debounce.ts | 15 + src/utils/throttle.ts | 24 + tsconfig.json | 42 + vercel.json | 5 + 296 files changed, 57258 insertions(+) create mode 100644 .env create mode 100644 .gitea/workflows/build.yml create mode 100644 .gitignore create mode 100644 README.md create mode 100644 THEME_PROVIDER_OPTIONS.txt create mode 100644 colorThemes.css create mode 100644 colorThemes.json create mode 100644 docs/ACCESSIBILITY.md create mode 100644 docs/CARDSTACK_SECTIONS.md create mode 100644 docs/COMPONENT_IMPLEMENTATION.md create mode 100644 docs/PREVIEW_PAGE_STANDARDS.md create mode 100644 docs/README.md create mode 100644 docs/REGISTRY_STANDARDS.md create mode 100644 docs/THEME_AND_STYLING.md create mode 100644 eslint.config.mjs create mode 100644 fontThemes.json create mode 100644 next.config.ts create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 postcss.config.mjs create mode 100644 public/audio/click.mp3 create mode 100644 public/base/bg-texture.avif create mode 100644 public/brand/logo-dot.svg create mode 100644 public/brand/logo.svg create mode 100644 public/brand/logowhite.svg create mode 100644 public/images/noise.webp create mode 100644 public/placeholders/iphone.jpg create mode 100644 public/placeholders/placeholder-logo.svg create mode 100644 public/placeholders/placeholder1.webp create mode 100644 public/placeholders/placeholder2.jpg create mode 100644 public/placeholders/placeholder3.avif create mode 100644 public/placeholders/placeholder4.webp create mode 100644 public/placeholders/placeholder5.jpg create mode 100644 registry.json create mode 100644 src/app/blog/page.tsx create mode 100644 src/app/favicon.ico create mode 100644 src/app/globals.css create mode 100644 src/app/layout.tsx create mode 100644 src/app/page.tsx create mode 100644 src/components/Accordion.tsx create mode 100644 src/components/ServiceWrapper.tsx create mode 100644 src/components/Textbox.tsx create mode 100644 src/components/background/AnimatedAuroraBackground.tsx create mode 100644 src/components/background/AnimatedGridBackground.tsx create mode 100644 src/components/background/AuroraBackground.tsx create mode 100644 src/components/background/BlurBottomBackground.tsx create mode 100644 src/components/background/CanvasRevealBackground.tsx create mode 100644 src/components/background/CanvasRevealEffect.tsx create mode 100644 src/components/background/CardPattern.tsx create mode 100644 src/components/background/CellWaveBackground.tsx create mode 100644 src/components/background/CircleGradientBackground.tsx create mode 100644 src/components/background/DotGridBackground.tsx create mode 100644 src/components/background/DownwardRaysBackground.tsx create mode 100644 src/components/background/FluidBackground.tsx create mode 100644 src/components/background/GlowingEffect.tsx create mode 100644 src/components/background/GlowingOrbBackground.tsx create mode 100644 src/components/background/GradientBarsBackground.tsx create mode 100644 src/components/background/GridBackround.tsx create mode 100644 src/components/background/HeroBackgrounds.tsx create mode 100644 src/components/background/NoiseBackground.tsx create mode 100644 src/components/background/NoiseDiagonalGradientBackground.tsx create mode 100644 src/components/background/NoiseGradientBackground.tsx create mode 100644 src/components/background/PlainBackground.tsx create mode 100644 src/components/background/RadialGradientBackground.tsx create mode 100644 src/components/background/RotatedRaysBackground.tsx create mode 100644 src/components/background/RotatingGradientBackground.tsx create mode 100644 src/components/background/Sparkles.tsx create mode 100644 src/components/background/SparklesGradientBackground.tsx create mode 100644 src/components/background/floatingGradientBackground/FloatingGradientBackground.css create mode 100644 src/components/background/floatingGradientBackground/FloatingGradientBackground.tsx create mode 100644 src/components/bento/Bento3DCardGrid.tsx create mode 100644 src/components/bento/Bento3DStackCards.tsx create mode 100644 src/components/bento/Bento3DTaskList.tsx create mode 100644 src/components/bento/BentoAnimatedBarChart.tsx create mode 100644 src/components/bento/BentoChatAnimation.tsx create mode 100644 src/components/bento/BentoGlobe.tsx create mode 100644 src/components/bento/BentoIconInfoCards.tsx create mode 100644 src/components/bento/BentoLineChart/BentoLineChart.tsx create mode 100644 src/components/bento/BentoLineChart/CustomTooltip.tsx create mode 100644 src/components/bento/BentoLineChart/utils.ts create mode 100644 src/components/bento/BentoMap.tsx create mode 100644 src/components/bento/BentoMarquee.tsx create mode 100644 src/components/bento/BentoOrbitingIcons.tsx create mode 100644 src/components/bento/BentoPhoneAnimation.tsx create mode 100644 src/components/bento/BentoRevealIcon.tsx create mode 100644 src/components/bento/BentoTimeline.tsx create mode 100644 src/components/button/Button.tsx create mode 100644 src/components/button/ButtonBounceEffect/BounceButton.css create mode 100644 src/components/button/ButtonBounceEffect/ButtonBounceEffect.tsx create mode 100644 src/components/button/ButtonDirectionalHover/ButtonDirectionalHover.tsx create mode 100644 src/components/button/ButtonDirectionalHover/DirectionalButton.css create mode 100644 src/components/button/ButtonDirectionalHover/useDirectionalHover.ts create mode 100644 src/components/button/ButtonElasticEffect/ButtonElasticEffect.tsx create mode 100644 src/components/button/ButtonElasticEffect/useElasticEffect.ts create mode 100644 src/components/button/ButtonExpandHover.tsx create mode 100644 src/components/button/ButtonHoverBubble.tsx create mode 100644 src/components/button/ButtonHoverMagnetic/ButtonHoverMagnetic.tsx create mode 100644 src/components/button/ButtonHoverMagnetic/useMagneticEffect.ts create mode 100644 src/components/button/ButtonIconArrow.tsx create mode 100644 src/components/button/ButtonShiftHover/ButtonShiftHover.tsx create mode 100644 src/components/button/ButtonShiftHover/ShiftButton.css create mode 100644 src/components/button/ButtonSlideBackground.tsx create mode 100644 src/components/button/ButtonTextShift/ButtonTextShift.tsx create mode 100644 src/components/button/ButtonTextShift/TextShiftButton.css create mode 100644 src/components/button/ButtonTextStagger/ButtonTextStagger.tsx create mode 100644 src/components/button/ButtonTextStagger/StaggerButton.css create mode 100644 src/components/button/ButtonTextUnderline.tsx create mode 100644 src/components/button/SelectorButton.tsx create mode 100644 src/components/button/types.ts create mode 100644 src/components/button/useButtonClick.ts create mode 100644 src/components/button/useCharAnimation.ts create mode 100644 src/components/cardStack/CardList.tsx create mode 100644 src/components/cardStack/CardStack.tsx create mode 100644 src/components/cardStack/CardStackTextBox.tsx create mode 100644 src/components/cardStack/hooks/useCardAnimation.ts create mode 100644 src/components/cardStack/hooks/useDepth3DAnimation.ts create mode 100644 src/components/cardStack/hooks/usePhoneAnimations.ts create mode 100644 src/components/cardStack/hooks/usePrevNextButtons.ts create mode 100644 src/components/cardStack/hooks/useScrollProgress.ts create mode 100644 src/components/cardStack/hooks/useTimelineHorizontal.ts create mode 100644 src/components/cardStack/layouts/carousels/AngledCarousel.tsx create mode 100644 src/components/cardStack/layouts/carousels/AutoCarousel.tsx create mode 100644 src/components/cardStack/layouts/carousels/ButtonCarousel.tsx create mode 100644 src/components/cardStack/layouts/carousels/FullWidthCarousel.tsx create mode 100644 src/components/cardStack/layouts/grid/GridLayout.tsx create mode 100644 src/components/cardStack/layouts/grid/gridConfigs.ts create mode 100644 src/components/cardStack/layouts/timelines/TimelineBase.tsx create mode 100644 src/components/cardStack/layouts/timelines/TimelineCardStack.tsx create mode 100644 src/components/cardStack/layouts/timelines/TimelineHorizontalCardStack.tsx create mode 100644 src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx create mode 100644 src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx create mode 100644 src/components/cardStack/types.ts create mode 100644 src/components/form/ContactForm.tsx create mode 100644 src/components/form/EmailSignupForm.tsx create mode 100644 src/components/form/Input.tsx create mode 100644 src/components/form/Textarea.tsx create mode 100644 src/components/form/WaitlistForm.tsx create mode 100644 src/components/navbar/HamburgerButton.tsx create mode 100644 src/components/navbar/Logo.tsx create mode 100644 src/components/navbar/NavbarLayoutFloatingInline.tsx create mode 100644 src/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay.tsx create mode 100644 src/components/navbar/NavbarLayoutFloatingOverlay/useMenuAnimation.ts create mode 100644 src/components/navbar/NavbarLayoutFloatingOverlay/useResponsive.ts create mode 100644 src/components/navbar/NavbarLayoutFloatingOverlay/useScrollDetection.ts create mode 100644 src/components/navbar/NavbarStyleApple/NavbarStyleApple.tsx create mode 100644 src/components/navbar/NavbarStyleApple/useScrollState.ts create mode 100644 src/components/navbar/NavbarStyleCentered/NavbarStyleCentered.css create mode 100644 src/components/navbar/NavbarStyleCentered/NavbarStyleCentered.tsx create mode 100644 src/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen.css create mode 100644 src/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen.tsx create mode 100644 src/components/navbar/expandingMenu/ExpandingMenu.tsx create mode 100644 src/components/navbar/expandingMenu/useResponsiveMenuWidth.ts create mode 100644 src/components/navbar/mobileMenu/MobileMenu.tsx create mode 100644 src/components/navbar/mobileMenu/useMenuAnimation.ts create mode 100644 src/components/sections/AnimationContainer.tsx create mode 100644 src/components/sections/about/AboutMetric.tsx create mode 100644 src/components/sections/about/InlineImageSplitTextAbout.tsx create mode 100644 src/components/sections/about/MediaAbout.tsx create mode 100644 src/components/sections/about/MediaSplitTabsAbout.tsx create mode 100644 src/components/sections/about/MetricSplitMediaAbout.tsx create mode 100644 src/components/sections/about/SplitAbout.tsx create mode 100644 src/components/sections/about/TestimonialAboutCard.tsx create mode 100644 src/components/sections/about/TextAbout.tsx create mode 100644 src/components/sections/about/TextSplitAbout.tsx create mode 100644 src/components/sections/blog/BlogCardOne.tsx create mode 100644 src/components/sections/blog/BlogCardThree.tsx create mode 100644 src/components/sections/blog/BlogCardTwo.tsx create mode 100644 src/components/sections/contact/ContactCenter.tsx create mode 100644 src/components/sections/contact/ContactFaq.tsx create mode 100644 src/components/sections/contact/ContactSplit.tsx create mode 100644 src/components/sections/contact/ContactSplitForm.tsx create mode 100644 src/components/sections/contact/ContactText.tsx create mode 100644 src/components/sections/faq/FaqBase.tsx create mode 100644 src/components/sections/faq/FaqDouble.tsx create mode 100644 src/components/sections/faq/FaqSplitMedia.tsx create mode 100644 src/components/sections/faq/FaqSplitText.tsx create mode 100644 src/components/sections/feature/FeatureBento.tsx create mode 100644 src/components/sections/feature/FeatureCardEight.tsx create mode 100644 src/components/sections/feature/FeatureCardMedia.tsx create mode 100644 src/components/sections/feature/FeatureCardNine.tsx create mode 100644 src/components/sections/feature/FeatureCardNineteen.tsx create mode 100644 src/components/sections/feature/FeatureCardOne.tsx create mode 100644 src/components/sections/feature/FeatureCardSeven.tsx create mode 100644 src/components/sections/feature/FeatureCardSix.tsx create mode 100644 src/components/sections/feature/FeatureCardSixteen.tsx create mode 100644 src/components/sections/feature/FeatureCardTen.tsx create mode 100644 src/components/sections/feature/FeatureCardTwelve.tsx create mode 100644 src/components/sections/feature/FeatureCardTwentyFour.tsx create mode 100644 src/components/sections/feature/FeatureCardTwentyOne.tsx create mode 100644 src/components/sections/feature/FeatureCardTwentyThree.tsx create mode 100644 src/components/sections/feature/FeatureCardTwentyTwo.tsx create mode 100644 src/components/sections/feature/FeatureProcessSteps.tsx create mode 100644 src/components/sections/feature/featureBorderGlow/FeatureBorderGlow.tsx create mode 100644 src/components/sections/feature/featureBorderGlow/FeatureBorderGlowItem.tsx create mode 100644 src/components/sections/feature/featureBorderGlow/constants.ts create mode 100644 src/components/sections/feature/featureCardThree/FeatureCardThree.css create mode 100644 src/components/sections/feature/featureCardThree/FeatureCardThree.tsx create mode 100644 src/components/sections/feature/featureCardThree/FeatureCardThreeItem.tsx create mode 100644 src/components/sections/feature/featureCardThree/useDynamicDimensions.ts create mode 100644 src/components/sections/feature/featureHoverPattern/FeatureHoverPattern.tsx create mode 100644 src/components/sections/feature/featureHoverPattern/FeatureHoverPatternItem.tsx create mode 100644 src/components/sections/feature/featureHoverPattern/constants.ts create mode 100644 src/components/sections/feature/featureHoverPattern/usePatternInteraction.ts create mode 100644 src/components/sections/footer/FooterBase.tsx create mode 100644 src/components/sections/footer/FooterBaseCard.tsx create mode 100644 src/components/sections/footer/FooterBaseReveal.tsx create mode 100644 src/components/sections/footer/FooterCard.tsx create mode 100644 src/components/sections/footer/FooterLogoEmphasis.tsx create mode 100644 src/components/sections/footer/FooterLogoReveal.tsx create mode 100644 src/components/sections/footer/FooterMedia.tsx create mode 100644 src/components/sections/footer/FooterSimple.tsx create mode 100644 src/components/sections/hero/HeroBillboard.tsx create mode 100644 src/components/sections/hero/HeroBillboardCarousel.tsx create mode 100644 src/components/sections/hero/HeroBillboardGallery.tsx create mode 100644 src/components/sections/hero/HeroBillboardRotatedCarousel.tsx create mode 100644 src/components/sections/hero/HeroBillboardScroll.tsx create mode 100644 src/components/sections/hero/HeroLogo.tsx create mode 100644 src/components/sections/hero/HeroLogoBillboard.tsx create mode 100644 src/components/sections/hero/HeroLogoBillboardSplit.tsx create mode 100644 src/components/sections/hero/HeroOverlay.tsx create mode 100644 src/components/sections/hero/HeroSplit.tsx create mode 100644 src/components/sections/hero/HeroSplitKpi.tsx create mode 100644 src/components/sections/hero/heroCarouselLogo/HeroCarouselLogo.tsx create mode 100644 src/components/sections/hero/heroCarouselLogo/useCarouselFullscreen.ts create mode 100644 src/components/sections/metrics/MetricCardEleven.tsx create mode 100644 src/components/sections/metrics/MetricCardFourteen.tsx create mode 100644 src/components/sections/metrics/MetricCardOne.tsx create mode 100644 src/components/sections/metrics/MetricCardSeven.tsx create mode 100644 src/components/sections/metrics/MetricCardTen.tsx create mode 100644 src/components/sections/metrics/MetricCardThree.tsx create mode 100644 src/components/sections/metrics/MetricCardTwo.tsx create mode 100644 src/components/sections/pricing/PricingCardEight.tsx create mode 100644 src/components/sections/pricing/PricingCardFive.tsx create mode 100644 src/components/sections/pricing/PricingCardNine.tsx create mode 100644 src/components/sections/pricing/PricingCardOne.tsx create mode 100644 src/components/sections/pricing/PricingCardThree.tsx create mode 100644 src/components/sections/pricing/PricingCardTwo.tsx create mode 100644 src/components/sections/product/ProductCardFour.tsx create mode 100644 src/components/sections/product/ProductCardOne.tsx create mode 100644 src/components/sections/product/ProductCardThree.tsx create mode 100644 src/components/sections/product/ProductCardTwo.tsx create mode 100644 src/components/sections/socialProof/SocialProofOne.tsx create mode 100644 src/components/sections/socialProof/SocialProofThree.tsx create mode 100644 src/components/sections/socialProof/SocialProofTwo.tsx create mode 100644 src/components/sections/team/TeamCardEleven.tsx create mode 100644 src/components/sections/team/TeamCardFive.tsx create mode 100644 src/components/sections/team/TeamCardOne.tsx create mode 100644 src/components/sections/team/TeamCardSix.tsx create mode 100644 src/components/sections/team/TeamCardTen.tsx create mode 100644 src/components/sections/team/TeamCardTwo.tsx create mode 100644 src/components/sections/testimonial/TestimonialCardFifteen.tsx create mode 100644 src/components/sections/testimonial/TestimonialCardFive.tsx create mode 100644 src/components/sections/testimonial/TestimonialCardOne.tsx create mode 100644 src/components/sections/testimonial/TestimonialCardSix.tsx create mode 100644 src/components/sections/testimonial/TestimonialCardTen.tsx create mode 100644 src/components/sections/testimonial/TestimonialCardThirteen.tsx create mode 100644 src/components/sections/testimonial/TestimonialCardTwelve.tsx create mode 100644 src/components/sections/testimonial/TestimonialCardTwo.tsx create mode 100644 src/components/shared/AvatarGroup.tsx create mode 100644 src/components/shared/Badge.tsx create mode 100644 src/components/shared/FavoriteButton.tsx create mode 100644 src/components/shared/FillWidthText/FillWidthText.tsx create mode 100644 src/components/shared/FillWidthText/useFillWidthText.ts create mode 100644 src/components/shared/FooterColumns.tsx create mode 100644 src/components/shared/MediaContent.tsx create mode 100644 src/components/shared/OverlayArrowButton.tsx create mode 100644 src/components/shared/PricingBadge.tsx create mode 100644 src/components/shared/PricingFeatureList.tsx create mode 100644 src/components/shared/ProductImage.tsx create mode 100644 src/components/shared/QuantityButton.tsx create mode 100644 src/components/shared/SocialLinks.tsx create mode 100644 src/components/shared/SvgTextLogo/SvgTextLogo.tsx create mode 100644 src/components/shared/SvgTextLogo/useSvgTextLogo.ts create mode 100644 src/components/shared/Tag.tsx create mode 100644 src/components/shared/TestimonialAuthor.tsx create mode 100644 src/components/text/TextAnimation.tsx create mode 100644 src/components/text/TextNumberCount.tsx create mode 100644 src/components/text/types.ts create mode 100644 src/hooks/useClickOutside.ts create mode 100644 src/lib/buttonUtils.ts create mode 100644 src/lib/utils.ts create mode 100644 src/providers/themeProvider/ThemeProvider.tsx create mode 100644 src/providers/themeProvider/config/constants.ts create mode 100644 src/providers/themeProvider/config/types.ts create mode 100644 src/providers/themeProvider/styles/cardStyles.ts create mode 100644 src/providers/themeProvider/styles/primaryButtonStyles.ts create mode 100644 src/providers/themeProvider/styles/secondaryButtonStyles.ts create mode 100644 src/providers/themeProvider/utils/detectLightBackground.ts create mode 100644 src/tag/Tag.tsx create mode 100644 src/tag/useTagEffects.ts create mode 100644 src/types/button.ts create mode 100644 src/types/navigation.ts create mode 100644 src/utils/debounce.ts create mode 100644 src/utils/throttle.ts create mode 100644 tsconfig.json create mode 100644 vercel.json diff --git a/.env b/.env new file mode 100644 index 0000000..4114197 --- /dev/null +++ b/.env @@ -0,0 +1,2 @@ +NEXT_PUBLIC_API_URL=https://api.webild.io +NEXT_PUBLIC_PROJECT_ID=9e5ac3b6-09e6-4332-aae9-e619e453f089 \ No newline at end of file diff --git a/.gitea/workflows/build.yml b/.gitea/workflows/build.yml new file mode 100644 index 0000000..d372c5f --- /dev/null +++ b/.gitea/workflows/build.yml @@ -0,0 +1,57 @@ +name: Code Check + +on: + workflow_dispatch: + inputs: + branch: + description: 'Branch to check' + required: true + default: 'main' + +permissions: + contents: read + +jobs: + check: + runs-on: ubuntu-latest + timeout-minutes: 10 + + steps: + - name: Checkout branch + uses: actions/checkout@v3 + with: + ref: ${{ gitea.event.inputs.branch }} + + - name: Setup Node.js + uses: actions/setup-node@v3 + with: + node-version: 24 + + - name: Install dependencies + run: | + set -euo pipefail + npm ci --prefer-offline --no-audit 2>&1 | tee install.log + env: + NODE_OPTIONS: '--max-old-space-size=4096' + + - name: TypeScript check + run: | + set -euo pipefail + npm run typecheck 2>&1 | tee build.log + + - name: ESLint check + run: | + set -euo pipefail + npm run lint 2>&1 | tee build.log + + - name: Upload build log on failure + if: failure() + uses: actions/upload-artifact@v3 + with: + name: build-log + path: build.log + if-no-files-found: ignore + + - name: Check completed + if: success() + run: echo "Typecheck and lint passed successfully" diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..5340dd9 --- /dev/null +++ b/.gitignore @@ -0,0 +1,38 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.* +.yarn/* +!.yarn/patches +!.yarn/plugins +!.yarn/releases +!.yarn/versions + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/README.md b/README.md new file mode 100644 index 0000000..e215bc4 --- /dev/null +++ b/README.md @@ -0,0 +1,36 @@ +This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). + +## Getting Started + +First, run the development server: + +```bash +npm run dev +# or +yarn dev +# or +pnpm dev +# or +bun dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. + +This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. diff --git a/THEME_PROVIDER_OPTIONS.txt b/THEME_PROVIDER_OPTIONS.txt new file mode 100644 index 0000000..6ddeec7 --- /dev/null +++ b/THEME_PROVIDER_OPTIONS.txt @@ -0,0 +1,116 @@ +================================================================================ + THEME PROVIDER OPTIONS +================================================================================ + +PROPS (All Required except showBlurBottom) +------------------------------------------- + +1. defaultButtonVariant + • "hover-magnetic" + • "hover-bubble" + • "expand-hover" + • "elastic-effect" + • "bounce-effect" + • "icon-arrow" + • "shift-hover" + • "text-stagger" + • "text-shift" + • "directional-hover" + • "slide-background" + +2. defaultTextAnimation + • "entrance-slide" + • "reveal-blur" + • "background-highlight" + +3. borderRadius + • "sharp" + • "rounded" + • "soft" + • "pill" + +4. contentWidth + • "small" + • "smallMedium" + • "compact" + • "mediumSmall" + • "medium" + • "mediumLarge" + +5. sizing + • "medium" + • "mediumLarge" + • "largeSmall" + • "large" + • "mediumSizeLargeTitles" + • "mediumLargeSizeLargeTitles" + • "largeSmallSizeLargeTitles" + • "largeSizeMediumTitles" + • "mediumLargeSizeMediumTitles" + • "largeSmallSizeMediumTitles" + +6. background + • "none" + • "circleGradient" + • "aurora" + • "floatingGradient" + +7. cardStyle + • "solid" + • "outline" + • "elevated" + • "gradient-mesh" + • "gradient-radial" + • "inset" + • "glass-elevated" + • "glass-depth" + • "gradient-bordered" + • "layered-gradient" + • "soft-shadow" + • "subtle-shadow" + +8. primaryButtonStyle + • "gradient" + • "shadow" + • "flat" + • "radial-glow" + • "diagonal-gradient" + • "inset-glow" + • "double-inset" + • "primary-glow" + +9. secondaryButtonStyle + • "glass" + • "solid" + • "layered" + • "radial-glow" + +10. headingFontWeight + • "light" + • "normal" + • "medium" + • "semibold" + • "bold" + • "extrabold" + +================================================================================ + +EXAMPLE USAGE: + + + {children} + + +================================================================================ diff --git a/colorThemes.css b/colorThemes.css new file mode 100644 index 0000000..0b9f447 --- /dev/null +++ b/colorThemes.css @@ -0,0 +1,473 @@ +/* ============================================ */ +/* LIGHT THEME VARIANTS */ +/* ============================================ */ + +/* Light Theme - Minimal Dark Blue */ +:root[data-theme="minimal-dark-blue"] { + --background: #ffffff; + --card: #f9f9f9; + --foreground: #000612e6; + --primary-cta: #15479c; + --secondary-cta: #f9f9f9; + --accent: #e2e2e2; + --background-accent: #c4c4c4; +} + +/* Light Theme - Minimal Dark Green */ +:root[data-theme="minimal-dark-green"] { + --background: #ffffff; + --card: #f9f9f9; + --foreground: #000f06e6; + --primary-cta: #0a7039; + --secondary-cta: #f9f9f9; + --accent: #e2e2e2; + --background-accent: #c4c4c4; +} + +/* Light Theme - Minimal Light Red */ +:root[data-theme="minimal-light-red"] { + --background: #ffffff; + --card: #f9f9f9; + --foreground: #120006e6; + --primary-cta: #e63946; + --secondary-cta: #f9f9f9; + --accent: #e2e2e2; + --background-accent: #c4c4c4; +} + +/* Light Theme - Minimal Light Orange */ +:root[data-theme="minimal-light-orange"] { + --background: #ffffff; + --card: #f9f9f9; + --foreground: #120a00e6; + --primary-cta: #ff8c42; + --secondary-cta: #f9f9f9; + --accent: #e2e2e2; + --background-accent: #c4c4c4; +} + +/* Light Theme - Dark Blue */ +:root[data-theme="dark-blue"] { + --background: #f5faff; + --card: #f1f8ff; + --foreground: #001122; + --primary-cta: #15479c; + --secondary-cta: #ffffff; + --accent: #a8cce8; + --background-accent: #7ba3cf; +} + +/* Light Theme - Dark Green */ +:root[data-theme="dark-green"] { + --background: #fafffb; + --card: #f7fffa; + --foreground: #001a0a; + --primary-cta: #0a7039; + --secondary-cta: #ffffff; + --accent: #a8d9be; + --background-accent: #6bbf8e; +} + +/* Light Theme - Light Red */ +:root[data-theme="light-red"] { + --background: #fffafa; + --card: #fff7f7; + --foreground: #1a0000; + --primary-cta: #e63946; + --secondary-cta: #ffffff; + --accent: #f5c4c7; + --background-accent: #f09199; +} + +/* Light Theme - Light Purple */ +:root[data-theme="light-purple"] { + --background: #fbfaff; + --card: #f7f5ff; + --foreground: #0f0022; + --primary-cta: #8b5cf6; + --secondary-cta: #ffffff; + --accent: #d8cef5; + --background-accent: #c4a8f9; +} + +/* Light Theme - Warm Cream */ +:root[data-theme="warm-cream"] { + --background: #f6f0e9; + --card: #efe7dd; + --foreground: #2b180a; + --primary-cta: #2b180a; + --secondary-cta: #efe7dd; + --accent: #94877c; + --background-accent: #afa094; +} + +/* Light Theme - Gray Blue Accent */ +:root[data-theme="gray-blue-accent"] { + --background: #f5f5f5; + --card: #ffffff; + --foreground: #1c1c1c; + --primary-cta: #1c1c1c; + --secondary-cta: #ffffff; + --accent: #15479c; + --background-accent: #a8cce8; +} + +/* Light Theme - Gray Green Accent */ +:root[data-theme="gray-green-accent"] { + --background: #f5f5f5; + --card: #ffffff; + --foreground: #1c1c1c; + --primary-cta: #1c1c1c; + --secondary-cta: #ffffff; + --accent: #159c49; + --background-accent: #a8e8ba; +} + +/* Light Theme - Gray Red Accent */ +:root[data-theme="gray-red-accent"] { + --background: #f5f5f5; + --card: #ffffff; + --foreground: #1c1c1c; + --primary-cta: #1c1c1c; + --secondary-cta: #ffffff; + --accent: #e63946; + --background-accent: #e8bea8; +} + +/* Light Theme - Gray Purple Accent */ +:root[data-theme="gray-purple-accent"] { + --background: #f5f5f5; + --card: #ffffff; + --foreground: #1c1c1c; + --primary-cta: #1c1c1c; + --secondary-cta: #ffffff; + --accent: #6139e6; + --background-accent: #b3a8e8; +} + +/* Light Theme - Warm Beige */ +:root[data-theme="warm-beige"] { + --background: #efebe5; + --card: #f7f2ea; + --foreground: #000000; + --primary-cta: #000000; + --secondary-cta: #ffffff; + --accent: #ffffff; + --background-accent: #e1b875; +} + +/* Light Theme - Gray Teal Green */ +:root[data-theme="gray-teal-green"] { + --background: #f5f5f5; + --card: #ffffff; + --foreground: #1c1c1c; + --primary-cta: #1f514c; + --secondary-cta: #ffffff; + --accent: #159c49; + --background-accent: #a8e8ba; +} + +/* Light Theme - Gray Navy Blue */ +:root[data-theme="gray-navy-blue"] { + --background: #f5f5f5; + --card: #ffffff; + --foreground: #1c1c1c; + --primary-cta: #1f3251; + --secondary-cta: #ffffff; + --accent: #15479c; + --background-accent: #a8cce8; +} + +/* Light Theme - Gray Burgundy Red */ +:root[data-theme="gray-burgundy-red"] { + --background: #f5f5f5; + --card: #ffffff; + --foreground: #1c1c1c; + --primary-cta: #511f1f; + --secondary-cta: #ffffff; + --accent: #e63946; + --background-accent: #e8bea8; +} + +/* Light Theme - Gray Indigo Purple */ +:root[data-theme="gray-indigo-purple"] { + --background: #f5f5f5; + --card: #ffffff; + --foreground: #1c1c1c; + --primary-cta: #341f51; + --secondary-cta: #ffffff; + --accent: #6139e6; + --background-accent: #b3a8e8; +} + +/* Light Theme - Warm Gray Pink */ +:root[data-theme="warmgray-pink"] { + --background: #f7f6f7; + --card: #ffffff; + --foreground: #1b0c25; + --primary-cta: #1b0c25; + --secondary-cta: #ffffff; + --accent: #ff93e4; + --background-accent: #e8a8c3; +} + +/* Light Theme - Warm Gray Orange */ +:root[data-theme="warmgray-orange"] { + --background: #f7f6f7; + --card: #ffffff; + --foreground: #25190c; + --primary-cta: #ff6207; + --secondary-cta: #ffffff; + --accent: #ffce93; + --background-accent: #e8cfa8; +} + +/* Light Theme - Warm Gray Blue */ +:root[data-theme="warmgray-blue"] { + --background: #f7f6f7; + --card: #ffffff; + --foreground: #0c1325; + --primary-cta: #0798ff; + --secondary-cta: #ffffff; + --accent: #93c7ff; + --background-accent: #a8cde8; +} + +/* Light Theme - Warm Gray Indigo */ +:root[data-theme="warmgray-indigo"] { + --background: #f7f6f7; + --card: #ffffff; + --foreground: #0c1325; + --primary-cta: #0b07ff; + --secondary-cta: #ffffff; + --accent: #93b7ff; + --background-accent: #a8bae8; +} + +/* Light Theme - Lavender Peach */ +:root[data-theme="lavender-peach"] { + --background: #e3deea; + --card: #ffffff; + --foreground: #27231f; + --primary-cta: #27231f; + --secondary-cta: #ffffff; + --accent: #c68a62; + --background-accent: #c68a62; +} + +/* Light Theme - Lavender Blue */ +:root[data-theme="lavender-blue"] { + --background: #e3deea; + --card: #ffffff; + --foreground: #1f2027; + --primary-cta: #1f2027; + --secondary-cta: #ffffff; + --accent: #627dc6; + --background-accent: #627dc6; +} + +/* Light Theme - Warm Stone */ +:root[data-theme="warm-stone"] { + --background: #f5f4ef; + --card: #dad6cd; + --foreground: #2a2928; + --primary-cta: #2a2928; + --secondary-cta: #ecebea; + --accent: #ffffff; + --background-accent: #c6b180; +} + +/* Light Theme - Warm Sand */ +:root[data-theme="warm-sand"] { + --background: #fcf6ec; + --card: #f3ede2; + --foreground: #2e2521; + --primary-cta: #2e2521; + --secondary-cta: #ffffff; + --accent: #b2a28b; + --background-accent: #b2a28b; +} + +/* Light Theme - Warm Gray Green */ +:root[data-theme="warmgray-green"] { + --background: #f7f6f7; + --card: #ffffff; + --foreground: #032419; + --primary-cta: #2bb889; + --secondary-cta: #ffffff; + --accent: #09b97e; + --background-accent: #a8e8c3; +} + +/* Light Theme - Warm Gray Red */ +:root[data-theme="warmgray-red"] { + --background: #f7f6f7; + --card: #ffffff; + --foreground: #250c0d; + --primary-cta: #b82b40; + --secondary-cta: #ffffff; + --accent: #b90941; + --background-accent: #e8a8b6; +} + +/* Light Theme - Warm Gray Yellow */ +:root[data-theme="warmgray-yellow"] { + --background: #f7f6f7; + --card: #ffffff; + --foreground: #251a0c; + --primary-cta: #f4c408; + --secondary-cta: #ffffff; + --accent: #f4ca26; + --background-accent: #e8daa8; +} + + +/* ============================================ */ +/* DARK THEME VARIANTS */ +/* ============================================ */ + +/* Dark Theme - Minimal */ +:root[data-theme="dark"] { + --background: #0a0a0a; + --card: #1a1a1a; + --foreground: #ffffffe6; + --primary-cta: #e6e6e6; + --secondary-cta: #1a1a1a; + --accent: #737373; + --background-accent: #737373; +} + +/* Dark Theme - Minimal Light Blue */ +:root[data-theme="dark-minimal-light-blue"] { + --background: #0a0a0a; + --card: #1a1a1a; + --foreground: #f0f8ffe6; + --primary-cta: #cee7ff; + --secondary-cta: #1a1a1a; + --accent: #737373; + --background-accent: #737373; +} + +/* Dark Theme - Minimal Light Green */ +:root[data-theme="dark-minimal-light-green"] { + --background: #0a0a0a; + --card: #1a1a1a; + --foreground: #f5fffae6; + --primary-cta: #80da9b; + --secondary-cta: #1a1a1a; + --accent: #737373; + --background-accent: #737373; +} + +/* Dark Theme - Minimal Light Red */ +:root[data-theme="dark-minimal-light-red"] { + --background: #0a0a0a; + --card: #1a1a1a; + --foreground: #fff5f5e6; + --primary-cta: #ff7a7a; + --secondary-cta: #1a1a1a; + --accent: #737373; + --background-accent: #737373; +} + +/* Dark Theme - Minimal Light Purple */ +:root[data-theme="dark-minimal-light-purple"] { + --background: #0a0a0a; + --card: #1a1a1a; + --foreground: #f8f5ffe6; + --primary-cta: #c89bff; + --secondary-cta: #1a1a1a; + --accent: #737373; + --background-accent: #737373; +} + +/* Dark Theme - Minimal Light Orange */ +:root[data-theme="dark-minimal-light-orange"] { + --background: #0a0a0a; + --card: #1a1a1a; + --foreground: #fffaf5e6; + --primary-cta: #ffaa70; + --secondary-cta: #1a1a1a; + --accent: #737373; + --background-accent: #737373; +} + + +/* Dark Theme - Minimal Light Yellow */ +:root[data-theme="dark-minimal-light-yellow"] { + --background: #0a0a0a; + --card: #1a1a1a; + --foreground: #fffffae6; + --primary-cta: #fde047; + --secondary-cta: #1a1a1a; + --accent: #737373; + --background-accent: #737373; +} + +/* Dark Theme - Light Blue */ +:root[data-theme="dark-light-blue"] { + --background: #010912; + --card: #152840; + --foreground: #e6f0ff; + --primary-cta: #cee7ff; + --secondary-cta: #0e1a29; + --accent: #3f5c79; + --background-accent: #004a93; +} + +/* Dark Theme - Light Green */ +:root[data-theme="dark-light-green"] { + --background: #000802; + --card: #0b1a0b; + --foreground: #e6ffe6; + --primary-cta: #80da9b; + --secondary-cta: #07170b; + --accent: #38714a; + --background-accent: #2c6541; +} + +/* Dark Theme - Light Red */ +:root[data-theme="dark-light-red"] { + --background: #080000; + --card: #1e0d0d; + --foreground: #ffe6e6; + --primary-cta: #ff7a7a; + --secondary-cta: #1e0909; + --accent: #7b4242; + --background-accent: #65292c; +} + +/* Dark Theme - Dark Red */ +:root[data-theme="dark-dark-red"] { + --background: #060000; + --card: #1d0d0d; + --foreground: #ffe6e6; + --primary-cta: #ff3d4a; + --secondary-cta: #1f0a0a; + --accent: #7b2d2d; + --background-accent: #b8111f; +} + +/* Dark Theme - Light Purple */ +:root[data-theme="dark-light-purple"] { + --background: #020008; + --card: #0b1a1d; + --foreground: #f0e6ff; + --primary-cta: #c89bff; + --secondary-cta: #0b0717; + --accent: #684f7b; + --background-accent: #65417c; +} + +/* Dark Theme - Light Orange */ +:root[data-theme="dark-light-orange"] { + --background: #080200; + --card: #1a0d0b; + --foreground: #ffe6d5; + --primary-cta: #ffaa70; + --secondary-cta: #170b07; + --accent: #7b5e4a; + --background-accent: #b8541e; +} + + diff --git a/colorThemes.json b/colorThemes.json new file mode 100644 index 0000000..07da1f4 --- /dev/null +++ b/colorThemes.json @@ -0,0 +1,384 @@ +{ + "lightTheme": { + "minimalDarkBlue": { + "--background": "#ffffff", + "--card": "#f9f9f9", + "--foreground": "#000612e6", + "--primary-cta": "#15479c", + "--secondary-cta": "#f9f9f9", + "--accent": "#e2e2e2", + "--background-accent": "#c4c4c4" + }, + "minimalDarkGreen": { + "--background": "#ffffff", + "--card": "#f9f9f9", + "--foreground": "#000f06e6", + "--primary-cta": "#0a7039", + "--secondary-cta": "#f9f9f9", + "--accent": "#e2e2e2", + "--background-accent": "#c4c4c4" + }, + "minimalLightRed": { + "--background": "#ffffff", + "--card": "#f9f9f9", + "--foreground": "#120006e6", + "--primary-cta": "#e63946", + "--secondary-cta": "#f9f9f9", + "--accent": "#e2e2e2", + "--background-accent": "#c4c4c4" + }, + "minimalLightOrange": { + "--background": "#ffffff", + "--card": "#f9f9f9", + "--foreground": "#120a00e6", + "--primary-cta": "#ff8c42", + "--secondary-cta": "#f9f9f9", + "--accent": "#e2e2e2", + "--background-accent": "#c4c4c4" + }, + "darkBlue": { + "--background": "#f5faff", + "--card": "#f1f8ff", + "--foreground": "#001122", + "--primary-cta": "#15479c", + "--secondary-cta": "#ffffff", + "--accent": "#a8cce8", + "--background-accent": "#7ba3cf" + }, + "darkGreen": { + "--background": "#fafffb", + "--card": "#f7fffa", + "--foreground": "#001a0a", + "--primary-cta": "#0a7039", + "--secondary-cta": "#ffffff", + "--accent": "#a8d9be", + "--background-accent": "#6bbf8e" + }, + "lightRed": { + "--background": "#fffafa", + "--card": "#fff7f7", + "--foreground": "#1a0000", + "--primary-cta": "#e63946", + "--secondary-cta": "#ffffff", + "--accent": "#f5c4c7", + "--background-accent": "#f09199" + }, + "lightPurple": { + "--background": "#fbfaff", + "--card": "#f7f5ff", + "--foreground": "#0f0022", + "--primary-cta": "#8b5cf6", + "--secondary-cta": "#ffffff", + "--accent": "#d8cef5", + "--background-accent": "#c4a8f9" + }, + "warmCream": { + "--background": "#f6f0e9", + "--card": "#efe7dd", + "--foreground": "#2b180a", + "--primary-cta": "#2b180a", + "--secondary-cta": "#efe7dd", + "--accent": "#94877c", + "--background-accent": "#afa094" + }, + "grayBlueAccent": { + "--background": "#f5f5f5", + "--card": "#ffffff", + "--foreground": "#1c1c1c", + "--primary-cta": "#1c1c1c", + "--secondary-cta": "#ffffff", + "--accent": "#15479c", + "--background-accent": "#a8cce8" + }, + "grayGreenAccent": { + "--background": "#f5f5f5", + "--card": "#ffffff", + "--foreground": "#1c1c1c", + "--primary-cta": "#1c1c1c", + "--secondary-cta": "#ffffff", + "--accent": "#159c49", + "--background-accent": "#a8e8ba" + }, + "grayRedAccent": { + "--background": "#f5f5f5", + "--card": "#ffffff", + "--foreground": "#1c1c1c", + "--primary-cta": "#1c1c1c", + "--secondary-cta": "#ffffff", + "--accent": "#e63946", + "--background-accent": "#e8bea8" + }, + "grayPurpleAccent": { + "--background": "#f5f5f5", + "--card": "#ffffff", + "--foreground": "#1c1c1c", + "--primary-cta": "#1c1c1c", + "--secondary-cta": "#ffffff", + "--accent": "#6139e6", + "--background-accent": "#b3a8e8" + }, + "warmBeige": { + "--background": "#efebe5", + "--card": "#f7f2ea", + "--foreground": "#000000", + "--primary-cta": "#000000", + "--secondary-cta": "#ffffff", + "--accent": "#ffffff", + "--background-accent": "#e1b875" + }, + "grayTealGreen": { + "--background": "#f5f5f5", + "--card": "#ffffff", + "--foreground": "#1c1c1c", + "--primary-cta": "#1f514c", + "--secondary-cta": "#ffffff", + "--accent": "#159c49", + "--background-accent": "#a8e8ba" + }, + "grayNavyBlue": { + "--background": "#f5f5f5", + "--card": "#ffffff", + "--foreground": "#1c1c1c", + "--primary-cta": "#1f3251", + "--secondary-cta": "#ffffff", + "--accent": "#15479c", + "--background-accent": "#a8cce8" + }, + "grayBurgundyRed": { + "--background": "#f5f5f5", + "--card": "#ffffff", + "--foreground": "#1c1c1c", + "--primary-cta": "#511f1f", + "--secondary-cta": "#ffffff", + "--accent": "#e63946", + "--background-accent": "#e8bea8" + }, + "grayIndigoPurple": { + "--background": "#f5f5f5", + "--card": "#ffffff", + "--foreground": "#1c1c1c", + "--primary-cta": "#341f51", + "--secondary-cta": "#ffffff", + "--accent": "#6139e6", + "--background-accent": "#b3a8e8" + }, + "warmgrayPink": { + "--background": "#f7f6f7", + "--card": "#ffffff", + "--foreground": "#1b0c25", + "--primary-cta": "#1b0c25", + "--secondary-cta": "#ffffff", + "--accent": "#ff93e4", + "--background-accent": "#e8a8c3" + }, + "warmgrayOrange": { + "--background": "#f7f6f7", + "--card": "#ffffff", + "--foreground": "#25190c", + "--primary-cta": "#ff6207", + "--secondary-cta": "#ffffff", + "--accent": "#ffce93", + "--background-accent": "#e8cfa8" + }, + "warmgrayBlue": { + "--background": "#f7f6f7", + "--card": "#ffffff", + "--foreground": "#0c1325", + "--primary-cta": "#0798ff", + "--secondary-cta": "#ffffff", + "--accent": "#93c7ff", + "--background-accent": "#a8cde8" + }, + "warmgrayIndigo": { + "--background": "#f7f6f7", + "--card": "#ffffff", + "--foreground": "#0c1325", + "--primary-cta": "#0b07ff", + "--secondary-cta": "#ffffff", + "--accent": "#93b7ff", + "--background-accent": "#a8bae8" + }, + "lavenderPeach": { + "--background": "#e3deea", + "--card": "#ffffff", + "--foreground": "#27231f", + "--primary-cta": "#27231f", + "--secondary-cta": "#ffffff", + "--accent": "#c68a62", + "--background-accent": "#c68a62" + }, + "lavenderBlue": { + "--background": "#e3deea", + "--card": "#ffffff", + "--foreground": "#1f2027", + "--primary-cta": "#1f2027", + "--secondary-cta": "#ffffff", + "--accent": "#627dc6", + "--background-accent": "#627dc6" + }, + "warmStone": { + "--background": "#f5f4ef", + "--card": "#dad6cd", + "--foreground": "#2a2928", + "--primary-cta": "#2a2928", + "--secondary-cta": "#ecebea", + "--accent": "#ffffff", + "--background-accent": "#c6b180" + }, + "warmSand": { + "--background": "#fcf6ec", + "--card": "#f3ede2", + "--foreground": "#2e2521", + "--primary-cta": "#2e2521", + "--secondary-cta": "#ffffff", + "--accent": "#b2a28b", + "--background-accent": "#b2a28b" + }, + "warmgrayGreen": { + "--background": "#f7f6f7", + "--card": "#ffffff", + "--foreground": "#032419", + "--primary-cta": "#2bb889", + "--secondary-cta": "#ffffff", + "--accent": "#09b97e", + "--background-accent": "#a8e8c3" + }, + "warmgrayRed": { + "--background": "#f7f6f7", + "--card": "#ffffff", + "--foreground": "#250c0d", + "--primary-cta": "#b82b40", + "--secondary-cta": "#ffffff", + "--accent": "#b90941", + "--background-accent": "#e8a8b6" + }, + "warmgrayYellow": { + "--background": "#f7f6f7", + "--card": "#ffffff", + "--foreground": "#251a0c", + "--primary-cta": "#f4c408", + "--secondary-cta": "#ffffff", + "--accent": "#f4ca26", + "--background-accent": "#e8daa8" + } + }, + "darkTheme": { + "minimal": { + "--background": "#0a0a0a", + "--card": "#1a1a1a", + "--foreground": "#ffffffe6", + "--primary-cta": "#e6e6e6", + "--secondary-cta": "#1a1a1a", + "--accent": "#737373", + "--background-accent": "#737373" + }, + "minimalLightBlue": { + "--background": "#0a0a0a", + "--card": "#1a1a1a", + "--foreground": "#f0f8ffe6", + "--primary-cta": "#cee7ff", + "--secondary-cta": "#1a1a1a", + "--accent": "#737373", + "--background-accent": "#737373" + }, + "minimalLightGreen": { + "--background": "#0a0a0a", + "--card": "#1a1a1a", + "--foreground": "#f5fffae6", + "--primary-cta": "#80da9b", + "--secondary-cta": "#1a1a1a", + "--accent": "#737373", + "--background-accent": "#737373" + }, + "minimalLightRed": { + "--background": "#0a0a0a", + "--card": "#1a1a1a", + "--foreground": "#fff5f5e6", + "--primary-cta": "#ff7a7a", + "--secondary-cta": "#1a1a1a", + "--accent": "#737373", + "--background-accent": "#737373" + }, + "minimalLightPurple": { + "--background": "#0a0a0a", + "--card": "#1a1a1a", + "--foreground": "#f8f5ffe6", + "--primary-cta": "#c89bff", + "--secondary-cta": "#1a1a1a", + "--accent": "#737373", + "--background-accent": "#737373" + }, + "minimalLightOrange": { + "--background": "#0a0a0a", + "--card": "#1a1a1a", + "--foreground": "#fffaf5e6", + "--primary-cta": "#ffaa70", + "--secondary-cta": "#1a1a1a", + "--accent": "#737373", + "--background-accent": "#737373" + }, + "minimalLightYellow": { + "--background": "#0a0a0a", + "--card": "#1a1a1a", + "--foreground": "#fffffae6", + "--primary-cta": "#fde047", + "--secondary-cta": "#1a1a1a", + "--accent": "#737373", + "--background-accent": "#737373" + }, + "lightBlue": { + "--background": "#010912", + "--card": "#152840", + "--foreground": "#e6f0ff", + "--primary-cta": "#cee7ff", + "--secondary-cta": "#0e1a29", + "--accent": "#3f5c79", + "--background-accent": "#004a93" + }, + "lightGreen": { + "--background": "#000802", + "--card": "#0b1a0b", + "--foreground": "#e6ffe6", + "--primary-cta": "#80da9b", + "--secondary-cta": "#07170b", + "--accent": "#38714a", + "--background-accent": "#2c6541" + }, + "lightRed": { + "--background": "#080000", + "--card": "#1e0d0d", + "--foreground": "#ffe6e6", + "--primary-cta": "#ff7a7a", + "--secondary-cta": "#1e0909", + "--accent": "#7b4242", + "--background-accent": "#65292c" + }, + "darkRed": { + "--background": "#060000", + "--card": "#1d0d0d", + "--foreground": "#ffe6e6", + "--primary-cta": "#ff3d4a", + "--secondary-cta": "#1f0a0a", + "--accent": "#7b2d2d", + "--background-accent": "#b8111f" + }, + "lightPurple": { + "--background": "#020008", + "--card": "#0b1a1d", + "--foreground": "#f0e6ff", + "--primary-cta": "#c89bff", + "--secondary-cta": "#0b0717", + "--accent": "#684f7b", + "--background-accent": "#65417c" + }, + "lightOrange": { + "--background": "#080200", + "--card": "#1a0d0b", + "--foreground": "#ffe6d5", + "--primary-cta": "#ffaa70", + "--secondary-cta": "#170b07", + "--accent": "#7b5e4a", + "--background-accent": "#b8541e" + } + } +} diff --git a/docs/ACCESSIBILITY.md b/docs/ACCESSIBILITY.md new file mode 100644 index 0000000..8303571 --- /dev/null +++ b/docs/ACCESSIBILITY.md @@ -0,0 +1,500 @@ +# Accessibility Standards + +This document outlines accessibility (a11y) requirements for all components in the library, ensuring compatibility with screen readers and assistive technologies. + +## Interactive Components + +For buttons, links, and other interactive elements. + +### Required Props + +```tsx +interface ButtonProps { + text: string; + onClick?: () => void; + className?: string; + // Accessibility props + disabled?: boolean; + ariaLabel?: string; + type?: "button" | "submit" | "reset"; +} +``` + +### Implementation Pattern + +```tsx +const Button = ({ + text, + onClick, + className = "", + disabled = false, + ariaLabel, + type = "button", +}: ButtonProps) => { + return ( + + ); +}; +``` + +### Key Points + +**ariaLabel:** +- Optional prop with sensible fallback +- Falls back to `text` content for buttons +- Provides context for screen readers + +**type:** +- Default: `"button"` +- Options: `"button" | "submit" | "reset"` +- Prevents accidental form submission + +**disabled:** +- Default: `false` +- Includes visual disabled states: + - `disabled:cursor-not-allowed` - Shows not-allowed cursor + - `disabled:opacity-50` - Reduces opacity for visual feedback + +## Media Components + +### Images + +**Required Props:** +```tsx +interface ImageProps { + imageSrc: string; + imageAlt?: string; // Empty string for decorative images + className?: string; +} +``` + +**Implementation:** +```tsx +const ImageComponent = ({ + imageSrc, + imageAlt = "", + className = "", +}: ImageProps) => { + return ( + {imageAlt} + ); +}; +``` + +**Key Points:** +- `imageAlt` - Alt text for images + - Provide descriptive alt text for meaningful images + - Use empty string (`""`) for decorative images +- `aria-hidden={true}` - When alt is empty, mark as decorative +- Screen readers will skip decorative images + +### Videos + +**Required Props:** +```tsx +interface VideoProps { + videoSrc: string; + videoAriaLabel?: string; + className?: string; +} +``` + +**Implementation:** +```tsx +const VideoComponent = ({ + videoSrc, + videoAriaLabel = "Video content", + className = "", +}: VideoProps) => { + return ( +