merge donations -> main

src/App.js

@@ -8,13 +8,15 @@ import './css/App.css';
 import UseScrollToTop from './hooks/useScrollToTop';
 import NewsPage from './pages/News.jsx';
 
-const AboutMe = lazy(() => import('./pages/AboutMe'));
+const About = lazy(() => import('./pages/AboutMe'));
 const Events = lazy(() => import('./pages/Events'));
-const Contact = lazy(() => import('./pages/Contact.jsx'));
+const Resources = lazy(() => import('./pages/Resources'));
 const Home = lazy(() => import('./pages/Home'));
 const Projects = lazy(() => import('./pages/Projects'));
 const ProjectSingle = lazy(() => import('./pages/ProjectSingle.jsx'));
 const Partnership = lazy(() => import('./pages/Partnerships.jsx'))
+const Donation = lazy(() => import('./pages/Donation.jsx'))
+const Contact = lazy(() => import('./pages/Contact.jsx'));
 
 
 function App() {
@@ -28,9 +30,11 @@ function App() {
 						<Routes>
 							<Route path="/" element={<Home />} />
 							<Route path="events" element={<Events />} />
-							<Route path="about" element={<AboutMe />} />
-							<Route path="contact" element={<Contact />} />
+							<Route path="resources" element={<Resources />} />
+							<Route path="about" element={<About />} />
 							<Route path="partnership" element={<Partnership />}/>
+							<Route path="donation" element={<Donation />} />
+							<Route path="contact" element={<Contact />} />
 							<Route path="blog" element={<NewsPage/>}/>
 						</Routes>
 					</Suspense>

src/components/donation/DonationComplete.jsx

@@ -0,0 +1,52 @@
+import {donationMotivations, donationForms} from '../../data/donationData'
+
+const DonationComplete = () => {
+
+	return (
+        <section className="py-5 sm:py-10 mt-5 sm:mt-10">
+          <div className="text-center">
+            <p className="font-general-medium text-4xl sm:text-6xl md:text-7xl lg:text-8xl mb-1 text-ternary-dark dark:text-ternary-light">
+              Doações
+            </p>
+          </div>
+          <div className="sm:flex sm:gap-10 mt-10 sm:mt-20">
+
+            <div className="font-general-regular w-full text-justify">
+
+              <div className="text-center">
+                <p className="font-general-medium text-2xl sm:text-6xl md:text-7xl lg:text-8xl mb-1 text-ternary-dark dark:text-ternary-light">
+                  Por Que Doar?
+                </p>
+              </div>
+
+              {donationMotivations.map((bio) => (
+                <p
+                  className="mb-4 text-ternary-dark dark:text-ternary-light text-justify"
+                  key={bio.id}
+                >
+                  {bio.bio}
+                </p>
+              ))}
+
+              <div className="text-center">
+                <p className="font-general-medium text-2xl sm:text-6xl md:text-7xl lg:text-8xl mb-1 text-ternary-dark dark:text-ternary-light">
+                  Formas de Doar
+                </p>
+              </div>
+
+              {donationForms.map((bio) => (
+                <p
+                  className="mb-4 text-ternary-dark dark:text-ternary-light text-justify"
+                  key={bio.id}
+                >
+                  {bio.bio}
+                </p>
+              ))}
+            </div>
+          </div>
+        </section>
+      );
+
+};
+
+export default DonationComplete;

src/components/resources/ResourceSingle.jsx

@@ -0,0 +1,38 @@
+import { motion } from 'framer-motion';
+import { Link } from 'react-router-dom';
+
+const ResourceSingle = ({ title, category, image }) => {
+	return (
+		<motion.div
+			initial={{ opacity: 0 }}
+			animate={{ opacity: 1, delay: 1 }}
+			transition={{
+				ease: 'easeInOut',
+				duration: 0.7,
+				delay: 0.15,
+			}}
+		>
+			<Link to="/resources/single-resource" aria-label="Single Resource">
+				<div className="rounded-xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0 bg-secondary-light dark:bg-ternary-dark">
+					<div>
+						<img
+							src={image}
+							className="rounded-t-xl border-none"
+							alt="Single Resource"
+						/>
+					</div>
+					<div className="text-center px-4 py-6">
+						<p className="font-general-medium text-lg md:text-xl text-ternary-dark dark:text-ternary-light mb-2">
+							{title}
+						</p>
+						<span className="text-lg text-ternary-dark dark:text-ternary-light">
+							{category}
+						</span>
+					</div>
+				</div>
+			</Link>
+		</motion.div>
+	);
+};
+
+export default ResourceSingle;

src/components/resources/ResourcesFilter.jsx

@@ -0,0 +1,43 @@
+const selectOptions = [
+	'Web Application',
+	'Mobile Application',
+	'UI/UX Design',
+	'Branding',
+];
+
+const ResourcesFilter = ({ setSelectResource }) => {
+	return (
+		<select
+			onChange={(e) => {
+				setSelectResource(e.target.value);
+			}}
+			className="font-general-medium 
+                px-4
+                sm:px-6
+                py-2
+                border
+                dark:border-secondary-dark
+                rounded-lg
+                text-sm
+                sm:text-md
+                dark:font-medium
+                bg-secondary-light
+                dark:bg-ternary-dark
+                text-primary-dark
+                dark:text-ternary-light
+            "
+		>
+			<option value={setSelectResource} className="text-sm sm:text-md">
+				All Resources
+			</option>
+
+			{selectOptions.map((option) => (
+				<option className="text-normal sm:text-md" key={option}>
+					{option}
+				</option>
+			))}
+		</select>
+	);
+};
+
+export default ResourcesFilter;

src/components/resources/ResourcesGrid.jsx

@@ -0,0 +1,105 @@
+import { useContext } from 'react';
+import ResourceSingle from './ResourceSingle';
+import { ResourcesContext } from '../../context/ResourcesContext';
+
+const ResourcesGrid = () => {
+	const { resources } = useContext(ResourcesContext);
+
+	// Filtrar recursos por categoria
+	const bibliotecaRecursos = resources.filter(
+		(resource) => resource.category === 'biblioteca'
+	);
+	const ferramentasTutoriais = resources.filter(
+		(resource) => resource.category === 'tutoriais'
+	);
+	const publicacoes = resources.filter(
+		(resource) => resource.category === 'publicacoes'
+	);
+
+	return (
+		<section className="py-5 sm:py-10 mt-5 sm:mt-10">
+			<div className="text-center">
+				<p className="font-general-medium text-2xl sm:text-4xl mb-1 text-ternary-dark dark:text-ternary-light">
+					Recursos
+				</p>
+			</div>
+
+			{/* Biblioteca de Recursos */}
+			<div className="mt-10 sm:mt-16">
+				<h3
+					className="font-general-regular 
+                        text-center text-secondary-dark
+                        dark:text-ternary-light
+                        text-md
+                        sm:text-xl
+                        mb-3
+                        "
+				>
+					Biblioteca de Recursos
+				</h3>
+				<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mt-6 sm:gap-10">
+					{bibliotecaRecursos.map((resource) => (
+						<ResourceSingle
+							title={resource.title}
+							// category={resource.category}
+							image={resource.img}
+							key={resource.id}
+						/>
+					))}
+				</div>
+			</div>
+
+			{/* Ferramentas e Tutoriais */}
+			<div className="mt-10 sm:mt-16">
+				<h3
+					className="font-general-regular 
+                        text-center text-secondary-dark
+                        dark:text-ternary-light
+                        text-md
+                        sm:text-xl
+                        mb-3
+                        "
+				>
+					Ferramentas e Tutoriais
+				</h3>
+				<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mt-6 sm:gap-10">
+					{ferramentasTutoriais.map((resource) => (
+						<ResourceSingle
+							title={resource.title}
+							// category={resource.category}
+							image={resource.img}
+							key={resource.id}
+						/>
+					))}
+				</div>
+			</div>
+
+			{/* Publicações */}
+			<div className="mt-10 sm:mt-16">
+				<h3
+					className="font-general-regular 
+                        text-center text-secondary-dark
+                        dark:text-ternary-light
+                        text-md
+                        sm:text-xl
+                        mb-3
+                        "
+				>
+					Publicações
+				</h3>
+				<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mt-6 sm:gap-10">
+					{publicacoes.map((resource) => (
+						<ResourceSingle
+							title={resource.title}
+							// category={resource.category}
+							image={resource.img}
+							key={resource.id}
+						/>
+					))}
+				</div>
+			</div>
+		</section>
+	);
+};
+
+export default ResourcesGrid;

src/context/DonationContext.jsx

@@ -0,0 +1,30 @@
+import { useState, createContext } from 'react';
+// import { donationDataResume } from '../data/donationData';
+import { clientsHeading as clientsPageHeading } from '../data/clientsData';
+import { clientsData as clientsDataJson } from '../data/clientsData';
+
+const DonationContext = createContext();
+
+export const DonationProvider = ({ children }) => {
+	// const [donation, setDonation] = useState(donationDataResume);
+
+	const clientsHeading = clientsPageHeading;
+
+	const [clientsData, setClientsData] = useState(clientsDataJson);
+
+	return (
+		<DonationContext.Provider
+			value={{
+				// donation,
+				// setDonation,
+				clientsHeading,
+				clientsData,
+				setClientsData,
+			}}
+		>
+			{children}
+		</DonationContext.Provider>
+	);
+};
+
+export default DonationContext;

src/context/ResourcesContext.jsx

@@ -0,0 +1,48 @@
+import { useState, createContext } from 'react';
+import { resourcesData } from '../data/resources';
+
+// Create resources context
+export const ResourcesContext = createContext();
+
+// Create the resources context provider
+export const ResourcesProvider = (props) => {
+	const [resources, setResources] = useState(resourcesData);
+	const [searchResource, setSearchResource] = useState('');
+	const [selectResource, setSelectResource] = useState('');
+
+	// Search resources by resource title
+	const searchResourcesByTitle = resources.filter((item) => {
+		const result = item.title
+			.toLowerCase()
+			.includes(searchResource.toLowerCase())
+			? item
+			: searchResource === ''
+			? item
+			: '';
+		return result;
+	});
+
+	// Select resources by resource category
+	const selectResourcesByCategory = resources.filter((item) => {
+		let category =
+			item.category.charAt(0).toUpperCase() + item.category.slice(1);
+		return category.includes(selectResource);
+	});
+
+	return (
+		<ResourcesContext.Provider
+			value={{
+				resources,
+				setResources,
+				searchResource,
+				setSearchResource,
+				searchResourcesByTitle,
+				selectResource,
+				setSelectResource,
+				selectResourcesByCategory,
+			}}
+		>
+			{props.children}
+		</ResourcesContext.Provider>
+	);
+};