(pricing):Improve mobile performance

_headers

@@ -1,17 +1,35 @@
-# Cache static resources for 10 months
+# Default: no cache for HTML files (allow fresh content)
+/*.html
+  Cache-Control: public, max-age=3600, must-revalidate
+
+# Cache immutable assets (with content hash) for 1 year
+/framework-*.js
+/app-*.js
 /*.js
 /*.css
+  Cache-Control: public, max-age=31536000, immutable
+
+# Cache images and fonts for 1 year
 /*.woff2
 /*.webp
 /*.jpeg
 /*.webp
 /*.gif
 /*.svg
-  Cache-Control: public, max-age=25920000
+/images/*
+/fonts/*
+  Cache-Control: public, max-age=31536000, immutable
 
-# Cache HTML files for 10 months
-/*.html
-  Cache-Control: public, max-age=25920000
+# Cache static files
+/static/*
+  Cache-Control: public, max-age=31536000, immutable
+
+# Security headers
+/*
+  X-Frame-Options: SAMEORIGIN
+  X-Content-Type-Options: nosniff
+  X-XSS-Protection: 1; mode=block
+  Referrer-Policy: strict-origin-when-cross-origin
 
 
 

src/components/Pricing/PlanCard/index.js

@@ -18,7 +18,6 @@ const PlanCard = ({ planData, isYearly, currency }) => {
 
   const formatPrice = (price) => {
     const formattedPrice = formatAndConvertPrice(price, currency);
-    // Remove the currency symbol by extracting only the numeric part
     return parseFloat(formattedPrice.replace(/[^0-9.]/g, ""));
   };
   const getCurrencySymbol = (currency) => {
@@ -30,7 +29,6 @@ const PlanCard = ({ planData, isYearly, currency }) => {
       <Container>
         <Row $Hcenter className="plan-card-row">
           {planData.map((x) => (
-            // <Col $xl={4} $lg={2} $md={1} $sm={1} key={x.tier}>
             <Col key={x.tier} className="plan-card-col">
               <div className={`${x.featured ? "featured" : ""} pricing-table`}>
 
@@ -64,7 +62,6 @@ const PlanCard = ({ planData, isYearly, currency }) => {
 
 
                 <Button
-                  // disabled={x.tier === "Team Operator"}
                   $primary
                   className={
                     x.button[0] === "Coming Soon"
@@ -81,7 +78,6 @@ const PlanCard = ({ planData, isYearly, currency }) => {
                 <div className="pricing-features">
                   {x.summary &&
                     x.summary.map((t, index) => {
-                      // Check if this is the first add-on feature
                       const isFirstAddOn = t.categoryOrder === "add-on" &&
                         (index === 0 || x.summary[index - 1].categoryOrder !== "add-on");
 
@@ -115,4 +111,4 @@ const PlanCard = ({ planData, isYearly, currency }) => {
   );
 };
 
-export default PlanCard;
+export default React.memo(PlanCard);

src/components/Pricing/PricingAddons/index.js

@@ -1,5 +1,4 @@
-/* eslint-disable indent */
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
 import {
   Container,
   Card,
@@ -41,9 +40,8 @@ import {
 } from "./styles";
 import { formatAndConvertPrice, formatSliderPrice } from "../../../utils/currencies";
 
-export const PricingAddons = ({ isYearly = false, setIsYearly, currency, enterprisePlan }) => {
+export const PricingAddons = React.memo(({ isYearly = false, setIsYearly, currency, enterprisePlan }) => {
   const [selectedAddon, setSelectedAddon] = useState(null);
-  // const [quantity, setQuantity] = useState(1);
   const quantity = 1;
   const [selectedSubAddOns, setSelectedSubAddOns] = useState({});
   const [totalPrice, setTotalPrice] = useState(0);
@@ -62,7 +60,6 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, currency, enterpr
   return learners.toLocaleString("en-US");
 };
 
-  // Helper function to render icons based on type
   const renderIcon = (iconType) => {
     switch (iconType) {
       case "academy":
@@ -128,27 +125,26 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, currency, enterpr
     }
   }, [selectedAddon, quantity, quantityIndex, selectedSubAddOns, isYearly, enterpriseUsers, enterprisePlan]);
 
-  const handleAddonChange = (addonId) => {
+  const handleAddonChange = useCallback((addonId) => {
     const addon = addOns.find((a) => a.id === addonId);
     setSelectedAddon(addon || null);
     setQuantityIndex(0);
 
-    // Always select "academy-theory" if academy is chosen
     if (addon?.id === "academy") {
       setSelectedSubAddOns({ "academy-theory": true });
     } else {
       setSelectedSubAddOns({});
     }
-  };
+  }, [addOns]);
 
-  const handleSubAddOnToggle = (subAddOnId, isChecked) => {
+  const handleSubAddOnToggle = useCallback((subAddOnId, isChecked) => {
     setSelectedSubAddOns(prev => ({
       ...prev,
       [subAddOnId]: isChecked
     }));
-  };
+  }, []);
 
-  const getPlanLinkForAcademy = () => {
+  const getPlanLinkForAcademy = useCallback(() => {
     if (!selectedAddon || selectedAddon.id !== "academy") {
       return { link: "#", name: "Subscribe" };
     }
@@ -180,9 +176,9 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, currency, enterpr
     }
 
     return { link: "#", name: "Subscribe" };
-  };
+  }, [selectedAddon, quantityIndex, isYearly]);
 
-  const getPlanLinkForOtherAddons = () => {
+  const getPlanLinkForOtherAddons = useCallback(() => {
     if (!selectedAddon || selectedAddon.id === "academy") {
       return { link: "#", name: "Subscribe" };
     }
@@ -191,7 +187,7 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, currency, enterpr
       link: "#",
       name: "Subscribe"
     };
-  };
+  }, [selectedAddon]);
 
   return (
     <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
@@ -337,7 +333,6 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, currency, enterpr
                           min={0}
                           valueLabelDisplay="auto"
                           valueLabelFormat={(value) => {
-                            // Determine which sub-addon to show pricing for
                             let targetSubAddon = null;
                             if (selectedSubAddOns["academy-practical"]) {
                               targetSubAddon = selectedAddon?.subAddOns?.find(sub => sub.id === "academy-practical");
@@ -356,7 +351,6 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, currency, enterpr
                             return "";
                           }}
                           max={(() => {
-                            // Determine which sub-addon to use for max value
                             let targetSubAddon = null;
                             if (selectedSubAddOns["academy-practical"]) {
                               targetSubAddon = selectedAddon?.subAddOns?.find(sub => sub.id === "academy-practical");
@@ -576,4 +570,4 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, currency, enterpr
       </CssBaseline>
     </SistentThemeProvider>
   );
-};
+});

src/html.js

@@ -12,7 +12,6 @@ export default function HTML(props) {
           content="width=device-width, initial-scale=1, shrink-to-fit=no"
         />
         { }
-        <link rel="preconnect" href="https://fonts.gstatic.com/" crossOrigin="anonymous" />
         <link
           rel="preload"
           as="style"

src/reusecore/Blockquote/Blockquote-image/index.js

@@ -10,7 +10,7 @@ const Customers = (props) => {
         <section className="bq-section">
           <div className="type-one-wrapper type-one-wrapper-boxed">
             <div className="bq-quote type-one-quote">
-              <div className="type-one-quote-userpic"><img src={props.image}></img></div>
+              <div className="type-one-quote-userpic"><img src={props.image} alt={props.person} loading="lazy"></img></div>
               <div className="type-one-quote-qmark">
                 &#10077;
               </div>
@@ -41,7 +41,7 @@ const Customers = (props) => {
                   </div>
                 </div>
 
-                <div className="type-two-quote-userpic"><img  src={props.image} alt=""></img></div>
+                <div className="type-two-quote-userpic"><img src={props.image} alt={props.person} loading="lazy"></img></div>
 
                 <div className="type-two-quote-base">
                   <blockquote className="type-two-quote-text">
@@ -71,7 +71,7 @@ const Customers = (props) => {
                     {props.quote}
                   </blockquote>
                   <div className="type-three-quote-meta">
-                    <div className="type-three-quote-userpic"><img src={props.image}></img></div>
+                    <div className="type-three-quote-userpic"><img src={props.image} alt={props.person} loading="lazy"></img></div>
                     <div className="type-three-quote-meta-info">
                       <div className="type-three-quote-author"><cite>{props.person ? props.person : ""}</cite></div>
                       <div className="type-three-quote-source"><span>{props.title ? props.title : ""}</span></div>
@@ -87,4 +87,4 @@ const Customers = (props) => {
   );
 };
 
-export default Customers;
+export default React.memo(Customers);

src/sections/Pricing/comparison.js

@@ -2,7 +2,6 @@ import React from "react";
 import styled from "styled-components";
 import details  from "./generateDetails";
 import { Container } from "../../reusecore/Layout";
-// import FeatureDetails from "./collapsible-details";
 import FeatureDetails from "../../components/Pricing/PlanCard/collapsible-details";
 
 
@@ -244,4 +243,4 @@ const Comparison = () => {
   );
 };
 
-export default Comparison;
+export default React.memo(Comparison);