Skip to content

Commit

Permalink
first
Browse files Browse the repository at this point in the history
  • Loading branch information
Science BD authored and Science BD committed Jul 26, 2024
1 parent f830e97 commit 6de891c
Show file tree
Hide file tree
Showing 70 changed files with 3,628 additions and 428 deletions.
6 changes: 1 addition & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,7 @@ bun dev

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.

This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.

Expand Down
169 changes: 169 additions & 0 deletions app/about/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,169 @@
import React from 'react';
import Image from 'next/image';

const About = () => {
return (
<>
<div className="flex-1 px-20 text-center">
<div className="flex-1 pt-36 padding-x hero__subtitle py-9">
<h1>About Us</h1>
<p>Youth in Nigeria have little exposure to computer programming.
This lack of exposure hinders future opportunities. NaijaCoder is
geared towards using computer science as a tool for a better economic,
social, and academic life for youth. Given the diversity of the
occupations and interests of the board members, we can provide
mentorship on various career options — both of the technical and
non-technical variety. Our team consists of Nigerians who currently
live and work in the USA but all attended high school in Nigeria.
The occupations of the board members include engineers, computer
scientists (PhDs), and business leaders.
</p>
</div>

<div className="xl:flex-[1.5] flex justify-end items-end w-full xl:h-screen padding-x">
<div className="hero__image">
<Image src="/aboutusyouth.png" alt="hero"
fill className="object-contain" />
</div>
</div>
</div>
<div className="p-5 bg-emerald-700">

<div className="text-center justify-between font-bold from-stone-950 text-6xl p-3 pt-14 pb-14 w-full my-3 object-contain">
Meet the NaijaCoder Team
</div>
<div className="flex justify-center gap-14 p-3 sm:flex-shrink">
<div className="flex flex-col items-center text-center">
<div className="image__card mb-2">
<Image src="/Daniel_Alabi.jpg" alt="hero" width={118} height={118} className="object-contain" />
<div>Daniel Alabi, Ph.D.</div>
</div>
<div className="name__title mb-2">Founder and Head Instructor</div>
<div className="linkedin__link">www.linkedin.com</div>
</div>
<div className="flex flex-col items-center text-center">
<div className="image__card mb-2">
<Image src="/Lekan_Afuye.jpg" alt="hero" width={118} height={118} className="object-contain" />
<div>Lekan Afuye, Ph.D.</div>
</div>
<div className="name__title">Vice President</div>
<div className="linkedin__link">www.linkedin.com</div>
</div>
<div className="flex flex-col items-center text-center">
<div className="image__card mb-2">
<Image src="/Alida_Monaco.jpg" alt="hero" width={118} height={118} className="object-contain" />
<div>Alida Monaco</div>
</div>
<div className="name__title">Chief of Operations</div>
<div className="linkedin__link">www.linkedin.com</div>
</div>
<div className="flex flex-col items-center text-center">
<div className="image__card mb-2">
<Image src="/Philip_Abel.jpg" alt="hero" width={118} height={118} className="object-contain" />
<div>Philip Abel</div>
</div>
<div className="name__title">Secretary</div>
<div className="linkedin__link">www.linkedin.com</div>
</div>
</div>
<div className="flex justify-center gap-14 p-3 sm:flex-shrink">
<div className="flex flex-col items-center text-center">
<div className="image__card mb-2">
<Image src="/Zaidat_Ibrahim.jpg" alt="hero" width={118} height={118} className="object-contain" />
</div>
<div className="name__title">Zaidat Ibrahim</div>
<div className="linkedin__link">www.linkedin.com</div>
</div>
<div className="flex flex-col items-center text-center">
<div className="image__card mb-2">
<Image src="/Victory_Yinka-Banjo.jpg" alt="hero" width={118} height={118} className="object-contain" />
</div>
<div className="name__title">Victory Yinka-Banjo</div>
<div className="linkedin__link">www.linkedin.com</div>
</div>
<div className="flex flex-col items-center text-center">
<div className="image__card mb-2">
<Image src="/Ojima_Abraham.JPG" alt="hero" width={118} height={118} className="object-contain" />
</div>
<div className="name__title">Ojima Abraham</div>
<div className="linkedin__link">www.linkedin.com</div>
</div>
<div className="flex flex-col items-center text-center">
<div className="image__card mb-2">
<Image src="/Atinuke_Adegbile.jpg" alt="hero" width={118} height={118} className="object-contain" />
</div>
<div className="name__title">Atinuke Adegbile</div>
<div className="linkedin__link">www.linkedin.com</div>
</div>
</div>
<div className="flex justify-center gap-14 p-3 sm:flex-shrink">
<div className="flex flex-col items-center text-center">
<div className="image__card mb-2">
<Image src="/Hamidah_Oderinwale.jpg" alt="hero" width={118} height={118} className="object-contain" />
<div>Hamidah Oderinwale</div>
</div>
<div className="name__title">Hamidah Oderinwale</div>
<div className="linkedin__link">www.linkedin.com</div>
</div>
<div className="flex flex-col items-center text-center">
<div className="image__card mb-2">
<Image src="/Eric_Mibuari.jpg" alt="hero" width={118} height={118} className="object-contain" />
<div>Eric Mibuari</div>
</div>
<div className="name__title">Eric Mibuari</div>
<div className="linkedin__link">www.linkedin.com</div>
</div>
<div className="flex flex-col items-center text-center">
<div className="image__card mb-2">
<Image src="/Joshua_Nwozor.jpg" alt="hero" width={118} height={118} className="object-contain" />
<div>Joshua Nwozor</div>
</div>
<div className="name__title">Joshua Nwozor</div>
<div className="linkedin__link">www.linkedin.com</div>
</div>
<div className="flex flex-col items-center text-center">
<div className="image__card mb-2">
<Image src="/Akachukwu_Obi.jpg" alt="hero" width={118} height={118} className="object-contain" />
<div>Akachukwu Obi</div>
</div>
<div className="name__title">Akachukwu Obi</div>
<div className="linkedin__link">www.linkedin.com</div>
</div>
</div>
<div className="flex justify-center gap-14 p-3 sm:flex-shrink">
<div className="flex flex-col items-center text-center">
<div className="image__card mb-2">
<Image src="/Joseph_Ekpenyong.jpg" alt="hero" width={118} height={118} className="object-contain" />
</div>
<div className="name__title">Joseph Ekpenyong</div>
<div className="linkedin__link">www.linkedin.com</div>
</div>
<div className="flex flex-col items-center text-center">
<div className="image__card mb-2">
<Image src="/Ekene_Ezeunala.jpg" alt="hero" width={118} height={118} className="object-contain" />
</div>
<div className="name__title">Ekene Ezeunala</div>
<div className="linkedin__link">www.linkedin.com</div>
</div>
<div className="flex flex-col items-center text-center">
<div className="image__card mb-2">
<Image src="/Jelani_Nelson.jpg" alt="hero" width={118} height={118} className="object-contain" />
</div>
<div className="name__title">Jelani Nelson</div>
<div className="linkedin__link">www.linkedin.com</div>
</div>
<div className="flex flex-col items-center text-center">
<div className="image__card mb-2">
<Image src="/Benem_Davids.jpg" alt="hero" width={118} height={118} className="object-contain" />
<div>Benem Davids, Ph.D.</div>

<div className="name__title">Webmaster</div>
<div className="linkedin__link">www.linkedin.com</div>
</div>
</div>
</div>
</div></>
);
}

export default About;
101 changes: 101 additions & 0 deletions app/contact/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
"use client";
import React, { useRef, useState } from 'react';
import emailjs from '@emailjs/browser';

const ContactForm = () => {
const form = useRef();
const [messageSent, setMessageSent] = useState(false);

const sendEmail = (e) => {
e.preventDefault();
//

emailjs.sendForm('service_pq0gnpi', 'template_0ignmts', form.current, 'zo3GYpyo57wLc3Dyr')
.then(
(result) => {
// console.log('SUCCESS!', result.text);
setMessageSent(true);
form.current.reset(); // Reset the form
},
(error) => {
// console.error('FAILED...', error.text);
}
);
};

return (
<div className="flex flex-col">
<div id="form-container" className="lg:p-5 mt-36 font-Encode-Sans">
<div className="overflow-hidden">
<h2 className="text-center lg:text-5xl text-5xl mt-10 pb-6 font-bold">
QUESTIONS? SUGGESTIONS?</h2>
<h3 className="text-center lg:text-3xl text-3xl mt-2 pb-6 ">
Send us a message using the contact form, or write us at
<b> <a href="mailto:[email protected]"> [email protected]</a></b>.
<p></p>
We look forward to hearing from you!
</h3>
</div>

{messageSent && (
<div className="text-center text-emerald-500 font-bold mb-4">
Message sent successfully!
</div>
)}

<div className=" mx-auto rounded-xl max-w-xl bg-emerald-50 border-2 border-gray-700">
<form ref={form} onSubmit={sendEmail}>
<div className="mx-auto rounded-xl max-w-xl">
<div className="grid grid-cols-1 gap-6 label">
<label htmlFor="name" className="block border-b py-2">
<input
id="name"
type="text"
name="name"
required="required"
placeholder="Name"
className="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none bg-cool-darker font-bold text-3xl"
/>
</label>

<label htmlFor="email" className="block border-b">
<input
id="email"
type="email"
name="email"
placeholder="Email"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
required="required"
className="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none font-bold text-3xl"
/>
</label>

<label className="block border-b">
<textarea
id="message"
name="message"
rows="5"
required="required"
placeholder="Please write your message here"
className="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none bg-cool-darker text-cool-beige text-2xl font-bold"
></textarea>
</label>
<div className="text-center">
<button
type="submit"
className="uppercase text-sm font-bold tracking-wide bg-emerald-600 text-gray-100 p-3 rounded-lg w-full focus:outline-none focus:shadow-outline"
>
Send
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
);
};

export default ContactForm;

File renamed without changes.
31 changes: 31 additions & 0 deletions app/getinvolved/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import React from 'react';

const GetInvolved = () => {
return (
<div className="">
<div className="hero p-36 ">
<div className="flex-1 pt-32 padding-x text-center">
<h1 className="hero__title justify-center text-center items-center ">Donate to NaijaCoder</h1>

<h1 className="text-center hero__subtitle font-bold">We provide free instruction, especially for underprivileged students, on the basics of algorithms and computer programming.</h1>


<form action="https://www.paypal.com/donate" method="post" target="_top">
<input type="hidden" name="hosted_button_id" value="XTKYF6AJWXWXY" />
<input
type="image"
src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif"
name="submit"
title="PayPal - The safer, easier way to pay online!"
alt="Donate with PayPal button"
className="mt-20"
/>
<img alt="" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
</form>
</div>
</div>
</div>
);
};

export default GetInvolved;
Loading

0 comments on commit 6de891c

Please sign in to comment.