Merge pull request #104 from bas-kirill/feature/flexiable-design-and-…

…redesign-home-page

feat(flexible-design): introduce flexible design and redesign home page

CODE_OF_CONDUCT.md

@@ -14,21 +14,21 @@ appearance, race, religion, or sexual identity and orientation.
 Examples of behavior that contributes to creating a positive environment
 include:
 
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or
+- The use of sexualized language or imagery and unwelcome sexual attention or
   advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic
   address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Our Responsibilities
@@ -73,4 +73,4 @@ available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.ht
 [homepage]: https://www.contributor-covenant.org
 
 For answers to common questions about this code of conduct, see
-https://www.contributor-covenant.org/faq
+https://www.contributor-covenant.org/faq

CONTRIBUTING.md

@@ -12,16 +12,19 @@ Below are a few guidelines we would like you to follow.
 If you need help, please reach out to us by opening an issue.
 
 ## Report a bug
+
 Reporting bugs is one of the best ways to contribute. Before creating a bug report, please check that an [issue](/issues) reporting the same problem does not already exist. If there is such an issue, you may add your information as a comment.
 
 To report a new bug you should open an issue that summarizes the bug and set the label to "bug".
 
 If you want to provide a fix along with your bug report: That is great! In this case please send us a pull request as described in section [Contribute Code](#contribute-code).
 
 ## Suggest a feature
+
 To request a new feature you should open an [issue](../../issues/new) and summarize the desired functionality and its use case. Set the issue label to "feature".
 
 ## Contribute code
+
 This is an outline of what the workflow for code contributions looks like
 
 - Check the list of open [issues](../../issues). Either assign an existing issue to yourself, or
@@ -44,12 +47,14 @@ It is always best to discuss your plans beforehand, to ensure that your contribu
 Thanks for your contributions!
 
 ### Commit messages
+
 Your commit messages ideally can answer two questions: what changed and why. The subject line should feature the
 “what” and the body of the commit should describe the “why”.
 
 When creating a pull request, its description should reference the corresponding issue id.
 
 ### Sign your work / Developer certificate of origin
+
 All contributions (including pull requests) must agree to the Developer Certificate of Origin (DCO) version 1.1. This is exactly the same one
 created and used by the Linux kernel developers and posted on http://developercertificate.org/. This is a
 developer's certification that he or she has the right to submit the patch for inclusion into the project.
@@ -61,7 +66,4 @@ with a [Git hook](https://stackoverflow.com/questions/15015894/git-add-signed-of
 git commit -s -m "adding X to change Y"
 ```
 
-
-
-
-**Have fun, and happy hacking!**
+**Have fun, and happy hacking!**

client/package.json

@@ -22,6 +22,7 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.25.1",
     "react-scripts": "5.0.1",
+    "react-slideshow-image": "^4.3.1",
     "typescript": "^4.9.5",
     "typescript-cookie": "^1.0.6",
     "web-vitals": "^2.1.4"

client/src/app/App.css

@@ -6,15 +6,27 @@
 ::before,
 ::after {
   box-sizing: inherit;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    avenir next,
+    avenir,
+    segoe ui,
+    helvetica neue,
+    helvetica,
+    Ubuntu,
+    roboto,
+    noto,
+    arial,
+    sans-serif;
 }
 
 #app {
-  border: 1px solid black;
-  background-color: gray;
+  background-color: #f0f0f0;
   max-width: 1024px;
   margin: 0 auto;
 }
 
-#app > h1 {
+h1 {
   text-align: center;
 }

client/src/pages/favorite/ui/FavoritePage.tsx

@@ -2,6 +2,7 @@ import { Header } from "widgets/header";
 import { InstrumentCard } from "shared/ui/instrument-card/InstrumentCard";
 import { useLoaderData } from "react-router-dom";
 import { FavoriteLoader } from "pages/favorite";
+import { Footer } from "widgets/footer";
 
 export const FavoritePage = () => {
   const loader = useLoaderData() as FavoriteLoader;
@@ -10,13 +11,20 @@ export const FavoritePage = () => {
     <>
       <Header />
       <h1>Favorite</h1>
+
+      {loader.instrumentDetails.length == 0 && (
+        <div style={{ textAlign: "center" }}>Favorite List is Empty</div>
+      )}
+
       {loader.instrumentDetails.map((instrument) => (
         <InstrumentCard
           key={instrument.instrument_id.instrument_id}
           instrument={instrument}
           favorite={true}
         />
       ))}
+
+      <Footer />
     </>
   );
 };

client/src/pages/home/ui/Home.tsx

@@ -1,8 +1,50 @@
 import React from "react";
-import "./Home.css";
+import "./styles/Home.css";
 import { Header } from "widgets/header";
 import { Footer } from "widgets/footer";
 import { useJwt } from "pages/login";
+import { Slide } from "react-slideshow-image";
+import saxophone from "pages/home/ui/images/saxo.webp";
+import guitar from "pages/home/ui/images/guitar.webp";
+import rock_guitar from "pages/home/ui/images/rock_guitar.webp";
+import violin from "pages/home/ui/images/violin.webp";
+import homeLogo from "pages/home/ui/images/home-logo.webp";
+
+const images = [
+  {
+    image: saxophone,
+    caption: "Saxophone",
+  },
+  {
+    image: guitar,
+    caption: "Guitar",
+  },
+  {
+    image: rock_guitar,
+    caption: "Rock Guitar",
+  },
+  {
+    image: violin,
+    caption: "Violin",
+  },
+];
+
+const trendingInstrumentsResponsiveSettings = [
+  {
+    breakpoint: 571,
+    settings: {
+      slidesToShow: 3,
+      slidesToScroll: 1,
+    },
+  },
+  {
+    breakpoint: 570,
+    settings: {
+      slidesToShow: 1,
+      slidesToScroll: 1,
+    },
+  },
+];
 
 export function Home() {
   useJwt();
@@ -11,14 +53,19 @@ export function Home() {
     <div id="home">
       <Header />
 
-      <div id="home-logo"></div>
-
-      <form id="home-search-bar-form">
-        <input type="text" placeholder="What instrument?" size={50} />
-        <input type="submit" value="Search" />
-      </form>
+      <div
+        id="home-logo"
+        style={{
+          background: `url(${homeLogo}) no-repeat center, linear-gradient(red, yellow)`,
+        }}
+      >
+        <form id="home-search-bar-form">
+          <input type="text" placeholder="What instrument?" />
+          <input type="submit" value="Search" />
+        </form>
+      </div>
 
-      <h1>Why Choose Us for Your Musical Needs</h1>
+      <h1 style={{ color: "#002244" }}>Why Choose Us for Your Musical Needs</h1>
 
       <div id="home-reasons-choose">
         <div>
@@ -29,10 +76,22 @@ export function Home() {
       </div>
 
       <h1>Trending Instruments</h1>
-      <div id="trending-instruments">
-        <div></div>
-        <div></div>
-        <div></div>
+
+      <div id={"trending-instruments"}>
+        <Slide
+          autoplay={true}
+          responsive={trendingInstrumentsResponsiveSettings}
+        >
+          {images.map((img) => (
+            <div key={img.image} className="each-slide">
+              <img
+                src={img.image}
+                alt={img.caption}
+                style={{ width: "100%", borderRadius: "5px" }}
+              />
+            </div>
+          ))}
+        </Slide>
       </div>
 
       <Footer />