{' '}
-
- Email us
{' '} @@ -105,25 +102,9 @@ const ExtendedFooter = () => {- ReactPlay is an opensource platform that helps you learn, create and share ReactJS - projects with the developer community. -
-+ ReactPlay is an opensource platform that helps you learn, create and share ReactJS + projects with the developer community. +
+
Not sure how to get started?
We have a lot of ideas for you to get started.
- - Get started - -
-
-
- Read our blog posts
+
+
+ Get started
+
+
+
diff --git a/src/common/home/Home.jsx b/src/common/home/Home.jsx
index ae6192c3cd..41307e776b 100644
--- a/src/common/home/Home.jsx
+++ b/src/common/home/Home.jsx
@@ -1,14 +1,14 @@
-import React, { useEffect } from 'react';
-import './home.css';
+import ExtendedFooter from 'common/footer/ExtendedFooter';
+import React from 'react';
import HomeBanner from './HomeBanner';
import HomeContent from './HomeContent';
+import HomeContributors from './HomeContributors';
import HomeFeatures from './HomeFeatures';
import HomeIdeas from './HomeIdeas';
import HomePlays from './HomePlays';
-import HomeTestimonials from './HomeTestimonials';
-import HomeContributors from './HomeContributors';
import HomeSponsors from './HomeSponsors';
-import ExtendedFooter from 'common/footer/ExtendedFooter';
+import HomeTestimonials from './HomeTestimonials';
+import './home.css';
const Home = () => {
return (
diff --git a/src/common/home/home.css b/src/common/home/home.css
index 914fff1607..359d036884 100644
--- a/src/common/home/home.css
+++ b/src/common/home/home.css
@@ -23,7 +23,7 @@
.app-home-body .body-title {
margin-top: 3.2rem;
margin-bottom: 1rem;
- font-family: var(--ff-accent);
+ font-family: var(--ff-accent);
font-size: var(--fs-xxl);
color: var(--color-neutral-10);
text-align: center;
@@ -290,9 +290,9 @@
-moz-box-shadow: 0px -1px 26px 0px rgba(0,14,17,0.59); */
}
-.list-home-features .home-features-item .item-icon:hover{
+.list-home-features .home-features-item .item-icon:hover {
background-color: white;
- transition: .4s;
+ transition: 0.4s;
}
.list-home-features .home-features-item .item-icon .icon {
diff --git a/src/common/playlists/playlist.css b/src/common/playlists/playlist.css
index fd21507796..2e24765236 100644
--- a/src/common/playlists/playlist.css
+++ b/src/common/playlists/playlist.css
@@ -803,7 +803,7 @@
color: #25a0a7;
}
-.search-summary{
+.search-summary {
padding: 1.6rem 2rem 0rem 2rem;
display: flex;
flex-wrap: wrap;
diff --git a/src/plays/accordian/Readme.md b/src/plays/accordian/Readme.md
index 094d5c5299..dd1ac19e7c 100644
--- a/src/plays/accordian/Readme.md
+++ b/src/plays/accordian/Readme.md
@@ -11,4 +11,3 @@ When you click on a section, it opens up to show more details, and when you clic
- User: clavy123
- Gihub Link: https://github.com/clavy123
-
diff --git a/src/plays/accordian/styles.css b/src/plays/accordian/styles.css
index 8b63d271ae..54497cdb47 100644
--- a/src/plays/accordian/styles.css
+++ b/src/plays/accordian/styles.css
@@ -1,37 +1,36 @@
.accordion {
- max-width: 600px;
- margin: 2rem auto;
+ max-width: 600px;
+ margin: 2rem auto;
+}
+
+.accordion-item {
+ border: 1px solid #ccc;
+ border-radius: 0.5rem;
+ margin-bottom: 1rem;
+ overflow: hidden;
+}
+
+.accordion-title {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem;
+ background-color: #f0f0f0;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+}
+
+.accordion-title:hover {
+ background-color: #e0e0e0;
+}
+
+.accordion-content {
+ padding: 1rem;
+ background-color: #ffffff;
+}
+
+@media screen and (max-width: 768px) {
+ .accordion {
+ width: 90%;
}
-
- .accordion-item {
- border: 1px solid #ccc;
- border-radius: 0.5rem;
- margin-bottom: 1rem;
- overflow: hidden;
- }
-
- .accordion-title {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 1rem;
- background-color: #f0f0f0;
- cursor: pointer;
- transition: background-color 0.3s ease;
- }
-
- .accordion-title:hover {
- background-color: #e0e0e0;
- }
-
- .accordion-content {
- padding: 1rem;
- background-color: #ffffff;
- }
-
- @media screen and (max-width: 768px) {
- .accordion {
- width: 90%;
- }
- }
-
\ No newline at end of file
+}
diff --git a/src/plays/airbnb-experiences-clone/Readme.md b/src/plays/airbnb-experiences-clone/Readme.md
index d410c05301..c46aadebff 100644
--- a/src/plays/airbnb-experiences-clone/Readme.md
+++ b/src/plays/airbnb-experiences-clone/Readme.md
@@ -1,18 +1,18 @@
-# AirBnb Experiences Clone
-
-This project is the clone of the AirBnb Experiences page.
-
-## Play Demographic
-
-- Language: js
-- Level: Beginner
-
-## Creator Information
-
-- User: aaqib605
-- Gihub Link: https://github.com/aaqib605
-- Blog: https://aaqibjavaid.hashnode.dev/
-
-## Implementation Details
-
-The project centered on recreating the Airbnb Experiences Page using React.js. I applied React.js fundamentals, adopted a component-based structure, and emphasized responsive design for an intuitive and visually appealing experience. Modular components and responsive design ensure adaptability to different devices, delivering a user-friendly interface. The result is a high-quality clone that serves as an excellent learning resource for React.js enthusiasts and offers a seamless user experience.
+# AirBnb Experiences Clone
+
+This project is the clone of the AirBnb Experiences page.
+
+## Play Demographic
+
+- Language: js
+- Level: Beginner
+
+## Creator Information
+
+- User: aaqib605
+- Gihub Link: https://github.com/aaqib605
+- Blog: https://aaqibjavaid.hashnode.dev/
+
+## Implementation Details
+
+The project centered on recreating the Airbnb Experiences Page using React.js. I applied React.js fundamentals, adopted a component-based structure, and emphasized responsive design for an intuitive and visually appealing experience. Modular components and responsive design ensure adaptability to different devices, delivering a user-friendly interface. The result is a high-quality clone that serves as an excellent learning resource for React.js enthusiasts and offers a seamless user experience.
diff --git a/src/plays/airbnb-experiences-clone/styles.css b/src/plays/airbnb-experiences-clone/styles.css
index 8a6360a17a..eb79f82f09 100644
--- a/src/plays/airbnb-experiences-clone/styles.css
+++ b/src/plays/airbnb-experiences-clone/styles.css
@@ -1,99 +1,99 @@
-.play-details-body > * {
- box-sizing: border-box;
-}
-
-.play-details-body {
- margin: 0;
- font-family: 'Poppins', sans-serif;
-}
-
-.airbnb-nav {
- height: 70px;
- display: flex;
- padding: 20px 36px;
- box-shadow: 0px 2.98256px 7.4564px rgba(0, 0, 0, 0.1);
-}
-
-.bold {
- font-weight: bold;
-}
-
-.gray {
- color: #918e9b;
-}
-
-.airbnb-nav--logo {
- max-width: 100px;
-}
-
-.airbnb-hero {
- padding: 20px;
- display: flex;
- flex-direction: column;
-}
-
-.hero--photo {
- max-width: 400px;
- align-self: center;
-}
-
-.hero--header {
- margin-bottom: 16px;
-}
-
-.hero--text {
- margin-top: 0;
-}
-
-.cards-list {
- display: flex;
- flex-wrap: nowrap;
- gap: 20px;
- overflow-x: auto;
-}
-
-.card {
- width: 175px;
- font-size: 12px;
- flex: 0 0 auto; /* ADD */
- display: flex; /* ADD */
- flex-direction: column; /* ADD */
- position: relative;
- box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
-}
-
-.card--image {
- width: 100%;
- border-radius: 9px;
- margin-bottom: 9px;
-}
-
-/* ADD */
-.card--title {
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.card--stats {
- display: flex;
- align-items: center;
-}
-
-.card--star {
- height: 14px;
-}
-
-/* ADD */
-.card--price {
- margin-top: auto;
-}
-
-.card--badge {
- position: absolute;
- top: 6px;
- left: 6px;
- background-color: white;
- padding: 5px 7px;
- border-radius: 2px;
- font-weight: bold;
-}
+.play-details-body > * {
+ box-sizing: border-box;
+}
+
+.play-details-body {
+ margin: 0;
+ font-family: 'Poppins', sans-serif;
+}
+
+.airbnb-nav {
+ height: 70px;
+ display: flex;
+ padding: 20px 36px;
+ box-shadow: 0px 2.98256px 7.4564px rgba(0, 0, 0, 0.1);
+}
+
+.bold {
+ font-weight: bold;
+}
+
+.gray {
+ color: #918e9b;
+}
+
+.airbnb-nav--logo {
+ max-width: 100px;
+}
+
+.airbnb-hero {
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+}
+
+.hero--photo {
+ max-width: 400px;
+ align-self: center;
+}
+
+.hero--header {
+ margin-bottom: 16px;
+}
+
+.hero--text {
+ margin-top: 0;
+}
+
+.cards-list {
+ display: flex;
+ flex-wrap: nowrap;
+ gap: 20px;
+ overflow-x: auto;
+}
+
+.card {
+ width: 175px;
+ font-size: 12px;
+ flex: 0 0 auto; /* ADD */
+ display: flex; /* ADD */
+ flex-direction: column; /* ADD */
+ position: relative;
+ box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+}
+
+.card--image {
+ width: 100%;
+ border-radius: 9px;
+ margin-bottom: 9px;
+}
+
+/* ADD */
+.card--title {
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.card--stats {
+ display: flex;
+ align-items: center;
+}
+
+.card--star {
+ height: 14px;
+}
+
+/* ADD */
+.card--price {
+ margin-top: auto;
+}
+
+.card--badge {
+ position: absolute;
+ top: 6px;
+ left: 6px;
+ background-color: white;
+ padding: 5px 7px;
+ border-radius: 2px;
+ font-weight: bold;
+}
diff --git a/src/plays/emojipedia/Emojipedia.jsx b/src/plays/emojipedia/Emojipedia.jsx
index f9582631c6..b4def1c945 100644
--- a/src/plays/emojipedia/Emojipedia.jsx
+++ b/src/plays/emojipedia/Emojipedia.jsx
@@ -1,10 +1,10 @@
-import { useEffect, useState, useRef, useTransition } from 'react';
+import { useEffect, useRef, useState, useTransition } from 'react';
import toast, { Toaster } from 'react-hot-toast';
import { FiSearch } from 'react-icons/fi';
// Project local imports
-import PlayHeader from 'common/playlists/PlayHeader';
import useFetch from 'common/hooks/useFetch';
+import PlayHeader from 'common/playlists/PlayHeader';
import EmojiCard from './components/EmojiCard';
import SkeletonCard from './components/SkeletonCard';
import { API_BASE_URL } from './config';
@@ -85,10 +85,10 @@ function Emojipedia(props) {
{loading
? Array.from(Array(25).keys()).map((_, index) =>
+
+
+
+
+
+
+