English Edits

components/Feature.js

@@ -5,11 +5,11 @@ import getScrollAnimation from "../utils/getScrollAnimation";
 import ScrollAnimationWrapper from "./Layout/ScrollAnimationWrapper";
 
 const features = [
-  "Powerfull online protection.",
+  "Powerful online protection.",
   "Internet without borders.",
   "Supercharged VPN",
-  "No specific time limits."
-]
+  "No specific time limits.",
+];
 
 const Feature = () => {
   const scrollAnimation = useMemo(() => getScrollAnimation(), []);
@@ -33,34 +33,36 @@ const Feature = () => {
           </motion.div>
         </ScrollAnimationWrapper>
         <ScrollAnimationWrapper>
-
-        <motion.div className="flex flex-col items-end justify-center ml-auto w-full lg:w-9/12" variants={scrollAnimation}>
-          <h3 className="text-3xl lg:text-4xl font-medium leading-relaxed text-black-600">
-            We Provide Many Features You Can Use
-          </h3>
-          <p className="my-2 text-black-500">
-            You can explore the features that we provide with fun and have their
-            own functions each feature.
-          </p>
-          <ul className="text-black-500 self-start list-inside ml-8">
-            {features.map((feature, index) => (
-              <motion.li
-                className="relative circle-check custom-list"
-                custom={{duration: 2 + index}}
-                variants={scrollAnimation}
-                key={feature}
-                whileHover={{
-                scale : 1.1,
-                transition: {
-                  duration: .2
-                }
-                }}>
+          <motion.div
+            className="flex flex-col items-end justify-center ml-auto w-full lg:w-9/12"
+            variants={scrollAnimation}
+          >
+            <h3 className="text-3xl lg:text-4xl font-medium leading-relaxed text-black-600">
+              We provide many features you can use.
+            </h3>
+            <p className="my-2 text-black-500">
+              You can explore the features that we provide while having fun.
+              Each feature has its own function.
+            </p>
+            <ul className="text-black-500 self-start list-inside ml-8">
+              {features.map((feature, index) => (
+                <motion.li
+                  className="relative circle-check custom-list"
+                  custom={{ duration: 2 + index }}
+                  variants={scrollAnimation}
+                  key={feature}
+                  whileHover={{
+                    scale: 1.1,
+                    transition: {
+                      duration: 0.2,
+                    },
+                  }}
+                >
                   {feature}
-              </motion.li>
-              )
-            )}
-          </ul>
-        </motion.div>
+                </motion.li>
+              ))}
+            </ul>
+          </motion.div>
         </ScrollAnimationWrapper>
       </div>
     </div>

components/Hero.js

@@ -37,11 +37,11 @@ const Hero = ({
             variants={scrollAnimation}>
             <div className=" flex flex-col justify-center items-start row-start-2 sm:row-start-1">
               <h1 className="text-3xl lg:text-4xl xl:text-5xl font-medium text-black-600 leading-normal">
-                Want anything to be easy with <strong>LaslesVPN</strong>.
+                Everything is easier with <strong>LaslesVPN</strong>.
               </h1>
               <p className="text-black-500 mt-4 mb-6">
-                Provide a network for all your needs with ease and fun using
-                LaslesVPN discover interesting features from us.
+                We provide a network for all your needs with ease and fun. Using 
+                LaslesVPN, discover interesting features from us!
               </p>
               <ButtonPrimary>Get Started</ButtonPrimary>
             </div>

components/Layout/Footer.js

@@ -11,7 +11,7 @@ const Footer = () => {
           <LogoVPN className="h-8 w-auto mb-6" />
           <p className="mb-4">
             <strong className="font-medium">LaslesVPN</strong> is a private
-            virtual network that has unique features and has high security.
+            virtual network that has unique features and high security.
           </p>
           <div className="flex w-full mt-2 mb-8 -mx-2">
             <div className="mx-2 bg-white-500 rounded-full items-center justify-center flex p-2 shadow-md">

components/Pricing.js

@@ -183,10 +183,10 @@ const Pricing = () => {
             <motion.h3
               variants={scrollAnimation}
               className="text-2xl sm:text-3xl lg:text-4xl font-medium text-black-600 leading-relaxed w-9/12 sm:w-6/12 lg:w-4/12 mx-auto">
-              Huge Global Network of Fast VPN{" "}
+              Huge Global Network Powering a Fast VPN{" "}
             </motion.h3>
             <motion.p className="leading-normal  mx-auto my-2 w-10/12 sm:w-7/12 lg:w-6/12" variants={scrollAnimation}>
-              See LaslesVPN everywhere to make it easier for you when you move
+              LaslesVPN  works everywhere to make it easier for you when you move
               locations.
             </motion.p>
           </ScrollAnimationWrapper>
@@ -231,7 +231,7 @@ const Pricing = () => {
             <motion.h3
               variants={scrollAnimation}
               className="text-2xl sm:text-3xl lg:text-4xl font-medium text-black-600 leading-normal w-9/12 sm: lg:w-4/12 mx-auto">
-              Trusted by Thousands of Happy Customer{" "}
+              Trusted by thousands of happy customers{" "}
             </motion.h3>
             <motion.p
               variants={scrollAnimation}

package.json

@@ -23,6 +23,7 @@
     "tailwindcss": "^3.1.8"
   },
   "devDependencies": {
-    "babel-plugin-inline-react-svg": "^1.1.2"
+    "babel-plugin-inline-react-svg": "^1.1.2",
+    "vivid-studio": "^0.10.0"
   }
 }

pages/_app.js

@@ -1,6 +1,15 @@
 import "../styles/tailwind.css";
 import "../styles/slick.css";
 
+if (
+  typeof window !== "undefined" &&
+  process.env.NODE_ENV === "development"
+  // && /VIVID_ENABLED=true/.test(document.cookie)
+) {
+  import("vivid-studio").then((v) => v.run());
+  import("vivid-studio/style.css");
+}
+
 function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />;
 }