DEV Community: a_moah__

Smart Contract Development - Functions

a_moah__ — Mon, 22 Jan 2024 13:52:07 +0000

Introduction

The programming language Solidity, which underpins Ethereum smart contracts, enables programmers to design DApps (decentralised apps) that run smoothly on the blockchain. Functions, the fundamental units of smart contracts, are at the core of Solidity. We will explore the syntax, types, and real-world application of Solidity functions using the Remix IDE as we go on a quest to become experts in this blog.

Understanding Functions in Solidity

Functions are crucial elements in Solidity that include reusable code segments, enabling developers to effectively arrange and construct their smart contracts. Functions can be called by external accounts, by other functions, or even automatically when specific circumstances are met.

Basic Syntax

Let's dive into the basic syntax of a Solidity function:



// Function Declaration
function functionName(parameter1Type parameter1, parameter2Type parameter2) visibility returnType {
    // Function Body
    // Code logic goes here
    // ...

    // Return Statement (if applicable)
    return returnValue;
}

Let us explain the above:

functionName: The name of the function.
parameter1Type, parameter2Type: The types of parameters the function accepts.
visibility: Specifies the visibility of the function (e.g., public, private, internal, external).
returnType: The type of the value the function returns (if any).

Remix IDE Examples

Example 1: Simple Function

Let's create a simple function that adds two numbers and returns the result. Click on the Create new file icon and name it as "SimpleMath.sol."

Start with the version of solidity you want to use. In our case, we will be using version "^0.8.0."



// SPDX-License-Identifier: GPL-3.0
pragma solidity ^0.8.0;

Now, we will declare the smart contract. The name of our smart contract will be "SimpleMath."



contract SimpleMath {

}

In our SimpleMath contract, we will add our addNumbers function. see below:



// Function to add two numbers
    function addNumbers(uint256 num1, uint256 num2) public pure returns (uint256) {
        uint256 sum = num1 + num2;
        return sum;
    }

The entire code block will look like the below code:



// SPDX-License-Identifier: GPL-3.0

pragma solidity ^0.8.0;

contract SimpleMath {
    // Function to add two numbers
    function addNumbers(uint256 num1, uint256 num2) public pure returns (uint256) {
        uint256 sum = num1 + num2;
        return sum;
    }
}

Compile the contract by pressing control or command and s or press the green play icon. Click on the icon that says "Deploy & run transactions.

Notice from the image above, there are Environment, Account, Gas Limit, Contract and others, we will not change anything. Click on the "Deploy button" beneath the contract to deploy it.
In the left panel, scroll down to the Deployed Contracts and expand the "SIMPLEMATH AT 0..." contract. You will have something like the below image:

In the input beside the "addNumbers button", provide two numbers say 17 and 24 and separate with a comma then click on the "addNumbers button" to interact with the addNumbers function. Observe the returned sum. You will have something like the image below:

Example 2: Function Modifiers

Modifiers are used to enhance the functionality of functions. Let's create a modifier and apply it to a function. Click on the Create new file icon and name it as "FunctionModifier.sol."

Start with the version of solidity you want to use. In our case, we will be using version "^0.8.0."



// SPDX-License-Identifier: GPL-3.0
pragma solidity ^0.8.0;

Now, we will declare the smart contract. The name of our smart contract will be "FunctionModifier."



contract FunctionModifier {

}

In our FunctionModifier contract, we will declare some variables. see below:



address public owner;
uint256 public value;

In our FunctionModifier contract, we will declare our onlyOwner modifier. see below:



modifier onlyOwner() {
        require(msg.sender == owner, "Only the owner can call this function");
        _;
    }

In our FunctionModifier contract, we will declare our setValue Function. see below:



// Function to set the value (accessible only to the owner)
    function setValue(uint256 newValue) public onlyOwner {
        value = newValue;
    }

In our FunctionModifier contract, we will declare our Constructor. see below:



// Constructor to set the owner
    constructor() {
        owner = msg.sender;
    }

The entire code block will look like this:



// SPDX-License-Identifier: GPL-3.0

pragma solidity ^0.8.0;

contract FunctionModifier {
    address public owner;
    uint256 public value;

    // Modifier to restrict access to the owner
    modifier onlyOwner() {
        require(msg.sender == owner, "Only the owner can call this function");
        _;
    }

    // Function to set the value (accessible only to the owner)
    function setValue(uint256 newValue) public onlyOwner {
        value = newValue;
    }

    // Constructor to set the owner
    constructor() {
        owner = msg.sender;
    }
}

In this example, the onlyOwner modifier ensures that only the owner of the contract can call the setValue function.

Contract Variables:
address public owner;: This variable will store the Ethereum address of the owner of the contract.
uint256 public value;: This variable will store an unsigned integer value, which can be set using the setValue function.
Modifier: onlyOwner():
This is a custom modifier named onlyOwner. Modifiers are used to modify the behavior of functions in Solidity.
The modifier checks if the sender of the transaction (msg.sender) is the owner of the contract (owner). If not, it raises an exception with the specified error message.
The _; is a placeholder that represents the actual code of the function using the modifier. It acts as a wildcard where the function's code will be inserted.
Function: setValue(uint256 newValue) public onlyOwner { ... }:
This function is intended to set the value of the value variable but is restricted to only be callable by the owner of the contract.
The onlyOwner modifier is applied to this function, ensuring that only the owner can execute the code inside the function.
If someone who is not the owner attempts to call this function, the transaction will fail due to the modifier's requirement.
Constructor: constructor() { ... }:
The constructor is a special function that is executed only once when the contract is deployed. In this case, it sets the owner variable to the address of the account that deployed the contract (msg.sender).

Compile the contract by pressing control or command and s or press the green play icon. Click on the icon that says "Deploy & run transactions."
Click on the "Deploy button" beneath the contract to deploy it.

In the left panel, scroll down to the Deployed Contracts and expand the "FunctionModifier AT 0..." contract. You will have something like the below image:

In the input beside the "setValue button", provide any number you like and click on the "setValue button" to interact with the setValue function. Click on the "owner button" and you will get the owner address. Click on the "value button" and you will get the value you entered. You will have something like the image below:

Conclusion

Becoming fluent in Solidity functions is a prerequisite for developing smart contracts. As the Remix IDE's examples show, functions offer an adaptable way to organise and manage the actions of your smart contracts. Gaining knowledge of the functions' syntax, visibility, and modifiers will prepare you to create reliable and effective decentralised apps on the Ethereum network. So start your Remix IDE, play about with functions, and let Solidity's full potential shine through in your blockchain development endeavours.

In our next blog of this series, we will talk about control structures.

Have fun with coding!

Smart Contract Development - Variables and Data Types

a_moah__ — Tue, 09 Jan 2024 03:58:41 +0000

Introduction

When it comes to developing smart contracts with Solidity, knowing about variables and data types is like learning the fundamentals of a programming language. The effectiveness and dependability of your smart contracts depend on a clear understanding of how to manage variables and data types, just like a well-built house depends on a strong foundation. We will explore the fundamentals of dealing with variables and data types in Solidity in this blog post, along with useful examples that make use of the Remix IDE.

Variables in Solidity

Variables are used in Solidity to organise and store data. They are capable of representing a vast array of values, from basic integers to intricate data structures. Let's examine the foundational elements of handling variables.

Declaring Variables

In Solidity, a variable's type and name must be specified in order to define it. Let us see an example of that. But first, using your preferred browser, search for Remix IDE and select the first item you see. You will have to agree to some prompts and close some. Notice you will also see some loaded smart contract and some folders in the left panel. Click on the Create new file icon and name it as "FirstContract.sol."

Start with the version of solidity you want to use. In our case, we will be using version "^0.8.0."

// SPDX-License-Identifier: GPL-3.0
pragma solidity ^0.8.0;

Now, we will declare the smart contract. The name of our smart contract will be "FirstContract."

contract FirstContract {

}

In our FirstContract contract, we will declare some variables. see below:

contract FirstContract {
    // Unsigned integer variable
    uint256 public myNumber;

    // Address variable
    address public myAddress;

    // String variable
    string public myString;
}

The entire code will look like something below:

// SPDX-License-Identifier: GPL-3.0

pragma solidity ^0.8.0;

contract FirstContract {
    // Unsigned integer variable
    uint256 public myNumber;

    // Address variable
    address public myAddress;

    // String variable
    string public myString;
}

We have defined variables of several kinds in this example: string for strings, address for Ethereum addresses, and uint256 for unsigned numbers.

Data Types in Solidity

Different data kinds are supported by Solidity, each with a distinct function. It is essential to comprehend these kinds in order to construct smart contracts efficiently.

Basic Data Types

Integers Comment out or clear the variables declared in the "FirstContract" and write the following:

 int256 public myInteger;

The entire code will look like something below:

// SPDX-License-Identifier: GPL-3.0

pragma solidity ^0.8.0;

contract FirstContract {
     int256 public myInteger;
}

Here, int256 represents a signed 256-bit integer.

Boolean Again, comment out or clear the codes in the "FirstContract" and write the following:

bool public isTrue;

The entire code will look like something below:

// SPDX-License-Identifier: GPL-3.0

pragma solidity ^0.8.0;

contract FirstContract {
     bool public isTrue;
}

A boolean (bool) can have values of either true or false.

Address Comment out or clear the codes in the "FirstContract" and write the following:

address public myAddress;

The entire code will look like something below:

// SPDX-License-Identifier: GPL-3.0

pragma solidity ^0.8.0;

contract FirstContract {
     address public myAddress;
}

The address type is used to store Ethereum addresses.

Complex Data Types

Arrays

Comment out or clear the codes in the "FirstContract" and write the following:

    uint256[] public myArray;

    function addToArray(uint256 _value) public {
        myArray.push(_value);
    }

The entire code will look like something below:

// SPDX-License-Identifier: GPL-3.0

pragma solidity ^0.8.0;

contract ArrayExample {
    uint256[] public myArray;

    function addToArray(uint256 _value) public {
        myArray.push(_value);
    }
}

In this example, myArray is a dynamic array of unsigned integers. The function addToArray adds a value to the end of the array. Notice I introduced functions here, we will talk more about functions in our next series.

Strings

Comment out or clear the codes in the "FirstContract" and write the following:

 string public myString;

    function setString(string memory _value) public {
        myString = _value;
    }

The entire code will look like something below:

// SPDX-License-Identifier: GPL-3.0

pragma solidity ^0.8.0;

contract ArrayExample {
    string public myString;

    function setString(string memory _value) public {
        myString = _value;
    }
}

The string type is used for storing variable-length text.

Conclusion

To sum up, learning Solidity variables and data types is essential to become a skilled smart contract developer. As you proceed, investigate increasingly complex data structures, think about gas efficiency, and constantly rehearse in settings such as Remix IDE to solidify your comprehension. With these fundamental abilities, you will be well on your way to creating reliable and effective Ethereum blockchain smart contracts.

In our next series, we will talk about functions and do some "Deploy and Run Transactions"

Have fun with coding!

Smart Contract Development- Introduction

a_moah__ — Mon, 08 Jan 2024 04:02:58 +0000

Introduction

Greetings and welcome to an exciting trip into the core of developing smart contracts and decentralised apps, for those interested in becoming blockchain developers. In the quickly changing digital world of today, blockchain technology is a game-changer, upending industries and conventional wisdom. Smart contracts are leading this revolution; they are self-executing contracts that can safeguard, automate, and simplify a wide range of transactions in many industries.

We will explore the exciting world of creating smart contracts in this in-depth tutorial, mostly concentrating on learning Solidity, the programming language that has come to be associated with Ethereum, the most popular blockchain platform. This trip aims to provide you the necessary knowledge and understanding to traverse the complexities of smart contract creation, regardless of whether you are an experienced developer wanting to make the switch to blockchain or a novice keen to learn more about this cutting-edge industry.

Section 1: The Rise of Blockchain and Smart Contracts

1.1 Understanding Blockchain Technology

The foundations of blockchain technology must be understood before one can understand smart contract creation. The distributed ledger known as blockchain, which powers cryptocurrencies, allows for safe, open, and impenetrable record-keeping. Because it is decentralised, there is no need for middlemen, which promotes confidence and independence in online transactions.

1.2 Introduction to Smart Contracts

A key development in blockchain technology are smart contracts, which are self-executing contracts with the terms of the agreement encoded directly into the code. By automating the performance of predetermined activities in response to certain conditions, these contracts offer a decentralised and trustless method of conducting transactions.

Section 2: Solidity and Ethereum Ecosystem

2.1 Solidity: The Language of Smart Contracts

Solidity, a high-level programming language created especially for building smart contracts, is the foundation of Ethereum smart contract development. Solidity, created by Vitalik Buterin, the inventor of Ethereum, allows programmers to include intricate logic and business rules into their decentralised apps.

2.2 Ethereum: The Premier Smart Contract Platform

Gaining an understanding of Solidity is essential to investigating the Ethereum ecosystem. Ethereum, the creator of smart contract functionality, offers a stable and extensively used framework for deploying decentralised applications (DApps). Because of its popularity, Ethereum is a great place for ambitious blockchain engineers to start.

Section 3: Mastering Solidity

Starting a smart contract development journey requires you to become proficient in Solidity's syntax and structure. We will walk you through the language's nuances so you can write secure and effective smart contracts. From variables and data types to control structures and functions, a strong foundation in Solidity programming is necessary.

Section 4: Tools and Development Environment

Having the appropriate tools is essential for becoming a skilled smart contract developer. For this series, we will use the Remix IDE (a potent toolkit for creating, implementing, troubleshooting, and testing smart contracts that are compatible with Ethereum and Ethereum Virtual Machine - EVM.)

Conclusion

Starting to construct smart contracts using Solidity is a life-changing process that holds both opportunities and obstacles. We hope that this extensive tutorial will provide you with the information and abilities necessary to successfully negotiate the complexities of decentralised application development. Whatever your motivation—a love of blockchain technology or a desire to lead the way in digital innovation—learning Solidity brings up a universe of limitless opportunities. Now let's get started and discover the mysteries of developing smart contracts together!

A Roadmap to Frontend Development: Navigating the Path to Web Mastery

a_moah__ — Sun, 27 Aug 2023 11:24:04 +0000

Introduction

Frontend development is a dynamic field that plays an essential role in shaping a users' online experiences. As technology advances and user expectations rise, frontend developers must keep current with the newest tools, languages, and best practises as technology develops and user expectations grow. Having a roadmap may be quite helpful, whether you are a newbie trying to begin your journey or an experienced developer seeking to hone your abilities. In this blog, we will explore a comprehensive roadmap to frontend development, breaking down the key steps and areas of focus along the way.

First Step- Learning the Basics

HTML (Hypertext Markup Language):
HTML forms the foundation of any web page. It is crucial that you understand its semantic components and structural features.

A collection of HTML tutorials.

youtube.com
CSS (Cascading Style Sheets):
CSS is what gives your HTML content its visual appeal. Start with the basics of styling elements, fonts, colors, and backgrounds.

A collection of HTML tutorials.

youtube.com
JavaScript Fundamentals:
JavaScript is the programming language that adds interactivity to your web pages. Take time to become familiar with variables, data types, operators, control structures, functions, and loops. It is the bedrock of frontend interactivity.

A collection of JavaScript tutorials.

youtube.com

Second Step- Mastering Intermediate Concepts

Responsive Design:
With the multitude of devices and screen sizes, responsive design is a must. To design and develop a smooth user experience across numerous devices, study media queries, fluid layouts, and viewport meta tags.
CSS Preprocessors:
SASS and LESS are popular CSS preprocessors that offer variables, nesting, and modularisation. These tools can significantly enhance your CSS workflow and code maintainability.

youtube.com
Version Control/Git:
Version control is essential for collaboration and code management. Learn how to use Git for tracking changes, branching, merging, and collaborating effectively with other developers.

youtube.com
Package Managers:
Tools like npm (Node Package Manager) help manage dependencies and libraries efficiently. Learn how to use them to streamline your development process.

Third Step- Dive Deeper

Frontend Frameworks:
Frameworks like React, Angular, and Vue.js are instrumental in building complex web applications. Select any of your choice and study its core concepts, components, state management, and routing.

youtube.com

youtube.com
Web Accessibility (A11y)
Creating inclusive websites is a moral and legal responsibility. Research the Web Content Accessibility Guidelines (WCAG) and learn to make your platforms usable by everyone, including people with disabilities.

Fourth Step- Specialisation and Expertise

Advanced Styling:
Master advanced CSS techniques such as animations, transitions, custom properties (CSS variables), and CSS-in-JS solutions.
State Management:
If using frameworks like React, delve into advanced state management using tools like Redux or Mobx to efficiently handle complex application states.
Testing and Debugging:
Learn about different testing methodologies (unit, integration, end-to-end) and tools like Jest, React Testing Library, and Cypress for robust testing and effective debugging.

Fifth Step- Staying Current

Lifelong Learning:
Frontend development evolves rapidly. Stay updated with blogs, podcasts, online courses, and conferences to keep your skills relevant and up-to-date.
Experimentation:
Try out new libraries, tools, and techniques in personal projects to stay curious and innovative in your approach.
Community Engagement:
Participate in developer communities, forums, and open-source projects to share your knowledge and learn from others.

Conclusion

Becoming a proficient frontend developer requires dedication, continuous learning, and a passion for creating exceptional user experiences. The roadmap provided here is a guide, but remember that everyone's journey is unique. As you progress through these steps, adapt your learning to your strengths and interests. Embrace challenges, stay curious, and never stop refining your skills, for the world of frontend development is ever-vibrant and filled with opportunities for those who are willing to explore and innovate.

Useful Links

Find below some useful links to get you started in your frontend development journey. The link is just a few of the many you can find on the internet today, but I believe it will be helpful to you.

w3schools.com

Free Tailwind CSS Marketing Components

a_moah__ — Thu, 17 Aug 2023 11:00:14 +0000

Quick One

I would like to introduce you to a website where you can glance through free tailwind css components for usage in your project in this post.

Although the platform offers elements that are not exclusive to marketing websites, they will nonetheless enable you to quickly create your next project.

Before copying the scripts to use in your project, you will have the chance to see how a component will appear on various screen sizes when you choose it.

Find the link below!!!

Useful Links

Tailwind CSS Marketing Components | HyperUI

Build your next marketing website with ease through the use of Tailwind CSS and HyperUI components. These components are not exclusive to marketing websites, but they will help you rapidly build your next marketing website.

hyperui.dev

Decentralised Credit Unleashed: Union's Innovative Approach

a_moah__ — Fri, 11 Aug 2023 17:44:43 +0000

Introduction
Understanding Union's Credit
Deciphering the Mechanics
What You Get From Union's Credit
Navigating The Risks
Conclusion

Introduction

The financial world is fast evolving, and with the advent of blockchain technology, decentralised finance (DeFi) systems are changing how we manage, fund and interact with money.

One player in this interesting market is Union, a platform that provides a new facets to DeFi by presenting credit solutions fuelled by blockchain technology.

Union Finance - permissionless web3 credit

An open source protocol, network, and DAO enabling permissionless access to credit on ethereum.

union.finance

For the purpose of this article, I will be explaining union's credit system and how it can empower you in the world of decentralised finance (DeFi).

Understanding Union's Credit

Union's credit moves beyond just being a lending platform; it's the fusion of traditional credit systems with the introduction of blockchain technology.

Conventional finance credit systems facilitates borrowing with the dedication to pay.

But in the era of DeFi, union advances this concept by offering customers decentralised credit options.

Deciphering the Mechanics

For further understanding of union's credit system, we will delve into it's operating principles, which incorporate the essence of trustless lending and borrowing, all carried out through smart contracts.

These self-executing contracts, encoded with predetermined terms, eliminate the need for intermediaries in financial transactions.

Workflow Diagram

Workflow Discussion

Collateralization: Union's users establish credit by depositing cryptocurrencies as collateral in a smart contract. These collateral acts as safeguards for lenders.
Borrowing: Users with collateral can borrow a certain amount of stablecoin. Stablecoins are cryptocurrencies whose value is anchored to tangible assets. The borrowed stablecoin can be used for a variety of things, spanning investments, trading activities, and even routine expenses.
Repayment and Interest: Borrowers commit to repaying the borrowed stablecoin within a stipulated timeframe, accompanied by accrued interest. Their collateral may be forfeited when they fail to honor their commitment. This mechanism encourages borrowers to uphold their obligations.

What You Get From Union's Credit

Inclusivity: Union's Credit removes obstacles to financial access by catering to persons traditionally excluded from conventional credit systems. The core values of inclusivity that defines decentralised finance continues to motivates union's purpose.
Transparency: The lending and borrowing facets unfolds transparently on the blockchain. Smart contract's verifiable nature ensures that all parties involved adhere to the agreed upon conditions.
Versatility: Union's Credit gives you the flexibility to allocate borrowed funds across diverse avenues. You have the option of engaging in short-term trading or starting a long-term investing adventure.
Empowerment: Centralised intermediaries become irrelevant in this situation. You are given control by Union's Credit, allowing you to manage your assets, borrowings, and repayments independently.

Navigating The Risks

In as much as Union's Credit unveils promising prospects, it is critical to recognise the associated risks within the DeFi market. Due to the fact that collateral values are susceptible to change, and misusing borrowed funds could result in collateral loss, prudent actions such as educating yourself, starting out with the modest amounts, and comprehending the platform's nuances could help in mitigating the risks.

Conclusion

Union's Credit emerges as a leader of innovation within the realm of Web3 finance. By harmonising credit and blockchain, the platform gives users unmatched financial flexibility and inclusiveness. As you embark on your Web3 and DeFi journey, embracing Union's Credit might unlock a realm of financial liberation where your influence over your assets expands, and opportunities abound. Though the temptation of Web3 financial freedom is alluring, caution should always be your compass. Learn, adapt, and be educated as you navigate this ever-changing environment.

Useful Links
Website:
Github
Twitter
Discord

The Tech Community: A Developer's Guide

a_moah__ — Thu, 03 Aug 2023 21:35:37 +0000

Introduction

In today's fast-paced and ever-evolving tech landscape, developers are at the forefront of innovation, working on groundbreaking applications, tools, and solutions that shape the world around us. However, being a successful developer moves beyond mastering programming languages and technical skills, in fact, it is just the beginning of being a good developer. Accepting the tech community can be transformative, providing invaluable support, inspiration, and growth opportunities. In this blog, we will examine the importance of the tech community and offer a comprehensive guide for developers to leverage its benefits.

What is the Tech Community?

The term "tech community" describes a broad and linked group of programmers, engineers, designers, and tech enthusiasts who share common interests, challenges, and goals. It includes a wide range of platforms, such as online forums, social media groups, hackathons, tech conferences, open-source projects, and developer meet-ups.

Why Join the Tech Community?

Knowledge Sharing and Learning Opportunities: The tech community is a knowledge-rich environment. Engaging with other developers exposes you to fresh viewpoints, innovative ideas, and best practices. Whether you are a beginner or an expert, there is always something new to learn.
Networking and Collaboration: Building meaningful connections within the tech community can result in innovative partnerships. Teaming up with individuals who share interest can accelerate growth and open doors to new opportunities.
Solving Challenges Together: Although programming can be difficult, but the tech community acts as a support network. When you hit a hurdle, seeking advice and assistance from others can lead to faster solutions.
Mentorship and Career Development: Many seasoned engineers are willing to guide newbies. Having a mentor can significantly enhance your skills, guide your career path, and provide valuable insights.
Contributing to Open Source: Participating in open-source projects is an excellent way to give back to the community while honing your skills and gaining recognition for your work.

How to Engage with the Tech Community?

As a newbie in the tech world, finding the right community to join is crucial for a smooth and encouraging start to your journey. Here are some tech communities that are beginner-friendly and offer a supportive environment for newcomers:

Dev.to: Dev.to (https://dev.to/) is a platform for developers to share their knowledge and experiences through blog posts and discussions. It has a welcoming community where beginners can learn from experienced developers and participate in discussions on various tech topics.
Stack Overflow: Stack Overflow (https://stackoverflow.com/) is a well-known Q&A platform for programmers. It's an excellent place to ask technical questions, get answers, and learn from others' queries.
GitHub: GitHub (https://github.com/) is the largest code hosting platform and an excellent place to explore open-source projects, collaborate with others, and contribute to projects that interest you.
Reddit Programming Subreddits: Reddit (https://www.reddit.com/) hosts several programming-related subreddits, such as r/learnprogramming and r/webdev, where you can find helpful resources and engage with fellow beginners.
Meetup: Check out local Meetup groups for tech enthusiasts and developers. You can attend events, workshops, and networking sessions to connect with people in your area.

Remember, when joining any community, be respectful, ask questions, and don't hesitate to seek help. Everyone starts as a beginner, and these communities are full of individuals who understand the challenges of starting out and are eager to help you succeed.

Conclusion

The tech community is an invaluable resource for developers, offering a myriad of benefits, from knowledge sharing to career growth and collaboration opportunities. Embrace the community by participating actively, giving back, and building meaningful connections. By leveraging the collective expertise of the tech community, developers can propel their careers to new heights while positively impacting the world through technology. So, take the plunge, get involved, and experience the power of the tech community!

React Hooks Explained: A Comprehensive Guide to Stateful Function Components

a_moah__ — Mon, 31 Jul 2023 08:00:08 +0000

Introduction:

React Hooks revolutionized the way we handle state and side effects in functional components, making them more powerful and expressive. Hooks were introduced in React 16.8, and since then, they have become an essential part of modern React development. In this blog, we will explore the world of React Hooks, understand their benefits, and dive into practical examples to harness their full potential.

Understanding React Hooks:

React Hooks are functions that allow you to use state and other React features in functional components without the need for class components. Before Hooks, state management and lifecycle methods were exclusive to class components. Now, functional components can handle local state, side effects, context, and more using Hooks.

useState - Managing Local State:

The useState hook enables us to add state to functional components. Let's see how to use it with a simple example:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
}

useEffect - Managing Side Effects:

The useEffect hook is the gateway to handle side effects in functional components. Here's an example of fetching data from an API using useEffect:

import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('http://universities.hipolabs.com/search?country=United+States')
      .then((response) => response.json())
      .then((data) => setData(data))
      .catch((error) => console.error('Error fetching data:', error));
  }, []);

  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

useContext - Global State Management:

The useContext hook empowers functional components to access data from the Context API without the need for render prop patterns or higher-order components. Here's how to use it:

import React, { useContext } from 'react';

const UserContext = React.createContext();

function UserProfile() {
  const user = useContext(UserContext);

  return (
    <div>
      <h2>Welcome, {user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

function App() {
  const currentUser = { name: 'John Doe', email: 'john@example.com' };

  return (
    <UserContext.Provider value={currentUser}>
      <UserProfile />
    </UserContext.Provider>
  );
}

useCallback - Memoizing Functions:

The useCallback hook is useful when you need to memoize functions to prevent unnecessary re-renders of child components. It's commonly used when passing functions down to child components as props. Here's an example:

import React, { useState, useCallback } from 'react';

function ChildComponent({ onClick }) {
  // Use the useCallback hook to memoize the function
  const handleClick = useCallback(() => {
    console.log('Button clicked!');
    onClick();
  }, [onClick]);

  return <button onClick={handleClick}>Click Me</button>;
}

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleButtonClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h2>Clicked: {count} times</h2>
      <ChildComponent onClick={handleButtonClick} />
    </div>
  );
}

Building Custom Hooks - Reusability and Abstraction:

Custom Hooks allow us to encapsulate and reuse stateful logic across multiple components. Here's an example of a custom hook to handle a simple toggle:

import { useState } from 'react';

function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);

  const toggle = () => {
    setValue((prevValue) => !prevValue);
  };

  return [value, toggle];
}

function ToggleButton() {
  const [isToggled, toggle] = useToggle();

  return (
    <button onClick={toggle}>
      {isToggled ? 'ON' : 'OFF'}
    </button>
  );
}

Conclusion:

React Hooks have changed the way we write React applications, providing a more elegant and functional approach to handling state and side effects. With the useState, useEffect, useContext, useCallback, and custom hooks at our disposal, functional components can now match and even surpass the capabilities of class components. Understanding the nuances of React Hooks opens up a world of possibilities for creating cleaner, more efficient, and scalable React applications.

As you dive into React Hooks, remember that continuous learning and exploration are key to staying up-to-date with the evolving React ecosystem.
Happy hooking!

Understanding Proof of Stake: A Sustainable Approach to Blockchain Consensus

a_moah__ — Sun, 30 Jul 2023 11:47:45 +0000

Introduction

As the world of cryptocurrencies continues to evolve, new consensus mechanisms are emerging as alternatives to the energy-intensive Proof of Work (PoW). One such alternative is Proof of Stake (PoS), a sustainable and eco-friendly approach to achieving consensus within blockchain networks. In this blog, we will explore the concept of Proof of Stake, its advantages, and its role in addressing the environmental concerns associated with traditional PoW-based cryptocurrencies

What is Proof of Stake?

Proof of Stake is a consensus algorithm used by certain cryptocurrencies to validate transactions and secure the network. Unlike PoW, which relies on miners solving computationally complex puzzles, PoS assigns the right to create a new block and validate transactions to network participants based on the number of coins they hold and are willing to "stake" as collateral.

In a PoS-based system, validators (also called "forgers" or "block producers") are selected to create new blocks and confirm transactions based on their stake in the network. The more coins a validator holds and "locks up" as collateral, the higher their chances of being chosen to forge the next block and earn rewards.

The Proof of Stake Process

The process of achieving consensus through Proof of Stake involves the following steps:

Validators and Staking: Network participants who wish to become validators must first lock up a certain number of coins as collateral, a process known as "staking." These staked coins act as a financial incentive for validators to behave honestly. If a validator attempts to validate fraudulent transactions, they risk losing their staked coins.
Block Forging: Validators take turns creating new blocks and validating transactions. The likelihood of being chosen to forge a block is directly proportional to the number of coins staked.
Block Validation: Once a validator creates a new block, it is broadcasted to the network for verification. Other participants validate the block to ensure its correctness and compliance with the consensus rules.
Reward Distribution: Validators who successfully create and validate blocks are rewarded with transaction fees and, in some cases, newly minted coins. The rewards serve as an incentive for validators to maintain the network's security and integrity.

Benefits of Proof of Stake

Proof of Stake offers several advantages over Proof of Work, making it an appealing alternative for certain blockchain networks:

Energy Efficiency: PoS consumes significantly less energy than PoW since it does not require resource-intensive mining operations. This reduction in energy consumption makes PoS a more environmentally friendly consensus mechanism.
Decentralization: PoS encourages a broader distribution of power since validators are selected based on their stake in the network. This reduces the risk of centralization and 51% attacks.
Cost-Effectiveness: PoS eliminates the need for expensive mining hardware, making it more accessible for individual users to participate as validators.
Security: Validators have a financial stake in the network, which acts as a deterrent against malicious behavior. The potential loss of staked coins makes validators economically incentivized to act honestly.

Challenges and Considerations

While PoS offers many advantages, it is not without its challenges:

The "Nothing at Stake" Problem: Critics argue that PoS may suffer from the "nothing at stake" problem, wherein validators have nothing to lose by supporting multiple blockchain forks, potentially leading to chain instability. However, various mechanisms have been proposed to address this concern.
Initial Distribution: The initial distribution of coins can heavily influence the decentralization of a PoS network. If a small group of entities holds a significant portion of the coins, it could lead to a concentration of power.

Conclusion

Proof of Stake is a promising consensus mechanism that offers an environmentally friendly and energy-efficient alternative to traditional Proof of Work. By allowing participants to stake their coins as collateral to validate transactions and create blocks, PoS promotes decentralization, security, and cost-effectiveness within blockchain networks. As the cryptocurrency space continues to evolve, Proof of Stake is likely to play a crucial role in shaping the future of blockchain technology and contributing to a more sustainable and eco-friendly ecosystem.

How to Install Odoo on Mac OS (Silicon Valley Chips) Using PyCharm

a_moah__ — Sat, 29 Jul 2023 19:06:36 +0000

Introduction

Odoo is a powerful and versatile open-source business application suite that includes a wide range of modules for various business needs, such as CRM, accounting, inventory, and more. If you’re a developer working on a Mac and prefer using PyCharm as your Integrated Development Environment (IDE), this guide will walk you through the process of installing Odoo on your Mac OS using PyCharm.

Prerequisites

Git — https://git-scm.com/downloads
Python 3.7 or later (Preferably 3.8) — https://www.python.org/downloads/
PyCharm IDE — https://www.jetbrains.com/pycharm/download/?section=mac
PostgreSQL 10 or later (Preferably v13) — https://www.postgresql.org/download/
PGAdmin 4 — https://www.pgadmin.org/
Build Tools for Studio for Windows (I use MacOS in this tutorial) — https://visualstudio.microsoft.com/do...
NodeJS — https://nodejs.org/en/download/

The Process

Install Homebrew. Homebrew is a package manager for Mac that will make the installation process much smoother. Open your terminal and execute the following command to install Homebrew:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Install git using brew

brew install git

Install NodeJS

npm install -g npm

Install python, pycharm, postgreSQL, PGAdmin4 and visual studio by following the above link to continue the process below.

Using your preferred location, create the folder for your odoo community. Now let say you have a directory “/Users/username/Documents/odoo/v15/odoo-server”. Please note that username will be your Mac username. Open your terminal and go inside the above directory by using terminal. Clone the odoo v15 repository by following the the command below:

git clone https://www.github.com/odoo/odoo --depth 1 --branch 15.0.

It is advisable to use virtual environment so that python module packages will not mix with other Odoo instances or python versions. To create virtual environment, first go to “/Users/username/Documents/odoo/v15” in your terminal and run the following command:

python3 -m venv odoo_venv

After the above command, your v15 folder should be as follows:

Since we will be using pycharm, ensure that postgreSQL is running

For security reason, we will not be able to use default postgres user. To create a new user, open pgAdmin 4. For first time use, it will ask for password.

Go to Servers - Localhost and right click Login/Group Roles and select Create - Login/Group Role…

In General, type name and add password in definition. Lastly, under privileges, toggle Can Login and Create Databases. Click Save.

Now, create a new folder under "Users/username/Documents/v15" and name it tutorial_theme. Open tutorial_theme with pycharm.

By default, PyCharm will create a new file main.py but delete it. Inside tutorial_theme folder, create Odoo configuration by creating a new file called odoo.conf. Add the following code to the odoo.conf file in pycharm:

[options]
admin_passwd = 1
db_host = False
db_port = False
db_user = trial
db_password = trail
dbfilter = ^tutorial_theme.*$
db_list = True
addons_path = /Users/username/Documents/odoo/v15/odoo-server/addons
http_port = 8069

Add virtual environment by going in PyCharm - Preferences - Project - Python Interpreter. Check the link of the current python interpreter you created under "Users/username/Documents/odoo/v15/odoo_venv, then click gear icon on the right side and click add to add it.

Select Existing Environment and locate python3 file which is located inside "odoo_venv/bin/python3". Click apply and okay button.

Edit the PyCharm configuration by clicking on the menu bar. By default, it creates a new configuration "main". Click main and click the minus (-) button on top left to delete it.

Click on the plus (+) button to add new and choose Python. Copy the code below for the script path and parameters. Please replace the code based on the location of your file. Click apply and OK.

Script Path: /Users/username/Documents/odoo/v15/odoo-server/odoo-bin 
Parameters: -c "/Users/username/Documents/odoo/v15/tutorial_theme/odoo.conf"

Run Odoo by clicking green arrow in the toolbar.

Go to the browser on type the url http://localhost:8069. You will be redirected to http://localhost:8069/web/database/manager since there are no database created.

If you face the bug below:

Undertake the following action to fix the problem:

Re-run odoo from pycharm and go back to the browser to type the url http://localhost:8069.

This should work perfectly!!!
You just installed odoo on MacBook silicon valley chip using pycharm!!!

Understanding Proof of Work: The Backbone of Cryptocurrencies

a_moah__ — Fri, 28 Jul 2023 21:38:37 +0000

Introduction

Proof of Work (PoW) is a foundational concept in the world of cryptocurrencies. It serves as the underlying mechanism that enables these digital currencies to operate securely and ensures the integrity of their transaction history. In this blog, we will delve into the workings of Proof of Work, its significance, and its role in maintaining trust and security within decentralized networks like blockchain.

What is Proof of Work (POW)?

Proof of Work is a consensus algorithm used by various cryptocurrencies, most notably by Bitcoin, to validate and confirm transactions on the network. The concept was introduced by computer scientist Cynthia Dwork and mathematicians Moni Naor and Eli Pony in 1993 as a means to combat spam and denial-of-service attacks.

In the context of cryptocurrencies, PoW acts as a mathematical puzzle or computational problem that network participants, known as miners, must solve to validate a block of transactions. By dedicating computational power and solving the puzzle, miners compete to be the first to find the correct solution and add the new block to the blockchain. The process of mining is resource-intensive and requires significant computational power, making it computationally expensive and time-consuming.

The Mining Process

Mining involves a series of steps that help maintain the security and integrity of the blockchain. Here's how the mining process works:

Transaction Collection: Users initiate transactions by sending cryptocurrency to one another. These transactions are then collected into a "block."
Creating a Hash: Miners take the data from the block and create a hash, which is a fixed-length alphanumeric string. The hash is generated using cryptographic hash functions and contains the transaction data and a nonce (a random number).
Finding the Solution: The miners repeatedly modify the nonce value until they find a hash that meets certain predefined criteria. This criterion, often referred to as the "target" or "difficulty," is a specific number of leading zeros in the hash.
Validation and Reward: Once a miner discovers a valid hash that satisfies the target, they broadcast the solution to the network for verification. Other nodes in the network verify the correctness of the solution. If the solution is correct, the miner's block is added to the blockchain, and the miner is rewarded with newly minted cryptocurrency and transaction fees from the block.

Security and Decentralization

The Proof of Work consensus algorithm provides several essential benefits to the cryptocurrency ecosystem:

Security: PoW ensures that bad actors cannot easily manipulate the blockchain. To alter a block's data, an attacker would need to redo the proof of work for that block and all subsequent blocks, which is computationally infeasible due to the extensive computational power required.
Decentralization: PoW promotes decentralization by allowing anyone with sufficient computational power to become a miner. This prevents a single entity or a group of entities from gaining control over the network.

Challenges and Concerns

While Proof of Work is a proven and secure consensus mechanism, it also faces some challenges and concerns:

Energy Consumption: The energy-intensive nature of PoW has raised concerns about its environmental impact. As mining requires substantial computational power, it leads to high electricity consumption and a significant carbon footprint.
Centralization Risks: Over time, mining has become more competitive, leading to the emergence of large-scale mining operations. This concentration of mining power raises concerns about centralization and potential 51% attacks.

Conclusion

Proof of Work is a fundamental building block of cryptocurrencies like Bitcoin, providing a robust and secure method for validating transactions and achieving consensus in decentralized networks. Despite its challenges, PoW remains a cornerstone of the cryptocurrency space, and its role in the development of blockchain technology cannot be understated. As the cryptocurrency ecosystem evolves, it's likely that new consensus mechanisms will emerge, but for now, PoW continues to play a vital role in shaping the future of digital currencies.

Build a responsive website with reactjs and tailwindcss — Part 2

a_moah__ — Fri, 28 Jul 2023 13:20:44 +0000

In this how to build a responsive website with reactjs and tailwindcss — part 2 tutorial, I will take you through every other process needed to build a responsive website. This part 2 tutorial will take you through building a responsive website, completing a home page for an airline organization. The part 1 of this tutorial can be found with this url — https://dev.to/kwakyebrilliant/build-a-responsive-website-with-reactjs-and-tailwindcss-part-1-43m1. I will include the link to the Github repository in the links section of this tutorial.
Enjoy the process!!!

Please note the entire tutorial of this part will be done in the App.js file and this is not to cause confusion. In subsequent ones, we will use components to make our codes more organized, maintainable, and reusable

In your src folder of the website folder, create a folder and name it ‘assets’. Now follow this url — (https://github.com/kwakyebrilliant/Websites/tree/main/src/assets) and download the media files there and include them in the ‘assets’ folder.

In App.js, we will import image with the name ‘backgroundimg’ by entering the following command:

import backgroundimg from './assets/backgroundimg.webp';

We will now open a div and set the classname to relative. This div will contain every other code in this tutorial. Copy and paste the code below:

...

<div className="relative">
</div>

...

We will proceed to set the background image by making use of the ‘backgroundimg’ we imported above. Copy and paste the following code:

...
{/* background image */}
<div className="fixed inset-0 z-0"
      style={{
       backgroundImage: `url(${backgroundimg})`,
       backgroundSize: 'cover',
       backgroundPosition: 'center',}}
 >
</div>
...

We will now create a section that will contain a div. The div will have a grid and other properties as part of the class. On large screens, the grid will be in two columns and one column on small screens. Copy and paste the following code:

...

{/* section starts here */}
<section className="relative mb-16 z-0 py-8">
<div className="grid container mx-auto pt-40 p-8 grid-cols-1 gap-y-8 lg:grid-cols-2 lg:items-center lg:gap-x-16">
</div>
</section>
{/* section ends here */}

...

We then populate the div containing the grid with some codes. Copy and paste the following codes:

...

<div className="mx-auto max-w-lg lg:mx-0 ltr:lg:text-left rtl:lg:text-right">
  <h2 className="text-3xl font-bold sm:text-4xl">Find Ticket</h2>
  <p className="mt-4 text-gray-600">
     Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut vero
     aliquid sint distinctio iure ipsum cupiditate? Quis, odit assumenda?
     Deleniti quasi inventore, libero reiciendis minima aliquid tempora.
     Obcaecati, autem.
   </p>


  {/* Input for search here */}
  <div className="relative mt-8">
    <label for="Search" className="sr-only"> Search </label>
    <input
     type="text"
     id="Search"
      placeholder="Search ticket..."
      className="w-full h-12 focus:outline-none rounded-full border-none border-gray-200 pe-10 ps-4 text-sm  py-2.5 shadow-sm sm:text-sm"
     />

    <span className="absolute inset-y-0 end-0 grid w-10 place-content-center">
      <button 
      type="button" 
      className="absolute border border-emerald-700 end-1 top-1/2 -translate-y-1/2 rounded-full bg-gray-50 p-2 text-gray-600 transition hover:text-gray-700"
      >
      <span className="sr-only">Search</span>
      <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      className="h-4 w-4"
      >
      <path
      stroke-linecap="round"
      stroke-linejoin="round"
      d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
       />
      </svg>
     </button>
   </span>
 </div>

</div>

{/* statistics here */}
<div>
 <div className="grid grid-cols-2 gap-4 sm:grid-cols-2">
                <div className="flex flex-col rounded-lg border border-emerald-600 hover:bg-gray-200 hover:border-gray-200 px-4 py-8 text-center">
                  <dt className="order-last text-lg font-medium text-gray-500">
                    Tickets Sold
                  </dt>
                  <dd className="text-4xl font-extrabold mb-4 text-emerald-600 md:text-5xl">
                    9,k+
                  </dd>
                </div>

                <div className="flex flex-col rounded-lg border border-emerald-600 hover:bg-gray-200 hover:border-gray-200 px-4 py-8 text-center">
                  <dt className="order-last text-lg font-medium text-gray-500">
                    Passengers Carried
                  </dt>
                  <dd className="text-4xl font-extrabold mb-4 text-emerald-600 md:text-5xl">
                    20,k+
                  </dd>
                </div>

                <div className="flex flex-col rounded-lg border border-emerald-600 hover:bg-gray-200 hover:border-gray-200 px-4 py-8 text-center">
                  <dt className="order-last text-lg font-medium text-gray-500">
                    Flight Satisfaction
                  </dt>
                  <dd className="text-4xl font-extrabold mb-4 text-emerald-600 md:text-5xl">
                    10,k+
                  </dd>
                </div>

                <div className="flex flex-col rounded-lg border border-emerald-600 hover:bg-gray-200 hover:border-gray-200 px-4 py-8 text-center">
                  <dt className="order-last text-lg font-medium text-gray-500">
                    Tickets Value
                  </dt>
                  <dd className="text-4xl font-extrabold mb-4 text-emerald-600 md:text-5xl">
                    $4.8m
                  </dd>
                </div>
 </div>
</div>

...

We will import an image by name ‘airport’ from our assets folder. Find the code below:

...

import airpotimg from './assets/airport.jpeg';

...

We will also import ‘FaPlaneDeparture’ icon. Copy and paste the following code:

...

import {FaPlaneDeparture} from "react-icons/fa";

...

We will continue to add a section and in the section, we will add our ‘airport’ image we imported. Copy and paste the code below:

...

{/* section starts here */}
<section className="relative pb-2">

  <div className='w-full h-[700px] bg-gray-900/90 absolute'>
    <img className='w-full h-full object-cover mix-blend-overlay' src={airpotimg} alt="airpotimg" />
  </div>

</section>

...

Now in our section created above, copy and paste the following code right after the div containing the ‘airport’ image:

...

<div className='max-w-[1240px] mx-auto text-white relative'>

        <div className="relative overflow-hidden mx-4 -top-10 bg-white rounded-lg shadow-md">
          <div className="flex px-8 pt-8">
          <fieldset className="grid grid-cols-2 gap-4">
            <legend className="sr-only">Delivery</legend>

            <div>
              <input
                type="radio"
                name="DeliveryOption"
                value="DeliveryOneway"
                id="DeliveryOneway"
                className="peer hidden [&:checked_+_label_svg]:block"
                checked
              />

              <label
                for="DeliveryOneway"
                className="block cursor-pointer rounded-lg border border-gray-100 bg-white p-4 text-sm font-medium shadow-sm hover:border-gray-200 peer-checked:border-green-600 peer-checked:ring-1 peer-checked:ring-green-600"
              >
                <div className="flex items-center justify-between">
                  <p className="text-gray-700">One-way</p>

                  <svg
                    className="hidden h-5 w-5 text-green-600"
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 20 20"
                    fill="currentColor"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                      clip-rule="evenodd"
                    />
                  </svg>
                </div>
              </label>
            </div>

            <div>
              <input
                type="radio"
                name="DeliveryOption"
                value="DeliveryRoundtrip"
                id="DeliveryRoundtrip"
                className="peer hidden [&:checked_+_label_svg]:block"
              />

              <label
                for="DeliveryRoundtrip"
                className="block cursor-pointer rounded-lg border border-gray-100 bg-white p-4 text-sm font-medium shadow-sm hover:border-gray-200 peer-checked:border-green-600 peer-checked:ring-1 peer-checked:ring-green-600"
              >
                <div className="flex items-center justify-between">
                  <p className="text-gray-700">Roundtrip</p>

                  <svg
                    className="hidden h-5 w-5 text-green-600"
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 20 20"
                    fill="currentColor"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                      clip-rule="evenodd"
                    />
                  </svg>
                </div>
              </label>
            </div>
          </fieldset>
          </div>
          <div className="flex px-8 pt-1">
          <div className="grid mx-auto py-4 grid-cols-1 gap-y-8 lg:grid-cols-5 lg:items-center lg:gap-x-4">

          <label
            for="Origin"
            className="relative block rounded-md border border-gray-200 shadow-sm focus-within:border-green-600 focus-within:ring-1 focus-within:ring-green-600"
          >
            <input
              type="text"
              id="Origin"
              className="peer h-14 w-full text-black px-4 border-none bg-transparent placeholder-transparent focus:border-transparent focus:outline-none focus:ring-0"
              placeholder="Origin"
            />

            <span
              className="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs"
            >
              Origin
            </span>
          </label>

          <label
            for="Destination"
            className="relative block rounded-md border border-gray-200 shadow-sm focus-within:border-green-600 focus-within:ring-1 focus-within:ring-green-600"
          >
            <input
              type="text"
              id="Destination"
              className="peer h-14 w-full text-black px-4 border-none bg-transparent placeholder-transparent focus:border-transparent focus:outline-none focus:ring-0"
              placeholder="Destination"
            />

            <span
              className="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs"
            >
              Destination
            </span>
          </label>

          <label
            for="Departure"
            className="relative block rounded-md border border-gray-200 shadow-sm focus-within:border-green-600 focus-within:ring-1 focus-within:ring-green-600"
          >
            <input
              type="date"
              id="Departure"
              className="peer h-14 w-full text-black px-4 border-none bg-transparent placeholder-transparent focus:border-transparent focus:outline-none focus:ring-0"
              placeholder="Departure"
            />

            <span
              className="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs"
            >
              Departure
            </span>
          </label>

          <label
            for="Return"
            className="relative block rounded-md border border-gray-200 shadow-sm focus-within:border-green-600 focus-within:ring-1 focus-within:ring-green-600"
          >
            <input
              type="date"
              id="Return"
              className="peer h-14 w-full text-black px-4 border-none bg-transparent placeholder-transparent focus:border-transparent focus:outline-none focus:ring-0"
              placeholder="Return"
            />

            <span
              className="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs"
            >
              Return
            </span>
          </label>

          <label
            for="Travellers"
            className="relative block rounded-md border border-gray-200 shadow-sm focus-within:border-green-600 focus-within:ring-1 focus-within:ring-green-600"
          >
            <input
              type="number"
              id="Travellers"
              className="peer h-14 w-full text-black px-4 border-none bg-transparent placeholder-transparent focus:border-transparent focus:outline-none focus:ring-0"
              placeholder="Travellers"
            />

            <span
              className="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs"
            >
              Travellers
            </span>
          </label>

          </div>
          </div>

          <div className="flex py-4">
          <a
            className="flex mx-auto text-center cursor-pointer items-center px-8 py-4 hover:text-white bg-green-600 rounded hover:bg-black active:text-white focus:outline-none focus:ring"
          >
            <FaPlaneDeparture className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
              <span className="text-sm font-medium">
                Search
              </span>
          </a>
          </div>

        </div>

        <div className='px-4 py-12 md:block hidden'>
              <h2 className='text-3xl pt-8 text-slate-300 uppercase text-center'>Flight Selection</h2>
              <h3 className='text-5xl font-bold py-6 text-center'>The Best Way For You</h3>
              <p className='py-4 text-3xl text-slate-300 text-center'>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut vero aliquid sint distinctio iure ipsum 
                cupiditate? Quis, odit assumenda? Deleniti quasi inventore, libero reiciendis minima aliquid tempora.
                Obcaecati, autem.
              </p>
        </div>

        </div>

...

We will create an array and name it ‘packages’. Copy and paste the following code:

...

const packages = [
  {
    title: "Basic Package",
    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    price: "$99",
    features: ["Feature 1", "Feature 2", "Feature 3"],
  },
  {
    title: "Standard Package",
    description: "Vestibulum eget ipsum eget urna consequat tincidunt.",
    price: "$199",
    features: ["All Basic Package features", "Feature 4", "Feature 5"],
  },
  {
    title: "Premium Package",
    description: "Praesent maximus elit nec libero fermentum, in lacinia.",
    price: "$299",
    features: ["All Standard Package features", "Feature 6", "Feature 7"],
  },
];

...

We will also create a section with a white background. Copy and paste the following code:

...

{/* Section starts here */}
 <section className="relative bg-white">
 </section>
{/*section ends here*/}
...

We will proceed and add the following code:

...

<section className="bg-gray-100 py-8">
        <div className="container mx-auto px-4">
          <h1 className="lg:text-5xl text-2xl font-bold">Subscribtion</h1>
        </div>
        <main>
        <div className="container mx-auto mt-8 px-6">
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
          {packages.map((pkg, index) => (
            <div
              key={index}
              className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out"
            >
              <h3 className="text-2xl font-semibold mb-4">{pkg.title}</h3>
              <p className="text-gray-500 mb-4">{pkg.description}</p>
              <div className="mb-4">
                <span className="text-3xl font-bold">{pkg.price}</span>
                <span className="text-gray-500 ml-2">/ month</span>
              </div>
              <ul className="list-disc pl-6">
                {pkg.features.map((feature, index) => (
                  <li key={index} className="text-gray-700 mb-2">
                    {feature}
                  </li>
                ))}
              </ul>
              <a className="bg-green-600 cursor-pointer hover:bg-black text-white font-semibold px-4 py-2 mt-4 rounded-lg">
                Subscribe
              </a>
            </div>
          ))}
        </div>
      </div>
        </main>
      </section>

...

We will finally continue to create the footer which is the final part. We create a section with background white. Copy the following code:

{/* Section starts here */}
 <section className="relative bg-white mt-10">
 </section>
{/*section ends here*/}

Add the following code:

...

<footer className="bg-gray-50">
    <div className="mx-auto max-w-screen-xl px-4 py-8 sm:px-6 lg:px-8">
      <div className="sm:flex sm:items-center sm:justify-between">
        <div className="flex justify-center text-teal-600 sm:justify-start">
          <svg
            className="h-8"
            viewBox="0 0 118 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M37.83 19.2047C37.2352 19.237 36.6469 19.0679 36.16 18.7247C35.9566 18.5739 35.7929 18.3758 35.6831 18.1476C35.5733 17.9193 35.5208 17.6678 35.53 17.4147V8.1447C35.5252 8.1055 35.5293 8.0656 35.5422 8.0282C35.555 7.9908 35.5762 7.9569 35.6042 7.9289C35.6322 7.9009 35.6661 7.8797 35.7035 7.8669C35.7409 7.854 35.7808 7.8499 35.82 7.8547H37.5C37.69 7.8547 37.78 7.9547 37.78 8.1447V16.6947C37.78 17.0747 37.95 17.2647 38.3 17.2647C38.4484 17.2708 38.5968 17.254 38.74 17.2147C38.94 17.2147 39.05 17.2747 39.06 17.4547L39.21 18.7047C39.2172 18.7412 39.2165 18.7787 39.208 18.8149C39.1995 18.851 39.1833 18.885 39.1605 18.9143C39.1378 18.9437 39.109 18.9679 39.0762 18.9852C39.0433 19.0025 39.0071 19.0126 38.97 19.0147C38.602 19.1363 38.2175 19.2004 37.83 19.2047Z"
              fill="currentColor"
            />
            <path
              d="M47.28 18.1347C46.4359 18.8322 45.375 19.2137 44.28 19.2137C43.185 19.2137 42.1242 18.8322 41.28 18.1347C40.5381 17.3857 40.1218 16.374 40.1218 15.3197C40.1218 14.2654 40.5381 13.2537 41.28 12.5047C42.1258 11.8108 43.186 11.4316 44.28 11.4316C45.374 11.4316 46.4342 11.8108 47.28 12.5047C48.0049 13.2606 48.4096 14.2674 48.4096 15.3147C48.4096 16.362 48.0049 17.3688 47.28 18.1247V18.1347ZM42.86 16.8147C43.2518 17.1696 43.7614 17.3661 44.29 17.3661C44.8186 17.3661 45.3283 17.1696 45.72 16.8147C46.0746 16.4071 46.2698 15.885 46.2698 15.3447C46.2698 14.8045 46.0746 14.2824 45.72 13.8747C45.3283 13.5199 44.8186 13.3233 44.29 13.3233C43.7614 13.3233 43.2518 13.5199 42.86 13.8747C42.5055 14.2824 42.3102 14.8045 42.3102 15.3447C42.3102 15.885 42.5055 16.4071 42.86 16.8147Z"
              fill="currentColor"
            />
            <path
              d="M57.66 11.6847C57.85 11.6847 57.94 11.7847 57.94 11.9747V19.1447C57.9575 19.6287 57.8669 20.1104 57.6749 20.5549C57.4829 20.9995 57.1943 21.3957 56.83 21.7147C56.0214 22.4042 54.9816 22.7615 53.92 22.7147C52.9612 22.7484 52.0151 22.4866 51.21 21.9647C50.8662 21.739 50.5725 21.4449 50.3472 21.1009C50.1218 20.7568 49.9696 20.3701 49.9 19.9647C49.9 19.7647 49.9 19.6747 50.17 19.6747H51.85C51.9213 19.6771 51.9905 19.7002 52.049 19.741C52.1076 19.7818 52.1531 19.8386 52.18 19.9047C52.289 20.2084 52.5062 20.4613 52.79 20.6147C53.1359 20.7932 53.5209 20.8826 53.91 20.8747C54.1448 20.8876 54.3798 20.8535 54.6013 20.7745C54.8228 20.6956 55.0263 20.5732 55.2 20.4147C55.3587 20.2489 55.4821 20.0526 55.5629 19.8378C55.6437 19.623 55.6801 19.394 55.67 19.1647V18.5347C55.0685 18.9771 54.3364 19.2059 53.59 19.1847C53.0676 19.2037 52.5468 19.117 52.0587 18.9297C51.5707 18.7423 51.1256 18.4584 50.75 18.0947C50.0291 17.3489 49.6261 16.3521 49.6261 15.3147C49.6261 14.2774 50.0291 13.2806 50.75 12.5347C51.1274 12.1743 51.5731 11.8931 52.0608 11.7076C52.5486 11.5221 53.0685 11.4361 53.59 11.4547C54.358 11.4344 55.1098 11.678 55.72 12.1447V11.9847C55.7154 11.9464 55.7194 11.9075 55.7317 11.8709C55.744 11.8344 55.7643 11.801 55.7911 11.7732C55.8179 11.7454 55.8506 11.724 55.8867 11.7104C55.9229 11.6968 55.9616 11.6915 56 11.6947L57.66 11.6847ZM53.78 17.4047C54.0376 17.4127 54.2939 17.364 54.5306 17.262C54.7673 17.1601 54.9788 17.0074 55.15 16.8147C55.4825 16.3854 55.6629 15.8577 55.6629 15.3147C55.6629 14.7717 55.4825 14.2441 55.15 13.8147C54.9794 13.6247 54.7692 13.4742 54.5343 13.374C54.2993 13.2738 54.0453 13.2263 53.79 13.2347C53.5294 13.2265 53.2702 13.275 53.0302 13.3769C52.7902 13.4788 52.5752 13.6316 52.4 13.8247C52.0317 14.2354 51.838 14.7735 51.86 15.3247C51.842 15.8705 52.0314 16.4029 52.39 16.8147C52.5656 17.0073 52.7807 17.1598 53.0206 17.2616C53.2605 17.3634 53.5195 17.4122 53.78 17.4047Z"
              fill="currentColor"
            />
            <path
              d="M66.57 18.1347C65.7242 18.8286 64.664 19.2078 63.57 19.2078C62.476 19.2078 61.4158 18.8286 60.57 18.1347C59.8445 17.3771 59.4395 16.3687 59.4395 15.3197C59.4395 14.2708 59.8445 13.2623 60.57 12.5047C61.4166 11.8126 62.4765 11.4345 63.57 11.4345C64.6635 11.4345 65.7234 11.8126 66.57 12.5047C67.2949 13.2606 67.6996 14.2674 67.6996 15.3147C67.6996 16.362 67.2949 17.3688 66.57 18.1247V18.1347ZM62.14 16.8147C62.3317 16.9971 62.5577 17.1396 62.8049 17.234C63.0521 17.3284 63.3155 17.3729 63.58 17.3647C63.8428 17.3715 64.1044 17.3265 64.3498 17.2321C64.5952 17.1377 64.8195 16.9959 65.01 16.8147C65.3588 16.4043 65.5503 15.8833 65.5503 15.3447C65.5503 14.8061 65.3588 14.2851 65.01 13.8747C64.8195 13.6936 64.5952 13.5517 64.3498 13.4574C64.1044 13.363 63.8428 13.3179 63.58 13.3247C63.3155 13.3166 63.0521 13.361 62.8049 13.4554C62.5577 13.5498 62.3317 13.6924 62.14 13.8747C61.7913 14.2851 61.5998 14.8061 61.5998 15.3447C61.5998 15.8833 61.7913 16.4043 62.14 16.8147Z"
              fill="currentColor"
            />
            <path
              d="M71.31 9.9847C71.0457 10.2161 70.7063 10.3436 70.355 10.3436C70.0037 10.3436 69.6644 10.2161 69.4 9.9847C69.2802 9.8716 69.1847 9.7352 69.1194 9.5839C69.0542 9.4326 69.0205 9.2695 69.0205 9.1047C69.0205 8.9399 69.0542 8.7769 69.1194 8.6255C69.1847 8.4742 69.2802 8.3378 69.4 8.2247C69.6671 7.9991 70.0054 7.8754 70.355 7.8754C70.7046 7.8754 71.0429 7.9991 71.31 8.2247C71.4299 8.3378 71.5254 8.4742 71.5906 8.6255C71.6559 8.7769 71.6895 8.9399 71.6895 9.1047C71.6895 9.2695 71.6559 9.4326 71.5906 9.5839C71.5254 9.7352 71.4299 9.8716 71.31 9.9847ZM71.52 19.2047C70.9256 19.2339 70.3383 19.0651 69.85 18.7247C69.6497 18.5717 69.4888 18.3729 69.381 18.145C69.2731 17.9171 69.2213 17.6667 69.23 17.4147V11.9747C69.2252 11.9355 69.2293 11.8956 69.2422 11.8582C69.255 11.8208 69.2762 11.7869 69.3042 11.7589C69.3322 11.7309 69.3661 11.7097 69.4035 11.6969C69.4409 11.684 69.4808 11.6799 69.52 11.6847H71.2C71.39 11.6847 71.48 11.7847 71.48 11.9747V16.6947C71.48 17.0747 71.65 17.2647 71.99 17.2647C72.1417 17.2702 72.2933 17.2533 72.44 17.2147C72.64 17.2147 72.75 17.2747 72.76 17.4547L72.91 18.7047C72.9172 18.7412 72.9165 18.7787 72.908 18.8149C72.8995 18.851 72.8833 18.885 72.8605 18.9143C72.8378 18.9437 72.809 18.9679 72.7762 18.9852C72.7433 19.0025 72.7071 19.0126 72.67 19.0147C72.2988 19.137 71.9109 19.2011 71.52 19.2047Z"
              fill="currentColor"
            />
            <path
              d="M79.09 11.4447C79.6148 11.424 80.1383 11.5089 80.6296 11.6944C81.1209 11.88 81.57 12.1623 81.95 12.5247C82.6572 13.2837 83.0504 14.2824 83.0504 15.3197C83.0504 16.357 82.6572 17.3558 81.95 18.1147C81.5718 18.4804 81.1233 18.7655 80.6317 18.9528C80.1401 19.1402 79.6157 19.2259 79.09 19.2047C78.3412 19.2214 77.6073 18.9932 77 18.5547V22.1647C77 22.3547 76.9 22.4447 76.71 22.4447H75.03C74.9917 22.4519 74.9522 22.4496 74.9149 22.4381C74.8777 22.4265 74.8438 22.4061 74.8162 22.3785C74.7887 22.3509 74.7682 22.3171 74.7567 22.2798C74.7451 22.2426 74.7429 22.2031 74.75 22.1647V13.9647C74.7618 13.8845 74.7546 13.8027 74.7292 13.7257C74.7037 13.6488 74.6605 13.5788 74.6032 13.5215C74.5459 13.4642 74.476 13.4211 74.399 13.3956C74.3221 13.3701 74.2402 13.363 74.16 13.3747H73.83C73.61 13.3747 73.5 13.2947 73.5 13.1347V11.9547C73.4948 11.8817 73.5148 11.8091 73.5567 11.7491C73.5985 11.689 73.6597 11.6451 73.73 11.6247C74.0759 11.499 74.442 11.438 74.81 11.4447C75.177 11.4122 75.5453 11.4901 75.8678 11.6682C76.1902 11.8464 76.4522 12.1168 76.62 12.4447C76.9421 12.1189 77.3273 11.8622 77.752 11.6902C78.1767 11.5183 78.632 11.4347 79.09 11.4447ZM77.53 16.8147C77.7083 17.0011 77.9225 17.1494 78.1597 17.2507C78.3969 17.352 78.6521 17.4042 78.91 17.4042C79.1679 17.4042 79.4232 17.352 79.6603 17.2507C79.8975 17.1494 80.1117 17.0011 80.29 16.8147C80.6656 16.3958 80.8629 15.8469 80.84 15.2847C80.8662 14.7221 80.6684 14.1719 80.29 13.7547C80.1117 13.5684 79.8975 13.4201 79.6603 13.3188C79.4232 13.2174 79.1679 13.1652 78.91 13.1652C78.6521 13.1652 78.3969 13.2174 78.1597 13.3188C77.9225 13.4201 77.7083 13.5684 77.53 13.7547C77.1662 14.1793 76.9768 14.726 77 15.2847C76.9797 15.843 77.1688 16.3887 77.53 16.8147Z"
              fill="currentColor"
            />
            <path
              d="M87.77 19.2047C86.8723 19.2416 85.9822 19.0269 85.2 18.5847C84.8862 18.3957 84.619 18.1384 84.4181 17.832C84.2173 17.5256 84.0881 17.1779 84.04 16.8147C84.04 16.6147 84.11 16.5147 84.33 16.5147H85.8C85.8699 16.5175 85.9378 16.5394 85.996 16.5783C86.0542 16.6171 86.1006 16.6712 86.13 16.7347C86.34 17.2747 86.89 17.5447 87.77 17.5447C88.077 17.5588 88.3826 17.4969 88.66 17.3647C88.7558 17.3215 88.8379 17.2531 88.8978 17.1668C88.9577 17.0805 88.993 16.9795 89 16.8747C89 16.6147 88.84 16.4347 88.52 16.3147C88.1405 16.1884 87.7481 16.1045 87.35 16.0647C86.8785 16.0113 86.4109 15.9278 85.95 15.8147C85.5018 15.7133 85.0943 15.4799 84.78 15.1447C84.5949 14.9169 84.4587 14.6534 84.3797 14.3707C84.3008 14.088 84.2809 13.792 84.3212 13.5013C84.3616 13.2105 84.4613 12.9311 84.6142 12.6806C84.7671 12.43 84.9699 12.2136 85.21 12.0447C85.9308 11.5856 86.7765 11.3619 87.63 11.4047C88.4564 11.3768 89.274 11.5812 89.99 11.9947C90.2786 12.1582 90.527 12.3839 90.7173 12.6555C90.9076 12.9271 91.0349 13.2377 91.09 13.5647C91.09 13.7647 91 13.8647 90.82 13.8647H89.34C89.2777 13.8684 89.2157 13.8532 89.1622 13.8211C89.1087 13.789 89.0661 13.7414 89.04 13.6847C88.9411 13.4479 88.7549 13.2581 88.52 13.1547C88.255 13.0161 87.959 12.9472 87.66 12.9547C87.3669 12.9388 87.0745 12.9973 86.81 13.1247C86.7168 13.1607 86.6366 13.2237 86.5795 13.3057C86.5225 13.3877 86.4913 13.4849 86.49 13.5847C86.4964 13.7215 86.5465 13.8526 86.6329 13.9588C86.7193 14.065 86.8374 14.1406 86.97 14.1747C87.354 14.3195 87.7533 14.4201 88.16 14.4747C88.6277 14.5363 89.0917 14.6231 89.55 14.7347C89.9982 14.8362 90.4057 15.0695 90.72 15.4047C90.8882 15.5894 91.018 15.8055 91.1021 16.0407C91.1862 16.2758 91.2229 16.5253 91.21 16.7747C91.2186 17.1204 91.1375 17.4624 90.9745 17.7674C90.8115 18.0723 90.5722 18.3298 90.28 18.5147C89.5329 18.9944 88.6574 19.235 87.77 19.2047Z"
              fill="currentColor"
            />
            <path
              d="M101.78 18.7047C101.786 18.7402 101.784 18.7765 101.776 18.8114C101.767 18.8464 101.752 18.8792 101.73 18.9081C101.709 18.937 101.682 18.9613 101.651 18.9796C101.62 18.9979 101.586 19.0098 101.55 19.0147C101.185 19.1339 100.804 19.198 100.42 19.2047C100.04 19.2441 99.656 19.1847 99.306 19.0323C98.955 18.8799 98.65 18.6396 98.42 18.3347C97.714 18.942 96.8 19.2536 95.87 19.2047C95.438 19.2246 95.007 19.1539 94.604 18.9972C94.201 18.8405 93.835 18.6012 93.53 18.2947C93.227 17.9736 92.9922 17.5946 92.8392 17.1805C92.6863 16.7664 92.6186 16.3257 92.64 15.8847V11.9747C92.64 11.7847 92.73 11.6847 92.92 11.6847H94.6C94.79 11.6847 94.88 11.7847 94.88 11.9747V15.5847C94.862 16.0345 95.015 16.4743 95.31 16.8147C95.457 16.9707 95.636 17.0933 95.834 17.1744C96.032 17.2555 96.246 17.2931 96.46 17.2847C96.679 17.2943 96.898 17.2604 97.104 17.1848C97.31 17.1093 97.499 16.9937 97.66 16.8447C97.812 16.6877 97.931 16.5011 98.008 16.2964C98.086 16.0917 98.12 15.8733 98.11 15.6547V11.9747C98.11 11.7847 98.2 11.6847 98.39 11.6847H100.09C100.28 11.6847 100.37 11.7847 100.37 11.9747V16.6847C100.37 17.0747 100.54 17.2647 100.87 17.2647C101.025 17.2707 101.18 17.2539 101.33 17.2147C101.368 17.2041 101.408 17.2022 101.446 17.2092C101.485 17.2161 101.521 17.2317 101.553 17.2548C101.585 17.2779 101.611 17.3079 101.63 17.3425C101.648 17.3771 101.658 17.4155 101.66 17.4547L101.78 18.7047Z"
              fill="currentColor"
            />
            <path
              d="M117.67 18.7047C117.679 18.7405 117.68 18.7779 117.673 18.8141C117.665 18.8502 117.65 18.8844 117.628 18.914C117.606 18.9436 117.578 18.968 117.545 18.9854C117.513 19.0029 117.477 19.0129 117.44 19.0147C117.068 19.1356 116.681 19.1997 116.29 19.2047C115.695 19.2354 115.108 19.0665 114.62 18.7247C114.409 18.5783 114.238 18.3822 114.121 18.1537C114.004 17.9252 113.945 17.6713 113.95 17.4147V15.0647C113.971 14.6163 113.821 14.1766 113.53 13.8347C113.39 13.6784 113.216 13.5552 113.023 13.4739C112.829 13.3927 112.62 13.3554 112.41 13.3647C112.221 13.3576 112.033 13.3935 111.859 13.4697C111.686 13.5459 111.533 13.6605 111.41 13.8047C111.146 14.1398 111.011 14.5586 111.03 14.9847V18.6747C111.03 18.8647 110.94 18.9647 110.75 18.9647H109.06C109.021 18.9696 108.981 18.9654 108.944 18.9526C108.906 18.9397 108.872 18.9185 108.844 18.8905C108.816 18.8626 108.795 18.8286 108.782 18.7912C108.769 18.7538 108.765 18.714 108.77 18.6747V15.0647C108.792 14.6212 108.653 14.1846 108.38 13.8347C108.258 13.6877 108.105 13.5694 107.932 13.4882C107.76 13.407 107.571 13.3648 107.38 13.3647C107.176 13.3565 106.973 13.3914 106.783 13.4673C106.593 13.5431 106.422 13.6581 106.28 13.8047C105.994 14.1291 105.847 14.5529 105.87 14.9847V18.6747C105.875 18.714 105.871 18.7538 105.858 18.7912C105.845 18.8286 105.824 18.8626 105.796 18.8905C105.768 18.9185 105.734 18.9397 105.697 18.9526C105.659 18.9654 105.619 18.9696 105.58 18.9647H103.95C103.76 18.9647 103.67 18.8647 103.67 18.6747V13.9647C103.682 13.8845 103.675 13.8027 103.649 13.7257C103.624 13.6488 103.581 13.5788 103.523 13.5215C103.466 13.4642 103.396 13.4211 103.319 13.3956C103.242 13.3701 103.16 13.363 103.08 13.3747H102.75C102.53 13.3747 102.42 13.2947 102.42 13.1347V11.9547C102.415 11.8817 102.435 11.8091 102.477 11.7491C102.519 11.689 102.58 11.6451 102.65 11.6247C102.996 11.499 103.362 11.438 103.73 11.4447C104.083 11.4146 104.438 11.485 104.753 11.6478C105.068 11.8106 105.33 12.0591 105.51 12.3647C105.847 12.045 106.247 11.7982 106.684 11.6399C107.121 11.4816 107.586 11.4152 108.05 11.4447C108.501 11.4227 108.95 11.5072 109.362 11.6914C109.774 11.8756 110.136 12.1542 110.42 12.5047C110.751 12.145 111.158 11.8634 111.611 11.68C112.064 11.4967 112.552 11.4164 113.04 11.4447C113.476 11.4243 113.912 11.4946 114.32 11.6513C114.728 11.8079 115.099 12.0474 115.41 12.3547C115.714 12.6752 115.949 13.0541 116.102 13.4684C116.255 13.8826 116.323 14.3237 116.3 14.7647V16.6947C116.3 17.0747 116.47 17.2647 116.79 17.2647C116.945 17.2719 117.1 17.2551 117.25 17.2147C117.457 17.2147 117.567 17.2947 117.58 17.4547L117.67 18.7047Z"
              fill="currentColor"
            />
            <path
              d="M0.41 10.3847C1.14777 7.4194 2.85643 4.7861 5.2639 2.90424C7.6714 1.02234 10.6393 0 13.695 0C16.7507 0 19.7186 1.02234 22.1261 2.90424C24.5336 4.7861 26.2422 7.4194 26.98 10.3847H25.78C23.7557 10.3549 21.7729 10.9599 20.11 12.1147C20.014 12.1842 19.9138 12.2477 19.81 12.3047H19.67C19.5662 12.2477 19.466 12.1842 19.37 12.1147C17.6924 10.9866 15.7166 10.3841 13.695 10.3841C11.6734 10.3841 9.6976 10.9866 8.02 12.1147C7.924 12.1842 7.8238 12.2477 7.72 12.3047H7.58C7.4762 12.2477 7.376 12.1842 7.28 12.1147C5.6171 10.9599 3.6343 10.3549 1.61 10.3847H0.41ZM23.62 16.6547C24.236 16.175 24.9995 15.924 25.78 15.9447H27.39V12.7347H25.78C24.4052 12.7181 23.0619 13.146 21.95 13.9547C21.3243 14.416 20.5674 14.6649 19.79 14.6649C19.0126 14.6649 18.2557 14.416 17.63 13.9547C16.4899 13.1611 15.1341 12.7356 13.745 12.7356C12.3559 12.7356 11.0001 13.1611 9.86 13.9547C9.2343 14.416 8.4774 14.6649 7.7 14.6649C6.9226 14.6649 6.1657 14.416 5.54 13.9547C4.4144 13.1356 3.0518 12.7072 1.66 12.7347H0V15.9447H1.61C2.39051 15.924 3.154 16.175 3.77 16.6547C4.908 17.4489 6.2623 17.8747 7.65 17.8747C9.0377 17.8747 10.392 17.4489 11.53 16.6547C12.1468 16.1765 12.9097 15.9257 13.69 15.9447C14.4708 15.9223 15.2348 16.1735 15.85 16.6547C16.9901 17.4484 18.3459 17.8738 19.735 17.8738C21.1241 17.8738 22.4799 17.4484 23.62 16.6547ZM23.62 22.3947C24.236 21.915 24.9995 21.664 25.78 21.6847H27.39V18.4747H25.78C24.4052 18.4581 23.0619 18.886 21.95 19.6947C21.3243 20.156 20.5674 20.4049 19.79 20.4049C19.0126 20.4049 18.2557 20.156 17.63 19.6947C16.4899 18.9011 15.1341 18.4757 13.745 18.4757C12.3559 18.4757 11.0001 18.9011 9.86 19.6947C9.2343 20.156 8.4774 20.4049 7.7 20.4049C6.9226 20.4049 6.1657 20.156 5.54 19.6947C4.4144 18.8757 3.0518 18.4472 1.66 18.4747H0V21.6847H1.61C2.39051 21.664 3.154 21.915 3.77 22.3947C4.908 23.1889 6.2623 23.6147 7.65 23.6147C9.0377 23.6147 10.392 23.1889 11.53 22.3947C12.1468 21.9165 12.9097 21.6657 13.69 21.6847C14.4708 21.6623 15.2348 21.9135 15.85 22.3947C16.9901 23.1884 18.3459 23.6138 19.735 23.6138C21.1241 23.6138 22.4799 23.1884 23.62 22.3947Z"
              fill="currentColor"
            />
          </svg>
        </div>

        <p className="mt-4 text-center text-sm text-gray-500 lg:mt-0 lg:text-right">
          Copyright &copy; 2023. All rights reserved.
        </p>
      </div>
    </div>
  </footer>

...

Your final code should look like the code below:

import React from "react";
import Navigation from "./components/Navigation";
import backgroundimg from './assets/backgroundimg.webp';
import airpotimg from './assets/airport.jpeg';

import {FaPlaneDeparture} from "react-icons/fa";

const packages = [
  {
    title: "Basic Package",
    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    price: "$99",
    features: ["Feature 1", "Feature 2", "Feature 3"],
  },
  {
    title: "Standard Package",
    description: "Vestibulum eget ipsum eget urna consequat tincidunt.",
    price: "$199",
    features: ["All Basic Package features", "Feature 4", "Feature 5"],
  },
  {
    title: "Premium Package",
    description: "Praesent maximus elit nec libero fermentum, in lacinia.",
    price: "$299",
    features: ["All Standard Package features", "Feature 6", "Feature 7"],
  },
];

function App() {
  return (
    <div>
     < Navigation />

     <div className="relative">

       {/* background image */}
       <div
          className="fixed inset-0 z-0"
          style={{
            backgroundImage: `url(${backgroundimg})`,
            backgroundSize: 'cover',
            backgroundPosition: 'center',
          }}
        ></div>


         {/* section starts here */}
         <section className="relative mb-16 z-0 py-8">
          <div className="grid container mx-auto pt-40 p-8 grid-cols-1 gap-y-8 lg:grid-cols-2 lg:items-center lg:gap-x-16">
            <div className="mx-auto max-w-lg lg:mx-0 ltr:lg:text-left rtl:lg:text-right">
              <h2 className="text-3xl font-bold sm:text-4xl">Find Ticket</h2>

              <p className="mt-4 text-gray-600">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut vero
                aliquid sint distinctio iure ipsum cupiditate? Quis, odit assumenda?
                Deleniti quasi inventore, libero reiciendis minima aliquid tempora.
                Obcaecati, autem.
              </p>



            {/* Input for search here */}
            <div className="relative mt-8">
              <label for="Search" className="sr-only"> Search </label>

              <input
                type="text"
                id="Search"
                placeholder="Search ticket..."
                className="w-full h-12 focus:outline-none rounded-full border-none border-gray-200 pe-10 ps-4 text-sm  py-2.5 shadow-sm sm:text-sm"
              />

              <span className="absolute inset-y-0 end-0 grid w-10 place-content-center">
                <button 
                  type="button" 
                  className="absolute border border-emerald-700 end-1 top-1/2 -translate-y-1/2 rounded-full bg-gray-50 p-2 text-gray-600 transition hover:text-gray-700"
                  >
                  <span className="sr-only">Search</span>

                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    className="h-4 w-4"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
                    />
                  </svg>
                </button>
              </span>
            </div>

            </div>

            {/* statistics here */}
            <div>

              <div className="grid grid-cols-2 gap-4 sm:grid-cols-2">
                <div className="flex flex-col rounded-lg border border-emerald-600 hover:bg-gray-200 hover:border-gray-200 px-4 py-8 text-center">
                  <dt className="order-last text-lg font-medium text-gray-500">
                    Tickets Sold
                  </dt>
                  <dd className="text-4xl font-extrabold mb-4 text-emerald-600 md:text-5xl">
                    9,k+
                  </dd>
                </div>

                <div className="flex flex-col rounded-lg border border-emerald-600 hover:bg-gray-200 hover:border-gray-200 px-4 py-8 text-center">
                  <dt className="order-last text-lg font-medium text-gray-500">
                    Passengers Carried
                  </dt>
                  <dd className="text-4xl font-extrabold mb-4 text-emerald-600 md:text-5xl">
                    20,k+
                  </dd>
                </div>

                <div className="flex flex-col rounded-lg border border-emerald-600 hover:bg-gray-200 hover:border-gray-200 px-4 py-8 text-center">
                  <dt className="order-last text-lg font-medium text-gray-500">
                    Flight Satisfaction
                  </dt>
                  <dd className="text-4xl font-extrabold mb-4 text-emerald-600 md:text-5xl">
                    10,k+
                  </dd>
                </div>

                <div className="flex flex-col rounded-lg border border-emerald-600 hover:bg-gray-200 hover:border-gray-200 px-4 py-8 text-center">
                  <dt className="order-last text-lg font-medium text-gray-500">
                    Tickets Value
                  </dt>
                  <dd className="text-4xl font-extrabold mb-4 text-emerald-600 md:text-5xl">
                    $4.8m
                  </dd>
                </div>
              </div>
            </div>
          </div>
        </section>
        {/* section ends here */}


          {/* section starts here */}
        <section className="relative pb-2">

        <div className='w-full h-[700px] bg-gray-900/90 absolute'>
            <img className='w-full h-full object-cover mix-blend-overlay' src={airpotimg} alt="airpotimg" />
        </div>


        <div className='max-w-[1240px] mx-auto text-white relative'>

        <div className="relative overflow-hidden mx-4 -top-10 bg-white rounded-lg shadow-md">
          <div className="flex px-8 pt-8">
          <fieldset className="grid grid-cols-2 gap-4">
            <legend className="sr-only">Delivery</legend>

            <div>
              <input
                type="radio"
                name="DeliveryOption"
                value="DeliveryOneway"
                id="DeliveryOneway"
                className="peer hidden [&:checked_+_label_svg]:block"
                checked
              />

              <label
                for="DeliveryOneway"
                className="block cursor-pointer rounded-lg border border-gray-100 bg-white p-4 text-sm font-medium shadow-sm hover:border-gray-200 peer-checked:border-green-600 peer-checked:ring-1 peer-checked:ring-green-600"
              >
                <div className="flex items-center justify-between">
                  <p className="text-gray-700">One-way</p>

                  <svg
                    className="hidden h-5 w-5 text-green-600"
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 20 20"
                    fill="currentColor"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                      clip-rule="evenodd"
                    />
                  </svg>
                </div>
              </label>
            </div>

            <div>
              <input
                type="radio"
                name="DeliveryOption"
                value="DeliveryRoundtrip"
                id="DeliveryRoundtrip"
                className="peer hidden [&:checked_+_label_svg]:block"
              />

              <label
                for="DeliveryRoundtrip"
                className="block cursor-pointer rounded-lg border border-gray-100 bg-white p-4 text-sm font-medium shadow-sm hover:border-gray-200 peer-checked:border-green-600 peer-checked:ring-1 peer-checked:ring-green-600"
              >
                <div className="flex items-center justify-between">
                  <p className="text-gray-700">Roundtrip</p>

                  <svg
                    className="hidden h-5 w-5 text-green-600"
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 20 20"
                    fill="currentColor"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                      clip-rule="evenodd"
                    />
                  </svg>
                </div>
              </label>
            </div>
          </fieldset>
          </div>
          <div className="flex px-8 pt-1">
          <div className="grid mx-auto py-4 grid-cols-1 gap-y-8 lg:grid-cols-5 lg:items-center lg:gap-x-4">

          <label
            for="Origin"
            className="relative block rounded-md border border-gray-200 shadow-sm focus-within:border-green-600 focus-within:ring-1 focus-within:ring-green-600"
          >
            <input
              type="text"
              id="Origin"
              className="peer h-14 w-full text-black px-4 border-none bg-transparent placeholder-transparent focus:border-transparent focus:outline-none focus:ring-0"
              placeholder="Origin"
            />

            <span
              className="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs"
            >
              Origin
            </span>
          </label>

          <label
            for="Destination"
            className="relative block rounded-md border border-gray-200 shadow-sm focus-within:border-green-600 focus-within:ring-1 focus-within:ring-green-600"
          >
            <input
              type="text"
              id="Destination"
              className="peer h-14 w-full text-black px-4 border-none bg-transparent placeholder-transparent focus:border-transparent focus:outline-none focus:ring-0"
              placeholder="Destination"
            />

            <span
              className="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs"
            >
              Destination
            </span>
          </label>

          <label
            for="Departure"
            className="relative block rounded-md border border-gray-200 shadow-sm focus-within:border-green-600 focus-within:ring-1 focus-within:ring-green-600"
          >
            <input
              type="date"
              id="Departure"
              className="peer h-14 w-full text-black px-4 border-none bg-transparent placeholder-transparent focus:border-transparent focus:outline-none focus:ring-0"
              placeholder="Departure"
            />

            <span
              className="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs"
            >
              Departure
            </span>
          </label>

          <label
            for="Return"
            className="relative block rounded-md border border-gray-200 shadow-sm focus-within:border-green-600 focus-within:ring-1 focus-within:ring-green-600"
          >
            <input
              type="date"
              id="Return"
              className="peer h-14 w-full text-black px-4 border-none bg-transparent placeholder-transparent focus:border-transparent focus:outline-none focus:ring-0"
              placeholder="Return"
            />

            <span
              className="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs"
            >
              Return
            </span>
          </label>

          <label
            for="Travellers"
            className="relative block rounded-md border border-gray-200 shadow-sm focus-within:border-green-600 focus-within:ring-1 focus-within:ring-green-600"
          >
            <input
              type="number"
              id="Travellers"
              className="peer h-14 w-full text-black px-4 border-none bg-transparent placeholder-transparent focus:border-transparent focus:outline-none focus:ring-0"
              placeholder="Travellers"
            />

            <span
              className="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-700 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs"
            >
              Travellers
            </span>
          </label>

          </div>
          </div>

          <div className="flex py-4">
          <a
            className="flex mx-auto text-center cursor-pointer items-center px-8 py-4 hover:text-white bg-green-600 rounded hover:bg-black active:text-white focus:outline-none focus:ring"
          >
            <FaPlaneDeparture className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
              <span className="text-sm font-medium">
                Search
              </span>
          </a>
          </div>

        </div>

        <div className='px-4 py-12 md:block hidden'>
              <h2 className='text-3xl pt-8 text-slate-300 uppercase text-center'>Flight Selection</h2>
              <h3 className='text-5xl font-bold py-6 text-center'>The Best Way For You</h3>
              <p className='py-4 text-3xl text-slate-300 text-center'>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut vero aliquid sint distinctio iure ipsum 
                cupiditate? Quis, odit assumenda? Deleniti quasi inventore, libero reiciendis minima aliquid tempora.
                Obcaecati, autem.
              </p>
        </div>

        </div>


        </section>
        {/* section ends here */}


        {/* Section starts here */}
        <section className="relative bg-white">

        <section className="bg-gray-100 py-8">
        <div className="container mx-auto px-4">
          <h1 className="lg:text-5xl text-2xl font-bold">Subscribtion</h1>
        </div>
        <main>
        <div className="container mx-auto mt-8 px-6">
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
          {packages.map((pkg, index) => (
            <div
              key={index}
              className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out"
            >
              <h3 className="text-2xl font-semibold mb-4">{pkg.title}</h3>
              <p className="text-gray-500 mb-4">{pkg.description}</p>
              <div className="mb-4">
                <span className="text-3xl font-bold">{pkg.price}</span>
                <span className="text-gray-500 ml-2">/ month</span>
              </div>
              <ul className="list-disc pl-6">
                {pkg.features.map((feature, index) => (
                  <li key={index} className="text-gray-700 mb-2">
                    {feature}
                  </li>
                ))}
              </ul>
              <a className="bg-green-600 cursor-pointer hover:bg-black text-white font-semibold px-4 py-2 mt-4 rounded-lg">
                Subscribe
              </a>
            </div>
          ))}
        </div>
      </div>
        </main>
      </section>

  </section>
  {/* sections ends here */}

  {/* Section starts here */}
  <section className="relative bg-white mt-10">
    <footer className="bg-gray-50">
    <div className="mx-auto max-w-screen-xl px-4 py-8 sm:px-6 lg:px-8">
      <div className="sm:flex sm:items-center sm:justify-between">
        <div className="flex justify-center text-teal-600 sm:justify-start">
          <svg
            className="h-8"
            viewBox="0 0 118 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M37.83 19.2047C37.2352 19.237 36.6469 19.0679 36.16 18.7247C35.9566 18.5739 35.7929 18.3758 35.6831 18.1476C35.5733 17.9193 35.5208 17.6678 35.53 17.4147V8.1447C35.5252 8.1055 35.5293 8.0656 35.5422 8.0282C35.555 7.9908 35.5762 7.9569 35.6042 7.9289C35.6322 7.9009 35.6661 7.8797 35.7035 7.8669C35.7409 7.854 35.7808 7.8499 35.82 7.8547H37.5C37.69 7.8547 37.78 7.9547 37.78 8.1447V16.6947C37.78 17.0747 37.95 17.2647 38.3 17.2647C38.4484 17.2708 38.5968 17.254 38.74 17.2147C38.94 17.2147 39.05 17.2747 39.06 17.4547L39.21 18.7047C39.2172 18.7412 39.2165 18.7787 39.208 18.8149C39.1995 18.851 39.1833 18.885 39.1605 18.9143C39.1378 18.9437 39.109 18.9679 39.0762 18.9852C39.0433 19.0025 39.0071 19.0126 38.97 19.0147C38.602 19.1363 38.2175 19.2004 37.83 19.2047Z"
              fill="currentColor"
            />
            <path
              d="M47.28 18.1347C46.4359 18.8322 45.375 19.2137 44.28 19.2137C43.185 19.2137 42.1242 18.8322 41.28 18.1347C40.5381 17.3857 40.1218 16.374 40.1218 15.3197C40.1218 14.2654 40.5381 13.2537 41.28 12.5047C42.1258 11.8108 43.186 11.4316 44.28 11.4316C45.374 11.4316 46.4342 11.8108 47.28 12.5047C48.0049 13.2606 48.4096 14.2674 48.4096 15.3147C48.4096 16.362 48.0049 17.3688 47.28 18.1247V18.1347ZM42.86 16.8147C43.2518 17.1696 43.7614 17.3661 44.29 17.3661C44.8186 17.3661 45.3283 17.1696 45.72 16.8147C46.0746 16.4071 46.2698 15.885 46.2698 15.3447C46.2698 14.8045 46.0746 14.2824 45.72 13.8747C45.3283 13.5199 44.8186 13.3233 44.29 13.3233C43.7614 13.3233 43.2518 13.5199 42.86 13.8747C42.5055 14.2824 42.3102 14.8045 42.3102 15.3447C42.3102 15.885 42.5055 16.4071 42.86 16.8147Z"
              fill="currentColor"
            />
            <path
              d="M57.66 11.6847C57.85 11.6847 57.94 11.7847 57.94 11.9747V19.1447C57.9575 19.6287 57.8669 20.1104 57.6749 20.5549C57.4829 20.9995 57.1943 21.3957 56.83 21.7147C56.0214 22.4042 54.9816 22.7615 53.92 22.7147C52.9612 22.7484 52.0151 22.4866 51.21 21.9647C50.8662 21.739 50.5725 21.4449 50.3472 21.1009C50.1218 20.7568 49.9696 20.3701 49.9 19.9647C49.9 19.7647 49.9 19.6747 50.17 19.6747H51.85C51.9213 19.6771 51.9905 19.7002 52.049 19.741C52.1076 19.7818 52.1531 19.8386 52.18 19.9047C52.289 20.2084 52.5062 20.4613 52.79 20.6147C53.1359 20.7932 53.5209 20.8826 53.91 20.8747C54.1448 20.8876 54.3798 20.8535 54.6013 20.7745C54.8228 20.6956 55.0263 20.5732 55.2 20.4147C55.3587 20.2489 55.4821 20.0526 55.5629 19.8378C55.6437 19.623 55.6801 19.394 55.67 19.1647V18.5347C55.0685 18.9771 54.3364 19.2059 53.59 19.1847C53.0676 19.2037 52.5468 19.117 52.0587 18.9297C51.5707 18.7423 51.1256 18.4584 50.75 18.0947C50.0291 17.3489 49.6261 16.3521 49.6261 15.3147C49.6261 14.2774 50.0291 13.2806 50.75 12.5347C51.1274 12.1743 51.5731 11.8931 52.0608 11.7076C52.5486 11.5221 53.0685 11.4361 53.59 11.4547C54.358 11.4344 55.1098 11.678 55.72 12.1447V11.9847C55.7154 11.9464 55.7194 11.9075 55.7317 11.8709C55.744 11.8344 55.7643 11.801 55.7911 11.7732C55.8179 11.7454 55.8506 11.724 55.8867 11.7104C55.9229 11.6968 55.9616 11.6915 56 11.6947L57.66 11.6847ZM53.78 17.4047C54.0376 17.4127 54.2939 17.364 54.5306 17.262C54.7673 17.1601 54.9788 17.0074 55.15 16.8147C55.4825 16.3854 55.6629 15.8577 55.6629 15.3147C55.6629 14.7717 55.4825 14.2441 55.15 13.8147C54.9794 13.6247 54.7692 13.4742 54.5343 13.374C54.2993 13.2738 54.0453 13.2263 53.79 13.2347C53.5294 13.2265 53.2702 13.275 53.0302 13.3769C52.7902 13.4788 52.5752 13.6316 52.4 13.8247C52.0317 14.2354 51.838 14.7735 51.86 15.3247C51.842 15.8705 52.0314 16.4029 52.39 16.8147C52.5656 17.0073 52.7807 17.1598 53.0206 17.2616C53.2605 17.3634 53.5195 17.4122 53.78 17.4047Z"
              fill="currentColor"
            />
            <path
              d="M66.57 18.1347C65.7242 18.8286 64.664 19.2078 63.57 19.2078C62.476 19.2078 61.4158 18.8286 60.57 18.1347C59.8445 17.3771 59.4395 16.3687 59.4395 15.3197C59.4395 14.2708 59.8445 13.2623 60.57 12.5047C61.4166 11.8126 62.4765 11.4345 63.57 11.4345C64.6635 11.4345 65.7234 11.8126 66.57 12.5047C67.2949 13.2606 67.6996 14.2674 67.6996 15.3147C67.6996 16.362 67.2949 17.3688 66.57 18.1247V18.1347ZM62.14 16.8147C62.3317 16.9971 62.5577 17.1396 62.8049 17.234C63.0521 17.3284 63.3155 17.3729 63.58 17.3647C63.8428 17.3715 64.1044 17.3265 64.3498 17.2321C64.5952 17.1377 64.8195 16.9959 65.01 16.8147C65.3588 16.4043 65.5503 15.8833 65.5503 15.3447C65.5503 14.8061 65.3588 14.2851 65.01 13.8747C64.8195 13.6936 64.5952 13.5517 64.3498 13.4574C64.1044 13.363 63.8428 13.3179 63.58 13.3247C63.3155 13.3166 63.0521 13.361 62.8049 13.4554C62.5577 13.5498 62.3317 13.6924 62.14 13.8747C61.7913 14.2851 61.5998 14.8061 61.5998 15.3447C61.5998 15.8833 61.7913 16.4043 62.14 16.8147Z"
              fill="currentColor"
            />
            <path
              d="M71.31 9.9847C71.0457 10.2161 70.7063 10.3436 70.355 10.3436C70.0037 10.3436 69.6644 10.2161 69.4 9.9847C69.2802 9.8716 69.1847 9.7352 69.1194 9.5839C69.0542 9.4326 69.0205 9.2695 69.0205 9.1047C69.0205 8.9399 69.0542 8.7769 69.1194 8.6255C69.1847 8.4742 69.2802 8.3378 69.4 8.2247C69.6671 7.9991 70.0054 7.8754 70.355 7.8754C70.7046 7.8754 71.0429 7.9991 71.31 8.2247C71.4299 8.3378 71.5254 8.4742 71.5906 8.6255C71.6559 8.7769 71.6895 8.9399 71.6895 9.1047C71.6895 9.2695 71.6559 9.4326 71.5906 9.5839C71.5254 9.7352 71.4299 9.8716 71.31 9.9847ZM71.52 19.2047C70.9256 19.2339 70.3383 19.0651 69.85 18.7247C69.6497 18.5717 69.4888 18.3729 69.381 18.145C69.2731 17.9171 69.2213 17.6667 69.23 17.4147V11.9747C69.2252 11.9355 69.2293 11.8956 69.2422 11.8582C69.255 11.8208 69.2762 11.7869 69.3042 11.7589C69.3322 11.7309 69.3661 11.7097 69.4035 11.6969C69.4409 11.684 69.4808 11.6799 69.52 11.6847H71.2C71.39 11.6847 71.48 11.7847 71.48 11.9747V16.6947C71.48 17.0747 71.65 17.2647 71.99 17.2647C72.1417 17.2702 72.2933 17.2533 72.44 17.2147C72.64 17.2147 72.75 17.2747 72.76 17.4547L72.91 18.7047C72.9172 18.7412 72.9165 18.7787 72.908 18.8149C72.8995 18.851 72.8833 18.885 72.8605 18.9143C72.8378 18.9437 72.809 18.9679 72.7762 18.9852C72.7433 19.0025 72.7071 19.0126 72.67 19.0147C72.2988 19.137 71.9109 19.2011 71.52 19.2047Z"
              fill="currentColor"
            />
            <path
              d="M79.09 11.4447C79.6148 11.424 80.1383 11.5089 80.6296 11.6944C81.1209 11.88 81.57 12.1623 81.95 12.5247C82.6572 13.2837 83.0504 14.2824 83.0504 15.3197C83.0504 16.357 82.6572 17.3558 81.95 18.1147C81.5718 18.4804 81.1233 18.7655 80.6317 18.9528C80.1401 19.1402 79.6157 19.2259 79.09 19.2047C78.3412 19.2214 77.6073 18.9932 77 18.5547V22.1647C77 22.3547 76.9 22.4447 76.71 22.4447H75.03C74.9917 22.4519 74.9522 22.4496 74.9149 22.4381C74.8777 22.4265 74.8438 22.4061 74.8162 22.3785C74.7887 22.3509 74.7682 22.3171 74.7567 22.2798C74.7451 22.2426 74.7429 22.2031 74.75 22.1647V13.9647C74.7618 13.8845 74.7546 13.8027 74.7292 13.7257C74.7037 13.6488 74.6605 13.5788 74.6032 13.5215C74.5459 13.4642 74.476 13.4211 74.399 13.3956C74.3221 13.3701 74.2402 13.363 74.16 13.3747H73.83C73.61 13.3747 73.5 13.2947 73.5 13.1347V11.9547C73.4948 11.8817 73.5148 11.8091 73.5567 11.7491C73.5985 11.689 73.6597 11.6451 73.73 11.6247C74.0759 11.499 74.442 11.438 74.81 11.4447C75.177 11.4122 75.5453 11.4901 75.8678 11.6682C76.1902 11.8464 76.4522 12.1168 76.62 12.4447C76.9421 12.1189 77.3273 11.8622 77.752 11.6902C78.1767 11.5183 78.632 11.4347 79.09 11.4447ZM77.53 16.8147C77.7083 17.0011 77.9225 17.1494 78.1597 17.2507C78.3969 17.352 78.6521 17.4042 78.91 17.4042C79.1679 17.4042 79.4232 17.352 79.6603 17.2507C79.8975 17.1494 80.1117 17.0011 80.29 16.8147C80.6656 16.3958 80.8629 15.8469 80.84 15.2847C80.8662 14.7221 80.6684 14.1719 80.29 13.7547C80.1117 13.5684 79.8975 13.4201 79.6603 13.3188C79.4232 13.2174 79.1679 13.1652 78.91 13.1652C78.6521 13.1652 78.3969 13.2174 78.1597 13.3188C77.9225 13.4201 77.7083 13.5684 77.53 13.7547C77.1662 14.1793 76.9768 14.726 77 15.2847C76.9797 15.843 77.1688 16.3887 77.53 16.8147Z"
              fill="currentColor"
            />
            <path
              d="M87.77 19.2047C86.8723 19.2416 85.9822 19.0269 85.2 18.5847C84.8862 18.3957 84.619 18.1384 84.4181 17.832C84.2173 17.5256 84.0881 17.1779 84.04 16.8147C84.04 16.6147 84.11 16.5147 84.33 16.5147H85.8C85.8699 16.5175 85.9378 16.5394 85.996 16.5783C86.0542 16.6171 86.1006 16.6712 86.13 16.7347C86.34 17.2747 86.89 17.5447 87.77 17.5447C88.077 17.5588 88.3826 17.4969 88.66 17.3647C88.7558 17.3215 88.8379 17.2531 88.8978 17.1668C88.9577 17.0805 88.993 16.9795 89 16.8747C89 16.6147 88.84 16.4347 88.52 16.3147C88.1405 16.1884 87.7481 16.1045 87.35 16.0647C86.8785 16.0113 86.4109 15.9278 85.95 15.8147C85.5018 15.7133 85.0943 15.4799 84.78 15.1447C84.5949 14.9169 84.4587 14.6534 84.3797 14.3707C84.3008 14.088 84.2809 13.792 84.3212 13.5013C84.3616 13.2105 84.4613 12.9311 84.6142 12.6806C84.7671 12.43 84.9699 12.2136 85.21 12.0447C85.9308 11.5856 86.7765 11.3619 87.63 11.4047C88.4564 11.3768 89.274 11.5812 89.99 11.9947C90.2786 12.1582 90.527 12.3839 90.7173 12.6555C90.9076 12.9271 91.0349 13.2377 91.09 13.5647C91.09 13.7647 91 13.8647 90.82 13.8647H89.34C89.2777 13.8684 89.2157 13.8532 89.1622 13.8211C89.1087 13.789 89.0661 13.7414 89.04 13.6847C88.9411 13.4479 88.7549 13.2581 88.52 13.1547C88.255 13.0161 87.959 12.9472 87.66 12.9547C87.3669 12.9388 87.0745 12.9973 86.81 13.1247C86.7168 13.1607 86.6366 13.2237 86.5795 13.3057C86.5225 13.3877 86.4913 13.4849 86.49 13.5847C86.4964 13.7215 86.5465 13.8526 86.6329 13.9588C86.7193 14.065 86.8374 14.1406 86.97 14.1747C87.354 14.3195 87.7533 14.4201 88.16 14.4747C88.6277 14.5363 89.0917 14.6231 89.55 14.7347C89.9982 14.8362 90.4057 15.0695 90.72 15.4047C90.8882 15.5894 91.018 15.8055 91.1021 16.0407C91.1862 16.2758 91.2229 16.5253 91.21 16.7747C91.2186 17.1204 91.1375 17.4624 90.9745 17.7674C90.8115 18.0723 90.5722 18.3298 90.28 18.5147C89.5329 18.9944 88.6574 19.235 87.77 19.2047Z"
              fill="currentColor"
            />
            <path
              d="M101.78 18.7047C101.786 18.7402 101.784 18.7765 101.776 18.8114C101.767 18.8464 101.752 18.8792 101.73 18.9081C101.709 18.937 101.682 18.9613 101.651 18.9796C101.62 18.9979 101.586 19.0098 101.55 19.0147C101.185 19.1339 100.804 19.198 100.42 19.2047C100.04 19.2441 99.656 19.1847 99.306 19.0323C98.955 18.8799 98.65 18.6396 98.42 18.3347C97.714 18.942 96.8 19.2536 95.87 19.2047C95.438 19.2246 95.007 19.1539 94.604 18.9972C94.201 18.8405 93.835 18.6012 93.53 18.2947C93.227 17.9736 92.9922 17.5946 92.8392 17.1805C92.6863 16.7664 92.6186 16.3257 92.64 15.8847V11.9747C92.64 11.7847 92.73 11.6847 92.92 11.6847H94.6C94.79 11.6847 94.88 11.7847 94.88 11.9747V15.5847C94.862 16.0345 95.015 16.4743 95.31 16.8147C95.457 16.9707 95.636 17.0933 95.834 17.1744C96.032 17.2555 96.246 17.2931 96.46 17.2847C96.679 17.2943 96.898 17.2604 97.104 17.1848C97.31 17.1093 97.499 16.9937 97.66 16.8447C97.812 16.6877 97.931 16.5011 98.008 16.2964C98.086 16.0917 98.12 15.8733 98.11 15.6547V11.9747C98.11 11.7847 98.2 11.6847 98.39 11.6847H100.09C100.28 11.6847 100.37 11.7847 100.37 11.9747V16.6847C100.37 17.0747 100.54 17.2647 100.87 17.2647C101.025 17.2707 101.18 17.2539 101.33 17.2147C101.368 17.2041 101.408 17.2022 101.446 17.2092C101.485 17.2161 101.521 17.2317 101.553 17.2548C101.585 17.2779 101.611 17.3079 101.63 17.3425C101.648 17.3771 101.658 17.4155 101.66 17.4547L101.78 18.7047Z"
              fill="currentColor"
            />
            <path
              d="M117.67 18.7047C117.679 18.7405 117.68 18.7779 117.673 18.8141C117.665 18.8502 117.65 18.8844 117.628 18.914C117.606 18.9436 117.578 18.968 117.545 18.9854C117.513 19.0029 117.477 19.0129 117.44 19.0147C117.068 19.1356 116.681 19.1997 116.29 19.2047C115.695 19.2354 115.108 19.0665 114.62 18.7247C114.409 18.5783 114.238 18.3822 114.121 18.1537C114.004 17.9252 113.945 17.6713 113.95 17.4147V15.0647C113.971 14.6163 113.821 14.1766 113.53 13.8347C113.39 13.6784 113.216 13.5552 113.023 13.4739C112.829 13.3927 112.62 13.3554 112.41 13.3647C112.221 13.3576 112.033 13.3935 111.859 13.4697C111.686 13.5459 111.533 13.6605 111.41 13.8047C111.146 14.1398 111.011 14.5586 111.03 14.9847V18.6747C111.03 18.8647 110.94 18.9647 110.75 18.9647H109.06C109.021 18.9696 108.981 18.9654 108.944 18.9526C108.906 18.9397 108.872 18.9185 108.844 18.8905C108.816 18.8626 108.795 18.8286 108.782 18.7912C108.769 18.7538 108.765 18.714 108.77 18.6747V15.0647C108.792 14.6212 108.653 14.1846 108.38 13.8347C108.258 13.6877 108.105 13.5694 107.932 13.4882C107.76 13.407 107.571 13.3648 107.38 13.3647C107.176 13.3565 106.973 13.3914 106.783 13.4673C106.593 13.5431 106.422 13.6581 106.28 13.8047C105.994 14.1291 105.847 14.5529 105.87 14.9847V18.6747C105.875 18.714 105.871 18.7538 105.858 18.7912C105.845 18.8286 105.824 18.8626 105.796 18.8905C105.768 18.9185 105.734 18.9397 105.697 18.9526C105.659 18.9654 105.619 18.9696 105.58 18.9647H103.95C103.76 18.9647 103.67 18.8647 103.67 18.6747V13.9647C103.682 13.8845 103.675 13.8027 103.649 13.7257C103.624 13.6488 103.581 13.5788 103.523 13.5215C103.466 13.4642 103.396 13.4211 103.319 13.3956C103.242 13.3701 103.16 13.363 103.08 13.3747H102.75C102.53 13.3747 102.42 13.2947 102.42 13.1347V11.9547C102.415 11.8817 102.435 11.8091 102.477 11.7491C102.519 11.689 102.58 11.6451 102.65 11.6247C102.996 11.499 103.362 11.438 103.73 11.4447C104.083 11.4146 104.438 11.485 104.753 11.6478C105.068 11.8106 105.33 12.0591 105.51 12.3647C105.847 12.045 106.247 11.7982 106.684 11.6399C107.121 11.4816 107.586 11.4152 108.05 11.4447C108.501 11.4227 108.95 11.5072 109.362 11.6914C109.774 11.8756 110.136 12.1542 110.42 12.5047C110.751 12.145 111.158 11.8634 111.611 11.68C112.064 11.4967 112.552 11.4164 113.04 11.4447C113.476 11.4243 113.912 11.4946 114.32 11.6513C114.728 11.8079 115.099 12.0474 115.41 12.3547C115.714 12.6752 115.949 13.0541 116.102 13.4684C116.255 13.8826 116.323 14.3237 116.3 14.7647V16.6947C116.3 17.0747 116.47 17.2647 116.79 17.2647C116.945 17.2719 117.1 17.2551 117.25 17.2147C117.457 17.2147 117.567 17.2947 117.58 17.4547L117.67 18.7047Z"
              fill="currentColor"
            />
            <path
              d="M0.41 10.3847C1.14777 7.4194 2.85643 4.7861 5.2639 2.90424C7.6714 1.02234 10.6393 0 13.695 0C16.7507 0 19.7186 1.02234 22.1261 2.90424C24.5336 4.7861 26.2422 7.4194 26.98 10.3847H25.78C23.7557 10.3549 21.7729 10.9599 20.11 12.1147C20.014 12.1842 19.9138 12.2477 19.81 12.3047H19.67C19.5662 12.2477 19.466 12.1842 19.37 12.1147C17.6924 10.9866 15.7166 10.3841 13.695 10.3841C11.6734 10.3841 9.6976 10.9866 8.02 12.1147C7.924 12.1842 7.8238 12.2477 7.72 12.3047H7.58C7.4762 12.2477 7.376 12.1842 7.28 12.1147C5.6171 10.9599 3.6343 10.3549 1.61 10.3847H0.41ZM23.62 16.6547C24.236 16.175 24.9995 15.924 25.78 15.9447H27.39V12.7347H25.78C24.4052 12.7181 23.0619 13.146 21.95 13.9547C21.3243 14.416 20.5674 14.6649 19.79 14.6649C19.0126 14.6649 18.2557 14.416 17.63 13.9547C16.4899 13.1611 15.1341 12.7356 13.745 12.7356C12.3559 12.7356 11.0001 13.1611 9.86 13.9547C9.2343 14.416 8.4774 14.6649 7.7 14.6649C6.9226 14.6649 6.1657 14.416 5.54 13.9547C4.4144 13.1356 3.0518 12.7072 1.66 12.7347H0V15.9447H1.61C2.39051 15.924 3.154 16.175 3.77 16.6547C4.908 17.4489 6.2623 17.8747 7.65 17.8747C9.0377 17.8747 10.392 17.4489 11.53 16.6547C12.1468 16.1765 12.9097 15.9257 13.69 15.9447C14.4708 15.9223 15.2348 16.1735 15.85 16.6547C16.9901 17.4484 18.3459 17.8738 19.735 17.8738C21.1241 17.8738 22.4799 17.4484 23.62 16.6547ZM23.62 22.3947C24.236 21.915 24.9995 21.664 25.78 21.6847H27.39V18.4747H25.78C24.4052 18.4581 23.0619 18.886 21.95 19.6947C21.3243 20.156 20.5674 20.4049 19.79 20.4049C19.0126 20.4049 18.2557 20.156 17.63 19.6947C16.4899 18.9011 15.1341 18.4757 13.745 18.4757C12.3559 18.4757 11.0001 18.9011 9.86 19.6947C9.2343 20.156 8.4774 20.4049 7.7 20.4049C6.9226 20.4049 6.1657 20.156 5.54 19.6947C4.4144 18.8757 3.0518 18.4472 1.66 18.4747H0V21.6847H1.61C2.39051 21.664 3.154 21.915 3.77 22.3947C4.908 23.1889 6.2623 23.6147 7.65 23.6147C9.0377 23.6147 10.392 23.1889 11.53 22.3947C12.1468 21.9165 12.9097 21.6657 13.69 21.6847C14.4708 21.6623 15.2348 21.9135 15.85 22.3947C16.9901 23.1884 18.3459 23.6138 19.735 23.6138C21.1241 23.6138 22.4799 23.1884 23.62 22.3947Z"
              fill="currentColor"
            />
          </svg>
        </div>

        <p className="mt-4 text-center text-sm text-gray-500 lg:mt-0 lg:text-right">
          Copyright &copy; 2023. All rights reserved.
        </p>
      </div>
    </div>
  </footer>
  </section>
  {/*section ends here*/}

     </div>

    </div>
  );
}

export default App;

Screenshots of our final output:

## Links

Link to websites Github repository — https://github.com/kwakyebrilliant/Websites

Link to part 1 of this tutorial — https://dev.to/kwakyebrilliant/build-a-responsive-website-with-reactjs-and-tailwindcss-part-1-43m1

DEV Community: a_moah__

Smart Contract Development - Functions

Introduction

Understanding Functions in Solidity

Basic Syntax

Remix IDE Examples

Example 1: Simple Function

Example 2: Function Modifiers

Conclusion

Smart Contract Development - Variables and Data Types

Introduction

Variables in Solidity

Declaring Variables

Data Types in Solidity

Basic Data Types

Complex Data Types

Conclusion

Smart Contract Development- Introduction

Introduction

Section 1: The Rise of Blockchain and Smart Contracts

1.1 Understanding Blockchain Technology

1.2 Introduction to Smart Contracts

Section 2: Solidity and Ethereum Ecosystem

2.1 Solidity: The Language of Smart Contracts

2.2 Ethereum: The Premier Smart Contract Platform

Section 3: Mastering Solidity

Section 4: Tools and Development Environment

Conclusion

A Roadmap to Frontend Development: Navigating the Path to Web Mastery

Introduction

First Step- Learning the Basics

Second Step- Mastering Intermediate Concepts

Third Step- Dive Deeper

Fourth Step- Specialisation and Expertise

Fifth Step- Staying Current

Conclusion

Useful Links

Free Tailwind CSS Marketing Components

Quick One

Useful Links

Tailwind CSS Marketing Components | HyperUI

Decentralised Credit Unleashed: Union's Innovative Approach

Table Of Contents

Introduction

Union Finance - permissionless web3 credit

Understanding Union's Credit

Deciphering the Mechanics

What You Get From Union's Credit

Navigating The Risks

Conclusion

The Tech Community: A Developer's Guide

Introduction

What is the Tech Community?

Why Join the Tech Community?

How to Engage with the Tech Community?

Conclusion

React Hooks Explained: A Comprehensive Guide to Stateful Function Components

Introduction:

Understanding React Hooks:

useState - Managing Local State:

useEffect - Managing Side Effects:

useContext - Global State Management:

useCallback - Memoizing Functions:

Building Custom Hooks - Reusability and Abstraction:

Conclusion:

Understanding Proof of Stake: A Sustainable Approach to Blockchain Consensus

Introduction

What is Proof of Stake?

The Proof of Stake Process

Benefits of Proof of Stake

Challenges and Considerations

Conclusion

How to Install Odoo on Mac OS (Silicon Valley Chips) Using PyCharm

Introduction

Prerequisites

The Process

Understanding Proof of Work: The Backbone of Cryptocurrencies

Introduction

What is Proof of Work (POW)?

The Mining Process