Initial commit

public/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

src/components/About.tsx

@@ -3,90 +3,66 @@ import React from 'react';
 import config from '../config/index.json';
 
 const About = () => {
-  const { company, about } = config;
-  const { logo, name: companyName } = company;
-  const { socialMedia, sections } = about;
+  const { about } = config;
+  const [firstItem, secondItem] = about.items;
 
   return (
-    <div
-      id="about"
-      className="mx-auto container xl:px-20 lg:px-12 sm:px-6 px-4 py-12"
-    >
-      <div className="flex flex-col items-center justify-center">
-        <div>
-          <img src={logo} alt={companyName} className="w-16 h-16" />
-        </div>
-        <div className="flex flex-wrap sm:gap-10 gap-8 items-center justify-center mt-4 h-12">
-          {sections.map((section, index) => (
-            <a
-              key={`${section.name}-${index}`}
-              href={section.href}
-              className="hover:text-primary text-base cursor-pointer leading-4 text-gray-800 dark:text-gray-400 dark:hover:text-white"
+    <section className="bg-background py-8" id="about">
+      <div className="container max-w-5xl mx-auto m-8">
+        <h1 className="w-full my-2 text-5xl font-bold leading-tight text-center text-purple-500">
+          {about.title.split(' ').map((word, index) => (
+            <span
+              key={index}
+              className={index % 2 ? 'text-purple-500' : 'text-border'}
             >
-              {section.name}
-            </a>
+              {word}{' '}
+            </span>
           ))}
+        </h1>
+        <div className="flex flex-wrap">
+          <div className="w-5/6 sm:w-1/2 p-6 mt-20">
+            <h3 className="text-3xl text-gray-800 font-bold leading-none mb-3">
+              {firstItem?.title}
+            </h3>
+            <p className="text-gray-600">{firstItem?.description}</p>
+          </div>
+          <div className="w-full sm:w-1/2 p-6">
+            <img
+              className="h-6/6"
+              src={firstItem?.img}
+              alt={firstItem?.title}
+            />
+          </div>
         </div>
-        <div className="flex items-center gap-x-8 mt-6 h-8">
-          <a
-            aria-label="github"
-            href={socialMedia.github}
-            target="_blank"
-            rel="noreferrer"
-          >
-            <svg
-              className="fill-current text-gray-800 dark:text-white hover:text-primary"
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-            >
-              <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
-            </svg>
-          </a>
-          <a
-            aria-label="linkedin"
-            href={socialMedia.linkedin}
-            target="_blank"
-            rel="noreferrer"
-          >
-            <svg
-              className="fill-current text-gray-800 dark:text-white hover:text-primary"
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-            >
-              <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
-            </svg>
-          </a>
+        <div className="flex flex-wrap flex-col-reverse sm:flex-row">
+          <div className="w-full sm:w-1/2 p-6">
+            <img
+              className="h-6/6"
+              src={secondItem?.img}
+              alt={secondItem?.title}
+            />
+          </div>
+          <div className="w-full sm:w-1/2 p-6 mt-20">
+            <div className="align-middle">
+              <h3 className="text-3xl text-gray-800 font-bold leading-none mb-3">
+                {secondItem?.title}
+              </h3>
+              <p className="text-gray-600 mb-8">{secondItem?.description}</p>
+            </div>
+          </div>
+        </div>
+        <div className="text-center mt-8">
+          Get in touch with us at
           <a
-            aria-label="twitter"
-            href={socialMedia.twitter}
-            target="_blank"
-            rel="noreferrer"
+            href="#contact"
+            className=" text-purple-400 font-bold py-2 px-1 rounded hover:text-purple-500"
           >
-            <svg
-              className="fill-current text-gray-800 dark:text-white hover:text-primary"
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-            >
-              <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.066 9.645c.183 4.04-2.83 8.544-8.164 8.544-1.622 0-3.131-.476-4.402-1.291 1.524.18 3.045-.244 4.252-1.189-1.256-.023-2.317-.854-2.684-1.995.451.086.895.061 1.298-.049-1.381-.278-2.335-1.522-2.304-2.853.388.215.83.344 1.301.359-1.279-.855-1.641-2.544-.889-3.835 1.416 1.738 3.533 2.881 5.92 3.001-.419-1.796.944-3.527 2.799-3.527.825 0 1.572.349 2.096.907.654-.128 1.27-.368 1.824-.697-.215.671-.67 1.233-1.263 1.589.581-.07 1.135-.224 1.649-.453-.384.578-.87 1.084-1.433 1.489z" />
-            </svg>
+            [email protected]
           </a>
         </div>
-        <div className="flex items-center mt-6">
-          <p className="mt-6 text-xs lg:text-sm leading-none text-gray-900 dark:text-gray-50">
-            &copy; {new Date().getFullYear()} designed by{' '}
-            <a href="https://github.com/issaafalkattan" rel="nofollow">
-              Issaaf Kattan
-            </a>
-          </p>
-        </div>
       </div>
-    </div>
+    </section>
   );
 };
+
 export default About;

src/components/Features.tsx

@@ -10,7 +10,7 @@ const Features = () => {
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="lg:text-center">
           <h2
-            className={`text-base text-primary font-semibold tracking-wide uppercase`}
+            className={`text-base text-purple-500 font-semibold tracking-wide uppercase`}
           >
             {title}
           </h2>
@@ -28,7 +28,7 @@ const Features = () => {
               <div key={feature.name} className="relative">
                 <dt>
                   <div
-                    className={`absolute flex items-center justify-center h-12 w-12 rounded-md bg-background text-tertiary border-primary border-4`}
+                    className={`absolute flex items-center justify-center h-12 w-12 rounded-md bg-background text-tertiary border-purple-400 border-4`}
                   >
                     <img
                       className={`inline-block h-6 w-6 rounded-full`}

src/components/Header.tsx

@@ -13,7 +13,7 @@ const Menu = () => {
   return (
     <>
       <svg
-        className={`hidden lg:block absolute right-0 inset-y-0 h-full w-48 text-background transform translate-x-1/2`}
+        className="hidden lg:block absolute right-0 inset-y-0 h-full w-48 text-background transform translate-x-1/2"
         fill="currentColor"
         viewBox="0 0 100 100"
         preserveAspectRatio="none"
@@ -35,9 +35,7 @@ const Menu = () => {
                   <img alt="logo" className="h-16 w-auto sm:h-16" src={logo} />
                 </a>
                 <div className="-mr-2 flex items-center md:hidden">
-                  <Popover.Button
-                    className={`bg-background rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-secondary`}
-                  >
+                  <Popover.Button className="bg-background rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-300">
                     <span className="sr-only">Open main menu</span>
                     <MenuIcon className="h-6 w-6" aria-hidden="true" />
                   </Popover.Button>
@@ -47,9 +45,9 @@ const Menu = () => {
             <div className="hidden md:block md:ml-10 md:pr-4 md:space-x-8">
               {navigation.map((item) => (
                 <Link
-                  spy={true}
+                  spy
                   active="active"
-                  smooth={true}
+                  smooth
                   duration={1000}
                   key={item.name}
                   to={item.href}
@@ -59,10 +57,10 @@ const Menu = () => {
                 </Link>
               ))}
               <a
-                href="#"
-                className={`font-medium text-primary hover:text-secondary`}
+                href="https://drive.google.com/file/d/10YMAaYWrqMWCJkWQ5CmAeoVODPTUisms/view?resourcekey=0-AaBbCcDdEeFfGgHh"
+                className="font-medium text-purple-500 hover:text-purple-300"
               >
-                Call to action
+                {callToAction.text}
               </a>
             </div>
           </nav>
@@ -81,17 +79,13 @@ const Menu = () => {
             focus
             className="absolute z-10 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden"
           >
-            <div
-              className={`rounded-lg shadow-md bg-background ring-1 ring-black ring-opacity-5 overflow-hidden`}
-            >
+            <div className="rounded-lg shadow-md bg-background ring-1 ring-black ring-opacity-5 overflow-hidden">
               <div className="px-5 pt-4 flex items-center justify-between">
                 <div>
                   <img className="h-8 w-auto" src={logo} alt="" />
                 </div>
                 <div className="-mr-2">
-                  <Popover.Button
-                    className={`bg-background rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-secondary`}
-                  >
+                  <Popover.Button className="bg-background rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-300">
                     <span className="sr-only">Close main menu</span>
                     <XIcon className="h-6 w-6" aria-hidden="true" />
                   </Popover.Button>
@@ -100,9 +94,9 @@ const Menu = () => {
               <div className="px-2 pt-2 pb-3 space-y-1">
                 {navigation.map((item) => (
                   <Link
-                    spy={true}
+                    spy
                     active="active"
-                    smooth={true}
+                    smooth
                     duration={1000}
                     key={item.name}
                     to={item.href}
@@ -113,8 +107,8 @@ const Menu = () => {
                 ))}
               </div>
               <a
-                href={callToAction.href}
-                className={`block w-full px-5 py-3 text-center font-medium text-primary bg-gray-50 hover:bg-gray-100`}
+                href="https://drive.google.com/file/d/10YMAaYWrqMWCJkWQ5CmAeoVODPTUisms/view?resourcekey=0-AaBbCcDdEeFfGgHh"
+                className="block w-full px-5 py-3 text-center font-medium text-purple-300 bg-gray-50 hover:bg-gray-100"
               >
                 {callToAction.text}
               </a>

src/components/MainHero.tsx

@@ -9,7 +9,7 @@ const MainHero = () => {
       <div className="sm:text-center lg:text-left">
         <h1 className="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
           <span className="block xl:inline">{mainHero.title}</span>{' '}
-          <span className={`block text-primary xl:inline`}>
+          <span className={`block text-purple-500 xl:inline`}>
             {mainHero.subtitle}
           </span>
         </h1>
@@ -20,15 +20,15 @@ const MainHero = () => {
           <div className="rounded-md shadow">
             <a
               href={mainHero.primaryAction.href}
-              className={`w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-background bg-primary hover:bg-border hover:text-primary md:py-4 md:text-lg md:px-10`}
+              className={`w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-background bg-purple-500 hover:bg-border hover:text-white md:py-4 md:text-lg md:px-10`}
             >
               {mainHero.primaryAction.text}
             </a>
           </div>
           <div className="mt-3 sm:mt-0 sm:ml-3">
             <a
               href={mainHero.secondaryAction.href}
-              className={`w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md border-primary text-secondary bg-background hover:bg-border hover:text-primary md:py-4 md:text-lg md:px-10`}
+              className={`w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md border-purple-300 text-purple-300 bg-background hover:bg-border hover:text-purple-500 md:py-4 md:text-lg md:px-10`}
             >
               {mainHero.secondaryAction.text}
             </a>