diy-template-components 2.0.25 → 2.0.27

package/build/index.js

@@ -678,6 +678,14 @@ var calendar$1 = "data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%
 
 var video = "data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2219%22%20viewBox%3D%220%200%2018%2019%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.8625%205.1275C15.555%204.9625%2014.91%204.79%2014.0325%205.405L12.93%206.185C12.8475%203.8525%2011.835%202.9375%209.375%202.9375H4.875C2.31%202.9375%201.3125%203.935%201.3125%206.5V12.5C1.3125%2014.225%202.25%2016.0625%204.875%2016.0625H9.375C11.835%2016.0625%2012.8475%2015.1475%2012.93%2012.815L14.0325%2013.595C14.4975%2013.925%2014.9025%2014.03%2015.225%2014.03C15.5025%2014.03%2015.72%2013.9475%2015.8625%2013.8725C16.17%2013.715%2016.6875%2013.2875%2016.6875%2012.215V6.785C16.6875%205.7125%2016.17%205.285%2015.8625%205.1275ZM8.25%209.035C7.4775%209.035%206.84%208.405%206.84%207.625C6.84%206.845%207.4775%206.215%208.25%206.215C9.0225%206.215%209.66%206.845%209.66%207.625C9.66%208.405%209.0225%209.035%208.25%209.035Z%22%20fill%3D%22%23589DF5%22%2F%3E%3C%2Fsvg%3E";
 
+var bookSavedIcon = "data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22vuesax%2Foutline%2Fbook-saved%22%3E%3Cg%20id%3D%22book-saved%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M9.9998%2018.4C9.7498%2018.4%209.49982%2018.3417%209.29148%2018.225C7.73315%2017.375%204.9998%2016.475%203.28313%2016.25L3.04148%2016.2167C1.94982%2016.0834%201.0498%2015.0583%201.0498%2013.95V3.88333C1.0498%203.225%201.30814%202.62503%201.78314%202.19169C2.25814%201.75836%202.87478%201.55002%203.52478%201.60835C5.34978%201.75835%208.11646%202.67503%209.68313%203.65003L9.88312%203.76671C9.94145%203.79171%2010.0665%203.80004%2010.1165%203.76671L10.2498%203.68334C10.8081%203.33334%2011.5081%202.99166%2012.2748%202.68333C12.4664%202.60833%2012.6831%202.63335%2012.8581%202.75001C13.0331%202.86668%2013.1331%203.05834%2013.1331%203.26667V5.5L13.8248%205.04168C14.0332%204.90001%2014.3081%204.90001%2014.5164%205.04168L15.2081%205.5V2.31671C15.2081%202.01671%2015.4248%201.75834%2015.7165%201.7C15.9581%201.65834%2016.1998%201.62502%2016.4165%201.60835C16.4331%201.60835%2016.4998%201.60835%2016.5165%201.60835C17.1248%201.55835%2017.7498%201.7667%2018.2165%202.20003C18.6915%202.63337%2018.9498%203.23334%2018.9498%203.89167V13.95C18.9498%2015.0667%2018.0498%2016.0834%2016.9498%2016.2167L16.6748%2016.25C14.9581%2016.475%2012.2081%2017.3834%2010.6831%2018.225C10.4998%2018.3417%2010.2498%2018.4%209.9998%2018.4ZM3.31645%202.84167C3.04978%202.84167%202.80814%202.93334%202.61648%203.10834C2.40814%203.30001%202.29146%203.575%202.29146%203.88333V13.95C2.29146%2014.4417%202.71648%2014.9167%203.19148%2014.9833L3.44147%2015.0167C5.31647%2015.2667%208.19148%2016.2083%209.85814%2017.125C9.93314%2017.1583%2010.0414%2017.1667%2010.0831%2017.15C11.7581%2016.225%2014.6415%2015.275%2016.5248%2015.025L16.8081%2014.9917C17.2831%2014.9333%2017.7081%2014.45%2017.7081%2013.9584V3.90002C17.7081%203.59168%2017.5915%203.32502%2017.3831%203.12502C17.1748%202.93336%2016.8832%202.84168%2016.5832%202.85835C16.5582%202.85835%2016.4831%202.85835%2016.4665%202.85835V6.66669C16.4665%206.90002%2016.3415%207.10833%2016.1331%207.21667C15.9248%207.325%2015.6832%207.31669%2015.4915%207.18335L14.1748%206.30836L12.8581%207.18335C12.6665%207.30835%2012.4248%207.325%2012.2164%207.21667C12.0164%207.10833%2011.8831%206.90002%2011.8831%206.66669V4.22503C11.5248%204.40003%2011.1998%204.57502%2010.9164%204.74169L10.7831%204.825C10.3248%205.10834%209.67481%205.10835%209.23314%204.83335L9.03315%204.70838C7.62482%203.82504%205.05812%202.975%203.42478%202.84167C3.38312%202.84167%203.34978%202.84167%203.31645%202.84167Z%22%20fill%3D%22%230A1629%22%2F%3E%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M10%2017.7002C9.65833%2017.7002%209.375%2017.4169%209.375%2017.0752V4.5752C9.375%204.23353%209.65833%203.9502%2010%203.9502C10.3417%203.9502%2010.625%204.23353%2010.625%204.5752V17.0752C10.625%2017.4252%2010.3417%2017.7002%2010%2017.7002Z%22%20fill%3D%22%230A1629%22%2F%3E%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M15.8333%207.29166C15.7083%207.29166%2015.5917%207.25832%2015.4833%207.18332L14.1667%206.30833L12.85%207.18332C12.6583%207.30832%2012.4167%207.32497%2012.2084%207.21664C12.0084%207.1083%2011.875%206.89999%2011.875%206.66666V3.26664C11.875%203.00831%2012.0333%202.7833%2012.2666%202.6833C13.4166%202.22497%2014.675%201.86664%2015.7333%201.69997C15.9167%201.66664%2016.1%201.72501%2016.2417%201.84168C16.3833%201.95834%2016.4583%202.13335%2016.4583%202.31668V6.66666C16.4583%206.89999%2016.3333%207.1083%2016.125%207.21664C16.0333%207.26663%2015.9333%207.29166%2015.8333%207.29166ZM14.1667%204.93331C14.2833%204.93331%2014.4083%204.96665%2014.5167%205.04165L15.2083%205.49997V3.07499C14.5417%203.22499%2013.8167%203.44166%2013.125%203.69999V5.49997L13.8167%205.04165C13.925%204.96665%2014.05%204.93331%2014.1667%204.93331Z%22%20fill%3D%22%230A1629%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E";
+
+var teacherIcon = "data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22vuesax%2Foutline%2Fteacher%22%3E%3Cg%20id%3D%22teacher%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M10.0083%2014.1669C9.29994%2014.1669%208.58327%2013.9836%208.02494%2013.6252L3.00827%2010.3502C2.07493%209.74191%201.5166%208.71691%201.5166%207.60024C1.5166%206.48358%202.07493%205.45858%203.00827%204.85024L8.03327%201.58358C9.14994%200.858576%2010.8916%200.858576%2011.9999%201.59191L16.9916%204.86691C17.9166%205.47524%2018.4749%206.50024%2018.4749%207.60858C18.4749%208.71691%2017.9166%209.74191%2016.9916%2010.3502L11.9999%2013.6252C11.4416%2013.9919%2010.7249%2014.1669%2010.0083%2014.1669ZM10.0083%202.29191C9.53327%202.29191%209.05827%202.40024%208.7166%202.63358L3.69993%205.90024C3.1166%206.28358%202.77493%206.90024%202.77493%207.60024C2.77493%208.30024%203.10827%208.91691%203.69993%209.30024L8.7166%2012.5752C9.40827%2013.0252%2010.6249%2013.0252%2011.3166%2012.5752L16.3083%209.30024C16.8916%208.91691%2017.2249%208.30024%2017.2249%207.60024C17.2249%206.90024%2016.8916%206.28358%2016.3083%205.90024L11.3166%202.62524C10.9666%202.40858%2010.4916%202.29191%2010.0083%202.29191Z%22%20fill%3D%22%230A1629%22%2F%3E%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M10.0003%2018.9584C9.63365%2018.9584%209.25865%2018.9084%208.95865%2018.8084L6.30031%2017.925C5.04198%2017.5084%204.05031%2016.1334%204.05865%2014.8084L4.06698%2010.9C4.06698%2010.5584%204.35031%2010.275%204.69198%2010.275C5.03365%2010.275%205.31698%2010.5584%205.31698%2010.9L5.30865%2014.8084C5.30865%2015.5917%205.95865%2016.4917%206.70031%2016.7417L9.35865%2017.625C9.69198%2017.7334%2010.3086%2017.7334%2010.642%2017.625L13.3003%2016.7417C14.042%2016.4917%2014.692%2015.5917%2014.692%2014.8167V10.95C14.692%2010.6084%2014.9753%2010.325%2015.317%2010.325C15.6586%2010.325%2015.942%2010.6084%2015.942%2010.95V14.8167C15.942%2016.1417%2014.9586%2017.5084%2013.7003%2017.9334L11.042%2018.8167C10.742%2018.9084%2010.367%2018.9584%2010.0003%2018.9584Z%22%20fill%3D%22%230A1629%22%2F%3E%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M17.834%2013.125C17.4923%2013.125%2017.209%2012.8417%2017.209%2012.5V7.5C17.209%207.15833%2017.4923%206.875%2017.834%206.875C18.1757%206.875%2018.459%207.15833%2018.459%207.5V12.5C18.459%2012.8417%2018.1757%2013.125%2017.834%2013.125Z%22%20fill%3D%22%230A1629%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E";
+
+var medalIcon = "data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22vuesax%2Foutline%2Fmedal-star%22%3E%3Cg%20id%3D%22medal-star%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M10.0003%2013.9583C9.66699%2013.9583%209.33366%2013.9333%209.01699%2013.875C7.25033%2013.6167%205.64199%2012.6%204.62533%2011.0917C3.91699%2010.025%203.54199%208.78332%203.54199%207.49999C3.54199%203.94166%206.44199%201.04166%2010.0003%201.04166C13.5587%201.04166%2016.4587%203.94166%2016.4587%207.49999C16.4587%208.78332%2016.0837%2010.025%2015.3753%2011.0917C14.3503%2012.6083%2012.742%2013.6167%2010.9587%2013.8833C10.667%2013.9333%2010.3337%2013.9583%2010.0003%2013.9583ZM10.0003%202.29166C7.12533%202.29166%204.79199%204.62499%204.79199%207.49999C4.79199%208.54166%205.09199%209.54166%205.65866%2010.3917C6.48366%2011.6083%207.77533%2012.425%209.20866%2012.6333C9.74199%2012.725%2010.267%2012.725%2010.7587%2012.6333C12.217%2012.425%2013.5087%2011.6%2014.3337%2010.3833C14.9003%209.53332%2015.2003%208.53332%2015.2003%207.49165C15.2087%204.62498%2012.8753%202.29166%2010.0003%202.29166Z%22%20fill%3D%22%230A1629%22%2F%3E%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M5.39111%2018.825C5.27444%2018.825%205.16611%2018.8083%205.04944%2018.7833C4.50777%2018.6583%204.09111%2018.2416%203.96611%2017.7L3.67444%2016.475C3.65777%2016.4%203.59944%2016.3416%203.51611%2016.3166L2.14111%2015.9917C1.62444%2015.8667%201.21611%2015.4833%201.07444%2014.975C0.932774%2014.4667%201.07444%2013.9167%201.44944%2013.5417L4.69944%2010.2917C4.83277%2010.1583%205.01611%2010.0917%205.19944%2010.1083C5.38277%2010.125%205.54944%2010.225%205.65777%2010.3833C6.48277%2011.6%207.77444%2012.425%209.21611%2012.6333C9.74944%2012.725%2010.2744%2012.725%2010.7661%2012.6333C12.2244%2012.425%2013.5161%2011.6%2014.3411%2010.3833C14.4411%2010.225%2014.6161%2010.125%2014.7994%2010.1083C14.9828%2010.0917%2015.1661%2010.1583%2015.2994%2010.2917L18.5494%2013.5417C18.9244%2013.9167%2019.0661%2014.4667%2018.9244%2014.975C18.7828%2015.4833%2018.3661%2015.875%2017.8578%2015.9917L16.4828%2016.3166C16.4078%2016.3333%2016.3494%2016.3916%2016.3244%2016.475L16.0328%2017.7C15.9078%2018.2416%2015.4911%2018.6583%2014.9494%2018.7833C14.4078%2018.9167%2013.8494%2018.725%2013.4994%2018.3L9.99944%2014.275L6.49944%2018.3083C6.21611%2018.6417%205.81611%2018.825%205.39111%2018.825ZM5.07444%2011.6916L2.33277%2014.4333C2.25777%2014.5083%202.26611%2014.5917%202.28277%2014.6417C2.29111%2014.6833%202.33277%2014.7666%202.43277%2014.7833L3.80777%2015.1083C4.34944%2015.2333%204.76611%2015.65%204.89111%2016.1916L5.18277%2017.4166C5.20777%2017.525%205.29111%2017.5583%205.34111%2017.575C5.39111%2017.5833%205.47444%2017.5917%205.54944%2017.5083L8.74111%2013.8333C7.32444%2013.5583%206.02444%2012.8%205.07444%2011.6916ZM11.2578%2013.825L14.4494%2017.4916C14.5244%2017.5833%2014.6161%2017.5833%2014.6661%2017.5666C14.7161%2017.5583%2014.7911%2017.5167%2014.8244%2017.4083L15.1161%2016.1833C15.2411%2015.6417%2015.6578%2015.225%2016.1994%2015.1L17.5744%2014.775C17.6744%2014.75%2017.7161%2014.675%2017.7244%2014.6333C17.7411%2014.5916%2017.7494%2014.5%2017.6744%2014.425L14.9328%2011.6833C13.9744%2012.7916%2012.6828%2013.55%2011.2578%2013.825Z%22%20fill%3D%22%230A1629%22%2F%3E%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M11.5753%2010.7419C11.3586%2010.7419%2011.1003%2010.6835%2010.7919%2010.5002L10.0003%2010.0252L9.20861%2010.4919C8.48361%2010.9252%208.00861%2010.6752%207.83361%2010.5502C7.65861%2010.4252%207.28361%2010.0502%207.47528%209.22521L7.67528%208.36688L7.00861%207.75019C6.64195%207.38353%206.50861%206.94188%206.63361%206.54188C6.75861%206.14188%207.12528%205.85853%207.64195%205.7752L8.53361%205.6252L8.95861%204.69187C9.20028%204.21687%209.57528%203.9502%2010.0003%203.9502C10.4253%203.9502%2010.8086%204.22522%2011.0419%204.70022L11.5336%205.68354L12.3586%205.78354C12.8669%205.86687%2013.2336%206.15019%2013.3669%206.55019C13.4919%206.95019%2013.3586%207.39187%2012.9919%207.75853L12.3003%208.45022L12.5169%209.22521C12.7086%2010.0502%2012.3336%2010.4252%2012.1586%2010.5502C12.0669%2010.6252%2011.8669%2010.7419%2011.5753%2010.7419ZM8.00861%206.99188L8.58361%207.56686C8.85028%207.83353%208.98361%208.28354%208.90028%208.65021L8.74195%209.31686L9.40861%208.9252C9.76695%208.71686%2010.2503%208.71686%2010.6003%208.9252L11.2669%209.31686L11.1169%208.65021C11.0336%208.27521%2011.1586%207.83353%2011.4253%207.56686L12.0003%206.99188L11.2753%206.86686C10.9253%206.80853%2010.5753%206.55021%2010.4169%206.23355L10.0003%205.41687L9.58361%206.2502C9.43361%206.55854%209.08361%206.82521%208.73361%206.88355L8.00861%206.99188Z%22%20fill%3D%22%230A1629%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E";
+
+var groupProfile = "data:image/svg+xml,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22vuesax%2Foutline%2Fprofile-2user%22%3E%3Cg%20id%3D%22profile-2user%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M12.2124%2015.4933C12.1724%2015.4933%2012.1458%2015.4933%2012.1058%2015.4933C12.0391%2015.48%2011.9458%2015.48%2011.8658%2015.4933C7.9991%2015.3733%205.0791%2012.3333%205.0791%208.58666C5.0791%204.77332%208.18577%201.66666%2011.9991%201.66666C15.8124%201.66666%2018.9191%204.77332%2018.9191%208.58666C18.9058%2012.3333%2015.9724%2015.3733%2012.2524%2015.4933C12.2391%2015.4933%2012.2258%2015.4933%2012.2124%2015.4933ZM11.9991%203.66666C9.29244%203.66666%207.0791%205.87999%207.0791%208.58666C7.0791%2011.2533%209.1591%2013.4%2011.8124%2013.4933C11.8924%2013.48%2012.0658%2013.48%2012.2391%2013.4933C14.8524%2013.3733%2016.9058%2011.2267%2016.9191%208.58666C16.9191%205.87999%2014.7058%203.66666%2011.9991%203.66666Z%22%20fill%3D%22%230A1629%22%2F%3E%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M22.0522%2015.6667C22.0122%2015.6667%2021.9722%2015.6667%2021.9322%2015.6533C21.3855%2015.7067%2020.8255%2015.32%2020.7722%2014.7733C20.7188%2014.2267%2021.0522%2013.7333%2021.5988%2013.6667C21.7588%2013.6533%2021.9322%2013.6533%2022.0788%2013.6533C24.0255%2013.5467%2025.5455%2011.9467%2025.5455%209.98668C25.5455%207.96001%2023.9055%206.32001%2021.8788%206.32001C21.3322%206.33334%2020.8788%205.88001%2020.8788%205.33334C20.8788%204.78668%2021.3322%204.33334%2021.8788%204.33334C24.9988%204.33334%2027.5455%206.88001%2027.5455%2010C27.5455%2013.0667%2025.1455%2015.5467%2022.0922%2015.6667C22.0788%2015.6667%2022.0655%2015.6667%2022.0522%2015.6667Z%22%20fill%3D%22%230A1629%22%2F%3E%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M12.2261%2030.0666C9.61281%2030.0666%206.98615%2029.4%204.99948%2028.0666C3.14615%2026.84%202.13281%2025.16%202.13281%2023.3333C2.13281%2021.5066%203.14615%2019.8133%204.99948%2018.5733C8.99948%2015.92%2015.4795%2015.92%2019.4528%2018.5733C21.2928%2019.8%2022.3195%2021.48%2022.3195%2023.3066C22.3195%2025.1333%2021.3061%2026.8266%2019.4528%2028.0666C17.4528%2029.4%2014.8395%2030.0666%2012.2261%2030.0666ZM6.10615%2020.2533C4.82615%2021.1066%204.13281%2022.2%204.13281%2023.3466C4.13281%2024.48%204.83948%2025.5733%206.10615%2026.4133C9.42615%2028.64%2015.0261%2028.64%2018.3461%2026.4133C19.6261%2025.56%2020.3195%2024.4666%2020.3195%2023.32C20.3195%2022.1866%2019.6128%2021.0933%2018.3461%2020.2533C15.0261%2018.04%209.42615%2018.04%206.10615%2020.2533Z%22%20fill%3D%22%230A1629%22%2F%3E%3Cpath%20id%3D%22Vector_4%22%20d%3D%22M24.4526%2027.6667C23.9859%2027.6667%2023.5726%2027.3467%2023.4792%2026.8667C23.3726%2026.32%2023.7192%2025.8%2024.2526%2025.68C25.0926%2025.5067%2025.8659%2025.1734%2026.4659%2024.7067C27.2259%2024.1334%2027.6392%2023.4134%2027.6392%2022.6534C27.6392%2021.8934%2027.2259%2021.1734%2026.4792%2020.6134C25.8926%2020.16%2025.1592%2019.84%2024.2926%2019.64C23.7592%2019.52%2023.4126%2018.9867%2023.5326%2018.44C23.6526%2017.9067%2024.1859%2017.56%2024.7326%2017.68C25.8792%2017.9334%2026.8792%2018.3867%2027.6926%2019.0134C28.9326%2019.9467%2029.6392%2021.2667%2029.6392%2022.6534C29.6392%2024.04%2028.9192%2025.36%2027.6792%2026.3067C26.8526%2026.9467%2025.8126%2027.4134%2024.6659%2027.64C24.5859%2027.6667%2024.5192%2027.6667%2024.4526%2027.6667Z%22%20fill%3D%22%230A1629%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E";
+
 /** @returns {import('./types').IconData} */
 const getConfiguredIcon1 = url => ({
   url,
@@ -778,7 +786,11 @@ const icons = {
   'Book Saved': getConfiguredIcon2(bookSaved, false, true),
   Certificate: getConfiguredIcon2(certificate, false, true),
   Calendar: getConfiguredIcon2(calendar$1, false, true),
-  Video: getConfiguredIcon2(video, false, true)
+  Video: getConfiguredIcon2(video, false, true),
+  BookSaved: getConfiguredIcon2(bookSavedIcon, false, true),
+  Teacher: getConfiguredIcon2(teacherIcon, false, true),
+  Medal: getConfiguredIcon2(medalIcon, false, true),
+  GroupProfile: getConfiguredIcon2(groupProfile, false, true)
 };
 
 const someMethod1 = ( /** @type {import('./types').IconData["svgChildrenConfigs"]} */svgChildrenConfigs, color, hoverColor) => {
@@ -9703,7 +9715,8 @@ const useAboutInstituteStyles = createUseStyles(theme => ({
     padding: '64px 128px',
     display: 'flex',
     justifyContent: 'center',
-    flexDirection: 'column'
+    flexDirection: 'column',
+    background: '#FFF'
   },
   abtoutInstText: {
     color: theme?.palette?.font?.secondary,
@@ -9727,7 +9740,10 @@ const useAboutInstituteStyles = createUseStyles(theme => ({
     width: '240px',
     height: '240px',
     borderRadius: '16px',
-    border: '1px solid var(--stroke, #D8E0F0)'
+    border: '1px solid var(--stroke, #D8E0F0)',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
   },
   image: {
     maxWidth: '100%',
@@ -9736,19 +9752,24 @@ const useAboutInstituteStyles = createUseStyles(theme => ({
     borderRadius: '50%'
   },
   infoContainer: {
-    flex: 1,
     padding: '24px',
-    gap: '16px',
+    gap: '24px',
     display: 'flex',
     flexDirection: 'column',
     borderRadius: '16px',
-    background: 'var(--Blue-Tertiary, #F4F9FF)'
+    background: 'var(--Blue-Tertiary, #F4F9FF)',
+    flexGrow: 1
   },
   metaInfo: {
-    display: 'flex'
+    display: 'flex',
+    gap: '24px',
+    flexWrap: 'wrap'
   },
   metaInfoChild: {
-    display: 'flex'
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: '6px'
   },
   contentWrapper: {
     display: 'flex',
@@ -9756,8 +9777,10 @@ const useAboutInstituteStyles = createUseStyles(theme => ({
     marginBottom: '24px'
   },
   cardWrapper: {
+    // display: 'flex',
+    // width: '100%',
+    // gap: '24px'
     display: 'flex',
-    width: '100%',
     gap: '24px'
   },
   card: {
@@ -9766,12 +9789,41 @@ const useAboutInstituteStyles = createUseStyles(theme => ({
     justifyContent: 'space-between',
     borderRadius: '16px',
     background: 'var(--Blue-Tertiary, #F4F9FF)',
-    width: '100%'
+    flexGrow: 1
   },
   cardDesc: {
     display: 'flex',
     flexDirection: 'column'
   },
+  infoDetails: {
+    display: 'flex',
+    flexDirection: 'Column',
+    gap: '12px'
+  },
+  infoContent: {
+    display: 'flex',
+    flexDirection: 'Column',
+    gap: '16px'
+  },
+  instHeading: {
+    color: 'var(--Black, #0A1629)',
+    fontSize: '26px',
+    fontStyle: 'normal',
+    fontWeight: '600'
+  },
+  instAbout: {
+    color: 'var(--Black, #333)',
+    fontSize: '22px',
+    fontStyle: 'normal',
+    fontWeight: '500',
+    wordBreak: 'break-word'
+  },
+  highlightText: {
+    color: 'var(--Black, #0A1629)',
+    fontSize: '26px',
+    fontStyle: 'normal',
+    fontWeight: '600'
+  },
   // SMALL SCREEN
   '@media screen and (max-width: 767px)': {
     imageContainer: {
@@ -9783,16 +9835,23 @@ const useAboutInstituteStyles = createUseStyles(theme => ({
     },
     infoContainer: {},
     cardWrapper: {
-      flexDirection: 'Column'
+      flexDirection: 'column',
+      gap: '8px'
     },
     aboutInstWrapper: {
-      padding: '16px 0'
+      padding: '16px'
     },
     aboutInstHeader: {
       lineHeight: '36px',
       color: theme?.palette?.font?.default,
       margin: '0px 0 12px 0',
       textAlign: 'center'
+    },
+    contentWrapper: {
+      gap: '8px'
+    },
+    card: {
+      padding: '16px'
     }
   }
 }));
@@ -9819,6 +9878,7 @@ function ABOUT_INSTITUTE({
   });
   const [nodeData] = sectionData?.components;
   const [highlightNodeData] = nodeData?.highlight?.components;
+  console.log('about your institute', nodeData, highlightNodeData);
   const theme = useTheme();
   const ImageJSX = () => /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.imageContainer
@@ -9830,87 +9890,103 @@ function ABOUT_INSTITUTE({
   const ContentJSX = () => /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.infoContainer
   }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classes.infoDetails
+  }, nodeData?.instName?.metadata?.value ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classes.instHeading,
     ref: nodeData?.instName?.refSetter,
     dangerouslySetInnerHTML: {
       __html: nodeData?.instName?.metadata?.value
     }
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
+  }) : null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.metaInfo
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, nodeData?.spec?.metadata?.value ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.metaInfoChild
   }, /*#__PURE__*/React__default["default"].createElement(Icon, {
-    name: 'Location',
+    name: 'BookSaved',
     color: theme.palette.font.primary,
-    width: '12px'
+    width: '20px',
+    height: '20px'
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     ref: nodeData?.spec?.refSetter,
     dangerouslySetInnerHTML: {
       __html: nodeData?.spec?.metadata?.value
     }
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
+  })) : null, nodeData?.qual?.metadata?.value ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.metaInfoChild
   }, /*#__PURE__*/React__default["default"].createElement(Icon, {
-    name: 'Location',
+    name: 'Teacher',
     color: theme.palette.font.primary,
-    width: '12px'
+    width: '20px',
+    height: '20px'
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     ref: nodeData?.qual?.refSetter,
     dangerouslySetInnerHTML: {
       __html: nodeData?.qual?.metadata?.value
     }
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
+  })) : null, nodeData?.exp?.metadata?.value ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.metaInfoChild
   }, /*#__PURE__*/React__default["default"].createElement(Icon, {
-    name: 'Location',
+    name: 'Medal',
     color: theme.palette.font.primary,
-    width: '12px'
+    width: '20px',
+    height: '20px'
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     ref: nodeData?.exp?.refSetter,
     dangerouslySetInnerHTML: {
       __html: nodeData?.exp?.metadata?.value
     }
-  }))), /*#__PURE__*/React__default["default"].createElement("div", {
+  })) : null)), nodeData?.content?.metadata?.value ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classes.infoContent
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classes.instAbout
+  }, "About"), /*#__PURE__*/React__default["default"].createElement("div", {
     ref: nodeData?.content?.refSetter,
     dangerouslySetInnerHTML: {
       __html: nodeData?.content?.metadata?.value
     }
-  }));
+  })) : null);
   const HighlightJSX = () => /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.cardWrapper
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.card
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.cardDesc
-  }, /*#__PURE__*/React__default["default"].createElement("span", null, highlightNodeData?.courses?.metadata?.value), /*#__PURE__*/React__default["default"].createElement("span", null, "Courses")), /*#__PURE__*/React__default["default"].createElement(Icon, {
-    name: 'Location',
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: classes.highlightText
+  }, highlightNodeData?.courses?.metadata?.value), /*#__PURE__*/React__default["default"].createElement("span", null, "Courses")), /*#__PURE__*/React__default["default"].createElement(Icon, {
+    name: 'BookSaved',
     color: theme.palette.font.primary,
-    width: '12px'
+    width: '32px',
+    height: '32px'
   })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.card
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.cardDesc
-  }, /*#__PURE__*/React__default["default"].createElement("span", null, highlightNodeData?.students?.metadata?.value), /*#__PURE__*/React__default["default"].createElement("span", null, "Active Students")), /*#__PURE__*/React__default["default"].createElement(Icon, {
-    name: 'Location',
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: classes.highlightText
+  }, highlightNodeData?.students?.metadata?.value), /*#__PURE__*/React__default["default"].createElement("span", null, "Active Students")), /*#__PURE__*/React__default["default"].createElement(Icon, {
+    name: 'GroupProfile',
     color: theme.palette.font.primary,
-    width: '12px'
+    width: '32px',
+    height: '32px'
   })));
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.aboutInstWrapper
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, nodeData?.heading?.metadata?.value ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.aboutInstText
   }, /*#__PURE__*/React__default["default"].createElement("span", {
     ref: nodeData?.heading?.refSetter,
     dangerouslySetInnerHTML: {
       __html: nodeData?.heading?.metadata?.value
     }
-  })), /*#__PURE__*/React__default["default"].createElement("h2", {
+  })) : null, nodeData?.title?.metadata?.value ? /*#__PURE__*/React__default["default"].createElement("h2", {
     className: classes.aboutInstHeader
   }, /*#__PURE__*/React__default["default"].createElement("span", {
     ref: nodeData?.title?.refSetter,
     dangerouslySetInnerHTML: {
       __html: nodeData?.title?.metadata?.value
     }
-  })), isMobile ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+  })) : null, isMobile ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.contentWrapper
   }, /*#__PURE__*/React__default["default"].createElement(ImageJSX, null), /*#__PURE__*/React__default["default"].createElement(HighlightJSX, null)), /*#__PURE__*/React__default["default"].createElement(ContentJSX, null)) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.contentWrapper