Merge pull request #12 from spencer-rafada/spencer/about-us-story

ABOUT US - Implemented new sections

src/app/(home)/CTASection.tsx

@@ -2,7 +2,13 @@ import { Divider, Flex, Heading, Text } from '@chakra-ui/react'
 import React from 'react'
 import CTAButton from '../components/CTAButton'
 
-export default function CTASection() {
+export default function CTASection({
+  heading,
+  subheading,
+}: {
+  heading: string
+  subheading?: string
+}) {
   return (
     <>
       <Flex
@@ -16,16 +22,24 @@ export default function CTASection() {
           size={{ base: 'xl', lg: '2xl' }}
           textAlign={'center'}
           color='brand.600'
+          data-testid='cta-section-heading'
         >
-          Get Involved and Make a Difference
+          {heading}
         </Heading>
         <Divider borderColor='brand.100' />
-        <Text textAlign={'center'} color='brand.600'>
-          Education is a light, let&apos;s keep it shining bright. Support our
-          cause through donations.
+        <Text
+          textAlign={'center'}
+          color='brand.600'
+          data-testid='cta-section-subheading'
+        >
+          {subheading}
         </Text>
         <Divider borderColor='brand.100' />
-        <Flex justify={'center'} align={'center'}>
+        <Flex
+          justify={'center'}
+          align={'center'}
+          data-testid='cta-section-button'
+        >
           <CTAButton
             type='cta_donate'
             variant='solid'

src/app/(home)/__tests__/CTASection.test.tsx

@@ -6,21 +6,22 @@ import CTASection from '../CTASection'
 
 describe('CTASection', () => {
   it('should render the heading', () => {
-    render(<CTASection />)
-    expect(
-      screen.getByText('Get Involved and Make a Difference')
-    ).toBeInTheDocument()
+    render(<CTASection heading='Get Involved and Make a Difference' />)
+    expect(screen.getByTestId('cta-section-heading')).toBeInTheDocument()
   })
   it('should render the subheading', () => {
-    render(<CTASection />)
+    render(
+      <CTASection
+        heading='Test Heading'
+        subheading="Education is a light, let's keep it shining bright. Support our cause through donations."
+      />
+    )
     expect(
-      screen.getByText(
-        "Education is a light, let's keep it shining bright. Support our cause through donations."
-      )
+      expect(screen.getByTestId('cta-section-subheading')).toBeInTheDocument()
     )
   })
   it('should render the button', () => {
-    render(<CTASection />)
-    expect(screen.getByText('Donate Now')).toBeInTheDocument()
+    render(<CTASection heading='test header' />)
+    expect(screen.getByTestId('cta-section-button')).toBeInTheDocument()
   })
 })

src/app/about/components/OurStory.tsx

@@ -0,0 +1,62 @@
+import { Flex, Heading, Text } from '@chakra-ui/react'
+import React from 'react'
+
+export default function OurStory() {
+  return (
+    <>
+      <Flex
+        direction='column'
+        p={{ base: 8, md: 16 }}
+        align='center'
+        gap={{ base: 4, md: 6 }}
+      >
+        <Heading
+          as='h3'
+          size='xl'
+          color='brand.500'
+          data-testid='about-us-our-story-heading'
+        >
+          Our Story
+        </Heading>
+        <Flex
+          direction='column'
+          gap={{ base: 4, md: 5 }}
+          data-testid='about-us-our-story-paragraphs'
+        >
+          <Text fontSize='lg'>
+            Ray Foundation was created on the commitment to addressing urgent
+            needs in education, clean water, and healthcare. Our foundation
+            stands as a beacon of hope, especially for rural communities in
+            Sierra Leone, West Africa, seeking to thrive against all odds.
+          </Text>
+          <Text fontSize='lg'>
+            Central to our philosophy is the recognition that true
+            transformation emerges when communities unite to tackle their own
+            challenges. The Ray Foundation is the guiding light that fosters an
+            environment conducive to community-driven solutions. In a symbiotic
+            partnership with donors, supporters, government bodies,
+            stakeholders, and local leaders, we channel resources toward
+            communities in need, igniting a chain reaction of positive change.
+          </Text>
+          <Text fontSize='lg'>
+            Our deep collaboration with local government and local leaders
+            underscores our dedication to sustainability and real impact.
+          </Text>
+          <Text fontSize='lg'>
+            Every project is meticulously planned to align with the genuine
+            needs of the communities. This approach ensures not only immediate
+            benefits, but also long-term viability. This demonstrates our belief
+            that communities are best suited to uplift themselves.
+          </Text>
+          <Text fontSize='lg'>
+            Our aspiration is to deliver the gift of education, empowering
+            families with the tools to combat poverty and champion grassroots
+            solutions. By fostering sustainable projects owned by the citizens
+            of Sierra Leone, we create a legacy that benefits both present and
+            future generations.
+          </Text>
+        </Flex>
+      </Flex>
+    </>
+  )
+}

src/app/about/components/VisionMission.tsx

@@ -0,0 +1,49 @@
+import { Flex, Heading, Text } from '@chakra-ui/react'
+import React from 'react'
+
+export default function VisionMission() {
+  return (
+    <Flex
+      bgColor='brand.500'
+      p={{ base: 8, md: 16 }}
+      direction={{ base: 'column', md: 'row' }}
+      gap={{ base: 8, md: 16 }}
+      align='center'
+    >
+      <Flex
+        direction='column'
+        align='center'
+        maxWidth={{ base: '100%', md: '50%' }}
+        gap={{ base: 2, md: 4 }}
+        data-testid='about-us-vision'
+      >
+        <Heading as='h3' size='xl' color='white'>
+          Vision
+        </Heading>
+        <Text fontSize='lg' color='white' align='center'>
+          Our vison is to break the cycle of poverty by addressing the root
+          causes and providing sustainable solutions through education,
+          healthcare, and clean water. By empowering these rural children and
+          communities, we believe that we can create a brighter and more
+          prosperous future for them, where they have the opportunity to pursue
+          their dreams and overcome the challenges they face.
+        </Text>
+      </Flex>
+      <Flex
+        direction='column'
+        align='center'
+        grow='2'
+        gap={{ base: 2, md: 4 }}
+        data-testid='about-us-mission'
+      >
+        <Heading as='h3' size='xl' color='white'>
+          Mission
+        </Heading>
+        <Text fontSize='lg' color='white' align='center'>
+          To transform lives and break the cycle of poverty for children in
+          rural communities in Sierra Leone through education.
+        </Text>
+      </Flex>
+    </Flex>
+  )
+}

src/app/about/components/__tests__/OurStory.test.tsx

@@ -0,0 +1,15 @@
+import { screen, render } from '@testing-library/react'
+import OurStory from '../OurStory'
+
+describe('OurStory', () => {
+  it('should render our story heading', () => {
+    render(<OurStory />)
+    expect(screen.getByTestId('about-us-our-story-heading')).toBeInTheDocument()
+  })
+  it('should render our paragraphs container', () => {
+    render(<OurStory />)
+    expect(
+      screen.getByTestId('about-us-our-story-paragraphs')
+    ).toBeInTheDocument()
+  })
+})

src/app/about/components/__tests__/VisionMission.test.tsx

@@ -0,0 +1,13 @@
+import { screen, render } from '@testing-library/react'
+import VisionMission from '../VisionMission'
+
+describe('VisionMission', () => {
+  it('should render the vision container', () => {
+    render(<VisionMission />)
+    expect(screen.getByTestId('about-us-vision')).toBeInTheDocument()
+  })
+  it('should render the mission container', () => {
+    render(<VisionMission />)
+    expect(screen.getByTestId('about-us-mission')).toBeInTheDocument()
+  })
+})

src/app/about/page.tsx

@@ -1,5 +1,8 @@
 import { Metadata } from 'next'
 import React from 'react'
+import OurStory from './components/OurStory'
+import VisionMission from './components/VisionMission'
+import CTASection from '../(home)/CTASection'
 
 export const metadata: Metadata = {
   title: 'About',
@@ -9,7 +12,12 @@ export const metadata: Metadata = {
 export default function About() {
   return (
     <>
-      <div>About Page</div>
+      <OurStory />
+      <VisionMission />
+      <CTASection
+        heading='Get to Know Us More'
+        subheading='We can tell you more about how your donations are put in to good use.'
+      />
     </>
   )
 }

src/app/page.tsx

@@ -18,7 +18,11 @@ export default function Home() {
         <Approach />
       </Suspense>
       <Suspense fallback={null}>
-        <CTASection />
+        <CTASection
+          heading='Get Involved and Make a Difference'
+          subheading="Education is a light, let's keep it shining bright. Support our
+          cause through donations."
+        />
       </Suspense>
     </>
   )