diff --git a/src/app/(home)/CTASection.tsx b/src/app/(home)/CTASection.tsx index 46dbc79..a7c2715 100644 --- a/src/app/(home)/CTASection.tsx +++ b/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 ( <> - Get Involved and Make a Difference + {heading} - - Education is a light, let's keep it shining bright. Support our - cause through donations. + + {subheading} - + { it('should render the heading', () => { - render() - expect( - screen.getByText('Get Involved and Make a Difference') - ).toBeInTheDocument() + render() + expect(screen.getByTestId('cta-section-heading')).toBeInTheDocument() }) it('should render the subheading', () => { - render() + render( + + ) 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() - expect(screen.getByText('Donate Now')).toBeInTheDocument() + render() + expect(screen.getByTestId('cta-section-button')).toBeInTheDocument() }) }) diff --git a/src/app/about/components/OurStory.tsx b/src/app/about/components/OurStory.tsx new file mode 100644 index 0000000..d944585 --- /dev/null +++ b/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 ( + <> + + + Our Story + + + + 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. + + + 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. + + + Our deep collaboration with local government and local leaders + underscores our dedication to sustainability and real impact. + + + 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. + + + 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. + + + + + ) +} diff --git a/src/app/about/components/VisionMission.tsx b/src/app/about/components/VisionMission.tsx new file mode 100644 index 0000000..8bb32e8 --- /dev/null +++ b/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 ( + + + + Vision + + + 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. + + + + + Mission + + + To transform lives and break the cycle of poverty for children in + rural communities in Sierra Leone through education. + + + + ) +} diff --git a/src/app/about/components/__tests__/OurStory.test.tsx b/src/app/about/components/__tests__/OurStory.test.tsx new file mode 100644 index 0000000..0eaea5d --- /dev/null +++ b/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() + expect(screen.getByTestId('about-us-our-story-heading')).toBeInTheDocument() + }) + it('should render our paragraphs container', () => { + render() + expect( + screen.getByTestId('about-us-our-story-paragraphs') + ).toBeInTheDocument() + }) +}) diff --git a/src/app/about/components/__tests__/VisionMission.test.tsx b/src/app/about/components/__tests__/VisionMission.test.tsx new file mode 100644 index 0000000..62dc1b6 --- /dev/null +++ b/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() + expect(screen.getByTestId('about-us-vision')).toBeInTheDocument() + }) + it('should render the mission container', () => { + render() + expect(screen.getByTestId('about-us-mission')).toBeInTheDocument() + }) +}) diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx index 8addb4e..86f6ac4 100644 --- a/src/app/about/page.tsx +++ b/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 ( <> -
About Page
+ + + ) } diff --git a/src/app/page.tsx b/src/app/page.tsx index ce2cbc8..f3d828b 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -18,7 +18,11 @@ export default function Home() { - + )