tabexseriescomponents 0.0.63 → 0.0.65

package/srcOLD/button.jsx

@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from 'react';
+// import './index.module.css'
+// import asd from './index2.module.css'
+// import asd from './categorycard3.module.css'
+// import asd from './styles/cards/categorycard3.module.css'
+
+const AwesomeButton = (props) => {
+    const [color, setColor] = useState(null);
+    useEffect(() => {
+        if (props.variant) {
+            if (props.variant === 'primary') {
+                setColor('#0077ff');
+            } else if (props.variant === 'secondary') {
+                setColor('#ff0062');
+            } else if (props.variant === 'success') {
+                setColor('#0f8000');
+            } else {
+                setColor('#949393');
+            }
+        }
+    });
+    const { children } = props;
+
+    return (
+        <button
+            // className='buttonComponent'
+            // className={`${asd.buttonComponent}`}
+            style={
+                {
+                    // backgroundColor: 'red'
+                }
+            }
+        >
+            123sdasdasdadsd
+            {children.toUpperCase()}
+        </button>
+    );
+};
+
+export default AwesomeButton;

package/srcOLD/index.jsx

@@ -0,0 +1,175 @@
+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 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';
+// //Sections
+import CardsSection from './TabexComponents/Sections/Cards/CardsSection/CardsSection.jsx';
+
+import Backgroundimage_with_toppill from './TabexComponents/Sections/BackgroundImages/Backgroundimage_with_toppill/Backgroundimage_with_toppill.jsx';
+import BackgroundimageandTextsection from './TabexComponents/Sections/BackgroundImages/BackgroundimageandTextsection/BackgroundimageandTextsection.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 Backgroundimage1 from './TabexComponents/Sections/BackgroundImages/Backgroundimage1/Backgroundimage1.jsx';
+
+// // 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';
+// //Headers
+import Header8 from './TabexComponents/Headers/Header8/Header8.jsx';
+import AllinoneHeader from './TabexComponents/Headers/AllinoneHeader/AllinoneHeader.jsx';
+import Header_threesectionslogocentered from './TabexComponents/Headers/Header_threesectionslogocentered/Header_threesectionslogocentered.jsx';
+import Header4 from './TabexComponents/Headers/Header4/Header4.jsx';
+import Header6 from './TabexComponents/Headers/Header6/Header6.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 ClassicHeader from './TabexComponents/Headers/ClassicHeader/ClassicHeader.jsx';
+// //Footers
+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 Simplefooter from './TabexComponents/Footer/Simplefooter/Simplefooter.jsx';
+
+// //Cards
+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 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';
+
+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,
+        Login: Login,
+        AccountInformation: AccountInformation,
+        Policies: Policies,
+        CartSlider: CartSlider,
+
+        Header8: Header8,
+        AllinoneHeader: AllinoneHeader,
+        Header_threesectionslogocentered: Header_threesectionslogocentered,
+        Header4: Header4,
+        Header6: Header6,
+        HeaderRestaurant: HeaderRestaurant,
+        HeaderwithContactinfo: HeaderwithContactinfo,
+        Modernheader: Modernheader,
+        StylishHeader: StylishHeader,
+        ClassicHeader: ClassicHeader,
+
+        Footer1: Footer1,
+        Footer2: Footer2,
+        Footer3: Footer3,
+        Footer5: Footer5,
+        Footer6: Footer6,
+        Footer7: Footer7,
+        Simplefooter: Simplefooter,
+        Footer4: Footer4,
+
+        Categorycard_with_twolinestransition: Categorycard_with_twolinestransition,
+        Productcard_with_zoominonhover: Productcard_with_zoominonhover,
+        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,
+        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,
+
+        Backgroundimage_with_toppill: Backgroundimage_with_toppill,
+        BackgroundimageandTextsection: BackgroundimageandTextsection,
+        Section_with_rightbgcont: Section_with_rightbgcont,
+        Threebgimages: Threebgimages,
+        Twobgimages: Twobgimages,
+
+        // 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,
+        CardsSection: CardsSection,
+        Backgroundimage1: Backgroundimage1,
+    };
+};
+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);
+}

package/srcOLD/styles/cards/Productcard6.module.css

@@ -0,0 +1,9 @@
+.productcard {
+    position: relative;
+    cursor: pointer;
+    transition: 0.3s !important;
+}
+
+.addbtn:hover {
+    transition: 0.3s;
+}