Merge pull request #8 from codebuilderinc/update-components-and-config

Update components and TypeScript config

Author: digitalnomad91

src/app/about/page.tsx

@@ -7,7 +7,7 @@ import { useEffect } from 'react'
 export default function About() {
   useEffect(() => {
     const timer = setTimeout(() => {
-      throw new Error('This is a simulated server error.')
+      //throw new Error('This is a simulated server error.')
     }, 1000)
 
     return () => clearTimeout(timer)
@@ -26,15 +26,12 @@ export default function About() {
       </div>
 
       {/* Main Content */}
-      <div className="z-10 flex items-center sm:items-start ">
-        <div className="flex w-screen">
+      <div className="z-10 flex items-center  ">
+        <div className="flex flex-col">
           <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
             <li className="mb-2">
               Get started by editing{' '}
-              <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
-                src/app/page.tsx
-              </code>
-              .
+              <code className="bg-black/5 dark:bg-white/[0.06] px-1 py-0.5 rounded font-semibold">src/app/page.tsx</code>.
             </li>
             <li>Save and see your changes instantly.</li>
           </ol>

src/app/page.tsx

@@ -37,7 +37,7 @@ export default function Home() {
 
   return (
     <div className="font-[family-name:var(--font-geist-sans)]">
-      <div className="h-[650px]">
+      <div className="h-[450px] md:h-[550px] relative z-10">
         <div className="preload-images"></div>
         <HeroCarousel />
       </div>

src/components/index/accordion-tabs.tsx

@@ -16,37 +16,34 @@ const AccordionTabsSection: React.FC = () => {
       title: 'Software Engineering Solutions',
       content: (
         <div>
-          Navigating a wide array of domains, our team excels in mastering APIs, Database
-          Architecture & Design, Frontend (UI/UX) development, and the intricacies of Development
-          Operations (CI/CD), Operational Security (OpSec), and Blockchain Development (DApps, Smart
-          Contracts, etc.). With precision and expertise at the forefront of our approach, we are
-          poised to address your multifaceted requirements comprehensively.
+          Navigating a wide array of domains, our team excels in mastering APIs, Database Architecture & Design,
+          Frontend (UI/UX) development, and the intricacies of Development Operations (CI/CD), Operational Security
+          (OpSec), and Blockchain Development (DApps, Smart Contracts, etc.). With precision and expertise at the
+          forefront of our approach, we are poised to address your multifaceted requirements comprehensively.
         </div>
       ),
     },
     {
       title: 'Database Architecture & Design',
       content: (
         <div>
-          In the realm of Database Design & Architecture, our expertise spans across diverse
-          platforms. We specialize in crafting scalable architectures tailored to meet the demands
-          of modern data environments. Our adept team navigates the intricacies of relational
-          databases like Postgres and MySQL, ensuring data integrity and efficiency. Simultaneously,
-          we harness the flexibility of NoSQL databases like MongoDB to accommodate dynamic,
-          unstructured data. Emphasizing scalability, our approach caters to the evolving needs of
-          your data landscape, addressing the challenges posed by big data scenarios.
+          In the realm of Database Design & Architecture, our expertise spans across diverse platforms. We specialize in
+          crafting scalable architectures tailored to meet the demands of modern data environments. Our adept team
+          navigates the intricacies of relational databases like Postgres and MySQL, ensuring data integrity and
+          efficiency. Simultaneously, we harness the flexibility of NoSQL databases like MongoDB to accommodate dynamic,
+          unstructured data. Emphasizing scalability, our approach caters to the evolving needs of your data landscape,
+          addressing the challenges posed by big data scenarios.
         </div>
       ),
     },
     {
       title: 'Web3 & Blockchain Development',
       content: (
         <div>
-          As Blockchain Experts, we possess extensive lower-level knowledge of Blockchain
-          Engineering. Our proficiency extends to launching DApps utilizing the Ethereum Virtual
-          Machine (EVM), where we have successfully coded and deployed Smart Contracts using
-          Solidity. Furthermore, we boast hands-on experience in real-time processing of Blockchain
-          data, encompassing storage, analysis, and curation of substantial datasets.
+          As Blockchain Experts, we possess extensive lower-level knowledge of Blockchain Engineering. Our proficiency
+          extends to launching DApps utilizing the Ethereum Virtual Machine (EVM), where we have successfully coded and
+          deployed Smart Contracts using Solidity. Furthermore, we boast hands-on experience in real-time processing of
+          Blockchain data, encompassing storage, analysis, and curation of substantial datasets.
         </div>
       ),
     },
@@ -63,11 +60,8 @@ const AccordionTabsSection: React.FC = () => {
   return (
     <section className={`${raleway.className} bg-gray-100 py-4 md:py-6`}>
       <div className="container mx-auto py-4 px-8 md:px-20 lg:px-32">
-        <h1
-          className={`mb-2 text-2xl text-[#333333] font-normal tracking-normal ${raleway.className}`}
-        >
-          Enlist the Expertise of our Professional <strong>Software Engineers</strong> for your
-          Project!
+        <h1 className={`mb-2 text-2xl text-[#333333] font-normal tracking-normal ${raleway.className}`}>
+          Enlist the Expertise of our Professional <strong>Software Engineers</strong> for your Project!
         </h1>
         <div className="separator-2 mb-2" />
         <p className={`text-gray-400 text-lg mb-4`}>
@@ -92,9 +86,7 @@ const AccordionTabsSection: React.FC = () => {
                         className="flex justify-between items-center px-4 py-2 cursor-pointer select-none"
                         onClick={() => toggleItem(index)}
                       >
-                        <span
-                          className={`w-full text-lg font-light ${isOpen ? 'text-cbBlue-6' : 'text-grey-darkest'}`}
-                        >
+                        <span className={`w-full text-lg font-light ${isOpen ? 'text-cbBlue-6' : 'text-grey-darkest'}`}>
                           {item.title}
                           <div className="separator-2 w-full my-2 opacity-50" />
                         </span>
@@ -115,11 +107,7 @@ const AccordionTabsSection: React.FC = () => {
                             width="24"
                             xmlns="http://www.w3.org/2000/svg"
                           >
-                            {isOpen ? (
-                              <polyline points="18 15 12 9 6 15" />
-                            ) : (
-                              <polyline points="6 9 12 15 18 9" />
-                            )}
+                            {isOpen ? <polyline points="18 15 12 9 6 15" /> : <polyline points="6 9 12 15 18 9" />}
                           </svg>
                         </div>
                       </div>
@@ -152,16 +140,14 @@ const AccordionTabsSection: React.FC = () => {
               <div>
                 <h3 className="text-[24px] font-normal">Exceptional Flexibility</h3>
                 <p className="text-base text-[#999999] mb-[15px]">
-                  CodeBuilder offers highly adaptable services and pricing models designed to suit
-                  your needs and budget effectively. We operate on an hourly billing system,
-                  ensuring transparency and accuracy in reflecting the time invested in your
-                  project.
+                  CodeBuilder offers highly adaptable services and pricing models designed to suit your needs and budget
+                  effectively. We operate on an hourly billing system, ensuring transparency and accuracy in reflecting
+                  the time invested in your project.
                 </p>
                 <p className="text-base text-[#999999]">
-                  Our rates are tailored to the specific nature of the work, providing a fair and
-                  customized approach. Before initiating any project, we provide a detailed hourly
-                  time/cost estimate and agreement, ensuring clarity and alignment with your
-                  expectations.
+                  Our rates are tailored to the specific nature of the work, providing a fair and customized approach.
+                  Before initiating any project, we provide a detailed hourly time/cost estimate and agreement, ensuring
+                  clarity and alignment with your expectations.
                 </p>
 
                 <CustomButton text="Read More" link="/services" icon={faChevronRight} size="md" />

src/components/index/feature-section.tsx

@@ -65,35 +65,29 @@ const FeatureSection = () => {
   }, [])
 
   return (
-    <section className="bg-gray-100 py-4 md:py-6">
+    <section className="bg-gray-100 py-4 md:py-8">
       <div className="container mx-auto px-8 md:px-20 lg:px-32">
         <div className="z-5 grid grid-cols-1 md:grid-cols-3 gap-2 items-stretch">
           {features.map((feature, index) => (
             <div
               key={index}
               data-index={index}
-              className={`feature-box transition-opacity duration-300 flex flex-col h-full justify-center rounded-lg mx-2 ${
-                visibleSections.includes(index)
-                  ? 'animate__animated animate__slideInDown'
-                  : 'opacity-0'
+              className={`feature-box transition-opacity duration-300 flex flex-col h-full rounded-lg mx-2 ${
+                visibleSections.includes(index) ? 'animate__animated animate__slideInDown' : 'opacity-0'
               }`}
               style={{
                 animationDelay: `${index * 0.1}s`, // Add a custom delay based on the index
               }}
             >
-              <div className="flex items-start">
+              <div className="flex items-start h-full">
                 <span className="text-[2rem] mr-4 flex-shrink-0">
                   <FontAwesomeIcon icon={feature.icon} {...feature.iconProps} />
                 </span>
-                <div className="flex flex-col flex-1">
-                  <h4
-                    className={`${Raleway.className} text-[#333333] leading-[1.2] text-[19px] font-normal`}
-                  >
+                <div className="flex flex-col flex-1 h-full">
+                  <h4 className={`${Raleway.className} text-[#333333] leading-[1.2] text-[19px] font-normal`}>
                     {feature.title}
                   </h4>
-                  <p className="mt-2 mb-3 text-[#999999] text-[16px] font-light">
-                    {feature.description}
-                  </p>
+                  <p className="mt-2 mb-3 text-[#999999] text-[16px] font-light flex-grow">{feature.description}</p>
                   <CustomButton
                     text="Read More"
                     link={feature.link}