merge about-us -> main

src/App.js

@@ -7,7 +7,7 @@ import AppHeader from './components/shared/AppHeader';
 import './css/App.css';
 import UseScrollToTop from './hooks/useScrollToTop';
 
-const About = lazy(() => import('./pages/AboutMe'));
+const AboutMe = lazy(() => import('./pages/AboutMe'));
 const Events = lazy(() => import('./pages/Events'));
 const Contact = lazy(() => import('./pages/Contact.jsx'));
 const Home = lazy(() => import('./pages/Home'));
@@ -31,7 +31,7 @@ function App() {
 								element={<ProjectSingle />}
 							/>
 							<Route path="events" element={<Events />} />
-							<Route path="about" element={<About />} />
+							<Route path="about" element={<AboutMe />} />
 							<Route path="contact" element={<Contact />} />
 						</Routes>
 					</Suspense>

src/components/about/AboutMeBio.jsx

@@ -13,11 +13,7 @@ const AboutMeBio = () => {
 				</p>
 			</div>
 			<div className="block sm:flex sm:gap-10 mt-10 sm:mt-20">
-				<div className="w-full sm:w-1/4 mb-7 sm:mb-0">
-					<img src={profileImage} className="rounded-lg w-96" alt="" />
-				</div>
-
-				<div className="font-general-regular w-full sm:w-3/4 text-left">
+				<div className="font-general-regular w-full text-justify">
 					{aboutMe.map((bio) => (
 						<p
 							className="mb-4 text-ternary-dark dark:text-ternary-light text-lg"
@@ -29,6 +25,7 @@ const AboutMeBio = () => {
 				</div>
 			</div>
 		</section>
+
 	);
 };
 

src/components/about/AboutMeComplete.jsx

@@ -0,0 +1,52 @@
+import {aboutMeHistory, aboutMeTeam} from '../../data/aboutMeData'
+
+const AboutMeComplete = () => {
+
+	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">
+              Sobre Nós
+            </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">
+                  História e Missão
+                </p>
+              </div>
+
+              {aboutMeHistory.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">
+                  Equipe e Governança
+                </p>
+              </div>
+
+              {aboutMeTeam.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 AboutMeComplete;

src/components/shared/AppFooter.jsx

@@ -8,41 +8,35 @@ import {
 import AppFooterCopyright from './AppFooterCopyright';
 
 const socialLinks = [
-	{
-		id: 1,
-		icon: <FiGlobe />,
-		url: 'https://www.stoman.me/',
-	},
 	{
 		id: 2,
 		icon: <FiGithub />,
-		url: 'https://github.com/realstoman',
+		url: 'https://github.com/thiagomanel',
 	},
 	{
 		id: 3,
 		icon: <FiTwitter />,
-		url: 'https://twitter.com/realstoman',
+		url: 'https://twitter.com/elonmusk',
 	},
 	{
 		id: 4,
 		icon: <FiLinkedin />,
-		url: 'https://www.linkedin.com/in/realstoman',
+		url: 'https://www.linkedin.com/in/michel-temer-b65632220/',
 	},
 	{
 		id: 5,
 		icon: <FiYoutube />,
-		url: 'https://www.youtube.com/c/realstoman',
+		url: 'https://www.youtube.com/@LucianoHangOficial',
 	},
 ];
 
 const AppFooter = () => {
 	return (
 		<div className="container mx-auto">
 			<div className="pt-20 sm:pt-30 pb-8 mt-20 border-t-2 border-primary-light dark:border-secondary-dark">
-				{/* Footer social links */}
 				<div className="font-general-regular flex flex-col justify-center items-center mb-12 sm:mb-28">
 					<p className="text-3xl sm:text-4xl text-primary-dark dark:text-primary-light mb-5">
-						Follow me
+						Siga a nossa empresa nas redes sociais
 					</p>
 					<ul className="flex gap-4 sm:gap-8">
 						{socialLinks.map((link) => (
@@ -59,8 +53,6 @@ const AppFooter = () => {
 						))}
 					</ul>
 				</div>
-
-				<AppFooterCopyright />
 			</div>
 		</div>
 	);

src/context/AboutMeContext.jsx

@@ -1,12 +1,12 @@
 import { useState, createContext } from 'react';
-import { aboutMeData } from '../data/aboutMeData';
+import { aboutMeDataResume } from '../data/aboutMeData';
 import { clientsHeading as clientsPageHeading } from '../data/clientsData';
 import { clientsData as clientsDataJson } from '../data/clientsData';
 
 const AboutMeContext = createContext();
 
 export const AboutMeProvider = ({ children }) => {
-	const [aboutMe, setAboutMe] = useState(aboutMeData);
+	const [aboutMe, setAboutMe] = useState(aboutMeDataResume);
 
 	const clientsHeading = clientsPageHeading;
 

src/data/aboutMeData.js

@@ -1,27 +1,138 @@
-export const aboutMeData = [
+export const aboutMeDataResume = [
 	{
 	  id: 1,
 	  bio: (
 		<>
-		  <strong>Fundação COMP+</strong> é uma organização sem fins lucrativos, fundada em 2012, dedicada a fornecer suporte administrativo a Instituições Científicas e Tecnológicas (ICTs) e Universidades Públicas. Nossa missão é promover a excelência em pesquisa científica, desenvolvimento e inovação, garantindo a execução eficaz de projetos que impactam a sociedade.
+			Fundada em 2012, a Fundação COMP+ (COMP+) oferece suporte administrativo a Instituições Científicas e Tecnológicas (ICTs) e Universidades Públicas 
+			para a execução de projetos voltados à pesquisa científica, desenvolvimento, inovação e prestação de serviços técnicos especializados. A COMP+ 
+			pretende alcançar excelência na gestão administrativa e financeira dos projetos e atividades que apoia, operando em estrita conformidade com os 
+			princípios da legalidade, impessoalidade, moralidade, publicidade, economicidade e eficiência. A fundação se dedica a proteger os interesses das 
+			instituições que apoia e a manter um alto nível de competência profissional entre seus colaboradores. A COMP+ é uma organização privada sem fins 
+			lucrativos, regida pelo Código Civil Brasileiro e estabelecida como Fundação de Apoio conforme a Lei no 8.958/1994, com credenciamento no Ministério 
+			da Ciência, Tecnologia e Inovações (MCTI) e no Ministério da Educação (MEC). Suas atividades estão sujeitas às disposições da Lei no 10.973/2004 
+			("Lei da Inovação"), bem como aos decretos reguladores e portarias interministeriais do MEC e MCTI pertinentes. Além disso, como fundação de direito 
+			privado, a COMP+ está sujeita à supervisão do Ministério Público do Estado da Paraíba.
 		</>
-	  ),
+	  )
+	}
+
+];
+
+export const aboutMeHistory = [
+	{
+		id: 1,
+		bio: (
+			<>
+				Fundada em 2012, a Fundação COMP+ (COMP+) oferece suporte administrativo a Instituições Científicas e Tecnológicas (ICTs) e 
+				Universidades Públicas para a execução de projetos voltados à pesquisa científica, desenvolvimento, inovação e prestação de serviços técnicos especializados. 
+				A COMP+ pretende alcançar excelência na gestão administrativa e financeira dos projetos e atividades que apoia, operando em estrita conformidade com os 
+				princípios da legalidade, impessoalidade, moralidade, publicidade, economicidade e eficiência. A fundação se dedica a proteger os interesses das 
+				instituições que apoia e a manter um alto nível de competência profissional entre seus
+			</>
+		)
 	},
 	{
-	  id: 2,
-	  bio: (
-		<>
-		  <strong>Missão:</strong> Apoiar instituições acadêmicas e científicas na realização de projetos inovadores, assegurando gestão administrativa e financeira de alta qualidade.
-		</>
-	  ),
+		id: 2,
+		bio: (
+			<>
+				colaboradores. A COMP+ é uma organização privada sem fins lucrativos, regida pelo Código Civil Brasileiro e 
+				estabelecida como Fundação de Apoio conforme a Lei no 8.958/1994, com credenciamento no Ministério da Ciência, 
+				Tecnologia e Inovações (MCTI) e no Ministério da Educação (MEC). Suas atividades estão sujeitas às disposições 
+				da Lei no 10.973/2004 ("Lei da Inovação"), bem como aos decretos reguladores e portarias interministeriais do MEC 
+				e MCTI pertinentes. Além disso, como fundação de direito privado, a COMP+ está sujeita à supervisão do Ministério 
+				Público do Estado da Paraíba.
+			</>
+		)
+	}
+]
+
+export const aboutMeTeam = [
+	{
+		id: 1,
+		bio: (
+			<>
+				Nossa equipe é composta por líderes dedicados e comprometidos em guiar a organização para alcançar seus objetivos estratégicos. 
+				Contamos com uma estrutura de governança sólida e transparente, que envolve uma diretoria executiva e conselhos consultivos 
+				formados por profissionais com vasta experiência em suas áreas de atuação. Conheça alguns de nossos membros:
+			</>
+		)
 	},
 	{
-	  id: 3,
-	  bio: (
-		<>
-		  <strong>Visão:</strong> Ser referência em gestão de projetos de pesquisa e inovação, contribuindo para o avanço científico e tecnológico no Brasil.
-		</>
-	  ),
+		id: 2,
+		bio: (
+			<>
+				<li>
+					Ana - Diretora Executiva <br/> Com mais de 15 anos de experiência em gestão de ONGs e desenvolvimento social, Ana lidera nossa organização com 
+					uma visão focada na inovação e no impacto comunitário. Ela é responsável por traçar a estratégia geral da fundação e garantir a implementação 
+					de políticas que promovam nosso crescimento sustentável. Sua liderança é reconhecida por sua abordagem colaborativa e orientada a 
+					resultados.
+				</li>
+			</>
+		)
 	},
-  ];
+	{
+		id: 3,
+		bio: (
+			<>
+				<li>
+					Carlos Oliveira - Líder de Projetos<br/> Especialista em planejamento de projetos e tecnologia educacional, Carlos coordena as 
+					principais iniciativas da fundação, garantindo que os projetos sejam executados de acordo com nossos valores e metas. 
+					Com uma carreira de mais de 10 anos na área de gestão de projetos, ele é peça-chave na execução das nossas 
+					atividades voltadas ao desenvolvimento social e educacional.
+				</li>
+			</>
+		)
+	},
+	{
+		id: 4,
+		bio: (
+			<>
+				<li>
+					Maria Fernanda Lima - Gerente Financeira <br/>
+					Maria Fernanda é uma especialista em finanças com mais de 12 anos de experiência em auditoria e controle financeiro no terceiro setor. 
+					Ela é responsável por manter a integridade financeira da nossa organização, assegurando que os recursos sejam utilizados de 
+					forma eficaz e transparente.
+				</li>
+			</>
+		)
+	},
+	{
+		id: 5, 
+		bio: (
+			<>
+				<li>
+					Conselho Consultivo <br/> 
+					Nosso Conselho Consultivo é formado por especialistas de renome que fornecem insights 
+					estratégicos para apoiar nossa missão e garantir que as melhores práticas sejam seguidas. 
+					Eles trabalham lado a lado com a diretoria para fortalecer nossa governança e promover a 
+					transparência em todas as nossas ações.
+				</li>
+			</>
+		)
+	},
+	{
+		id: 6,
+		bio: (
+			<>
+			<li>
+				João Ribeiro - Especialista em Sustentabilidade e Impacto Social <br/>
+				Com 20 anos de experiência em sustentabilidade, João oferece conselhos valiosos sobre como podemos 
+				maximizar nosso impacto social de maneira ética e sustentável.
+			</li>
+			</>
+		)
+	},
+	{
+		id: 7,
+		bio: (
+			<>
+			<li>
+				Beatriz Martins - Consultora Jurídica <br/>
+				Advogada com especialização em direito do terceiro setor, Beatriz garante que nossas operações estejam em 
+				conformidade com todas as leis e regulamentos aplicáveis.
+			</li>
+			</>
+		)
+	}
+]
 

src/pages/AboutMe.jsx

@@ -1,6 +1,4 @@
-import AboutMeBio from '../components/about/AboutMeBio';
-import AboutCounter from '../components/about/AboutCounter';
-import AboutClients from '../components/about/AboutClients';
+import AboutMeComplete from '../components/about/AboutMeComplete';
 import { AboutMeProvider } from '../context/AboutMeContext';
 import { motion } from 'framer-motion';
 
@@ -13,25 +11,7 @@ const About = () => {
 				exit={{ opacity: 0 }}
 				className="container mx-auto"
 			>
-				<AboutMeBio />
-			</motion.div>
-
-			{/** Counter without paddings */}
-			<motion.div
-				initial={{ opacity: 0 }}
-				animate={{ opacity: 1, delay: 1 }}
-				exit={{ opacity: 0 }}
-			>
-				<AboutCounter />
-			</motion.div>
-
-			<motion.div
-				initial={{ opacity: 0 }}
-				animate={{ opacity: 1, delay: 1 }}
-				exit={{ opacity: 0 }}
-				className="container mx-auto"
-			>
-				<AboutClients />
+				<AboutMeComplete />
 			</motion.div>
 		</AboutMeProvider>
 	);