tabexseriescomponents 0.0.71 → 0.0.73

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/{src1-10 → srcOLD}/index.jsx

@@ -14,11 +14,8 @@ 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';
 // //Sections
 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 Backgroundimage_with_toppill from './TabexComponents/Sections/BackgroundImages/Backgroundimage_with_toppill/Backgroundimage_with_toppill.jsx';
 import BackgroundimageandTextsection from './TabexComponents/Sections/BackgroundImages/BackgroundimageandTextsection/BackgroundimageandTextsection.jsx';
@@ -44,6 +41,7 @@ import Slideshowzoom from './TabexComponents/Sections/Slideshow/Slideshowzoom/Sl
 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';
@@ -104,11 +102,11 @@ const returnLibrary = () => {
         AccountInformation: AccountInformation,
         Policies: Policies,
         CartSlider: CartSlider,
-        Categoriesdropdown: Categoriesdropdown,
 
         Header8: Header8,
         AllinoneHeader: AllinoneHeader,
         Header_threesectionslogocentered: Header_threesectionslogocentered,
+        Header4: Header4,
         Header6: Header6,
         HeaderRestaurant: HeaderRestaurant,
         HeaderwithContactinfo: HeaderwithContactinfo,
@@ -171,8 +169,6 @@ const returnLibrary = () => {
         Slideshowslide: Slideshowslide,
         Slideshowzoom: Slideshowzoom,
         CardsSection: CardsSection,
-        CardsSection2: CardsSection2,
-        Sixverticalcardssection: Sixverticalcardssection,
         Backgroundimage1: Backgroundimage1,
     };
 };

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;
+}

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

@@ -0,0 +1,137 @@
+.productcard {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    word-wrap: break-word;
+    background-clip: border-box;
+    /* padding: 0.5em 0.8em; */
+    transition: all 0.2s;
+}
+.productcard .pill {
+    width: 5.5vh;
+    height: 3.5vh;
+    color: black;
+    padding: 0 1%;
+    display: flex;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+    border-radius: 20px;
+    font-size: 12px;
+    font-weight: 500;
+}
+.productcard .centered {
+    top: 50%;
+}
+
+.productcard .centered .circle {
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    /* box-shadow: inset 0 0 0 1px white; */
+}
+.productcard .centered .circle img {
+    max-height: 100%;
+    max-width: 100%;
+    background-color: transparent;
+}
+
+.viewcards {
+    position: relative;
+    display: flex;
+
+    min-width: 0;
+    word-wrap: break-word;
+    background-color: #fff;
+    background-clip: border-box;
+    border: 1px solid #e6e6e6;
+    border-radius: 7px;
+    padding: 0px;
+
+    box-shadow: 0 0 9px #ccc;
+    /* border-width: 0; */
+    transition: all 0.2s;
+}
+.viewcards img {
+    max-height: 80% !important;
+    max-width: 80% !important;
+}
+.viewcards:hover {
+    background-color: orange !important;
+    transition: 0.3s !important;
+}
+.viewcards:active {
+    background-color: orange !important;
+}
+.viewcards .active {
+    border-radius: 7px;
+
+    background-color: orange !important;
+}
+.productmodal .centered {
+    top: 50%;
+}
+.productmodal .centered .circle {
+    background: orange;
+    border-radius: 50%;
+    width: 280px;
+    height: 280px;
+    border: 4px solid orange;
+    box-shadow: inset 0 0 0 2px white;
+}
+.productmodal .centered .circle img {
+    max-height: 100%;
+    max-width: 100%;
+    background-color: transparent;
+}
+.productmodal .colors .circle {
+    background: orange;
+    border-radius: 50%;
+    width: 22px;
+    height: 22px;
+}
+.productmodal .colors .circle:hover {
+    box-shadow: inset 0 0 0 1px white !important;
+}
+.productmodal .sizecards {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 3px;
+
+    word-wrap: break-word;
+    background-color: #fff;
+    background-clip: border-box;
+    border: 1px solid #e6e6e6;
+    border-radius: 7px;
+    padding: 0px;
+
+    box-shadow: 0 0 9px #ccc;
+    /* border-width: 0; */
+    transition: all 0.2s;
+}
+.productmodal .sizecards:hover {
+    background: orange !important;
+    transition: 0.3s !important;
+}
+.addtocart {
+    border-radius: 10px;
+    height: 40px;
+}
+@media screen and (max-width: 800px) {
+    .productmodal .centered .circle {
+        background: orange;
+        border-radius: 50%;
+        width: 180px;
+        height: 180px;
+        border: 4px solid orange;
+        box-shadow: inset 0 0 0 2px white;
+    }
+    .viewcards img {
+        max-height: 100% !important;
+        max-width: 100% !important;
+    }
+}

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

@@ -0,0 +1,51 @@
+.productcard {
+	position: relative;
+}
+.productcard .card_thumbnail .wishlistbtn {
+	position: absolute;
+	top: 5px;
+	right: 5px;
+	opacity: 0;
+	transition: .3s
+}
+.productcard .card_inner {
+	position: relative;
+	z-index: 1
+}
+.productcard .card_inner:hover .card_thumbnail .wishlistbtn {
+	opacity: 1;
+	z-index: 8
+}
+.wishlistbtn  {
+	transform: translateX(10px);
+	transition: .3s;
+	transition-property: transform;
+	display: block
+
+}
+.productcard .card_inner:hover .wishlistbtn  {
+	transform: translateX(0)
+}
+.productcard .product_details {
+	padding-top: 10px ;
+
+}
+.productcard .card_informationcontainer {
+	/* display: none; */
+	padding: 0 10px;
+	/* width: 101% !important;
+	left: -1px; */
+}
+.productcard .card_informationcontainer .price {
+	display: none
+}
+.productcard .card_inner:hover .card_informationcontainer {
+	display: block;
+	z-index: 1000 !important
+}
+@media screen and (max-width:800px) {
+	.productcard .card_informationcontainer {
+		display: block !important;
+		/* border:none !important */
+	}
+}