chore: added updated componenets

Author: miggydai

src/app/AboutFourthSectionOrangeCard/page.tsx

@@ -0,0 +1,9 @@
+import AboutForthSectionOrangeCard from '@/components/ui/AboutPage/AboutFourthSection/AboutForthSectionOrangeCard';
+
+export default function Home() {
+  return (
+    <main>
+      <AboutForthSectionOrangeCard />
+    </main>
+  );
+}

src/components/ui/AboutPage/AboutFourthSection/AboutForthSectionOrangeCard.tsx

@@ -1,15 +1,10 @@
-import React from "react";
+import React from 'react';
 
-type CardProps = {
-  year: string;
-};
-
-const AboutForthSectionOrangeCard = (props: CardProps) => {
+const AboutForthSectionOrangeCard = () => {
   return (
     <>
-      {/* first card */}
       <div className="w-full bg-orange rounded-lg flex flex-col">
-        <div className="flex flex-col justify-center mt-7">
+        <div className="flex flex-col justify-center py-7">
           <div className="flex mx-12 my-4">
             <p className="text-white font-normal text-justify lg:text-lg md:text-base text-sm">
               But this time, as we move forward to reclaim the life we used to
@@ -20,7 +15,7 @@ const AboutForthSectionOrangeCard = (props: CardProps) => {
 
           <div className="flex flex-col ml-12 mb-6">
             <h1 className="text-white lg:text-4xl text-xl font-normal font-artega">
-              {props.year}
+              SAMAHAN that is at the get-go.
             </h1>
           </div>
         </div>

src/components/ui/AboutPage/AboutFourthSection/AboutFourthSection.tsx

@@ -1,14 +1,14 @@
-import React from "react";
+import React from 'react';
 
-import AboutForthSectionBlueCard from "@/components/ui/AboutPage/AboutFourthSection/AboutForthSectionBlueCard";
-import AboutForthSectionOrangeCard from "@/components/ui/AboutPage/AboutFourthSection/AboutForthSectionOrangeCard";
+import AboutForthSectionBlueCard from '@/components/ui/AboutPage/AboutFourthSection/AboutForthSectionBlueCard';
+import AboutForthSectionOrangeCard from '@/components/ui/AboutPage/AboutFourthSection/AboutForthSectionOrangeCard';
 
 const AboutFourthSection = () => {
   return (
     <>
       <div className="relative flex flex-col justify-start w-full gap-2 p-5">
-        <AboutForthSectionBlueCard year="This 2023" />
-        <AboutForthSectionOrangeCard year="SAMAHAN that is at the get-go. " />
+        <AboutForthSectionBlueCard />
+        <AboutForthSectionOrangeCard />
       </div>
     </>
   );

src/stories/components/ui/About/AbouForthSectionOrangeCard.stories.tsx

@@ -1,18 +1,15 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from '@storybook/react';
 
-import AboutForthSectionOrangeCard from "@/components/ui/AboutPage/AboutFourthSection/AboutForthSectionOrangeCard";
+import AboutForthSectionOrangeCard from '@/components/ui/AboutPage/AboutFourthSection/AboutForthSectionOrangeCard';
 
 const meta: Meta<typeof AboutForthSectionOrangeCard> = {
-  title: "UI/AboutForthSectionOrangeCard",
+  title: 'About/About Forth Section Orange Card',
   component: AboutForthSectionOrangeCard,
 };
 
 export default meta;
 type Story = StoryObj<typeof AboutForthSectionOrangeCard>;
 
 export const Primary: Story = {
-  args: {
-    year: "SAMAHAN that is at the get-go. ",
-  },
-  render: (args) => <AboutForthSectionOrangeCard {...args} />,
+  render: () => <AboutForthSectionOrangeCard />,
 };