chore: Remove unused images and update URLs in Features component

phukon · Mar 24, 2024 · f41d45c · f41d45c
1 parent 3459d1e
commit f41d45c
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 15 deletions.
diff --git a/public/showcase/f1.png b/public/showcase/f1.png
diff --git a/public/showcase/f2.png b/public/showcase/f2.png
diff --git a/public/showcase/f3.png b/public/showcase/f3.png
diff --git a/public/showcase/f4.png b/public/showcase/f4.png
diff --git a/src/components/Body.tsx b/src/components/Body.tsx
@@ -66,7 +66,7 @@ const Body: React.FC = (): JSX.Element => {
           </span>
         </h1>
         <h2 className="m-0 text-center text-[18px] xl:text-2xl leading-tight font-normal mt-5 md:px-28 xl:px-96 md:mt-3 text-gray-500 mb-6">
-          Automatically sync your writing activity from Google Docs and Notion, and track your progress on a calendar.
+          Sync your writing activity from Google Docs and Notion, and track your progress on a calendar.
         </h2>
         <div className="flex justify-center items-center mt-11 -mb-11 md:-mb-6 gap-5">
           <motion.div

diff --git a/src/components/Features.tsx b/src/components/Features.tsx
@@ -4,23 +4,34 @@ import Image from "next/image";
 const featureList = [
   {
     isVideo: false,
-    blobUrl: "/showcase/f1.png",
+    blobUrl: "https://d1g2o751bxy91o.cloudfront.net/f1.png",
     name: "Keep Unlimited Docs",
     desc: "Enjoy unlimited document storage and accessibility without constraints.",
   },
   {
     isVideo: false,
-    blobUrl: "/showcase/f2.png",
-    name: "Everything at a Glance",
-    desc: "Gain valuable insights and easily track your progress, and trends, all in one place.",
+    blobUrl: "https://d1g2o751bxy91o.cloudfront.net/wgt.png",
+    name: "Notion Widget",
+    desc: "Visualize your data, and uncover trends—all from your Notion workspace.",
   },
   {
     isVideo: false,
-    blobUrl: "/showcase/f4.png",
-    name: "Notion-Style Editor",
+    blobUrl: "https://d1g2o751bxy91o.cloudfront.net/f4.png",
+    name: "AI powered Notion-Style Editor",
     desc: "Experience the familiar and intuitive editing interface of Notion with our stylish editor.",
   },
-  { isVideo: false, blobUrl: "/showcase/f3.png", name: "Multiple Heatmap Themes", desc: "Choose the heatmap theme that resonates with your style." },
+  {
+    isVideo: false,
+    blobUrl: "https://d1g2o751bxy91o.cloudfront.net/f3.png",
+    name: "Multiple Heatmap Themes",
+    desc: "Choose the heatmap theme that resonates with your style.",
+  },
+  // {
+  //   isVideo: false,
+  //   blobUrl: "https://d1g2o751bxy91o.cloudfront.net/f2.png",
+  //   name: "Everything at a Glance",
+  //   desc: "Gain valuable insights and easily track your progress, and trends, all in one place.",
+  // }
 ];
 
 const Features = () => {
@@ -30,7 +41,10 @@ const Features = () => {
         <div className="framer-4tink3">
           <div className="framer-mcbbpq">
             <div className="framer-1y2wu24-container">
-              <div className="framer-BK4if framer-QFwI9 framer-v-rnu724" style={{ display: "contents" }}>
+              <div
+                className="framer-BK4if framer-QFwI9 framer-v-rnu724"
+                style={{ display: "contents" }}
+              >
                 <div
                   className="framer-1v2bg1q"
                   data-framer-name="dark bg"
@@ -49,7 +63,9 @@ const Features = () => {
                     }}
                     data-framer-component-type="RichTextContainer"
                   >
-                    <div className="text-xs md:text-sm text-[#1722BE] font-semibold">POWERFUL FEATURES</div>
+                    <div className="text-xs md:text-sm text-[#1722BE] font-semibold">
+                      POWERFUL FEATURES
+                    </div>
                   </div>
                 </div>
               </div>
@@ -66,7 +82,9 @@ const Features = () => {
               }}
               data-framer-component-type="RichTextContainer"
             >
-              <h2 className="--local-ebgaramond text-[40px] md:text-[54px]">Sync, Think, and Shine</h2>
+              <h2 className="--local-ebgaramond text-[40px] md:text-[54px]">
+                Sync, Think, and Shine
+              </h2>
             </div>
           </div>
           <div
@@ -98,7 +116,10 @@ const Features = () => {
               muted
               loop
             >
-              <source src="https://d1g2o751bxy91o.cloudfront.net/editor-demo.mp4" type="video/mp4" />
+              <source
+                src="https://d1g2o751bxy91o.cloudfront.net/editor-demo.mp4"
+                type="video/mp4"
+              />
             </video>
             {/* <img
               src="/showcase/cat.png"
@@ -131,7 +152,7 @@ const Features = () => {
                 <source src={f.blobUrl} type="video/mp4" />
               </video>
             ) : (
-              <Image
+              <img
                 src={f.blobUrl}
                 alt="App screenshot"
                 className="mb-[-12%] rounded-xl shadow-2xl ring-1 ring-gray-900/10"
@@ -152,7 +173,9 @@ const Features = () => {
                     marginTop: "40px",
                   }}
                 >
-                  <h3 className="--local-ebgaramond text-[26px] md:text-[26px] text-[#27272A]">{f.name}</h3>
+                  <h3 className="--local-ebgaramond text-[26px] md:text-[26px] text-[#27272A]">
+                    {f.name}
+                  </h3>
                 </div>
                 <div
                   style={{
@@ -164,7 +187,9 @@ const Features = () => {
                     transform: "none",
                   }}
                 >
-                  <p className="text-[#71717A] md:text-[16px] text-base leading-[1.4em]">{f.desc}</p>
+                  <p className="text-[#71717A] md:text-[16px] text-base leading-[1.4em]">
+                    {f.desc}
+                  </p>
                 </div>
               </div>
             </div>