refactor: extract static data to constants

src/app/globals.css

@@ -8,7 +8,7 @@
   }
 
   .btn {
-    @apply inline-flex align-baseline justify-center font-medium tracking-tight bg-black text-white px-4 py-2 rounded-lg;
+    @apply inline-flex items-center justify-center font-medium tracking-tight bg-black text-white px-4 py-2 rounded-lg;
   }
 
   .btn-primary {

src/constants/PricingData.ts

@@ -0,0 +1,60 @@
+export interface PricingTier {
+  title: string;
+  monthlyPrice: number;
+  buttonText: string;
+  popular: boolean;
+  inverse: boolean;
+  features: string[];
+}
+
+export const pricingTiers: PricingTier[] = [
+  {
+    title: "Free",
+    monthlyPrice: 0,
+    buttonText: "Get started for free",
+    popular: false,
+    inverse: false,
+    features: [
+      "Up to 5 project members",
+      "Unlimited tasks and projects",
+      "2GB storage",
+      "Integrations",
+      "Basic support",
+    ],
+  },
+  {
+    title: "Pro",
+    monthlyPrice: 9,
+    buttonText: "Sign up now",
+    popular: true,
+    inverse: true,
+    features: [
+      "Up to 50 project members",
+      "Unlimited tasks and projects",
+      "50GB storage",
+      "Integrations",
+      "Priority support",
+      "Advanced support",
+      "Export support",
+    ],
+  },
+  {
+    title: "Business",
+    monthlyPrice: 19,
+    buttonText: "Sign up now",
+    popular: false,
+    inverse: false,
+    features: [
+      "Up to 5 project members",
+      "Unlimited tasks and projects",
+      "200GB storage",
+      "Integrations",
+      "Dedicated account manager",
+      "Custom fields",
+      "Advanced analytics",
+      "Export capabilities",
+      "API access",
+      "Advanced security features",
+    ],
+  },
+];

src/constants/StaticData.ts

@@ -0,0 +1,114 @@
+interface BannerText {
+  main: string;
+  cta: string;
+}
+
+interface HeaderData {
+  headerLinks: { name: string; href: string }[];
+  cta: string;
+}
+
+interface HeroData {
+  tag: string;
+  title: string;
+  description: string;
+  primaryButton: string;
+  secondaryButton: string;
+}
+
+interface ProductShowcaseData {
+  tag: string;
+  title: string;
+  description: string;
+}
+
+interface PricingData {
+  title: string;
+  description: string;
+  currency: string;
+  billingPeriod: string;
+}
+
+interface TestimonialsData {
+  tag: string;
+  title: string;
+  description: string;
+}
+
+interface CallToActionData {
+  title: string;
+  description: string;
+  primaryButton: string;
+  secondaryButton: string;
+}
+
+interface FooterData {
+  footerLinks: { name: string; href: string }[];
+  copyRight: string;
+}
+
+export const bannerText: BannerText = {
+  main: "Streamline your workflow and boost your productivity",
+  cta: "Get started for free",
+};
+
+export const headerData: HeaderData = {
+  headerLinks: [
+    { name: "About", href: "#" },
+    { name: "Features", href: "#" },
+    { name: "Customers", href: "#" },
+    { name: "Updates", href: "#" },
+    { name: "Help", href: "#" },
+  ],
+  cta: "Get for free",
+};
+
+export const heroData: HeroData = {
+  tag: "Version 2.0 is here",
+  title: "Pathway to productivity",
+  description:
+    "Celebrate the joy of accomplishment with an app designed to track your progress, motivate your efforts, and celebrate your successes.",
+  primaryButton: "Get for free",
+  secondaryButton: "Learn more",
+};
+
+export const productShowcaseData: ProductShowcaseData = {
+  tag: "Boost your productivity",
+  title: "A more effective way to track progress",
+  description:
+    "Celebrate the joy of accomplishment with an app designed to track your progress and motivate your efforts.",
+};
+
+export const pricingData: PricingData = {
+  title: "Pricing",
+  description:
+    "Free forever. Upgrade for unlimited tasks, better security, and exclusive features.",
+  currency: "$",
+  billingPeriod: "/month",
+};
+
+export const testimonialsData: TestimonialsData = {
+  tag: "Testimonials",
+  title: "What our users say",
+  description:
+    "From intuitive design to powerful features, our app has become an essential tool for users around the world.",
+};
+
+export const callToActionData: CallToActionData = {
+  title: "Sign up for free today",
+  description:
+    "Celebrate the joy of accomplishment with an app designed to track your progress and motivate your efforts.",
+  primaryButton: "Get for free",
+  secondaryButton: "Learn more",
+};
+
+export const footerData: FooterData = {
+  footerLinks: [
+    { name: "About", href: "#" },
+    { name: "Features", href: "#" },
+    { name: "Customers", href: "#" },
+    { name: "Updates", href: "#" },
+    { name: "Help", href: "#" },
+  ],
+  copyRight: "2024 Your Company, Inc. All rights reserved.",
+};

src/constants/TestimonialsData.ts

@@ -0,0 +1,76 @@
+import { StaticImageData } from "next/image";
+import {
+  Avatar1,
+  Avatar2,
+  Avatar3,
+  Avatar4,
+  Avatar5,
+  Avatar6,
+  Avatar7,
+  Avatar8,
+  Avatar9,
+} from "@/src/assets";
+
+export interface Testimonial {
+  text: string;
+  imageSrc: StaticImageData;
+  name: string;
+  username: string;
+}
+
+export const testimonials: Testimonial[] = [
+  {
+    text: "As a seasoned designer always on the lookout for innovative tools, Framer.com instantly grabbed my attention.",
+    imageSrc: Avatar1,
+    name: "Jamie Rivera",
+    username: "@jamietechguru00",
+  },
+  {
+    text: "Our team's productivity has skyrocketed since we started using this tool. ",
+    imageSrc: Avatar2,
+    name: "Josh Smith",
+    username: "@jjsmith",
+  },
+  {
+    text: "This app has completely transformed how I manage my projects and deadlines.",
+    imageSrc: Avatar3,
+    name: "Morgan Lee",
+    username: "@morganleewhiz",
+  },
+  {
+    text: "I was amazed at how quickly we were able to integrate this app into our workflow.",
+    imageSrc: Avatar4,
+    name: "Casey Jordan",
+    username: "@caseyj",
+  },
+  {
+    text: "Planning and executing events has never been easier. This app helps me keep track of all the moving parts, ensuring nothing slips through the cracks.",
+    imageSrc: Avatar5,
+    name: "Taylor Kim",
+    username: "@taylorkimm",
+  },
+  {
+    text: "The customizability and integration capabilities of this app are top-notch.",
+    imageSrc: Avatar6,
+    name: "Riley Smith",
+    username: "@rileysmith1",
+  },
+  {
+    text: "Adopting this app for our team has streamlined our project management and improved communication across the board.",
+    imageSrc: Avatar7,
+    name: "Jordan Patels",
+    username: "@jpatelsdesign",
+  },
+  {
+    text: "With this app, we can easily assign tasks, track progress, and manage documents all in one place.",
+    imageSrc: Avatar8,
+    name: "Sam Dawson",
+    username: "@dawsontechtips",
+  },
+  {
+    text: "Its user-friendly interface and robust features support our diverse needs.",
+    imageSrc: Avatar9,
+    name: "Casey Harper",
+    username: "@casey09",
+  },
+];

src/constants/index.ts

@@ -0,0 +1,3 @@
+export * from "./StaticData";
+export * from "./TestimonialsData";
+export * from "./PricingData";

src/sections/Banner.tsx

@@ -1,13 +1,12 @@
 import { ArrowRight } from "@/src/assets";
+import { bannerText } from "@/src/constants";
 
 export const Banner = () => {
   return (
     <div className="flex justify-center items-center gap-3 py-3 bg-black text-white text-sm">
-      <p className="hidden md:block text-white/60">
-        Streamline your workflow and boost your productivity
-      </p>
+      <p className="hidden md:block text-white/60">{bannerText.main}</p>
       <div className="inline-flex items-center gap-1">
-        <p>Get started for free</p>
+        <p>{bannerText.cta}</p>
         <ArrowRight className="w-4 h-4 inline-flex justify-center items-center" />
       </div>
     </div>

src/sections/CallToAction.tsx

@@ -2,6 +2,7 @@
 import { ArrowRight, StarImage, SpringImage } from "@/src/assets";
 import { motion, useScroll, useTransform } from "framer-motion";
 import { useRef } from "react";
+import { callToActionData } from "@/src/constants";
 
 export const CallToAction = () => {
   const sectionRef = useRef(null);
@@ -17,10 +18,9 @@ export const CallToAction = () => {
     >
       <div className="container">
         <div className="section-heading relative">
-          <h2 className="section-title">Sign up for free today</h2>
+          <h2 className="section-title">{callToActionData.title}</h2>
           <p className="section-description mt-5">
-            Celebrate the joy of accomplishment with an app designed to track
-            your progress and motivate your efforts.
+            {callToActionData.description}
           </p>
           <motion.img
             src={StarImage.src}
@@ -42,9 +42,11 @@ export const CallToAction = () => {
           />
         </div>
         <div className="flex gap-2 mt-10 justify-center">
-          <button className="btn btn-primary">Get for free</button>
+          <button className="btn btn-primary">
+            {callToActionData.primaryButton}
+          </button>
           <button className="btn btn-text gap-1">
-            <span>Learn More</span>
+            <span>{callToActionData.secondaryButton}</span>
             <ArrowRight className="w-5 h-5" />
           </button>
         </div>

src/sections/Footer.tsx

@@ -9,6 +9,7 @@ import {
 } from "@/src/assets";
 import Image from "next/image";
 import { motion } from "framer-motion";
+import { footerData } from "@/src/constants";
 
 export const Footer = () => {
   return (
@@ -41,12 +42,11 @@ export const Footer = () => {
         </div>
 
         <nav className="flex flex-col md:flex-row md:justify-center gap-6 mt-6">
-          <a href="#">About</a>
-          <a href="#">Features</a>
-          <a href="#">Customers</a>
-          <a href="#">Pricing</a>
-          <a href="#">Help</a>
-          <a href="#">Careers</a>
+          {footerData.footerLinks.map((link, index) => (
+            <a key={index} href={link.href}>
+              {link.name}
+            </a>
+          ))}
         </nav>
         <div className="flex justify-center gap-6 mt-6">
           <SocialX className="cursor-pointer" />
@@ -55,9 +55,7 @@ export const Footer = () => {
           <SocialPinterest className="cursor-pointer" />
           <SocialYoutube className="cursor-pointer" />
         </div>
-        <p className="mt-6">
-          &copy; 2024 Your Company, Inc. All rights reserved.
-        </p>
+        <p className="mt-6">&copy;{footerData.copyRight}</p>
       </div>
     </footer>
   );

src/sections/Header.tsx

@@ -1,6 +1,8 @@
 import Image from "next/image";
 import { Banner } from "./Banner";
 import { Logo, Menu } from "@/src/assets";
+import Link from "next/link";
+import { headerData } from "@/src/constants";
 
 export const Header = () => {
   return (
@@ -12,13 +14,13 @@ export const Header = () => {
             <Image src={Logo} alt="Prodway SaaS logo" width={40} height={40} />
             <Menu className="w-5 h-5 md:hidden" />
             <nav className="hidden md:flex gap-6 text-black/60 items-center">
-              <a href="#">About</a>
-              <a href="#">Features</a>
-              <a href="#">Customers</a>
-              <a href="#">Updates</a>
-              <a href="#">Help</a>
+              {headerData.headerLinks.map((link) => (
+                <Link href={link.href} key={link.name}>
+                  {link.name}
+                </Link>
+              ))}
               <button className="inline-flex align-baseline justify-center font-medium tracking-tight bg-black text-white px-4 py-2 rounded-lg">
-                Get for free
+                {headerData.cta}
               </button>
             </nav>
           </div>