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

Community feedback

• 

  Stevan-Dev•660

  @Stv-devl

  Posted 4 months 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

  13

  Marked as helpful
• 

  Marzia Jalili•8,410

  @MarziaJalili

  Posted 3 months ago

  A tiny suggestion:

  I'm kinda planning to create a study group on Google Chats let me know if you're interensted to be added there. Let's beat Elon Musk together.

  😂😂😂

  Here's my email:

  astronomyfancy@gmail.com

  Throw me a hi on Google Chats, if you are willing to be a part of the devastation.

  😎😎😎

  02