Merge pull request #63 from chingu-voyages/CH-74-fix-svgwave-responsi…

…veness-in-About-page Ch 74 fix svgwave responsiveness in about page
chingu-voyages · Nov 2, 2023 · 7e09b3e · 7e09b3e
2 parents b89c822 + d7b18ca
commit 7e09b3e
Show file tree

Hide file tree

Showing 4 changed files with 190 additions and 130 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,79 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.13](https://github.com/chingu-voyages/v46-tier2-team-19/compare/v0.0.11...v0.0.13) (2023-11-01)
+
+
+### Features
+
+* **assets/index.js:** add FeatureRecipe to exported assets ([fe6db35](https://github.com/chingu-voyages/v46-tier2-team-19/commit/fe6db351246e00d830bdc1ce8bda06cff6f7c954))
+* **assets:** add new FeatureRecipe image and export it in index.js ([5ecb49c](https://github.com/chingu-voyages/v46-tier2-team-19/commit/5ecb49c432d108dae392722464fcdb4d36665fbb))
+* **assets:** add new Sweet Peppers brand assets in PNG, PSD, and WEBP formats ([5ac6469](https://github.com/chingu-voyages/v46-tier2-team-19/commit/5ac646999bfb8007df2fb7f5e497df17349f0c75))
+* **jsconfig.json:** add path alias for assets directory ([634f3c4](https://github.com/chingu-voyages/v46-tier2-team-19/commit/634f3c4ab8bfcfb1a52f8a6cf0a01a9259b8586a))
+* **search.jsx:** add drag prevention for Yumi character and redesign page layout ([ad09212](https://github.com/chingu-voyages/v46-tier2-team-19/commit/ad092127db5b01cc25516b06a1f335b86d3499d7))
+* **search.jsx:** redesign search page layout and add new SVG component ([527299f](https://github.com/chingu-voyages/v46-tier2-team-19/commit/527299f9e586ea6ad286dff09b9515d517bd8787))
+* **tailwind.config.js:** add gradient-Search to tailwind configuration ([d30805f](https://github.com/chingu-voyages/v46-tier2-team-19/commit/d30805ff8f6bcb1c81163fa5cbacadad8c56c50d))
+* **top recipes section:** recipe Link card added with links to some recipes ([9663103](https://github.com/chingu-voyages/v46-tier2-team-19/commit/966310307db59b8c065a322ca54e53e08000d74d))
+
+
+### Bug Fixes
+
+* **about.jsx:** add tailwind color fill class to SvgWave components ([83d272f](https://github.com/chingu-voyages/v46-tier2-team-19/commit/83d272f863f2583a9ef3ae2cdd00cea19ac79712))
+* Add missing closing parenthesis and semicolon ([bfd22d2](https://github.com/chingu-voyages/v46-tier2-team-19/commit/bfd22d2246bacdd125449fc9efdf55f1bfd6a945))
+* **assets/index.js:** orrect import path for FeatureRecipe and removed unused sweet-peppers assets ([85ffaa8](https://github.com/chingu-voyages/v46-tier2-team-19/commit/85ffaa81eea3082499fcae82f08b4b6f8e7aa2a5))
+* **home page:** tune home page responsive styles ([300f35a](https://github.com/chingu-voyages/v46-tier2-team-19/commit/300f35a46db5ae3d37a803c18db7b226d962f417))
+* **svgwave.jsx:** add fallback color to SVG fill property ([f51a5e7](https://github.com/chingu-voyages/v46-tier2-team-19/commit/f51a5e768699e986c1dea976fb6de863ed026875)), closes [#FFC945](https://github.com/chingu-voyages/v46-tier2-team-19/issues/FFC945)
+* **top recipe cards:** ensure font size is small enough to fit on two lines ([6ab7fa2](https://github.com/chingu-voyages/v46-tier2-team-19/commit/6ab7fa2d91dc6c0b2217f1a1ff42637266117135))
+
+### [0.0.12](https://github.com/chingu-voyages/v46-tier2-team-19/compare/v0.0.11...v0.0.12) (2023-11-01)
+
+
+### Features
+
+* **assets/index.js:** add FeatureRecipe to exported assets ([fe6db35](https://github.com/chingu-voyages/v46-tier2-team-19/commit/fe6db351246e00d830bdc1ce8bda06cff6f7c954))
+* **assets:** add new FeatureRecipe image and export it in index.js ([5ecb49c](https://github.com/chingu-voyages/v46-tier2-team-19/commit/5ecb49c432d108dae392722464fcdb4d36665fbb))
+* **assets:** add new Sweet Peppers brand assets in PNG, PSD, and WEBP formats ([5ac6469](https://github.com/chingu-voyages/v46-tier2-team-19/commit/5ac646999bfb8007df2fb7f5e497df17349f0c75))
+* **jsconfig.json:** add path alias for assets directory ([634f3c4](https://github.com/chingu-voyages/v46-tier2-team-19/commit/634f3c4ab8bfcfb1a52f8a6cf0a01a9259b8586a))
+* **search.jsx:** add drag prevention for Yumi character and redesign page layout ([ad09212](https://github.com/chingu-voyages/v46-tier2-team-19/commit/ad092127db5b01cc25516b06a1f335b86d3499d7))
+* **search.jsx:** redesign search page layout and add new SVG component ([527299f](https://github.com/chingu-voyages/v46-tier2-team-19/commit/527299f9e586ea6ad286dff09b9515d517bd8787))
+* **tailwind.config.js:** add gradient-Search to tailwind configuration ([d30805f](https://github.com/chingu-voyages/v46-tier2-team-19/commit/d30805ff8f6bcb1c81163fa5cbacadad8c56c50d))
+* **top recipes section:** recipe Link card added with links to some recipes ([9663103](https://github.com/chingu-voyages/v46-tier2-team-19/commit/966310307db59b8c065a322ca54e53e08000d74d))
+
+
+### Bug Fixes
+
+* **about.jsx:** add tailwind color fill class to SvgWave components ([83d272f](https://github.com/chingu-voyages/v46-tier2-team-19/commit/83d272f863f2583a9ef3ae2cdd00cea19ac79712))
+* Add missing closing parenthesis and semicolon ([bfd22d2](https://github.com/chingu-voyages/v46-tier2-team-19/commit/bfd22d2246bacdd125449fc9efdf55f1bfd6a945))
+* **assets/index.js:** orrect import path for FeatureRecipe and removed unused sweet-peppers assets ([85ffaa8](https://github.com/chingu-voyages/v46-tier2-team-19/commit/85ffaa81eea3082499fcae82f08b4b6f8e7aa2a5))
+* **home page:** tune home page responsive styles ([300f35a](https://github.com/chingu-voyages/v46-tier2-team-19/commit/300f35a46db5ae3d37a803c18db7b226d962f417))
+* **svgwave.jsx:** add fallback color to SVG fill property ([f51a5e7](https://github.com/chingu-voyages/v46-tier2-team-19/commit/f51a5e768699e986c1dea976fb6de863ed026875)), closes [#FFC945](https://github.com/chingu-voyages/v46-tier2-team-19/issues/FFC945)
+* **top recipe cards:** ensure font size is small enough to fit on two lines ([6ab7fa2](https://github.com/chingu-voyages/v46-tier2-team-19/commit/6ab7fa2d91dc6c0b2217f1a1ff42637266117135))
+
+### [0.0.11](https://github.com/chingu-voyages/v46-tier2-team-19/compare/v0.0.10...v0.0.11) (2023-10-31)
+
+
+### ⚠ BREAKING CHANGES
+
+* **about.jsx:** y
+
+CH-74
+
+### Features
+
+* **picture component & front page styling:** add responsive picture component & tune front page ([3f6ed49](https://github.com/chingu-voyages/v46-tier2-team-19/commit/3f6ed498179fd5b7f835ea1e43de8ac7db030b2d))
+
+
+### Bug Fixes
+
+* **about.jsx:** fix wave image and general page responsiveness ([f3ad0a1](https://github.com/chingu-voyages/v46-tier2-team-19/commit/f3ad0a18f42ba57e5871db37cef141727336a422))
+
+### [0.0.9](https://github.com/chingu-voyages/v46-tier2-team-19/compare/v0.0.8...v0.0.9) (2023-10-29)
+
+
+### Bug Fixes
+
+* **header.jsx:** apply 'open' prop to Menu ([cf07c5a](https://github.com/chingu-voyages/v46-tier2-team-19/commit/cf07c5a4f366cc6e6614e091e34443750e7b12b8))
+
 ### [0.0.10](https://github.com/chingu-voyages/v46-tier2-team-19/compare/v0.0.8...v0.0.10) (2023-10-30)
 
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "recipe-app",
   "private": true,
-  "version": "0.0.10",
+  "version": "0.0.13",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/src/pages/About.jsx b/src/pages/About.jsx
@@ -1,152 +1,139 @@
 import { FaLinkedin } from "react-icons/fa";
 import { FaGithubSquare } from "react-icons/fa";
-import { Button, Heading } from "@/features/ui";
-import homepage from "../assets//about/homepage.png";
+import { Heading } from "@/features/ui";
+import homepage from "../assets/about/homepage.png";
 import { team } from "@/constants";
 import SvgComponent from "@/assets/HomePage/svgWave";
-import { useState } from "react";
 
 const About = () => {
-  const [showMore, setShowMore] = useState(false);
-
   return (
     <div>
       {/* <h1 className="text-center">About</h1> */}
       <Heading level="h1" variant="tangerine" className="px-10 pt-10">
         About
       </Heading>
 
-      <div className="grid gap-12">
-        <section className="px-10 pb-10" id="project">
-          <Heading level="h2" variant="watermelon">
-            This Project
-          </Heading>
-          <div className="grid gap-6 lg:grid-cols-2">
-            <div>
-              <p className="mb-4">
-                We developed a unique web app with a distinctive brand and a
-                whimsical, animated design. YumYumYes! is intended to make
-                recipe browsing fun! Colorful mascots Yumi and Chef Carrots
-                welcome visitors to our pages, and delightful visual motifs
-                including text gradients, 3d colored balls, dashed lines and
-                gentle curves are intended to make the app feel more alive and
-                engaging.
-              </p>
+      {/* START Project section */}
+      <section className="relative px-10 pb-10 xl:pb-20" id="project">
+        <Heading level="h2" variant="watermelon">
+          This Project
+        </Heading>
 
-              {showMore && (
-                <>
-                  <p className="mb-4">
-                    YumYumYes! allows users to search for recipes by ingredient
-                    and filter by useful tags such as difficulty, occasion, etc.
-                    The app also allows users to save recipes to their favorites
-                    list, and to view their favorites list at any time.
-                  </p>
-                  <p className="mb-4">
-                    The app is built as a fully responsive web app compatible
-                    with all modern web browsers, both mobile and desktop.
-                    We&apos;ve taken care to make it intuitive for all users,
-                    and accessible to users with different abilities.
-                  </p>
-                </>
-              )}
+        <div className="pb-10">
+          <img
+            src={homepage}
+            alt="YumYumYes! hompage"
+            className="float-right rounded-lg w-1/2 ml-4 mb-2 max-w-sm"
+          />
+          <p className="mb-4">
+            We developed a unique web app with a distinctive brand and a
+            whimsical, animated design. YumYumYes! is intended to make recipe
+            browsing fun! Colorful mascots Yumi and Chef Carrots welcome
+            visitors to our pages, and delightful visual motifs including text
+            gradients, 3d colored balls, dashed lines and gentle curves are
+            intended to make the app feel more alive and engaging.
+          </p>
 
-              <Button
-                variant="secondary"
-                size="small"
-                onClick={(e) => {
-                  setShowMore(!showMore);
-                  e.target.blur();
-                }}
-              >
-                {showMore ? "Read less" : "Read more"}
-              </Button>
-            </div>
-            <img
-              src={homepage}
-              alt="YumYumYes! hompage"
-              className="rounded-lg"
-            />
-          </div>
-        </section>
+          <>
+            <p className="mb-4">
+              YumYumYes! allows users to search for recipes by ingredient and
+              filter by useful tags such as difficulty, occasion, etc. The app
+              also allows users to save recipes to their favorites list, and to
+              view their favorites list at any time.
+            </p>
+            <p className="mb-4">
+              The app is built as a fully responsive web app compatible with all
+              modern web browsers, both mobile and desktop. We&apos;ve taken
+              care to make it intuitive for all users, and accessible to users
+              with different abilities.
+            </p>
+          </>
+        </div>
 
-        <section className="bg-gradient-sky-diagonal relative" id="team">
-          <Heading
-            level="h2"
-            variant="watermelon"
-            className="px-10 pt-10 md:pt-14 lg:pt-20 xl:pt-24 text-white"
-          >
-            Our Team
-          </Heading>
+        {/* Display top of wave between sections */}
+        <SvgComponent className="absolute -bottom-1 left-0 fill-[#FFC945]" />
+      </section>
+      {/* END Project section */}
 
-          <div className="grid gap-6 gap-x-20 md:grid-cols-2 xl:grid-cols-3">
-            {team.map(({ name, role, summary, image, socials }, index) => (
-              <article
-                className="group mb-6 px-10 pt-14 first:pt-0 md:pt-0 relative"
-                key={name}
+      {/* START Team section */}
+      <section className="relative bg-gradient-sky-diagonal pt-6" id="team">
+        <Heading
+          level="h2"
+          variant="watermelon"
+          className="px-10 pt-10 md:pt-14 lg:pt-20 xl:pt-24 text-white"
+        >
+          Our Team
+        </Heading>
+
+        <div className="grid gap-x-20 md:grid-cols-2 xl:grid-cols-3">
+          {team.map(({ name, role, summary, image, socials }, index) => (
+            <article
+              className="relative group px-10 py-14 first:pt-0 md:pt-0"
+              key={name}
+            >
+              <Heading level="h3" variant="lava">
+                {name}
+              </Heading>
+              <Heading
+                level="h4"
+                variant="lava"
+                className="font-display font-bold text-2xl text-lava-500 -mt-2 mb-3"
               >
-                <Heading level="h3" variant="lava">
-                  {name}
-                </Heading>
-                <Heading
-                  level="h4"
-                  variant="lava"
-                  className="font-display font-bold text-2xl text-lava-500 -mt-2"
-                >
-                  {role}
-                </Heading>
+                {role}
+              </Heading>
 
-                <div className="relative grid gap-6 grid-flow-col auto-cols-auto">
-                  <p className="z-10">{summary}</p>
-                  <div>
-                    <img
-                      className="rounded-full border-4 border-sky-200 transition duration-300 origin-bottom group-hover:scale-125 group-hover:-rotate-6"
-                      src={image}
-                      alt={name}
-                    />
-                    <article className="flex justify-center gap-4 text-4xl text-lava-800 mt-2">
-                      <a
-                        className="transition ease-in-out duration-300 origin-bottom hover:text-lava-900 hover:scale-110"
-                        href={socials[0].url}
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        <FaGithubSquare />
-                      </a>
-                      <a
-                        className="transition ease-in-out duration-300 origin-bottom hover:text-lava-900 hover:scale-110"
-                        href={socials[1].url}
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        <FaLinkedin />
-                      </a>
-                    </article>
-                  </div>
+              <div className="relative">
+                <div className="float-right ml-4">
+                  <img
+                    className="rounded-full border-4 border-sky-200 transition duration-300 origin-bottom group-hover:scale-125 group-hover:rotate-3"
+                    src={image}
+                    alt={name}
+                  />
+                  <article className="flex justify-center gap-4 text-4xl text-lava-800 mt-2">
+                    <a
+                      className="transition ease-in-out duration-300 origin-bottom hover:text-lava-900 hover:scale-110"
+                      href={socials[0].url}
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      <FaGithubSquare />
+                    </a>
+                    <a
+                      className="transition ease-in-out duration-300 origin-bottom hover:text-lava-900 hover:scale-110"
+                      href={socials[1].url}
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      <FaLinkedin />
+                    </a>
+                  </article>
                 </div>
+                <p className="z-10">{summary}</p>
+              </div>
+
+              {
+                // Display top of wave
+                // but don't display top of wave after last team member
+                index !== team.length - 1 && (
+                  <SvgComponent className="absolute -bottom-1 left-0 md:hidden fill-[#FFC945]" />
+                )
+              }
 
-                {index !== 0 && (
-                  <>
-                    {index % 2 !== 0 ? (
-                      <>
-                        <SvgComponent className="absolute top-0 left-0 rotate-180 -scale-x-100 md:hidden" />
-                        <SvgComponent className="absolute -top-8 left-0 -scale-x-100 md:hidden" />
-                      </>
-                    ) : (
-                      <>
-                        <SvgComponent className="absolute top-0 left-0 rotate-180 md:hidden" />
-                        <SvgComponent className="absolute -top-8 left-0 md:hidden" />
-                      </>
-                    )}
-                  </>
-                )}
-              </article>
-            ))}
-          </div>
+              {
+                // Display bottom of wave
+                // but don't display bottom of wave before first team member
+                index !== 0 && (
+                  <SvgComponent className="absolute -top-1 left-0 rotate-180 md:hidden fill-[#FFC945]" />
+                )
+              }
+            </article>
+          ))}
+        </div>
 
-          <SvgComponent className="absolute -top-8 left-0" />
-          <SvgComponent className="absolute top-0 left-0 rotate-180" />
-        </section>
-      </div>
+        {/* Display bottom of wave in between sections */}
+        <SvgComponent className="absolute -top-1 left-0 rotate-180 fill-[#FFC945]" />
+      </section>
+      {/* END Team section */}
     </div>
   );
 };