Responsive landing page, built using ReactJS, CSS Grid and Flexbox

Community feedback

• 

  P

  Stevan-Dev•600

  @Stv-devlPosted 1 day ago

  Hi,

  I like your React components, they are clean and have well-structured JSX.

  I have some advice for you :

  • You can keep each component in its own folder and include its CSS file there. This makes it easier to reuse the components.

  • Consider placing your images and other assets (like font) in the public folder.

  • It’s a good practice to use the map to display elements in React :

  const PhotoGallery = () => {
    const images = [
      { src: MilkBottles, alt: "milk-bottles" },
      { src: Orange, alt: "orange-on-table" },
      { src: Cone, alt: "ice-cream-cone" },
      { src: SugarCubes, alt: "sugar-cubes" },
    ];
  
    return (
      <section className="gallery-section">
        <div className="gallery-grid-container">
          {images.map((image, index) => (
            <img key={index} src={image.src} alt={image.alt} />
          ))}
        </div>
      </section>
    );
  };
  
  export default PhotoGallery;
  

  const Testimonials = () => {
    // 1. Define an array of testimonials
    const testimonialsData = [
      {
        image: Emily,
        alt: "Emily",
        review: "We put our trust in Sunnyside and they delivered, making sure our needs were met and deadlines were always hit.",
        name: "Emily R.",
        occupation: "Marketing Director",
      },
      {
        image: Thomas,
        alt: "Thomas",
        review: "Sunnyside’s enthusiasm coupled with their keen interest in our brand’s success made it a satisfying and enjoyable experience.",
        name: "Thomas S.",
        occupation: "Chief Operating Officer",
      },
      {
        image: Jennie,
        alt: "Jennie",
        review: "Incredible end result! Our sales increased over 400% when we worked with Sunnyside. Highly recommended!",
        name: "Jennie F.",
        occupation: "Business Owner",
      },
    ];
  
    return (
      <section className="testimonials-section">
        <h1 className="testimonials-heading">Client Testimonials</h1>
        <div className="testimonials-grid-container">
          {testimonialsData.map(({ image, alt, review, name, occupation }, index) => (
            <div key={index}>
              <img src={image} alt={alt} />
              <p className="review">{review}</p>
              <p className="name">{name}</p>
              <p className="occupation">{occupation}</p>
            </div>
          ))}
        </div>
      </section>
    );
  };
  
  export default Testimonials;
  

  Good continuation

  Marked as helpful

  1

  ---

  

  Kuvashnee Naidoo•370

  @KuvashneeNaidooPosted about 18 hours ago

  Hi @Stv-devl

  Thank you for the helpful tips! I will definitely try to improve the directory structure and use the map method to render the elements. 🙌🌟🙌

  Question: I understand that the public folder is meant for static assets that don’t require processing and are shared across components, while the src folder is for component-specific images or assets that need to be bundled and optimized during the build process.

  Therefore, just checking again if my current approach of using the src folder is correct?

  Your response is appreciated 🙏

  0

  

  P

  Stevan-Dev•600

  @Stv-devlPosted about 16 hours ago

  @KuvashneeNaidoo you true my mistake, images from componants should be in the src.

  0

  

  Kuvashnee Naidoo•370

  @KuvashneeNaidooPosted about 16 hours ago

  @Stv-devl Thank you for clarifying 🙏

  Happy coding !!! 😁

  0