The Desgin along with components ready

[yashwanthvarma18]

DataCard6 Component

Component Creation

A new React component named DataCard6 was created in the src/components/DataCard directory. This component is responsible for displaying a grid of image cards and a community section.

Importing Assets

The component imports:

• React
• A CSS file for styling: DataCard6.css
• Nine image files (image1.png to image9.png) used within the component to display different images on the cards.

Component Structure

Inside the DataCard6 component:

• An array of card objects is defined, each containing an id, image, and alt text.
• The component returns a JSX structure that includes:
  • A grid layout for the cards
  • A community section with:
    • A heading
    • A paragraph
    • A button

Integration into the App

The DataCard6 component is imported and used in the main App component located in src/App.jsx. It is rendered within the App component's return statement, allowing it to be displayed on the main page of the application.

Application Setup

The App component is rendered in the main.jsx file using React's createRoot method, which mounts the application to the DOM element with the ID root.

Here is the ScreenShot of the work

I tried my level best the code is well structured and I done the outline of the desgin you can now easily change pictures
Thank You !

[yashwanthvarma18]

@siwamsingh please review it and merge it took me hours to do it

[dakshsinghrathore]

@yashwanthvarma18 kindly fix the conflicts and we will be reviewing it asap.

[yashwanthvarma18]

@dakshsinghrathore what is the issue in PR
What should i do to resolve them

[yashwanthvarma18]

@dakshsinghrathore There is no conflict i just imported the Datacard-6 into App.jsx
You can review and merge this your wish should i include it or just creating is enough

[yashwanthvarma18]

@dakshsinghrathore @siwamsingh Please review and merge it

[dakshsinghrathore]

Looks good to me 🙌🏼