[FEATURE] Responsivness of Blurbs

[mkubdev]

Detailed description

Blurbs on homepage aren't responsive with screen size:

We should add Tailwind utility classes on this section of app/page.tsx L114: https://github.com/WebXDAO/WebXDAO.github.io/blob/87ad6dc826b598a23ad97f208c6b986fffc2ca68/app/page.tsx#L114

See more on the official documentation to learn how Responsive is managed with Tailwind.

Context

Responsiveness is very important. 💡 Users using more phones than browser!

Possible implementation

This is a possible implementation, using Tailwind utility classes:

<section className="flex justify-center px-4 md:px-10 lg:px-40 py-0">
  <div className="my-12 flex flex-col md:flex-row gap-8">
    <div className="flex flex-col items-center justify-center gap-3 text-center">
      <div className="border-l-3 flex justify-center rounded-lg border-white bg-white p-8 shadow-md shadow-purple-300">
        <Icons.collaborate className="h-15 w-15 mr-1" />
      </div>
      <div className="text-lg font-bold">Collaborate</div>
      <span className="text-sm">
        Collaborate with other members to achieve common goals and objectives.
      </span>
    </div>

    <div className="flex flex-col items-center justify-center gap-3 text-center">
      <div className="border-l-3 flex justify-center rounded-lg border-white bg-white p-8 shadow-md shadow-purple-300">
        <Icons.blockchain className="h-15 w-15 mr-1" />
      </div>
      <div className="text-lg font-bold">Blockchain</div>
      <span className="text-sm">
        Dedicated to exploring new ways to leverage the power Of this transformative
        technology.
      </span>
    </div>

    <div className="flex flex-col items-center justify-center gap-3 text-center">
      <div className="border-l-3 flex justify-center rounded-lg border-white bg-white p-8 shadow-md shadow-purple-300">
        <Icons.decentralization className="h-15 w-15 mr-1" />
      </div>
      <div className="text-lg font-bold">Decentralization</div>
      <span className="text-sm">
        Operates in a decentralized manner, giving power to its community members.
      </span>
    </div>
  </div>
</section>

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[Preetam078]

please i assign this task to me under the GSSoC 23.

[mkubdev]

Hey! I assigned you :)

[Preetam078]

hi member while I was setting up the local environment, after installing "npm install" and hitting "npm run dev" getting some error below and

[Preetam078]

I already have taken pull from main branch in my current working branch. can anyone help me

[darkterminal]

Hmmm... what is your nodejs version? Did you try it to remove node_modules and run npm install again?

[Preetam078]

yes i removed cache and node_modules but getting same error can you give a vows of what version of node the developers must use to avoid the error

current node version = 14.21.3 ( in local machine )

[mkubdev]

yes i removed cache and node_modules but getting same error can you give a vows of what version of node the developers must use to avoid the error

current node version = 14.21.3 ( in local machine )

Hey, I'm sorry I can't replicate it. Can you try using node >= 16 ?

[Preetam078]

hello admin know the localserver is running after node version has been upgraded to 16. i think in this case we should update the readme.md file to give an addition instruction to use node version 16 or higher for development environment. please assign this task to me as well

[Preetam078]

hello admin i have fixed the bug for blurbs responsivness

for Mobile view (screen size = same)

for tablet and PC view (screen size = medium, large)

Could I raise PR ?