[🏗️] major architectural changes: moving core files to /src

Author: mkubdev

public/images/test.PNG

@@ -0,0 +1,66 @@
+import Link from 'next/link'
+
+const Blogs = ({ articles, contentOnly = false, show = articles.length }) => {
+  return (
+    <section className='bg-white py-8'>
+      {!contentOnly && (
+        <div className='container max-w-5xl mx-auto'>
+          <h1 className='w-full my-2 text-4xl font-bold leading-tight text-center text-gray-800'>
+            Blogs
+          </h1>
+          <div className='w-full mb-4'>
+            <div className='h-1 mx-auto gradient w-64 opacity-25 my-0 py-0 rounded-t'></div>
+          </div>
+        </div>
+      )}
+      <div className='container max-w-screen-xl mx-auto pt-4 pb-8 grid grid-cols-3 mb-8 gap-6 px-8'>
+        {articles.length > 0 ? (
+          articles.slice(0, show).map((article, index) => (
+            <Link key={article.title + index} href={article.url} passHref>
+              <div className='flex flex-col justify-between items-stretch col-span-3 md:col-span-1 cursor-pointer p-2 shadow rounded-md focus:outline-none focus:shadow-outline transform transition hover:shadow-lg hover:scale-105 duration-300 ease-in-out'>
+                <div className='bg-white p-4 rounded-lg'>
+                  <div className='relative bg-contain'>
+                    <img
+                      alt={article.title}
+                      className='lg:h-60 xl:h-56 md:h-64 sm:h-72 xs:h-72 h-72 rounded-md w-full object-cover object-center mb-6'
+                      src={article.social_image}
+                    />
+                  </div>
+                  <div className='flex justify-between'>
+                    <h2 className='text-xl text-gray-900 font-semibold mb-4'>{article.title}</h2>
+                  </div>
+                  <p className='leading-relaxed text-sm text-gray-600'>{article.description}</p>
+                </div>
+                <time className='p-4 text-gray-500 text-xs flex items-end'>
+                  <img
+                    
+                    src={article?.user?.profile_image}
+                    alt={article.user.name}
+                    className='rounded-full w-16 h-16 mr-1'
+                  />
+                  <p className='ml-2 opacity-50'>
+                    by {article.user.name} on
+                    {' ' + article.readable_publish_date}
+                  </p>
+                </time>
+              </div>
+            </Link>
+          ))
+        ) : (
+          <div className='text-center w-full'>No Blogs found....</div>
+        )}
+      </div>
+      {!contentOnly && (
+        <div className='flex justify-center'>
+          <a href='https://dev.to/WebXDAO' target='_blank' rel='noreferrer'>
+            <button className='bg-gray-700 text-white mx-auto lg:mx-0 rounded-md py-2 px-8 shadow transform transition hover:scale-85 hover:shadow-lg duration-300 ease-in-out'>
+              See All
+            </button>
+          </a>
+        </div>
+      )}
+    </section>
+  )
+}
+
+export default Blogs

public/images/webxdao_logo.png

@@ -0,0 +1,11 @@
+const Footer = () => {
+  return (
+    <div className="bg-cover bg-white bg-opacity-10 text-white">
+      <div className="justify-center items-center flex h-full">
+        WebXDAO Footer
+      </div>
+    </div>
+  );
+};
+
+export default Footer;

src/components/Global/Blogs.jsx

@@ -0,0 +1,11 @@
+const Navbar = () => {
+  return (
+    <header className="bg-cover bg-white bg-opacity-10 min-h-16 h-16 text-white">
+      <div className="justify-center items-center flex h-full">
+        WebXDAO Navbar
+      </div>
+    </header>
+  );
+};
+
+export default Navbar;

src/components/Global/Footer.js

@@ -0,0 +1,98 @@
+import { prefix } from "../../constants"
+
+const DeveloperPath = () => {
+  const devPaths = [
+    {
+      name: 'Simplilearn',
+      imgUrl: '/simplilearn.png',
+      text: 'Blockchain tutorial for beginners to advanced Level.',
+      url: 'https://www.simplilearn.com/tutorials/blockchain-tutorial?source=sl_frs_nav_playlist_video_clicked'
+    },
+    {
+      name: 'Learn with Whiteboard',
+      imgUrl: '/whiteboard.png',
+      text: 'The skills required for a blockchain developer which is one of the in-demand professions today.',
+      url: 'https://www.youtube.com/watch?v=x9l3y0cdpuU'
+    },
+    {
+      name: 'Figment',
+      imgUrl: '/figment.png',
+      text: 'The Web 3 education platform for developers, by developers.Learn the Web 3 basics with 101 Pathways.',
+      url: 'https://learn.figment.io/'
+    },
+
+    {
+      name: 'CryptoZombies',
+      imgUrl: '/cryptozombie.png',
+      text: 'CryptoZombies is an interactive school that teaches you all things technical about blockchains.',
+      url: 'https://cryptozombies.io/'
+    }
+  ]
+
+  return (
+    <section className='bg-gray-50'>
+      <div className='container mx-auto max-w-7xl pt-8'>
+        <h1 className='w-full my-2 text-4xl font-bold leading-tight text-center text-gray-800'>
+          Blockchain Developer Path
+        </h1>
+        <p className='text-center text-gray-800 text-base px-6 mb-5 mx-10'>
+          The latest field in the tech industry
+        </p>
+        <div className='w-full mb-4'>
+          <div className='h-1 mx-auto gradient w-64 opacity-25 my-0 py-0 rounded-t'></div>
+        </div>
+
+        <div className='text-black grid grid-col-1 p-3 gap-y-3 md:grid md:grid-cols-2 md:gap-3 md:p-3'>
+          {devPaths.map(({ name, imgUrl, text, url }, index) => (
+            <div
+              key={name + index}
+              className='bg-white flex-1 rounded-md shadow focus:outline-none focus:shadow-outline transform transition hover:scale-105 hover:shadow-lg hover:z-20 duration-300 ease-in-out p-4'
+            >
+              <div className='flex items-center justify-start overflow-hidden'>
+                <div className='relative bg-contain w-1/3'>
+                  <img
+                    alt={name}
+                    className='bg-gray-50 p-5 rounded-md'
+                    src={prefix+imgUrl}
+                  />
+                </div>
+                <div id='body' className='flex flex-col gap-y-3 pl-5'>
+                  <h4 id='name' className='text-xl font-semibold'>
+                    {name}
+                  </h4>
+                  <p id='caption' className='text-gray-800'>
+                    {text}
+                  </p>
+                  <div id='label' className='flex text-sm gap-x-3'>
+                    <a href={url}>
+                      <button className='cursor-pointer font-semibold bg-blue-100 text-blue-600  rounded-md py-2 px-4 focus:outline-none'>
+                        Take me there!
+                      </button>
+                    </a>
+                    <button className='font-semibold bg-blue-100 text-blue-600 rounded-md py-2 px-4 focus:outline-none'>
+                      Development
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className='flex justify-center items-center py-5'>
+          <a
+            href='https://github.com/WebXDAO/blockchain-dev-path'
+            target='_blank'
+            rel='noreferrer'
+          >
+            <button className='bg-gray-700 text-white rounded-md py-2 px-8 shadow transform transition hover:scale-85 hover:shadow-lg duration-300 ease-in-out'>
+              See All
+            </button>
+          </a>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default DeveloperPath

src/components/Global/Navbar.js

@@ -0,0 +1,58 @@
+import Link from 'next/link'
+import { prefix } from '../../constants'
+
+const DevprotocolBrands = () => {
+  const projects = [
+    {
+      name: 'Dev Protocol',
+      imgUrl: '/dev_protocol.png',
+      text: 'Dev Protocol integrates with OSS so that projects or creators can authenticate and tokenize their work. It is a whole new creator economy evolving from open creators assets.',
+      url: 'https://devprotocol.xyz/'
+    },
+    {
+      name: 'Stakes.Social',
+      imgUrl: '/stakes_social.png',
+      text: 'Stakes.social is a new sponsor platform where both developers and sponsors are rewarded with tokens if they support their favorite projects by staking $DEV tokens.',
+      url: 'https://stakes.social/'
+    },
+    {
+      name: 'Dev Protocol Forum',
+      imgUrl: '/dev_protocol_forum.png',
+      text: 'Dev Protocol forum is an open conversation for everyone who can collaborate or propose ideas to the Dev Protocol team or help other community members.',
+      url: 'https://community.devprotocol.xyz/'
+    }
+  ]
+
+  return (
+    <section className='bg-white py-8'>
+      <div className='container max-w-5xl mx-auto m-8'>
+        <h1 className='w-full my-2 text-4xl font-bold leading-tight text-center text-gray-800'>
+          Dev Protocol Brand
+        </h1>
+        <p className='text-center text-gray-800 text-base px-6 mb-5 mx-10'>
+          Our Partner Open Source Projects
+        </p>
+        <div className='w-full mb-4'>
+          <div className='h-1 mx-auto gradient w-64 opacity-25 my-0 py-0 rounded-t'></div>
+        </div>
+      </div>
+
+      <div className='container mx-auto text-black max-w-screen-xl flex flex-wrap flex-col pt-4 mb-8 px-8'>
+        <div className='items-center gap-6 text-black grid grid-cols-1 md:grid-cols-3'>
+          {projects.map(({ name, imgUrl, text, url }, index) => (
+            <Link key={name + index} href={url} passHref className='h-full group'>
+              <div className='mx-auto flex flex-col justify-evenly items-center h-full object-center text-center p-8 shadow cursor-pointer rounded-md focus:outline-none focus:shadow-outline transform bg-white transition hover:shadow-lg hover:scale-105 duration-300 ease-in-out'>
+                <div className='relative h-24 w-full flex-shrink-0'>
+                  <img src={prefix + imgUrl} alt={name} className="object-contain" />
+                </div>
+                <p className='text-gray-800 mt-8 mb-2 text-sm px-8 sm:px-4 h-full'>{text}</p>
+              </div>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default DevprotocolBrands

src/components/Home/DeveloperPath.jsx

@@ -0,0 +1,39 @@
+const Hero = () => {
+  return (
+    <>
+      <section className="bg-transparent h-full">
+        <div className="px-4 py-32 mx-auto max-w-screen-xl lg:h-full lg:items-center lg:flex lg:flex-wrap">
+          <div className="max-w-xl text-white text-center md:text-left">
+            <h1 className="text-6xl font-bold sm:text-7xl">
+              Build with us,{' '}
+              <span className="sm:block">the future of web.</span>
+            </h1>
+
+            <p className="max-w-lg mt-4 sm:leading-relaxed sm:text-xl text-white/50">
+              We focus on building and talking about possible future usage of
+              web technologies.
+            </p>
+
+            <div className="flex flex-wrap mt-8 text-center items-center justify-center md:justify-start gap-4">
+              <button
+                type="button"
+                className="border-dark inline-flex items-center rounded-md border border-transparent bg-gray-100 px-8 py-3 text-base font-medium text-slate-700 shadow-md hover:bg-gray-700 hover:text-slate-100 focus:outline-none focus:ring-2 focus:ring-cyber-webx focus:ring-offset-2"
+              >
+                Join WebXDAO
+              </button>
+              <button
+                href="https://github.com/WebXDAO/start-here"
+                type="button"
+                className="border-dark inline-flex items-center rounded-md border border-transparent bg-gray-100 px-8 py-3 text-base font-medium text-slate-700 shadow-md hover:bg-gray-700 hover:text-slate-100 focus:outline-none focus:ring-2 focus:ring-cyber-webx focus:ring-offset-2"
+              >
+                Contribute
+              </button>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+};
+
+export default Hero;

src/components/Home/DevprotocolBrands.jsx

@@ -0,0 +1,48 @@
+const Projects = () => {
+  const projectsData = [
+    {
+      title: 'Total Courses',
+      text: 'Lot of courses that offer free and premium features',
+      num: 100,
+      color: 'text-blue-500',
+      url: '#'
+    },
+    {
+      title: 'Free Tools',
+      text: 'Explore free tools for students that would help you achieve something',
+      num: 80,
+      color: 'text-green-600',
+      url: '#'
+    },
+    {
+      title: 'Premium Tools',
+      text: "Need more features? Let's try the premium tools!",
+      num: 40,
+      color: 'text-red-600',
+      url: '#'
+    }
+  ]
+
+  return (
+    <section className='bg-white py-8'>
+      <div className='container mx-auto flex flex-wrap pt-4 pb-12'>
+        {projectsData.map((item, index) => (
+          <div
+            key={item.title + index}
+            className='w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink text-center'
+          >
+            <div className='flex-1 bg-white overflow-hidden'>
+              <a href='#' className='flex flex-wrap no-underline  hover:no-underline'>
+                <div className={`w-full font-bold text-3xl px-6 ${item.color}`}>{item.num}+</div>
+                <div className='w-full font-bold text-xl text-gray-900 px-6 p-5'>{item.title}</div>
+                <p className='text-gray-800 text-base px-6 mb-5 text-center mx-10'>{item.text}</p>
+              </a>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}
+
+export default Projects