tabexseriescomponents 0.0.217 → 0.0.220

package/srcold/index.jsx

@@ -0,0 +1,283 @@
+import AwesomeButton from './button.jsx';
+// // import AwesomeButton2 from './button2.jsx';
+// //Contexts
+import { LanguageContext, LanguageProvider } from './Contexts/LanguageContext.jsx';
+import { ProductsCardsSectionContext, ProductsCardsSectionContext_Provider } from './Contexts/ProductsCardsSectionContext.jsx';
+
+//Static Pages
+import Login from './TabexComponents/StaticPages/Login/Login.jsx';
+import Productinfo from './TabexComponents/StaticPages/Productinfo/Productinfo.jsx';
+import Ordershistory from './TabexComponents/StaticPages/Ordershistory/Ordershistory.jsx';
+import Wishlist from './TabexComponents/StaticPages/Wishlist/Wishlist.jsx';
+import Viewcart from './TabexComponents/StaticPages/Viewcart/Viewcart.jsx';
+import Checkout from './TabexComponents/StaticPages/Checkout/Checkout.jsx';
+import Signup from './TabexComponents/StaticPages/Signup/Signup.jsx';
+import AccountInformation from './TabexComponents/StaticPages/AccountInformation/AccountInformation.jsx';
+import Policies from './TabexComponents/StaticPages/Policies/Policies.jsx';
+import CartSlider from './TabexComponents/StaticPages/CartSlider/CartSlider.jsx';
+import Categoriesdropdown from './TabexComponents/StaticPages/Categoriesdropdown/Categoriesdropdown.jsx';
+import OrderSuccess from './TabexComponents/StaticPages/OrderSuccess/OrderSuccess.jsx';
+import InnerGroups from './TabexComponents/StaticPages/InnerGroups/InnerGroups.jsx';
+
+// Headers (18)
+import Gotoheader from './TabexComponents/Headers/Gotoheader/Gotoheader.jsx';
+import CategoryFeaturingHeader from './TabexComponents/Headers/CategoryFeaturingHeader/CategoryFeaturingHeader.jsx';
+import ClassicHeader from './TabexComponents/Headers/ClassicHeader/ClassicHeader.jsx';
+import CTAHeader from './TabexComponents/Headers/CTAHeader/CTAHeader.jsx';
+import Header_threesectionslogocentered from './TabexComponents/Headers/Header_threesectionslogocentered/Header_threesectionslogocentered.jsx';
+import Simpleheader from './TabexComponents/Headers/Simpleheader/Simpleheader.jsx';
+import Header8 from './TabexComponents/Headers/Header8/Header8.jsx';
+import HeaderRestaurant from './TabexComponents/Headers/HeaderRestaurant/HeaderRestaurant.jsx';
+import HeaderwithContactinfo from './TabexComponents/Headers/HeaderwithContactinfo/HeaderwithContactinfo.jsx';
+import Modernheader from './TabexComponents/Headers/Modernheader/Modernheader.jsx';
+import StylishHeader from './TabexComponents/Headers/StylishHeader/StylishHeader.jsx';
+import ThreeTieredHeader from './TabexComponents/Headers/ThreeTieredHeader/ThreeTieredHeader.jsx';
+import SearchFocusedHeader from './TabexComponents/Headers/SearchFocusedHeader/SearchFocusedHeader.jsx';
+import HeaderWithUtilityBar from './TabexComponents/Headers/HeaderWithUtilityBar/HeaderWithUtilityBar.jsx';
+import HeaderWithAdSlider from './TabexComponents/Headers/HeaderWithAdSlider/HeaderWithAdSlider.jsx';
+import HeaderWithSearchOnCenter from './TabexComponents/Headers/HeaderWithSearchOnCenter/HeaderWithSearchOnCenter.jsx';
+import TwoTieredHeader from './TabexComponents/Headers/TwoTieredHeader/TwoTieredHeader.jsx';
+import TwoTieredWithCenteredLogoHeader from './TabexComponents/Headers/TwoTieredWithCenteredLogoHeader/TwoTieredWithCenteredLogoHeader .jsx';
+
+// Footers (11)
+import Allinonefooter from './TabexComponents/Footer/Allinonefooter/Allinonefooter.jsx';
+import Footer1 from './TabexComponents/Footer/Footer1/Footer1.jsx';
+import Footer2 from './TabexComponents/Footer/Footer2/Footer2.jsx';
+import Footer3 from './TabexComponents/Footer/Footer3/Footer3.jsx';
+import Footer4 from './TabexComponents/Footer/Footer4/Footer4.jsx';
+import Footer5 from './TabexComponents/Footer/Footer5/Footer5.jsx';
+import Footer6 from './TabexComponents/Footer/Footer6/Footer6.jsx';
+import Footer7 from './TabexComponents/Footer/Footer7/Footer7.jsx';
+import Footer8 from './TabexComponents/Footer/Footer8/Footer8.jsx';
+import Simplefooter from './TabexComponents/Footer/Simplefooter/Simplefooter.jsx';
+import FooterWithThreeColumns from './TabexComponents/Footer/FooterWithThreeColumns/FooterWithThreeColumns.jsx';
+
+// Cards Sections (8)
+import CardsSection from './TabexComponents/Sections/Cards/CardsSection/CardsSection.jsx';
+import CardsSection2 from './TabexComponents/Sections/Cards/CardsSection2/CardsSection2.jsx';
+import Sixverticalcardssection from './TabexComponents/Sections/Cards/Sixverticalcardssection/Sixverticalcardssection.jsx';
+import ModernCardsSection from './TabexComponents/Sections/Cards/ModernCardsSection/ModernCardsSection.jsx';
+import ElegantCategoriesCardSection from './TabexComponents/Sections/Cards/ElegantCategoriesCardSection/ElegantCategoriesCardSection.jsx';
+import RandomlyStructuredCollectionCards from './TabexComponents/Sections/Cards/RandomlyStructuredCollectionCards/RandomlyStructuredCollectionCards.jsx';
+import CardsSectionwithfilter from './TabexComponents/Sections/Cards/CardsSectionwithfilter/CardsSectionwithfilter.jsx';
+import UsersCardsSection from './TabexComponents/Sections/Cards/UsersCardsSection/UsersCardsSection.jsx';
+
+// Background images (14)
+import BacgroundThreeImageWithCategories from './TabexComponents/Sections/BackgroundImages/BacgroundThreeImageWithCategories/BacgroundThreeImageWithCategories.jsx';
+import BackgroundFiveImageStructure from './TabexComponents/Sections/BackgroundImages/BackgroundFiveImageStructure/BackgroundFiveImageStructure.jsx';
+import Backgroundimage_with_toppill from './TabexComponents/Sections/BackgroundImages/Backgroundimage_with_toppill/Backgroundimage_with_toppill.jsx';
+import Backgroundimage1 from './TabexComponents/Sections/BackgroundImages/Backgroundimage1/Backgroundimage1.jsx';
+import BackgroundimageandTextsection from './TabexComponents/Sections/BackgroundImages/BackgroundimageandTextsection/BackgroundimageandTextsection.jsx';
+import BackgroundImageWithTopContent from './TabexComponents/Sections/BackgroundImages/BackgroundImageWithTopContent/BackgroundImageWithTopContent.jsx';
+import BackgroundSectionWithServicesCards from './TabexComponents/Sections/BackgroundImages/BackgroundSectionWithServicesCards/BackgroundSectionWithServicesCards.jsx';
+import Bgimagewithsearchbar from './TabexComponents/Sections/BackgroundImages/Bgimagewithsearchbar/Bgimagewithsearchbar.jsx';
+import Section_with_rightbgcont from './TabexComponents/Sections/BackgroundImages/Section_with_rightbgcont/Section_with_rightbgcont.jsx';
+import Threebgimages from './TabexComponents/Sections/BackgroundImages/Threebgimages/Threebgimages.jsx';
+import Twobgimages from './TabexComponents/Sections/BackgroundImages/Twobgimages/Twobgimages.jsx';
+import VideosSection from './TabexComponents/Sections/BackgroundImages/VideosSection/VideosSection.jsx';
+import FullVideoSection from './TabexComponents/Sections/BackgroundImages/FullVideoSection/FullVideoSection.jsx';
+import TextSectionConnectToWA from './TabexComponents/Sections/BackgroundImages/TextSectionConnectToWA/TextSectionConnectToWA.jsx';
+
+// Slideshows (13)
+import AboutSection from './TabexComponents/Sections/Slideshow/AboutSection/AboutSection.jsx';
+import Backgroundimage_with_topcircle from './TabexComponents/Sections/Slideshow/Backgroundimage_with_topcircle/Backgroundimage_with_topcircle.jsx';
+import Freetextsection from './TabexComponents/Sections/Slideshow/Freetextsection/Freetextsection.jsx';
+import Image_with_leftwords from './TabexComponents/Sections/Slideshow/Image_with_leftwords/Image_with_leftwords.jsx';
+import Image_with_rightwords from './TabexComponents/Sections/Slideshow/Image_with_rightwords/Image_with_rightwords.jsx';
+import Servicesection from './TabexComponents/Sections/Slideshow/Servicesection/Servicesection.jsx';
+import ServicesectionCenteredcards from './TabexComponents/Sections/Slideshow/ServicesectionCenteredcards/ServicesectionCenteredcards.jsx';
+import Slideshow_with_rotatedsquare from './TabexComponents/Sections/Slideshow/Slideshow_with_rotatedsquare/Slideshow_with_rotatedsquare.jsx';
+import Slideshow_with_squarebg from './TabexComponents/Sections/Slideshow/Slideshow_with_squarebg/Slideshow_with_squarebg.jsx';
+import Slideshowdifferentanimations from './TabexComponents/Sections/Slideshow/Slideshowdifferentanimations/Slideshowdifferentanimations.jsx';
+import Slideshowfade from './TabexComponents/Sections/Slideshow/Slideshowfade/Slideshowfade.jsx';
+import Slideshowslide from './TabexComponents/Sections/Slideshow/Slideshowslide/Slideshowslide.jsx';
+import Slideshowzoom from './TabexComponents/Sections/Slideshow/Slideshowzoom/Slideshowzoom.jsx';
+import TwoWayServiceSectionWithImage from './TabexComponents/Sections/Slideshow/TwoWayServiceSectionWithImage/TwoWayServiceSectionWithImage.jsx';
+import ContactUsSection from './TabexComponents/Sections/Slideshow/ContactUsSection/ContactUsSection.jsx';
+import HorizontalContactUsSection from './TabexComponents/Sections/Slideshow/HorizontalContactUsSection/HorizontalContactUsSection.jsx';
+import ServiceSectionWithImage from './TabexComponents/Sections/Slideshow/ServiceSectionWithImage/ServiceSectionWithImage.jsx';
+
+// Cards (34)
+import CardWithTextOnly from './TabexComponents/Cards/CardWithTextOnly/CardWithTextOnly.jsx';
+import UpSlideEffectCard from './TabexComponents/Cards/UpSlideEffectCard/UpSlideEffectCard.jsx';
+import CircleCardWithVariants from './TabexComponents/Cards/CircleCardWithVariants/CircleCardWithVariants.jsx';
+import CategoryCardTextOnImage from './TabexComponents/Cards/CategoryCardTextOnImage/CategoryCardTextOnImage.jsx';
+import HorizontalCategoryCard from './TabexComponents/Cards/HorizontalCategoryCard/HorizontalCategoryCard.jsx';
+import NewProductcard from './TabexComponents/Cards/NewProductcard/NewProductcard.jsx';
+import UserCardWithSocialMediaOnHover from './TabexComponents/Cards/UserCardWithSocialMediaOnHover/UserCardWithSocialMediaOnHover.jsx';
+import Card20 from './TabexComponents/Cards/Card20/Card20.jsx';
+import Card21 from './TabexComponents/Cards/Card21/Card21.jsx';
+import Card22 from './TabexComponents/Cards/Card22/Card22.jsx';
+import Card23 from './TabexComponents/Cards/Card23/Card23.jsx';
+import CardBadgeSlideFromTop from './TabexComponents/Cards/CardBadgeSlideFromTop/CardBadgeSlideFromTop.jsx';
+import Productcard_with_zoominonhover from './TabexComponents/Cards/Productcard_with_zoominonhover/Productcard_with_zoominonhover.jsx';
+import Categorycard_with_twolinestransition from './TabexComponents/Cards/Categorycard_with_twolinestransition/Categorycard_with_twolinestransition.jsx';
+import Categorycard_fullimage from './TabexComponents/Cards/Categorycard_fullimage/Categorycard_fullimage.jsx';
+import Categorycard_slidebgscaled from './TabexComponents/Cards/Categorycard_slidebgscaled/Categorycard_slidebgscaled.jsx';
+import Categorycard_with_trianglebg from './TabexComponents/Cards/Categorycard_with_trianglebg/Categorycard_with_trianglebg.jsx';
+import Categorycard_withshapes from './TabexComponents/Cards/Categorycard_withshapes/Categorycard_withshapes.jsx';
+import Categorycard_withtext from './TabexComponents/Cards/Categorycard_withtext/Categorycard_withtext.jsx';
+import CategoryCardwithhoveraction from './TabexComponents/Cards/CategoryCardwithhoveraction/CategoryCardwithhoveraction.jsx';
+import Classiccategorycard from './TabexComponents/Cards/Classiccategorycard/Classiccategorycard.jsx';
+import Horizontalcard from './TabexComponents/Cards/Horizontalcard/Horizontalcard.jsx';
+import MenuCard from './TabexComponents/Cards/MenuCard/MenuCard.jsx';
+import ModernCardWithQuantityButton from './TabexComponents/Cards/ModernCardWithQuantityButton/ModernCardWithQuantityButton.jsx';
+import ModernProductCard from './TabexComponents/Cards/ModernProductCard/ModernProductCard.jsx';
+import Productcard_animatedbuttons from './TabexComponents/Cards/Productcard_animatedbuttons/Productcard_animatedbuttons.jsx';
+import Productcard_with_circularbg from './TabexComponents/Cards/Productcard_with_circularbg/Productcard_with_circularbg.jsx';
+import Productcard_with_circularhover from './TabexComponents/Cards/Productcard_with_circularhover/Productcard_with_circularhover.jsx';
+import Productcard_with_slideanimation from './TabexComponents/Cards/Productcard_with_slideanimation/Productcard_with_slideanimation.jsx';
+import Productcard_with_variants from './TabexComponents/Cards/Productcard_with_variants/Productcard_with_variants.jsx';
+import Productcard6 from './TabexComponents/Cards/Productcard6/Productcard6.jsx';
+import Productcard7 from './TabexComponents/Cards/Productcard7/Productcard7.jsx';
+import Productcarddefault from './TabexComponents/Cards/Productcarddefault/Productcarddefault.jsx';
+import Productccard_with_imageontopleft from './TabexComponents/Cards/Productccard_with_imageontopleft/Productccard_with_imageontopleft.jsx';
+import Prouductcard_with_zoomhover from './TabexComponents/Cards/Prouductcard_with_zoomhover/Prouductcard_with_zoomhover.jsx';
+import Simplecategorycardwithtextbelow from './TabexComponents/Cards/Simplecategorycardwithtextbelow/Simplecategorycardwithtextbelow.jsx';
+import Simpleproductcard from './TabexComponents/Cards/Simpleproductcard/Simpleproductcard.jsx';
+import StylishProductCard from './TabexComponents/Cards/StylishProductCard/StylishProductCard.jsx';
+import ProductCardWithTextOnImage from './TabexComponents/Cards/ProductCardWithTextOnImage/ProductCardWithTextOnImage.jsx';
+
+const returnLibrary = () => {
+    return {
+        LanguageContext: LanguageContext,
+        LanguageProvider: LanguageProvider,
+        ProductsCardsSectionContext: ProductsCardsSectionContext,
+        ProductsCardsSectionContext_Provider: ProductsCardsSectionContext_Provider,
+
+        AwesomeButton: AwesomeButton,
+        Checkout: Checkout,
+        Signup: Signup,
+        Productinfo: Productinfo,
+        Ordershistory: Ordershistory,
+        Wishlist: Wishlist,
+        Viewcart: Viewcart,
+        Login: Login,
+        AccountInformation: AccountInformation,
+        Policies: Policies,
+        CartSlider: CartSlider,
+        Categoriesdropdown: Categoriesdropdown,
+        OrderSuccess: OrderSuccess,
+        InnerGroups: InnerGroups,
+
+        // Headers (18)
+        Gotoheader: Gotoheader,
+        CategoryFeaturingHeader: CategoryFeaturingHeader,
+        ClassicHeader: ClassicHeader,
+        CTAHeader: CTAHeader,
+        Header_threesectionslogocentered: Header_threesectionslogocentered,
+        Simpleheader: Simpleheader,
+        Header8: Header8,
+        HeaderRestaurant: HeaderRestaurant,
+        HeaderwithContactinfo: HeaderwithContactinfo,
+        Modernheader: Modernheader,
+        StylishHeader: StylishHeader,
+        ThreeTieredHeader: ThreeTieredHeader,
+        SearchFocusedHeader: SearchFocusedHeader,
+        HeaderWithUtilityBar: HeaderWithUtilityBar,
+        HeaderWithAdSlider: HeaderWithAdSlider,
+        HeaderWithSearchOnCenter: HeaderWithSearchOnCenter,
+        TwoTieredHeader: TwoTieredHeader,
+        TwoTieredWithCenteredLogoHeader: TwoTieredWithCenteredLogoHeader,
+
+        // Footers (11)
+        Allinonefooter: Allinonefooter,
+        Footer1: Footer1,
+        Footer2: Footer2,
+        Footer3: Footer3,
+        Footer4: Footer4,
+        Footer5: Footer5,
+        Footer6: Footer6,
+        Footer7: Footer7,
+        Footer8: Footer8,
+        Simplefooter: Simplefooter,
+        FooterWithThreeColumns: FooterWithThreeColumns,
+
+        // Cards Sections (8)
+        CardsSection: CardsSection,
+        CardsSection2: CardsSection2,
+        Sixverticalcardssection: Sixverticalcardssection,
+        ModernCardsSection: ModernCardsSection,
+        ElegantCategoriesCardSection: ElegantCategoriesCardSection,
+        RandomlyStructuredCollectionCards: RandomlyStructuredCollectionCards,
+        CardsSectionwithfilter: CardsSectionwithfilter,
+        UsersCardsSection: UsersCardsSection,
+
+        // Background images (14)
+        BacgroundThreeImageWithCategories: BacgroundThreeImageWithCategories,
+        BackgroundFiveImageStructure: BackgroundFiveImageStructure,
+        Backgroundimage_with_toppill: Backgroundimage_with_toppill,
+        Backgroundimage1: Backgroundimage1,
+        BackgroundimageandTextsection: BackgroundimageandTextsection,
+        BackgroundImageWithTopContent: BackgroundImageWithTopContent,
+        BackgroundSectionWithServicesCards: BackgroundSectionWithServicesCards,
+        Bgimagewithsearchbar: Bgimagewithsearchbar,
+        Section_with_rightbgcont: Section_with_rightbgcont,
+        Threebgimages: Threebgimages,
+        Twobgimages: Twobgimages,
+        VideosSection: VideosSection,
+        FullVideoSection: FullVideoSection,
+        TextSectionConnectToWA: TextSectionConnectToWA,
+
+        // Slideshows (13)
+        AboutSection: AboutSection,
+        Backgroundimage_with_topcircle: Backgroundimage_with_topcircle,
+        Freetextsection: Freetextsection,
+        Image_with_leftwords: Image_with_leftwords,
+        Image_with_rightwords: Image_with_rightwords,
+        Servicesection: Servicesection,
+        ServicesectionCenteredcards: ServicesectionCenteredcards,
+        Slideshow_with_rotatedsquare: Slideshow_with_rotatedsquare,
+        Slideshow_with_squarebg: Slideshow_with_squarebg,
+        Slideshowdifferentanimations: Slideshowdifferentanimations,
+        Slideshowfade: Slideshowfade,
+        Slideshowslide: Slideshowslide,
+        Slideshowzoom: Slideshowzoom,
+        TwoWayServiceSectionWithImage: TwoWayServiceSectionWithImage,
+        ContactUsSection: ContactUsSection,
+        HorizontalContactUsSection: HorizontalContactUsSection,
+        ServiceSectionWithImage: ServiceSectionWithImage,
+
+        // Cards (34)
+        CardWithTextOnly: CardWithTextOnly,
+        UpSlideEffectCard: UpSlideEffectCard,
+        CircleCardWithVariants: CircleCardWithVariants,
+        CategoryCardTextOnImage: CategoryCardTextOnImage,
+        HorizontalCategoryCard: HorizontalCategoryCard,
+        NewProductcard: NewProductcard,
+        UserCardWithSocialMediaOnHover: UserCardWithSocialMediaOnHover,
+        Card20: Card20,
+        Card21: Card21,
+        Card22: Card22,
+        Card23: Card23,
+        CardBadgeSlideFromTop: CardBadgeSlideFromTop,
+        Productcard_with_zoominonhover: Productcard_with_zoominonhover,
+        Categorycard_with_twolinestransition: Categorycard_with_twolinestransition,
+        Categorycard_fullimage: Categorycard_fullimage,
+        Categorycard_slidebgscaled: Categorycard_slidebgscaled,
+        Categorycard_with_trianglebg: Categorycard_with_trianglebg,
+        Categorycard_withshapes: Categorycard_withshapes,
+        Categorycard_withtext: Categorycard_withtext,
+        CategoryCardwithhoveraction: CategoryCardwithhoveraction,
+        Classiccategorycard: Classiccategorycard,
+        Horizontalcard: Horizontalcard,
+        MenuCard: MenuCard,
+        ModernCardWithQuantityButton: ModernCardWithQuantityButton,
+        ModernProductCard: ModernProductCard,
+        Productcard_animatedbuttons: Productcard_animatedbuttons,
+        Productcard_with_circularbg: Productcard_with_circularbg,
+        Productcard_with_circularhover: Productcard_with_circularhover,
+        Productcard_with_slideanimation: Productcard_with_slideanimation,
+        Productcard_with_variants: Productcard_with_variants,
+        Productcard6: Productcard6,
+        Productcard7: Productcard7,
+        Productcarddefault: Productcarddefault,
+        Productccard_with_imageontopleft: Productccard_with_imageontopleft,
+        Prouductcard_with_zoomhover: Prouductcard_with_zoomhover,
+        Simplecategorycardwithtextbelow: Simplecategorycardwithtextbelow,
+        Simpleproductcard: Simpleproductcard,
+        StylishProductCard: StylishProductCard,
+        ProductCardWithTextOnImage: ProductCardWithTextOnImage,
+    };
+};
+export default returnLibrary();

package/srcold/styles/Home.module.css

@@ -0,0 +1,129 @@
+.container {
+  padding: 0 2rem;
+}
+
+.main {
+  min-height: 100vh;
+  padding: 4rem 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.footer {
+  display: flex;
+  flex: 1;
+  padding: 2rem 0;
+  border-top: 1px solid #eaeaea;
+  justify-content: center;
+  align-items: center;
+}
+
+.footer a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 1;
+}
+
+.title a {
+  color: #0070f3;
+  text-decoration: none;
+}
+
+.title a:hover,
+.title a:focus,
+.title a:active {
+  text-decoration: underline;
+}
+
+.title {
+  margin: 0;
+  line-height: 1.15;
+  font-size: 4rem;
+}
+
+.title,
+.description {
+  text-align: center;
+}
+
+.description {
+  margin: 4rem 0;
+  line-height: 1.5;
+  font-size: 1.5rem;
+}
+
+.code {
+  background: #fafafa;
+  border-radius: 5px;
+  padding: 0.75rem;
+  font-size: 1.1rem;
+  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+    Bitstream Vera Sans Mono, Courier New, monospace;
+}
+
+.grid {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  max-width: 800px;
+}
+
+.card {
+  margin: 1rem;
+  padding: 1.5rem;
+  text-align: left;
+  color: inherit;
+  text-decoration: none;
+  border: 1px solid #eaeaea;
+  border-radius: 10px;
+  transition: color 0.15s ease, border-color 0.15s ease;
+  max-width: 300px;
+}
+
+.card:hover,
+.card:focus,
+.card:active {
+  color: #0070f3;
+  border-color: #0070f3;
+}
+
+.card h2 {
+  margin: 0 0 1rem 0;
+  font-size: 1.5rem;
+}
+
+.card p {
+  margin: 0;
+  font-size: 1.25rem;
+  line-height: 1.5;
+}
+
+.logo {
+  height: 1em;
+  margin-left: 0.5rem;
+}
+
+@media (max-width: 600px) {
+  .grid {
+    width: 100%;
+    flex-direction: column;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .card,
+  .footer {
+    border-color: #222;
+  }
+  .code {
+    background: #111;
+  }
+  .logo img {
+    filter: invert(1);
+  }
+}

package/srcold/styles/cards/Categorcycard_fullimage.module.css

@@ -0,0 +1,10 @@
+.categorycardtext {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+}

package/srcold/styles/cards/Categorycard_slidebgscaled.module.css

@@ -0,0 +1,73 @@
+.categoryCard {
+    position: relative !important;
+    overflow: hidden !important;
+    text-align: center;
+    background-color: white;
+    cursor: pointer;
+    background-size: cover !important;
+    background-repeat: no-repeat;
+    background-position: center;
+    transition: 0.3s;
+    z-index: 1;
+}
+
+.categoryCard:after {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    content: '';
+    opacity: 0.75;
+    -webkit-transform: skew(-45deg) scaleX(0);
+    transform: skew(-45deg) scaleX(0);
+    -webkit-transition: all 0.3s ease-in-out;
+    transition: all 0.3s ease-in-out;
+    z-index: 1 !important;
+}
+.categoryCard figcaption {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 100%;
+    -webkit-transform: translateY(-50%);
+    transform: translateY(-50%);
+    z-index: 100 !important;
+}
+.categoryCard button {
+    margin: 0;
+    width: 100%;
+    opacity: 0;
+    z-index: 100 !important;
+}
+
+.categoryCard p {
+    padding: 0 50px;
+    z-index: 100;
+}
+.categoryCard:hover:after,
+.categoryCard.hover:after {
+    -webkit-transform: skew(-45deg) scaleX(1);
+    transform: skew(-45deg) scaleX(1);
+    transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+.categoryCard:hover figcaption p,
+.categoryCard:hover figcaption button {
+    -webkit-transform: translate3d(0%, 0%, 0);
+    transform: translate3d(0%, 0%, 0);
+    -webkit-transition-delay: 0.2s;
+    transition-delay: 0.2s;
+}
+.categoryCard:hover figcaption p {
+    opacity: 1;
+    z-index: 100 !important;
+}
+.categoryCard:hover figcaption button {
+    opacity: 1;
+    z-index: 100 !important;
+}
+.cardbtn {
+    display: inline-block;
+    vertical-align: middle;
+    transition: 0.15s ease-in-out;
+}

package/srcold/styles/cards/Categorycard_withshapes.module.css

@@ -0,0 +1,189 @@
+*,
+*:before,
+*:after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+.card__collection {
+    margin: right 20px ;
+    position: relative;
+    display: block;
+    width: 100%;
+    overflow: hidden;
+    /* height: 400px; */
+    background-color: white;
+}
+.card__collection .cards {
+    width: 100%;
+    height: 100%;
+    display: block;
+    background-size: cover;
+    float: left;
+    /* border-radius: 15px; */
+    position: relative;
+    overflow: hidden;
+    background-position: center;
+}
+.card__collection .cards_three {
+    position: relative;
+    z-index: 10;
+}
+.card__collection .cards_three:hover .cards_three__rect1 {
+    left: 10%;
+}
+.card__collection .cards_three:hover .cards_three__rect1 .shadow1 {
+    left: -20%;
+}
+.card__collection .cards_three:hover .cards_three__rect2 {
+    left: 60%;
+}
+.card__collection .cards_three:hover .cards_three__rect2:before {
+    left: -100%;
+}
+.card__collection .cards_three:hover .cards_three__rect2:after {
+    left: 80%;
+}
+.card__collection .cards_three:hover .cards_three__rect2 .shadow2 {
+    left: -10%;
+}
+.card__collection .cards_three:hover .cards_three__circle {
+    transform: scale(1);
+}
+.card__collection .cards_three:hover .cards_three__circle:before {
+    transform: scale(0.9);
+}
+
+.card__collection .cards_three__rect1 {
+    background: #fff;
+    width: 200px;
+    height: 110px;
+    transform: skewX(-20deg);
+    display: block;
+    position: absolute;
+    top: 73%;
+    opacity: 0.9;
+    left: -100%;
+    z-index: 8;
+    transition: all 0.5s ease-in;
+}
+.card__collection .cards_three__rect1 p {
+    /* font-size: 20px;
+    color: #fff; */
+    transform: skewX(20deg);
+    line-height: 6rem;
+}
+.card__collection .cards_three__rect1 .shadow1 {
+    /* background: #022648; */
+    width: 230px;
+    height: 100px;
+    display: block;
+    position: absolute;
+    left: -200%;
+    z-index: -1;
+    transition: all 0.3s ease-in;
+}
+.card__collection .cards_three__rect2 {
+    width: 100px;
+    height: 70px;
+    background: #fff;
+    position: absolute;
+    top: 65%;
+    left: 1000%;
+    opacity: 0.9;
+    transform: skewX(-20deg);
+    z-index: 8;
+    transition: all 0.5s ease-in;
+}
+.card__collection .cards_three__rect2::before {
+    content: '';
+    display: block;
+    width: 50px;
+    height: 40px;
+    /* background: #57ccfd; */
+    opacity: 1;
+    position: absolute;
+    left: 500%;
+    top: 10%;
+    transition: all 0.3s ease-in;
+}
+.card__collection .cards_three__rect2::after {
+    content: '';
+    display: block;
+    width: 50px;
+    height: 40px;
+    /* background: #022648; */
+    opacity: 1;
+    position: absolute;
+    left: 500%;
+    top: 114%;
+    transition: all 0.5s ease-in;
+    transition-delay: 0.2s;
+}
+.card__collection .cards_three__rect2 .shadow2 {
+    /* background: #57ccfd; */
+    width: 100%;
+    height: 100%;
+    display: block;
+    position: absolute;
+    top: -10%;
+    left: 500%;
+    transition: all 0.5s ease-in;
+    transition-delay: 0.2s;
+}
+.card__collection .cards_three__circle {
+    width: 220px;
+    height: 220px;
+    border-radius: 50%;
+    background: #fff;
+    box-shadow: 0 0 10px #e6e6e6;
+    position: absolute;
+    top: -15%;
+    right: -60px;
+    opacity: 0.9;
+    transform: scale(0);
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.card__collection .cards_three__circle:before {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+    /* background: #022648; */
+    border-radius: 50%;
+    transform: scale(0);
+    transition: all 0.3s ease;
+    transition-delay: 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.card__collection .cards_three__list {
+    list-style: none;
+    position: absolute;
+    top: -9px;
+    right: 7px;
+    padding-top: 60px;
+    transition: all 0.4s ease;
+}
+.card__collection .cards_three__list .btncont {
+    display: inline-block;
+    margin: 4px;
+    color: #fff;
+    border-radius: 50%;
+    font-size: 16px;
+    text-align: center;
+    line-height: 1.7rem;
+    cursor: pointer;
+
+    transition: all 0.3s ease;
+    transform: translateX(500%);
+
+    transition-delay: 0.2s;
+}
+.card__collection .cards_three:hover .cards_three__list .btncont {
+    transform: translateX(-20px);
+}