From 523aaf0a4523c23d1be3b2ea5b54cd52fc0675dd Mon Sep 17 00:00:00 2001 From: npcdazai Date: Thu, 3 Oct 2024 13:26:29 +0530 Subject: [PATCH] Templates --- src/App.css | 91 ++++-- src/Pages/OptiFiiGifsAndVouchers/Preview.jsx | 298 +++++++++++------- .../OptiFiiGifsAndVouchers/Tabs/AllTemp.jsx | 64 +++- src/assets/amazonlogoF.png | Bin 0 -> 6484 bytes src/assets/temp3.png | Bin 0 -> 185263 bytes src/assets/temp5.png | Bin 0 -> 128807 bytes src/assets/temp6.png | Bin 0 -> 127699 bytes src/assets/temp7.png | Bin 0 -> 88204 bytes src/assets/temp8.png | Bin 0 -> 191648 bytes src/styles/ScrollBar.css | 22 ++ 10 files changed, 323 insertions(+), 152 deletions(-) create mode 100644 src/assets/amazonlogoF.png create mode 100644 src/assets/temp3.png create mode 100644 src/assets/temp5.png create mode 100644 src/assets/temp6.png create mode 100644 src/assets/temp7.png create mode 100644 src/assets/temp8.png create mode 100644 src/styles/ScrollBar.css diff --git a/src/App.css b/src/App.css index 38caa2f..e2b0c51 100644 --- a/src/App.css +++ b/src/App.css @@ -1,19 +1,18 @@ @import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"); -@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); -@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"); * { box-sizing: border-box; margin: 0; - padding: 0; + padding: 0; /* font-family: "League Spartan", sans-serif !important; */ /* font-family: "Poppins", sans-serif !important; */ /* font-family: "Lato", sans-serif !important; */ - font-family: "Montserrat", sans-serif !important; } @@ -27,8 +26,7 @@ background: linear-gradient( to right, #7a45fb, - /* #764aaf67, */ - #de41b5 + /* #764aaf67, */ #de41b5 ); /* Gradient background */ -webkit-background-clip: text; /* Clip text to the background area */ -webkit-text-fill-color: transparent; /* Fill text with the background color */ @@ -41,19 +39,23 @@ /* background-color: black; */ font-weight: 600 !important; } -a.active{ +a.active { border-left: 2px solid #fff; - background: linear-gradient(90deg, rgba(55, 37, 234, 0.6) 0%, rgba(94, 15, 205, 0.6) 100%); + background: linear-gradient( + 90deg, + rgba(55, 37, 234, 0.6) 0%, + rgba(94, 15, 205, 0.6) 100% + ); } /* .chakra-accordion__item.css-1t7rcca:has(.active) { background: linear-gradient(90deg, rgba(55, 37, 234, 0.6) 0%, rgba(94, 15, 205, 0.6) 100%); border-left: 2px solid #fff; } */ -.chakra-accordion__item .link:hover{ - background:transparent !important; +.chakra-accordion__item .link:hover { + background: transparent !important; } -.chakra-accordion__item .active{ - background:transparent !important; +.chakra-accordion__item .active { + background: transparent !important; border: none; } .link { @@ -126,7 +128,7 @@ a.active{ } .primary-btn { - background-color: #210A33 !important; + background-color: #210a33 !important; } .team-slider .swiper-button-next:after { @@ -180,7 +182,7 @@ a.active{ animation-iteration-count: 1; } -.table-scroll::-webkit-scrollbar{ +.table-scroll::-webkit-scrollbar { width: 2px !important; height: 10px !important; } @@ -209,9 +211,6 @@ a.active{ background: #0041189a; } - - - #google_translate_element { /* display: none; Hide the default Google Translate dropdown */ @@ -234,10 +233,9 @@ a.active{ color: transparent !important; } - @keyframes text { 0% { - color: #DE858E; + color: #de858e; /* margin-bottom: -40px; */ } 30% { @@ -356,21 +354,17 @@ a.active{ } } - - - - /* ========= [ switch BTN ============ */ - - -/* From Uiverse.io by Nawsome */ +/* From Uiverse.io by Nawsome */ .switch { display: block; background-color: black; width: 85px; height: 115px; - box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black; + box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, + inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, + inset 0 0 2px 22px black; border-radius: 5px; padding: 20px; perspective: 700px; @@ -407,13 +401,25 @@ a.active{ height: 100%; position: relative; cursor: pointer; - background: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%); + background: linear-gradient( + #980000 0%, + #6f0000 30%, + #6f0000 70%, + #980000 100% + ); background-repeat: no-repeat; } .switch .button::before { content: ""; - background: linear-gradient(rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.3) 30%, #650000 75%, #320000) 50% 50%/97% 97%, #b10000; + background: linear-gradient( + rgba(255, 255, 255, 0.8) 10%, + rgba(255, 255, 255, 0.3) 30%, + #650000 75%, + #320000 + ) + 50% 50%/97% 97%, + #b10000; background-repeat: no-repeat; width: 100%; height: 50px; @@ -456,7 +462,15 @@ a.active{ position: absolute; width: 100%; height: 100%; - background: linear-gradient(white, white) 50% 20%/5% 20%, radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80%/33% 25%; + background: linear-gradient(white, white) 50% 20%/5% 20%, + radial-gradient( + circle, + transparent 50%, + white 52%, + white 70%, + transparent 72% + ) + 50% 80%/33% 25%; background-repeat: no-repeat; } @@ -466,7 +480,14 @@ a.active{ position: absolute; width: 100%; height: 100%; - background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%, linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%; + background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%, + linear-gradient( + rgba(255, 255, 255, 0.5), + transparent 50%, + transparent 80%, + rgba(255, 255, 255, 0.5) + ) + 50% 50%/97% 97%; background-repeat: no-repeat; } @@ -504,10 +525,14 @@ a.active{ } } -.react-tel-input .selected-flag:hover, .react-tel-input .selected-flag:focus { +.react-tel-input .selected-flag:hover, +.react-tel-input .selected-flag:focus { background-color: transparent !important; } .react-tel-input .selected-flag { background: transparent !important; padding: 0 0 0 16px !important; } + + +/* Styling the scrollbar */ diff --git a/src/Pages/OptiFiiGifsAndVouchers/Preview.jsx b/src/Pages/OptiFiiGifsAndVouchers/Preview.jsx index 3c0cbef..cbb1261 100644 --- a/src/Pages/OptiFiiGifsAndVouchers/Preview.jsx +++ b/src/Pages/OptiFiiGifsAndVouchers/Preview.jsx @@ -1,126 +1,192 @@ import { - Box, - Icon, - Image, - Tab, - TabList, - TabPanel, - TabPanels, - Tabs, - Text, - } from "@chakra-ui/react"; - import React, { useState } from "react"; - import { OPACITY_ON_LOAD } from "../../Layout/animations"; - import { - FaTv, - FaShoppingCart, - FaUtensils, - FaTshirt, - FaHeart, - } from "react-icons/fa"; - import AllTemp from "./Tabs/AllTemp"; - - const Preview = () => { - const [selectedCard, setSelectedCard] = useState(null); - - const handleCardSelect = (card) => { - setSelectedCard(card); - }; - - const tabData = [ - { - label: "All", - icon: FaTv, - content: ( - - ), - }, - { label: "Thank you", icon: FaTv, content: "Content for Electronics" }, - { - label: "Best wishes", - icon: FaShoppingCart, - content: "Content for Ecommerce", - }, - { - label: "Happy birthday", - icon: FaHeart, - content: "Content for Lifestyle", - }, - { - label: "Congratulations", - icon: FaUtensils, - content: "Content for Food & Beverages", - }, - { label: "Thank you", icon: FaTshirt, content: "Content for Clothing" }, - ]; - - return ( + Box, + Button, + FormLabel, + Icon, + Image, + Tab, + TabList, + TabPanel, + TabPanels, + Tabs, + Text, + Textarea, +} from "@chakra-ui/react"; +import React, { useState } from "react"; +import { OPACITY_ON_LOAD } from "../../Layout/animations"; +import { + FaTv, + FaShoppingCart, + FaUtensils, + FaTshirt, + FaHeart, +} from "react-icons/fa"; +import AllTemp from "./Tabs/AllTemp"; +import amazon from "../../assets/amazonlogoF.png"; + +const Preview = () => { + const [selectedCard, setSelectedCard] = useState(null); + + const handleCardSelect = (card) => { + setSelectedCard(card); + }; + + const tabData = [ + { + label: "All", + icon: FaTv, + content: ( + + ), + }, + { label: "Thank you", icon: FaTv, content: "Content for Electronics" }, + { + label: "Best wishes", + icon: FaShoppingCart, + content: "Content for Ecommerce", + }, + { + label: "Happy birthday", + icon: FaHeart, + content: "Content for Lifestyle", + }, + { + label: "Congratulations", + icon: FaUtensils, + content: "Content for Food & Beverages", + }, + { label: "Thank you", icon: FaTshirt, content: "Content for Clothing" }, + ]; + + return ( + + + + Select template + + + Category + + + + {tabData.map((tab, index) => ( + + + {tab.label} + + ))} + + + {/* Mapping through tabData to create tab panels */} + + {tabData.map((tab, index) => ( + +

{tab.content}

+ + ))} + + + + - - - - {tabData.map((tab, index) => ( - - - {tab.label} - - ))} - - - {/* Mapping through tabData to create tab panels */} - - {tabData.map((tab, index) => ( - -

{tab.content}

- - ))} - - - - - - - Preview: - - {selectedCard ? ( - <> - {selectedCard.title} - + + Preview: + + {selectedCard ? ( + <> + {selectedCard.title} + + + + + Hi Receiver, + + + You’ve got a Amazon pay E-Gift card + + + + Type your message + +