From b1b0ab5df8afac0d2df65ddb152b16f454564ce1 Mon Sep 17 00:00:00 2001 From: Nikolay Pecheniev Date: Tue, 6 Jan 2026 12:59:22 +0200 Subject: [PATCH] Initial commit --- .gitea/workflows/build.yml | 59 + .gitignore | 41 + README.md | 36 + THEME_PROVIDER_OPTIONS.txt | 134 + colorThemes.css | 807 + colorThemes.json | 654 + docs/ACCESSIBILITY.md | 500 + docs/CARDSTACK_SECTIONS.md | 491 + docs/COMPONENT_IMPLEMENTATION.md | 437 + docs/PREVIEW_PAGE_STANDARDS.md | 499 + docs/README.md | 145 + docs/REGISTRY_STANDARDS.md | 487 + docs/THEME_AND_STYLING.md | 545 + eslint.config.mjs | 30 + fontThemes.json | 632 + next.config.ts | 18 + package-lock.json | 7450 +++++++++ package.json | 41 + 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 | 12681 ++++++++++++++++ src/app/favicon.ico | Bin 0 -> 25931 bytes src/app/globals.css | 512 + src/app/layout.tsx | 1267 ++ src/app/page.tsx | 295 + src/components/Accordion.tsx | 146 + src/components/ServiceWrapper.tsx | 22 + src/components/Textbox.tsx | 290 + .../background/AnimatedAuroraBackground.tsx | 44 + .../background/AnimatedGridBackground.tsx | 111 + .../background/AuroraBackground.tsx | 32 + .../background/BlurBottomBackground.tsx | 58 + .../background/CircleGradientBackground.tsx | 48 + .../background/DotGridBackground.tsx | 45 + src/components/background/FluidBackground.tsx | 277 + .../background/GradientBarsBackground.tsx | 67 + src/components/background/GridBackround.tsx | 45 + src/components/background/NoiseBackground.tsx | 31 + .../NoiseDiagonalGradientBackground.tsx | 35 + .../background/NoiseGradientBackground.tsx | 35 + src/components/background/PlainBackground.tsx | 21 + .../background/RadialGradientBackground.tsx | 34 + .../FloatingGradientBackground.css | 102 + .../FloatingGradientBackground.tsx | 38 + src/components/button/Button.tsx | 41 + .../ButtonBounceEffect/BounceButton.css | 30 + .../ButtonBounceEffect/ButtonBounceEffect.tsx | 72 + .../ButtonDirectionalHover.tsx | 81 + .../DirectionalButton.css | 37 + .../useDirectionalHover.ts | 48 + .../ButtonElasticEffect.tsx | 53 + .../ButtonElasticEffect/useElasticEffect.ts | 59 + src/components/button/ButtonExpandHover.tsx | 90 + src/components/button/ButtonHoverBubble.tsx | 81 + .../ButtonHoverMagnetic.tsx | 55 + .../ButtonHoverMagnetic/useMagneticEffect.ts | 73 + src/components/button/ButtonIconArrow.tsx | 64 + .../ButtonShiftHover/ButtonShiftHover.tsx | 71 + .../button/ButtonShiftHover/ShiftButton.css | 29 + .../ButtonTextShift/ButtonTextShift.tsx | 72 + .../ButtonTextShift/TextShiftButton.css | 21 + .../ButtonTextStagger/ButtonTextStagger.tsx | 72 + .../ButtonTextStagger/StaggerButton.css | 29 + src/components/button/ButtonTextUnderline.tsx | 51 + src/components/button/SelectorButton.tsx | 125 + src/components/button/types.ts | 89 + src/components/button/useButtonClick.ts | 31 + src/components/button/useCharAnimation.ts | 31 + src/components/cardStack/CardList.tsx | 120 + src/components/cardStack/CardStack.tsx | 190 + src/components/cardStack/CardStackTextBox.tsx | 88 + .../cardStack/hooks/useCardAnimation.ts | 95 + .../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 | 137 + .../layouts/carousels/ButtonCarousel.tsx | 171 + .../layouts/carousels/FullWidthCarousel.tsx | 154 + .../cardStack/layouts/grid/GridLayout.tsx | 134 + .../cardStack/layouts/grid/gridConfigs.ts | 464 + .../layouts/timelines/TimelineBase.tsx | 154 + .../layouts/timelines/TimelineCardStack.tsx | 144 + .../timelines/TimelineHorizontalCardStack.tsx | 172 + .../layouts/timelines/TimelinePhoneView.tsx | 261 + .../layouts/timelines/TimelineProcessFlow.tsx | 187 + src/components/cardStack/types.ts | 141 + 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 | 80 + .../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 | 113 + src/components/navbar/NavbarStyleMinimal.tsx | 61 + .../navbar/expandingMenu/ExpandingMenu.tsx | 148 + .../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 + .../sections/about/AboutPhoneTimeline.tsx | 213 + .../about/InlineImageSplitTextAbout.tsx | 130 + src/components/sections/about/MediaAbout.tsx | 98 + .../sections/about/MediaSplitAbout.tsx | 125 + .../sections/about/MediaSplitTabsAbout.tsx | 163 + .../sections/about/ParallaxAbout.tsx | 95 + src/components/sections/about/SplitAbout.tsx | 178 + .../sections/about/SplitAboutCards.tsx | 128 + .../sections/about/SplitAboutMetric.tsx | 101 + src/components/sections/about/TagAbout.tsx | 53 + .../sections/about/TagMediaSplitAbout.tsx | 211 + .../sections/about/TestimonialAboutCard.tsx | 134 + src/components/sections/about/TextAbout.tsx | 64 + .../sections/about/TextSplitAbout.tsx | 87 + .../sections/blog/BlogCardEight.tsx | 211 + .../sections/blog/BlogCardEleven.tsx | 194 + src/components/sections/blog/BlogCardFive.tsx | 169 + src/components/sections/blog/BlogCardNine.tsx | 217 + src/components/sections/blog/BlogCardOne.tsx | 247 + .../sections/blog/BlogCardSeven.tsx | 205 + src/components/sections/blog/BlogCardSix.tsx | 235 + src/components/sections/blog/BlogCardTen.tsx | 165 + .../sections/blog/BlogCardThree.tsx | 228 + src/components/sections/blog/BlogCardTwo.tsx | 225 + .../sections/contact/ContactCenter.tsx | 91 + .../sections/contact/ContactCenterForm.tsx | 158 + .../sections/contact/ContactFaq.tsx | 195 + .../sections/contact/ContactInline.tsx | 96 + .../sections/contact/ContactSplit.tsx | 127 + .../sections/contact/ContactSplitForm.tsx | 203 + .../sections/contact/ContactText.tsx | 93 + 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 | 152 + .../sections/feature/FeatureCardEight.tsx | 151 + .../sections/feature/FeatureCardEighteen.tsx | 186 + .../sections/feature/FeatureCardEleven.tsx | 165 + .../sections/feature/FeatureCardFifteen.tsx | 179 + .../sections/feature/FeatureCardFourteen.tsx | 174 + .../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 | 168 + .../sections/feature/FeatureCardTen.tsx | 242 + .../sections/feature/FeatureCardThirteen.tsx | 231 + .../sections/feature/FeatureCardTwelve.tsx | 177 + .../sections/feature/FeatureCardTwenty.tsx | 188 + .../sections/feature/FeatureCardTwentyOne.tsx | 225 + .../featureCardThree/FeatureCardThree.css | 32 + .../featureCardThree/FeatureCardThree.tsx | 181 + .../featureCardThree/FeatureCardThreeItem.tsx | 144 + .../featureCardThree/useDynamicDimensions.ts | 122 + src/components/sections/footer/FooterBase.tsx | 108 + .../sections/footer/FooterBaseCard.tsx | 108 + .../sections/footer/FooterBaseReveal.tsx | 126 + .../sections/footer/FooterBaseSocial.tsx | 132 + src/components/sections/footer/FooterCard.tsx | 83 + src/components/sections/footer/FooterLogo.tsx | 47 + .../sections/footer/FooterLogoEmphasis.tsx | 122 + .../sections/footer/FooterLogoReveal.tsx | 91 + .../sections/footer/FooterMedia.tsx | 143 + .../sections/footer/FooterSocial.tsx | 113 + .../sections/footer/FooterSplit.tsx | 138 + .../sections/hero/HeroBillboard.tsx | 127 + .../sections/hero/HeroBillboardCarousel.tsx | 126 + .../hero/HeroBillboardCarouselSplit.tsx | 112 + .../sections/hero/HeroBillboardGallery.tsx | 166 + .../sections/hero/HeroBillboardMetrics.tsx | 196 + .../hero/HeroBillboardRotatedCarousel.tsx | 98 + .../sections/hero/HeroBillboardScroll.tsx | 139 + .../sections/hero/HeroBillboardSplit.tsx | 136 + .../sections/hero/HeroChatPrompt.tsx | 123 + .../sections/hero/HeroChatPromptFeatures.tsx | 185 + .../sections/hero/HeroGlobeOverlay.tsx | 91 + src/components/sections/hero/HeroLogo.tsx | 126 + .../sections/hero/HeroLogoBillboard.tsx | 118 + .../sections/hero/HeroLogoBillboardSplit.tsx | 142 + .../sections/hero/HeroLogoCarousel.tsx | 106 + src/components/sections/hero/HeroOverlay.tsx | 142 + .../hero/HeroShowcaseSplitOverlay.tsx | 214 + src/components/sections/hero/HeroSplit.tsx | 127 + .../sections/hero/HeroSplitAvatars.tsx | 140 + .../sections/hero/HeroSplitGlobe.tsx | 115 + .../sections/hero/HeroSplitGlobeKpi.tsx | 148 + src/components/sections/hero/HeroSplitKpi.tsx | 159 + .../sections/hero/HeroSplitLarge.tsx | 116 + .../heroCarouselLogo/HeroCarouselLogo.tsx | 173 + .../heroCarouselLogo/useCarouselFullscreen.ts | 103 + .../sections/metrics/MetricCardEight.tsx | 140 + .../sections/metrics/MetricCardEleven.tsx | 273 + .../sections/metrics/MetricCardFive.tsx | 139 + .../sections/metrics/MetricCardFour.tsx | 150 + .../sections/metrics/MetricCardFourteen.tsx | 128 + .../sections/metrics/MetricCardOne.tsx | 197 + .../sections/metrics/MetricCardSeven.tsx | 187 + .../sections/metrics/MetricCardSix.tsx | 182 + .../sections/metrics/MetricCardTen.tsx | 239 + .../sections/metrics/MetricCardThirteen.tsx | 176 + .../sections/metrics/MetricCardThree.tsx | 181 + .../sections/metrics/MetricCardTwo.tsx | 163 + .../sections/pricing/PricingCardEight.tsx | 242 + .../sections/pricing/PricingCardFive.tsx | 225 + .../sections/pricing/PricingCardFour.tsx | 239 + .../sections/pricing/PricingCardNine.tsx | 206 + .../sections/pricing/PricingCardOne.tsx | 199 + .../sections/pricing/PricingCardSeven.tsx | 275 + .../sections/pricing/PricingCardSix.tsx | 251 + .../sections/pricing/PricingCardThree.tsx | 240 + .../sections/pricing/PricingCardTwo.tsx | 240 + .../sections/product/ProductCardFive.tsx | 194 + .../sections/product/ProductCardFour.tsx | 212 + .../sections/product/ProductCardOne.tsx | 200 + .../sections/product/ProductCardSeven.tsx | 203 + .../sections/product/ProductCardSix.tsx | 195 + .../sections/product/ProductCardThree.tsx | 243 + .../sections/product/ProductCardTwo.tsx | 235 + .../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/TeamCardFour.tsx | 186 + src/components/sections/team/TeamCardOne.tsx | 185 + .../sections/team/TeamCardSeven.tsx | 151 + src/components/sections/team/TeamCardSix.tsx | 191 + src/components/sections/team/TeamCardTen.tsx | 138 + .../sections/team/TeamCardThree.tsx | 215 + src/components/sections/team/TeamCardTwo.tsx | 227 + .../testimonial/TestimonialCardEight.tsx | 206 + .../testimonial/TestimonialCardEleven.tsx | 177 + .../testimonial/TestimonialCardFifteen.tsx | 117 + .../testimonial/TestimonialCardFive.tsx | 230 + .../testimonial/TestimonialCardFour.tsx | 163 + .../testimonial/TestimonialCardNine.tsx | 218 + .../testimonial/TestimonialCardOne.tsx | 212 + .../testimonial/TestimonialCardSeven.tsx | 181 + .../testimonial/TestimonialCardSix.tsx | 197 + .../testimonial/TestimonialCardTen.tsx | 235 + .../testimonial/TestimonialCardThirteen.tsx | 233 + .../testimonial/TestimonialCardTwelve.tsx | 101 + .../testimonial/TestimonialCardTwo.tsx | 209 + src/components/shared/AvatarGroup.tsx | 89 + 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/Globe.tsx | 204 + 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 | 102 + src/lib/utils.ts | 26 + src/providers/themeProvider/ThemeProvider.tsx | 136 + .../themeProvider/config/constants.ts | 573 + src/providers/themeProvider/config/types.ts | 53 + .../themeProvider/styles/cardStyles.ts | 142 + .../styles/primaryButtonStyles.ts | 48 + .../styles/secondaryButtonStyles.ts | 43 + .../utils/detectLightBackground.ts | 21 + src/tag/Tag.tsx | 80 + src/tag/useTagEffects.ts | 54 + src/types/button.ts | 28 + src/types/navigation.ts | 11 + src/utils/debounce.ts | 15 + src/utils/throttle.ts | 24 + tsconfig.json | 42 + vercel.json | 5 + 308 files changed, 62502 insertions(+) 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/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/CircleGradientBackground.tsx create mode 100644 src/components/background/DotGridBackground.tsx create mode 100644 src/components/background/FluidBackground.tsx create mode 100644 src/components/background/GradientBarsBackground.tsx create mode 100644 src/components/background/GridBackround.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/floatingGradientBackground/FloatingGradientBackground.css create mode 100644 src/components/background/floatingGradientBackground/FloatingGradientBackground.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/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/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/NavbarStyleMinimal.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/AboutPhoneTimeline.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/MediaSplitAbout.tsx create mode 100644 src/components/sections/about/MediaSplitTabsAbout.tsx create mode 100644 src/components/sections/about/ParallaxAbout.tsx create mode 100644 src/components/sections/about/SplitAbout.tsx create mode 100644 src/components/sections/about/SplitAboutCards.tsx create mode 100644 src/components/sections/about/SplitAboutMetric.tsx create mode 100644 src/components/sections/about/TagAbout.tsx create mode 100644 src/components/sections/about/TagMediaSplitAbout.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/BlogCardEight.tsx create mode 100644 src/components/sections/blog/BlogCardEleven.tsx create mode 100644 src/components/sections/blog/BlogCardFive.tsx create mode 100644 src/components/sections/blog/BlogCardNine.tsx create mode 100644 src/components/sections/blog/BlogCardOne.tsx create mode 100644 src/components/sections/blog/BlogCardSeven.tsx create mode 100644 src/components/sections/blog/BlogCardSix.tsx create mode 100644 src/components/sections/blog/BlogCardTen.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/ContactCenterForm.tsx create mode 100644 src/components/sections/contact/ContactFaq.tsx create mode 100644 src/components/sections/contact/ContactInline.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/FeatureCardEight.tsx create mode 100644 src/components/sections/feature/FeatureCardEighteen.tsx create mode 100644 src/components/sections/feature/FeatureCardEleven.tsx create mode 100644 src/components/sections/feature/FeatureCardFifteen.tsx create mode 100644 src/components/sections/feature/FeatureCardFourteen.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/FeatureCardThirteen.tsx create mode 100644 src/components/sections/feature/FeatureCardTwelve.tsx create mode 100644 src/components/sections/feature/FeatureCardTwenty.tsx create mode 100644 src/components/sections/feature/FeatureCardTwentyOne.tsx 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/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/FooterBaseSocial.tsx create mode 100644 src/components/sections/footer/FooterCard.tsx create mode 100644 src/components/sections/footer/FooterLogo.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/FooterSocial.tsx create mode 100644 src/components/sections/footer/FooterSplit.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/HeroBillboardCarouselSplit.tsx create mode 100644 src/components/sections/hero/HeroBillboardGallery.tsx create mode 100644 src/components/sections/hero/HeroBillboardMetrics.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/HeroBillboardSplit.tsx create mode 100644 src/components/sections/hero/HeroChatPrompt.tsx create mode 100644 src/components/sections/hero/HeroChatPromptFeatures.tsx create mode 100644 src/components/sections/hero/HeroGlobeOverlay.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/HeroLogoCarousel.tsx create mode 100644 src/components/sections/hero/HeroOverlay.tsx create mode 100644 src/components/sections/hero/HeroShowcaseSplitOverlay.tsx create mode 100644 src/components/sections/hero/HeroSplit.tsx create mode 100644 src/components/sections/hero/HeroSplitAvatars.tsx create mode 100644 src/components/sections/hero/HeroSplitGlobe.tsx create mode 100644 src/components/sections/hero/HeroSplitGlobeKpi.tsx create mode 100644 src/components/sections/hero/HeroSplitKpi.tsx create mode 100644 src/components/sections/hero/HeroSplitLarge.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/MetricCardEight.tsx create mode 100644 src/components/sections/metrics/MetricCardEleven.tsx create mode 100644 src/components/sections/metrics/MetricCardFive.tsx create mode 100644 src/components/sections/metrics/MetricCardFour.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/MetricCardSix.tsx create mode 100644 src/components/sections/metrics/MetricCardTen.tsx create mode 100644 src/components/sections/metrics/MetricCardThirteen.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/PricingCardFour.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/PricingCardSeven.tsx create mode 100644 src/components/sections/pricing/PricingCardSix.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/ProductCardFive.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/ProductCardSeven.tsx create mode 100644 src/components/sections/product/ProductCardSix.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/TeamCardFour.tsx create mode 100644 src/components/sections/team/TeamCardOne.tsx create mode 100644 src/components/sections/team/TeamCardSeven.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/TeamCardThree.tsx create mode 100644 src/components/sections/team/TeamCardTwo.tsx create mode 100644 src/components/sections/testimonial/TestimonialCardEight.tsx create mode 100644 src/components/sections/testimonial/TestimonialCardEleven.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/TestimonialCardFour.tsx create mode 100644 src/components/sections/testimonial/TestimonialCardNine.tsx create mode 100644 src/components/sections/testimonial/TestimonialCardOne.tsx create mode 100644 src/components/sections/testimonial/TestimonialCardSeven.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/Globe.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/.gitea/workflows/build.yml b/.gitea/workflows/build.yml new file mode 100644 index 0000000..8ba513e --- /dev/null +++ b/.gitea/workflows/build.yml @@ -0,0 +1,59 @@ +name: Build + +on: + workflow_dispatch: + inputs: + branch: + description: 'Branch to build' + required: true + default: 'main' + +permissions: + contents: read + +jobs: + build: + 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 --silent 2>&1 | tee install.log + env: + NODE_OPTIONS: '--max-old-space-size=4096' + + - name: Build (next build) + run: | + set -euo pipefail + npm run build 2>&1 | tee build.log + env: + NODE_ENV: production + NEXT_TELEMETRY_DISABLED: 1 + NODE_OPTIONS: '--max-old-space-size=4096' + timeout-minutes: 5 + + - name: Upload logs on failure + if: failure() + uses: actions/upload-artifact@v3 + with: + name: build-logs + path: | + install.log + build.log + if-no-files-found: ignore + + - name: Build completed + if: success() + run: echo "Build completed successfully" diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..5ef6a52 --- /dev/null +++ b/.gitignore @@ -0,0 +1,41 @@ +# 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* + +# env files (can opt-in for committing if needed) +.env* + +# 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..30ce8ee --- /dev/null +++ b/THEME_PROVIDER_OPTIONS.txt @@ -0,0 +1,134 @@ +================================================================================ + 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" + +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" + • "plain" + • "grid" + • "dotGrid" + • "circleGradient" + • "aurora" + • "floatingGradient" + • "animatedGrid" + • "animatedAurora" + • "fluid" + • "radialGradient" + • "noise" + • "noiseGradient" + • "noiseDiagonalGradient" + +7. cardStyle + • "solid" + • "solid-accent" + • "solid-accent-light" + • "outline" + • "outline-light" + • "elevated" + • "elevated-accent" + • "elevated-accent-light" + • "gradient-subtle" + • "gradient-mesh" + • "gradient-radial" + • "neon-glow" + • "inset" + • "spotlight" + • "shadow-colored" + • "glass-elevated" + • "glass-depth" + • "gradient-bordered" + • "layered-gradient" + +8. primaryButtonStyle + • "gradient" + • "shadow" + • "flat" + • "layered-depth" + • "radial-glow" + • "diagonal-gradient" + • "neon-glow-border" + • "outline" + +9. secondaryButtonStyle + • "glass" + • "outline" + • "solid" + • "minimal" + • "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..a4f7fe0 --- /dev/null +++ b/colorThemes.css @@ -0,0 +1,807 @@ +/* ============================================ */ +/* LIGHT THEME VARIANTS */ +/* ============================================ */ + +/* Light Theme - Minimal */ +:root { + --background: #ffffff; + --card: #fcfcfc; + --foreground: #000000e6; + --primary-cta: #1a1a1a; + --secondary-cta: #ffffff; + --accent: #bebebe; + --background-accent: #c4c4c4; +} + +/* Light Theme - Minimal Light Blue */ +:root[data-theme="minimal-light-blue"] { + --background: #ffffff; + --card: #fcfcfc; + --foreground: #000a18e6; + --primary-cta: #409fff; + --secondary-cta: #ffffff; + --accent: #e2e2e2; + --background-accent: #c4c4c4; +} + +/* Light Theme - Minimal Dark Blue */ +:root[data-theme="minimal-dark-blue"] { + --background: #ffffff; + --card: #fcfcfc; + --foreground: #000612e6; + --primary-cta: #15479c; + --secondary-cta: #ffffff; + --accent: #e2e2e2; + --background-accent: #c4c4c4; +} + +/* Light Theme - Minimal Light Green */ +:root[data-theme="minimal-light-green"] { + --background: #ffffff; + --card: #fcfcfc; + --foreground: #00120ae6; + --primary-cta: #15ad59; + --secondary-cta: #ffffff; + --accent: #e2e2e2; + --background-accent: #c4c4c4; +} + +/* Light Theme - Minimal Dark Green */ +:root[data-theme="minimal-dark-green"] { + --background: #ffffff; + --card: #fcfcfc; + --foreground: #000f06e6; + --primary-cta: #0a7039; + --secondary-cta: #ffffff; + --accent: #e2e2e2; + --background-accent: #c4c4c4; +} + +/* Light Theme - Minimal Light Red */ +:root[data-theme="minimal-light-red"] { + --background: #ffffff; + --card: #fcfcfc; + --foreground: #120006e6; + --primary-cta: #e63946; + --secondary-cta: #ffffff; + --accent: #e2e2e2; + --background-accent: #c4c4c4; +} + +/* Light Theme - Minimal Dark Red */ +:root[data-theme="minimal-dark-red"] { + --background: #ffffff; + --card: #fcfcfc; + --foreground: #0f0003e6; + --primary-cta: #c1121f; + --secondary-cta: #ffffff; + --accent: #e2e2e2; + --background-accent: #c4c4c4; +} + +/* Light Theme - Minimal Light Purple */ +:root[data-theme="minimal-light-purple"] { + --background: #ffffff; + --card: #fcfcfc; + --foreground: #0a0018e6; + --primary-cta: #8b5cf6; + --secondary-cta: #ffffff; + --accent: #e2e2e2; + --background-accent: #c4c4c4; +} + +/* Light Theme - Minimal Dark Purple */ +:root[data-theme="minimal-dark-purple"] { + --background: #ffffff; + --card: #fcfcfc; + --foreground: #080015e6; + --primary-cta: #7c3aed; + --secondary-cta: #ffffff; + --accent: #e2e2e2; + --background-accent: #c4c4c4; +} + +/* Light Theme - Minimal Light Orange */ +:root[data-theme="minimal-light-orange"] { + --background: #ffffff; + --card: #fcfcfc; + --foreground: #120a00e6; + --primary-cta: #ff8c42; + --secondary-cta: #ffffff; + --accent: #e2e2e2; + --background-accent: #c4c4c4; +} + +/* Light Theme - Minimal Dark Orange */ +:root[data-theme="minimal-dark-orange"] { + --background: #ffffff; + --card: #fcfcfc; + --foreground: #0f0600e6; + --primary-cta: #e8590c; + --secondary-cta: #ffffff; + --accent: #e2e2e2; + --background-accent: #c4c4c4; +} + +/* Light Theme - Minimal Light Cyan */ +:root[data-theme="minimal-light-cyan"] { + --background: #ffffff; + --card: #fcfcfc; + --foreground: #001212e6; + --primary-cta: #16d4f6; + --secondary-cta: #ffffff; + --accent: #e2e2e2; + --background-accent: #c4c4c4; +} + +/* Light Theme - Minimal Dark Cyan */ +:root[data-theme="minimal-dark-cyan"] { + --background: #ffffff; + --card: #fcfcfc; + --foreground: #000f0fe6; + --primary-cta: #00c9e8; + --secondary-cta: #ffffff; + --accent: #e2e2e2; + --background-accent: #c4c4c4; +} + +/* Light Theme - Minimal Light Yellow */ +:root[data-theme="minimal-light-yellow"] { + --background: #ffffff; + --card: #fcfcfc; + --foreground: #121200e6; + --primary-cta: #ffcf40; + --secondary-cta: #ffffff; + --accent: #e2e2e2; + --background-accent: #c4c4c4; +} + +/* Light Theme - Minimal Dark Yellow */ +:root[data-theme="minimal-dark-yellow"] { + --background: #ffffff; + --card: #fcfcfc; + --foreground: #0f0f00e6; + --primary-cta: #ffae00; + --secondary-cta: #ffffff; + --accent: #e2e2e2; + --background-accent: #c4c4c4; +} + +/* Light Theme - Brutalist Red */ +:root[data-theme="brutalist-red"] { + --background: #ffffff; + --card: #fafafa; + --foreground: #000000; + --primary-cta: #ff0000; + --secondary-cta: #ffffff; + --accent: #e5e5e5; + --background-accent: #f5f5f5; +} + +/* Light Theme - Brutalist Blue */ +:root[data-theme="brutalist-blue"] { + --background: #ffffff; + --card: #fafafa; + --foreground: #000000; + --primary-cta: #0066ff; + --secondary-cta: #ffffff; + --accent: #e5e5e5; + --background-accent: #f5f5f5; +} + +/* Light Theme - Brutalist Green */ +:root[data-theme="brutalist-green"] { + --background: #ffffff; + --card: #fafafa; + --foreground: #000000; + --primary-cta: #00cc00; + --secondary-cta: #ffffff; + --accent: #e5e5e5; + --background-accent: #f5f5f5; +} + +/* Light Theme - Brutalist Purple */ +:root[data-theme="brutalist-purple"] { + --background: #ffffff; + --card: #fafafa; + --foreground: #000000; + --primary-cta: #9933ff; + --secondary-cta: #ffffff; + --accent: #e5e5e5; + --background-accent: #f5f5f5; +} + +/* Light Theme - Brutalist Orange */ +:root[data-theme="brutalist-orange"] { + --background: #ffffff; + --card: #fafafa; + --foreground: #000000; + --primary-cta: #ff6600; + --secondary-cta: #ffffff; + --accent: #e5e5e5; + --background-accent: #f5f5f5; +} + +/* Light Theme - Brutalist Cyan */ +:root[data-theme="brutalist-cyan"] { + --background: #ffffff; + --card: #fafafa; + --foreground: #000000; + --primary-cta: #00ccff; + --secondary-cta: #ffffff; + --accent: #e5e5e5; + --background-accent: #f5f5f5; +} + +/* Light Theme - Brutalist Yellow */ +:root[data-theme="brutalist-yellow"] { + --background: #ffffff; + --card: #fafafa; + --foreground: #000000; + --primary-cta: #ffcc00; + --secondary-cta: #ffffff; + --accent: #e5e5e5; + --background-accent: #f5f5f5; +} + +/* Light Theme - Brutalist Pink */ +:root[data-theme="brutalist-pink"] { + --background: #ffffff; + --card: #fafafa; + --foreground: #000000; + --primary-cta: #ff0066; + --secondary-cta: #ffffff; + --accent: #e5e5e5; + --background-accent: #f5f5f5; +} + +/* Light Theme - Light Blue */ +:root[data-theme="light-blue"] { + --background: #f8fcff; + --card: #ffffff; + --foreground: #00101f; + --primary-cta: #409fff; + --secondary-cta: #ffffff; + --accent: #c7e2fc; + --background-accent: #9bcfff; +} + +/* 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 - Dark Red */ +:root[data-theme="dark-red"] { + --background: #fffcfc; + --card: #fffafa; + --foreground: #220000; + --primary-cta: #c1121f; + --secondary-cta: #ffffff; + --accent: #f0b8bc; + --background-accent: #e07a82; +} + +/* 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 - Dark Purple */ +:root[data-theme="dark-purple"] { + --background: #fcfcff; + --card: #fafaff; + --foreground: #150022; + --primary-cta: #7c3aed; + --secondary-cta: #ffffff; + --accent: #cfc2f0; + --background-accent: #ba9bf1; +} + +/* Light Theme - Soft Peach */ +:root[data-theme="soft-peach"] { + --background: #fff8f5; + --card: #fff0eb; + --foreground: #3d2c29; + --primary-cta: #e8a090; + --secondary-cta: #ffffff; + --accent: #f5d5cc; + --background-accent: #f0c4b8; +} + +/* Light Theme - Soft Lavender */ +:root[data-theme="soft-lavender"] { + --background: #f8f5ff; + --card: #f0ebff; + --foreground: #2d2940; + --primary-cta: #a890e8; + --secondary-cta: #ffffff; + --accent: #d5ccf5; + --background-accent: #c4b8f0; +} + +/* Light Theme - Soft Blush */ +:root[data-theme="soft-blush"] { + --background: #fff5f8; + --card: #ffebf0; + --foreground: #3d2930; + --primary-cta: #e890a8; + --secondary-cta: #ffffff; + --accent: #f5ccd5; + --background-accent: #f0b8c4; +} + +/* Light Theme - Soft Periwinkle */ +:root[data-theme="soft-periwinkle"] { + --background: #f5f8ff; + --card: #ebf0ff; + --foreground: #292d40; + --primary-cta: #90a8e8; + --secondary-cta: #ffffff; + --accent: #ccd5f5; + --background-accent: #b8c4f0; +} + + +/* ============================================ */ +/* 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 Dark Blue */ +:root[data-theme="dark-minimal-dark-blue"] { + --background: #0a0a0a; + --card: #1a1a1a; + --foreground: #f0f5fce6; + --primary-cta: #3891f6; + --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 Dark Green */ +:root[data-theme="dark-minimal-dark-green"] { + --background: #0a0a0a; + --card: #1a1a1a; + --foreground: #f0fff8e6; + --primary-cta: #1cde5d; + --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 Dark Red */ +:root[data-theme="dark-minimal-dark-red"] { + --background: #0a0a0a; + --card: #1a1a1a; + --foreground: #fff0f0e6; + --primary-cta: #ff3d4a; + --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 Dark Purple */ +:root[data-theme="dark-minimal-dark-purple"] { + --background: #0a0a0a; + --card: #1a1a1a; + --foreground: #f5f0fce6; + --primary-cta: #b366ff; + --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 Dark Orange */ +:root[data-theme="dark-minimal-dark-orange"] { + --background: #0a0a0a; + --card: #1a1a1a; + --foreground: #fff8f0e6; + --primary-cta: #ff8c42; + --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 - Minimal Dark Yellow */ +:root[data-theme="dark-minimal-dark-yellow"] { + --background: #0a0a0a; + --card: #1a1a1a; + --foreground: #fffef5e6; + --primary-cta: #facc15; + --secondary-cta: #1a1a1a; + --accent: #737373; + --background-accent: #737373; +} + +/* Dark Theme - Brutalist Red */ +:root[data-theme="dark-brutalist-red"] { + --background: #000000; + --card: #1b1b1b; + --foreground: #ffffff; + --primary-cta: #ff0000; + --secondary-cta: #151515; + --accent: #303030; + --background-accent: #303030; +} + +/* Dark Theme - Brutalist Blue */ +:root[data-theme="dark-brutalist-blue"] { + --background: #000000; + --card: #1b1b1b; + --foreground: #ffffff; + --primary-cta: #0066ff; + --secondary-cta: #151515; + --accent: #303030; + --background-accent: #303030; +} + +/* Dark Theme - Brutalist Green */ +:root[data-theme="dark-brutalist-green"] { + --background: #000000; + --card: #1b1b1b; + --foreground: #ffffff; + --primary-cta: #00cc00; + --secondary-cta: #151515; + --accent: #303030; + --background-accent: #303030; +} + +/* Dark Theme - Brutalist Purple */ +:root[data-theme="dark-brutalist-purple"] { + --background: #000000; + --card: #1b1b1b; + --foreground: #ffffff; + --primary-cta: #9933ff; + --secondary-cta: #151515; + --accent: #303030; + --background-accent: #303030; +} + +/* Dark Theme - Brutalist Orange */ +:root[data-theme="dark-brutalist-orange"] { + --background: #000000; + --card: #1b1b1b; + --foreground: #ffffff; + --primary-cta: #ff6600; + --secondary-cta: #151515; + --accent: #303030; + --background-accent: #303030; +} + +/* Dark Theme - Brutalist Yellow */ +:root[data-theme="dark-brutalist-yellow"] { + --background: #000000; + --card: #1b1b1b; + --foreground: #ffffff; + --primary-cta: #ffcc00; + --secondary-cta: #151515; + --accent: #303030; + --background-accent: #303030; +} + +/* Dark Theme - Brutalist Pink */ +:root[data-theme="dark-brutalist-pink"] { + --background: #000000; + --card: #1b1b1b; + --foreground: #ffffff; + --primary-cta: #ff0066; + --secondary-cta: #151515; + --accent: #303030; + --background-accent: #303030; +} + +/* 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 - Dark Blue */ +:root[data-theme="dark-dark-blue"] { + --background: #00070e; + --card: #152840; + --foreground: #e6f0ff; + --primary-cta: #3891f6; + --secondary-cta: #0e1a29; + --accent: #3f5c79; + --background-accent: #016ad3; +} + +/* 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 - Dark Green */ +:root[data-theme="dark-dark-green"] { + --background: #000602; + --card: #0d1d0d; + --foreground: #e6ffe6; + --primary-cta: #1cde5d; + --secondary-cta: #0a1f0f; + --accent: #2e6841; + --background-accent: #0d6b32; +} + +/* 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 - Dark Purple */ +:root[data-theme="dark-dark-purple"] { + --background: #020006; + --card: #1d0d1d; + --foreground: #f0e6ff; + --primary-cta: #b366ff; + --secondary-cta: #1a0a29; + --accent: #59437b; + --background-accent: #6b28d9; +} + +/* 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; +} + +/* Dark Theme - Dark Orange */ +:root[data-theme="dark-dark-orange"] { + --background: #060200; + --card: #1d0d0b; + --foreground: #ffe6d5; + --primary-cta: #ff8c42; + --secondary-cta: #1f0a00; + --accent: #7b5337; + --background-accent: #b8400c; +} + +/* Dark Theme - Soft Peach */ +:root[data-theme="dark-soft-peach"] { + --background: #1a1210; + --card: #2a201d; + --foreground: #ffe8e0; + --primary-cta: #e8a090; + --secondary-cta: #1a1210; + --accent: #6b4d45; + --background-accent: #8b5d50; +} + +/* Dark Theme - Soft Lavender */ +:root[data-theme="dark-soft-lavender"] { + --background: #121018; + --card: #1d1a28; + --foreground: #e8e0ff; + --primary-cta: #a890e8; + --secondary-cta: #121018; + --accent: #4d456b; + --background-accent: #5d508b; +} + +/* Dark Theme - Soft Blush */ +:root[data-theme="dark-soft-blush"] { + --background: #1a1014; + --card: #2a1d22; + --foreground: #ffe0e8; + --primary-cta: #e890a8; + --secondary-cta: #1a1014; + --accent: #6b4555; + --background-accent: #8b5068; +} + + +/* ============================================ */ +/* MULTI-COLOR COMBO THEME VARIANTS */ +/* ============================================ */ + +/* Light - Blue Purple */ +:root[data-theme="blue-purple"] { + --background: #f8faff; + --card: #f0f4ff; + --foreground: #1a1a2e; + --primary-cta: #3b82f6; + --secondary-cta: #ffffff; + --accent: #d5c6ff; + --background-accent: #b394fa; +} + +/* Light - Blue Orange */ +:root[data-theme="blue-orange"] { + --background: #f7fafd; + --card: #eff6fc; + --foreground: #1a2433; + --primary-cta: #2563eb; + --secondary-cta: #ffffff; + --accent: #f8c093; + --background-accent: #f5b78b; +} + +/* Light - Navy Gold */ +:root[data-theme="navy-gold"] { + --background: #f7f9fc; + --card: #eff3f8; + --foreground: #1a2433; + --primary-cta: #1e3a8a; + --secondary-cta: #ffffff; + --accent: #fbbf24; + --background-accent: #d97706; +} + +/* Light - Charcoal Yellow */ +:root[data-theme="charcoal-yellow"] { + --background: #fafafa; + --card: #f0f0f0; + --foreground: #1a1a1a; + --primary-cta: #262626; + --secondary-cta: #ffffff; + --accent: #fbbf24; + --background-accent: #f59e0b; +} + +/* Dark - Blue Purple */ +:root[data-theme="dark-blue-purple"] { + --background: #0a0e1a; + --card: #121626; + --foreground: #e0e8ff; + --primary-cta: #3b82f6; + --secondary-cta: #0a0e1a; + --accent: #a78bfa; + --background-accent: #8b5cf6; +} + diff --git a/colorThemes.json b/colorThemes.json new file mode 100644 index 0000000..38d06f6 --- /dev/null +++ b/colorThemes.json @@ -0,0 +1,654 @@ +{ + "lightTheme": { + "minimal": { + "--background": "#ffffff", + "--card": "#fcfcfc", + "--foreground": "#000000e6", + "--primary-cta": "#1a1a1a", + "--secondary-cta": "#ffffff", + "--accent": "#bebebe", + "--background-accent": "#c4c4c4" + }, + "minimalLightBlue": { + "--background": "#ffffff", + "--card": "#fcfcfc", + "--foreground": "#000a18e6", + "--primary-cta": "#409fff", + "--secondary-cta": "#ffffff", + "--accent": "#e2e2e2", + "--background-accent": "#c4c4c4" + }, + "minimalDarkBlue": { + "--background": "#ffffff", + "--card": "#fcfcfc", + "--foreground": "#000612e6", + "--primary-cta": "#15479c", + "--secondary-cta": "#ffffff", + "--accent": "#e2e2e2", + "--background-accent": "#c4c4c4" + }, + "minimalLightGreen": { + "--background": "#ffffff", + "--card": "#fcfcfc", + "--foreground": "#00120ae6", + "--primary-cta": "#15ad59", + "--secondary-cta": "#ffffff", + "--accent": "#e2e2e2", + "--background-accent": "#c4c4c4" + }, + "minimalDarkGreen": { + "--background": "#ffffff", + "--card": "#fcfcfc", + "--foreground": "#000f06e6", + "--primary-cta": "#0a7039", + "--secondary-cta": "#ffffff", + "--accent": "#e2e2e2", + "--background-accent": "#c4c4c4" + }, + "minimalLightRed": { + "--background": "#ffffff", + "--card": "#fcfcfc", + "--foreground": "#120006e6", + "--primary-cta": "#e63946", + "--secondary-cta": "#ffffff", + "--accent": "#e2e2e2", + "--background-accent": "#c4c4c4" + }, + "minimalDarkRed": { + "--background": "#ffffff", + "--card": "#fcfcfc", + "--foreground": "#0f0003e6", + "--primary-cta": "#c1121f", + "--secondary-cta": "#ffffff", + "--accent": "#e2e2e2", + "--background-accent": "#c4c4c4" + }, + "minimalLightPurple": { + "--background": "#ffffff", + "--card": "#fcfcfc", + "--foreground": "#0a0018e6", + "--primary-cta": "#8b5cf6", + "--secondary-cta": "#ffffff", + "--accent": "#e2e2e2", + "--background-accent": "#c4c4c4" + }, + "minimalDarkPurple": { + "--background": "#ffffff", + "--card": "#fcfcfc", + "--foreground": "#080015e6", + "--primary-cta": "#7c3aed", + "--secondary-cta": "#ffffff", + "--accent": "#e2e2e2", + "--background-accent": "#c4c4c4" + }, + "minimalLightOrange": { + "--background": "#ffffff", + "--card": "#fcfcfc", + "--foreground": "#120a00e6", + "--primary-cta": "#ff8c42", + "--secondary-cta": "#ffffff", + "--accent": "#e2e2e2", + "--background-accent": "#c4c4c4" + }, + "minimalDarkOrange": { + "--background": "#ffffff", + "--card": "#fcfcfc", + "--foreground": "#0f0600e6", + "--primary-cta": "#e8590c", + "--secondary-cta": "#ffffff", + "--accent": "#e2e2e2", + "--background-accent": "#c4c4c4" + }, + "minimalLightCyan": { + "--background": "#ffffff", + "--card": "#fcfcfc", + "--foreground": "#001212e6", + "--primary-cta": "#16d4f6", + "--secondary-cta": "#ffffff", + "--accent": "#e2e2e2", + "--background-accent": "#c4c4c4" + }, + "minimalDarkCyan": { + "--background": "#ffffff", + "--card": "#fcfcfc", + "--foreground": "#000f0fe6", + "--primary-cta": "#00c9e8", + "--secondary-cta": "#ffffff", + "--accent": "#e2e2e2", + "--background-accent": "#c4c4c4" + }, + "minimalLightYellow": { + "--background": "#ffffff", + "--card": "#fcfcfc", + "--foreground": "#121200e6", + "--primary-cta": "#ffcf40", + "--secondary-cta": "#ffffff", + "--accent": "#e2e2e2", + "--background-accent": "#c4c4c4" + }, + "minimalDarkYellow": { + "--background": "#ffffff", + "--card": "#fcfcfc", + "--foreground": "#0f0f00e6", + "--primary-cta": "#ffae00", + "--secondary-cta": "#ffffff", + "--accent": "#e2e2e2", + "--background-accent": "#c4c4c4" + }, + "brutalistRed": { + "--background": "#ffffff", + "--card": "#fafafa", + "--foreground": "#000000", + "--primary-cta": "#ff0000", + "--secondary-cta": "#ffffff", + "--accent": "#e5e5e5", + "--background-accent": "#f5f5f5" + }, + "brutalistBlue": { + "--background": "#ffffff", + "--card": "#fafafa", + "--foreground": "#000000", + "--primary-cta": "#0066ff", + "--secondary-cta": "#ffffff", + "--accent": "#e5e5e5", + "--background-accent": "#f5f5f5" + }, + "brutalistGreen": { + "--background": "#ffffff", + "--card": "#fafafa", + "--foreground": "#000000", + "--primary-cta": "#00cc00", + "--secondary-cta": "#ffffff", + "--accent": "#e5e5e5", + "--background-accent": "#f5f5f5" + }, + "brutalistPurple": { + "--background": "#ffffff", + "--card": "#fafafa", + "--foreground": "#000000", + "--primary-cta": "#9933ff", + "--secondary-cta": "#ffffff", + "--accent": "#e5e5e5", + "--background-accent": "#f5f5f5" + }, + "brutalistOrange": { + "--background": "#ffffff", + "--card": "#fafafa", + "--foreground": "#000000", + "--primary-cta": "#ff6600", + "--secondary-cta": "#ffffff", + "--accent": "#e5e5e5", + "--background-accent": "#f5f5f5" + }, + "brutalistCyan": { + "--background": "#ffffff", + "--card": "#fafafa", + "--foreground": "#000000", + "--primary-cta": "#00ccff", + "--secondary-cta": "#ffffff", + "--accent": "#e5e5e5", + "--background-accent": "#f5f5f5" + }, + "brutalistYellow": { + "--background": "#ffffff", + "--card": "#fafafa", + "--foreground": "#000000", + "--primary-cta": "#ffcc00", + "--secondary-cta": "#ffffff", + "--accent": "#e5e5e5", + "--background-accent": "#f5f5f5" + }, + "brutalistPink": { + "--background": "#ffffff", + "--card": "#fafafa", + "--foreground": "#000000", + "--primary-cta": "#ff0066", + "--secondary-cta": "#ffffff", + "--accent": "#e5e5e5", + "--background-accent": "#f5f5f5" + }, + "lightBlue": { + "--background": "#f8fcff", + "--card": "#ffffff", + "--foreground": "#00101f", + "--primary-cta": "#409fff", + "--secondary-cta": "#ffffff", + "--accent": "#c7e2fc", + "--background-accent": "#9bcfff" + }, + "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" + }, + "darkRed": { + "--background": "#fffcfc", + "--card": "#fffafa", + "--foreground": "#220000", + "--primary-cta": "#c1121f", + "--secondary-cta": "#ffffff", + "--accent": "#f0b8bc", + "--background-accent": "#e07a82" + }, + "lightPurple": { + "--background": "#fbfaff", + "--card": "#f7f5ff", + "--foreground": "#0f0022", + "--primary-cta": "#8b5cf6", + "--secondary-cta": "#ffffff", + "--accent": "#d8cef5", + "--background-accent": "#c4a8f9" + }, + "darkPurple": { + "--background": "#fcfcff", + "--card": "#fafaff", + "--foreground": "#150022", + "--primary-cta": "#7c3aed", + "--secondary-cta": "#ffffff", + "--accent": "#cfc2f0", + "--background-accent": "#ba9bf1" + }, + "softPeach": { + "--background": "#fff8f5", + "--card": "#fff0eb", + "--foreground": "#3d2c29", + "--primary-cta": "#e8a090", + "--secondary-cta": "#ffffff", + "--accent": "#f5d5cc", + "--background-accent": "#f0c4b8" + }, + "softLavender": { + "--background": "#f8f5ff", + "--card": "#f0ebff", + "--foreground": "#2d2940", + "--primary-cta": "#a890e8", + "--secondary-cta": "#ffffff", + "--accent": "#d5ccf5", + "--background-accent": "#c4b8f0" + }, + "softBlush": { + "--background": "#fff5f8", + "--card": "#ffebf0", + "--foreground": "#3d2930", + "--primary-cta": "#e890a8", + "--secondary-cta": "#ffffff", + "--accent": "#f5ccd5", + "--background-accent": "#f0b8c4" + }, + "softPeriwinkle": { + "--background": "#f5f8ff", + "--card": "#ebf0ff", + "--foreground": "#292d40", + "--primary-cta": "#90a8e8", + "--secondary-cta": "#ffffff", + "--accent": "#ccd5f5", + "--background-accent": "#b8c4f0" + }, + "bluePurple": { + "--background": "#f8faff", + "--card": "#f0f4ff", + "--foreground": "#1a1a2e", + "--primary-cta": "#3b82f6", + "--secondary-cta": "#ffffff", + "--accent": "#d5c6ff", + "--background-accent": "#b394fa" + }, + "blueOrange": { + "--background": "#f7fafd", + "--card": "#eff6fc", + "--foreground": "#1a2433", + "--primary-cta": "#2563eb", + "--secondary-cta": "#ffffff", + "--accent": "#f8c093", + "--background-accent": "#f5b78b" + }, + "navyGold": { + "--background": "#f8f9fa", + "--card": "#f0f2f5", + "--foreground": "#1e293b", + "--primary-cta": "#1e3a8a", + "--secondary-cta": "#ffffff", + "--accent": "#fbbf24", + "--background-accent": "#d97706" + }, + "charcoalYellow": { + "--background": "#fafafa", + "--card": "#f4f4f5", + "--foreground": "#27272a", + "--primary-cta": "#3f3f46", + "--secondary-cta": "#ffffff", + "--accent": "#facc15", + "--background-accent": "#eab308" + } + }, + "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" + }, + "minimalDarkBlue": { + "--background": "#0a0a0a", + "--card": "#1a1a1a", + "--foreground": "#f0f5fce6", + "--primary-cta": "#3891f6", + "--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" + }, + "minimalDarkGreen": { + "--background": "#0a0a0a", + "--card": "#1a1a1a", + "--foreground": "#f0fff8e6", + "--primary-cta": "#1cde5d", + "--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" + }, + "minimalDarkRed": { + "--background": "#0a0a0a", + "--card": "#1a1a1a", + "--foreground": "#fff0f0e6", + "--primary-cta": "#ff3d4a", + "--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" + }, + "minimalDarkPurple": { + "--background": "#0a0a0a", + "--card": "#1a1a1a", + "--foreground": "#f5f0fce6", + "--primary-cta": "#b366ff", + "--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" + }, + "minimalDarkOrange": { + "--background": "#0a0a0a", + "--card": "#1a1a1a", + "--foreground": "#fff8f0e6", + "--primary-cta": "#ff8c42", + "--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" + }, + "minimalDarkYellow": { + "--background": "#0a0a0a", + "--card": "#1a1a1a", + "--foreground": "#fffef5e6", + "--primary-cta": "#facc15", + "--secondary-cta": "#1a1a1a", + "--accent": "#737373", + "--background-accent": "#737373" + }, + "brutalistRed": { + "--background": "#000000", + "--card": "#1b1b1b", + "--foreground": "#ffffff", + "--primary-cta": "#ff0000", + "--secondary-cta": "#151515", + "--accent": "#303030", + "--background-accent": "#303030" + }, + "brutalistBlue": { + "--background": "#000000", + "--card": "#1b1b1b", + "--foreground": "#ffffff", + "--primary-cta": "#0066ff", + "--secondary-cta": "#151515", + "--accent": "#303030", + "--background-accent": "#303030" + }, + "brutalistGreen": { + "--background": "#000000", + "--card": "#1b1b1b", + "--foreground": "#ffffff", + "--primary-cta": "#00cc00", + "--secondary-cta": "#151515", + "--accent": "#303030", + "--background-accent": "#303030" + }, + "brutalistPurple": { + "--background": "#000000", + "--card": "#1b1b1b", + "--foreground": "#ffffff", + "--primary-cta": "#9933ff", + "--secondary-cta": "#151515", + "--accent": "#303030", + "--background-accent": "#303030" + }, + "brutalistOrange": { + "--background": "#000000", + "--card": "#1b1b1b", + "--foreground": "#ffffff", + "--primary-cta": "#ff6600", + "--secondary-cta": "#151515", + "--accent": "#303030", + "--background-accent": "#303030" + }, + "brutalistYellow": { + "--background": "#000000", + "--card": "#1b1b1b", + "--foreground": "#ffffff", + "--primary-cta": "#ffcc00", + "--secondary-cta": "#151515", + "--accent": "#303030", + "--background-accent": "#303030" + }, + "brutalistPink": { + "--background": "#000000", + "--card": "#1b1b1b", + "--foreground": "#ffffff", + "--primary-cta": "#ff0066", + "--secondary-cta": "#151515", + "--accent": "#303030", + "--background-accent": "#303030" + }, + "lightBlue": { + "--background": "#010912", + "--card": "#152840", + "--foreground": "#e6f0ff", + "--primary-cta": "#cee7ff", + "--secondary-cta": "#0e1a29", + "--accent": "#3f5c79", + "--background-accent": "#004a93" + }, + "darkBlue": { + "--background": "#00070e", + "--card": "#152840", + "--foreground": "#e6f0ff", + "--primary-cta": "#3891f6", + "--secondary-cta": "#0e1a29", + "--accent": "#3f5c79", + "--background-accent": "#016ad3" + }, + "lightGreen": { + "--background": "#000802", + "--card": "#0b1a0b", + "--foreground": "#e6ffe6", + "--primary-cta": "#80da9b", + "--secondary-cta": "#07170b", + "--accent": "#38714a", + "--background-accent": "#2c6541" + }, + "darkGreen": { + "--background": "#000602", + "--card": "#0d1d0d", + "--foreground": "#e6ffe6", + "--primary-cta": "#1cde5d", + "--secondary-cta": "#0a1f0f", + "--accent": "#2e6841", + "--background-accent": "#0d6b32" + }, + "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" + }, + "darkPurple": { + "--background": "#020006", + "--card": "#1d0d1d", + "--foreground": "#f0e6ff", + "--primary-cta": "#b366ff", + "--secondary-cta": "#1a0a29", + "--accent": "#59437b", + "--background-accent": "#6b28d9" + }, + "lightOrange": { + "--background": "#080200", + "--card": "#1a0d0b", + "--foreground": "#ffe6d5", + "--primary-cta": "#ffaa70", + "--secondary-cta": "#170b07", + "--accent": "#7b5e4a", + "--background-accent": "#b8541e" + }, + "darkOrange": { + "--background": "#060200", + "--card": "#1d0d0b", + "--foreground": "#ffe6d5", + "--primary-cta": "#ff8c42", + "--secondary-cta": "#1f0a00", + "--accent": "#7b5337", + "--background-accent": "#b8400c" + }, + "softPeach": { + "--background": "#1a1210", + "--card": "#2a201d", + "--foreground": "#ffe8e0", + "--primary-cta": "#e8a090", + "--secondary-cta": "#1a1210", + "--accent": "#6b4d45", + "--background-accent": "#8b5d50" + }, + "softLavender": { + "--background": "#121018", + "--card": "#1d1a28", + "--foreground": "#e8e0ff", + "--primary-cta": "#a890e8", + "--secondary-cta": "#121018", + "--accent": "#4d456b", + "--background-accent": "#5d508b" + }, + "softBlush": { + "--background": "#1a1014", + "--card": "#2a1d22", + "--foreground": "#ffe0e8", + "--primary-cta": "#e890a8", + "--secondary-cta": "#1a1014", + "--accent": "#6b4555", + "--background-accent": "#8b5068" + }, + "bluePurple": { + "--background": "#0a0e1a", + "--card": "#121626", + "--foreground": "#e0e8ff", + "--primary-cta": "#3b82f6", + "--secondary-cta": "#0a0e1a", + "--accent": "#a78bfa", + "--background-accent": "#8b5cf6" + } + } +} 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 ( +