From 71b43af8623f7034b7161a3f974034d35713d1d1 Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Fri, 24 Mar 2023 21:08:17 +0600
Subject: [PATCH] fix: upcoming button overlap (#3713)

* docs: new resources for jsx and functional components

* fix: upcoming button overlap
---
 src/components/UpcomingForm.astro                               | 2 +-
 .../react/content/102-components/101-functional-components.md   | 2 ++
 src/data/roadmaps/react/content/102-components/102-jsx.md       | 1 +
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/UpcomingForm.astro b/src/components/UpcomingForm.astro
index 3d0764d27..de9dc4777 100644
--- a/src/components/UpcomingForm.astro
+++ b/src/components/UpcomingForm.astro
@@ -3,7 +3,7 @@ import CaptchaFields from './Captcha/CaptchaFields.astro';
 import Icon from './Icon.astro';
 ---
 
-<div class='my-0 px-5 rounded-lg text-left sm:text-center'>
+<div class='my-0 px-5 rounded-lg text-left sm:text-center sm:pb-10 pb-8'>
   <div class='sm:max-w-[400px] mx-auto'>
     <div class='hidden sm:block'><Icon icon='bell' /></div>
     <h2 class='text-3xl mb-1 font-medium hidden sm:block'>Upcoming</h2>
diff --git a/src/data/roadmaps/react/content/102-components/101-functional-components.md b/src/data/roadmaps/react/content/102-components/101-functional-components.md
index b0a455f8c..8c515595f 100644
--- a/src/data/roadmaps/react/content/102-components/101-functional-components.md
+++ b/src/data/roadmaps/react/content/102-components/101-functional-components.md
@@ -5,5 +5,7 @@ Functional components are some of the more common components that will come acro
 Visit the following resources to learn more:
 
 - [Components and Props](https://reactjs.org/docs/components-and-props.html#function-and-class-components)
+- [Your first component](https://react.dev/learn/your-first-component)
+- [Passing props to a component](https://react.dev/learn/passing-props-to-a-component)
 - [Functional Components in React (1)](https://www.geeksforgeeks.org/reactjs-functional-components/)
 - [Functional Components in React (2)](https://www.robinwieruch.de/react-function-component/)
diff --git a/src/data/roadmaps/react/content/102-components/102-jsx.md b/src/data/roadmaps/react/content/102-components/102-jsx.md
index 0867a8464..7d706e4ac 100644
--- a/src/data/roadmaps/react/content/102-components/102-jsx.md
+++ b/src/data/roadmaps/react/content/102-components/102-jsx.md
@@ -5,5 +5,6 @@ JSX stands for JavaScript XML. It allows writing HTML in JavaScript and converts
 Visit the following resources to learn more:
 
 - [Introduction to JSX](https://reactjs.org/docs/introducing-jsx.html)
+- [Writing markup with JSX](https://react.dev/learn/writing-markup-with-jsx)
 - [JSX in React – Explained with Examples](https://www.freecodecamp.org/news/jsx-in-react-introduction/)
 - [JSX in React on w3school](https://www.w3schools.com/react/react_jsx.asp)