zack-dx / discord-clone-project

Discord Site Landing Page CLONE! A repository to contribute at hacktoberfest 2022. Make sure to share love by giving it a star.🌟 Have a great day!

Hola Everyone, I'm Harshit!

discord-clone-project's Issues

Bug - Light mode Dark mode toggle happens if clicked on open discord button

Discord._.Your.Place.to.Talk.and.Hang.Out.-.Personal.-.Microsoft.Edge.2022-10-07.17-32-40.mp4

You can see the bug in the above video.

It is because, the div where the function is called includes the button too.

Although the change is minimal, it is a noticeable bug and I want to correct it. Kindly assign me this issue.

Addition of link and hovering effect.

#Proposed Changes: Want to add the link to download the discord app on both the button on the page "Download for windows"?
Also need to add a hovering effect on the button "Download for windows" (below one).

#Why is this feature important: It will make the clone more like the actual website.

#Additional Context:

Handburger menu and responsive Footer

I want to make Header as Handburger menu and also want to make footer responsive

Change Discord download link / open app store depending on the operating system

Describe the bug
I am on a Mac and when I clicked on the 'Download for Mac' button, I get a DiscordSetup.exe file download for Windows.

To Reproduce
Steps to reproduce the behavior:

1. Click on 'Download for {your operating system}' button
2. See the file that you downloaded

Expected behavior
When I click on the download button, download the Discord setup file for Mac when I am on a Mac machine, download the Discord setup file for Windows when I am on a Windows machine, and download the Discord setup file for Linux when I am on a Linux machine.
Also, open the iOS App Store for the Discord app for iOS systems and open the Google Play Store for the Discord app for Android systems when you click on the download button.

Screenshots

Not optimized for smartphones

Describe the bug
Not optimized to use on smartphones

To Reproduce
open the website on a smartphone/inspect

https://taufeeqriyaz.github.io/Discord-Clone/

feature: enhance hamburger menu

#Proposed Changes:

#Why is this feature important:

#Additional Context:

Fix alignment of footer items

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'index.html'
2. Scroll down to 'Footer'
3. See error

Expected behavior
A clear and concise description of what you expected to happen.

As you can see the nav links of footer are not properly aligned, i will fix the alignment, give proper padding and margins.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):
Windows 11 - OS: [e.g. iOS]
Brave - Browser [e.g. chrome, safari]
1.44 - Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Create and add DOWNLOAD page

and ...

Dark theme toggle needs to be responsive

It currently overlaps with the open discord button when shrinking the screen. I would like to be assigned to this please!

Contributing to the README.md

Is your feature request related to a problem? Please describe.
The solution i plan on working on can help beginners contribute to this project

Describe the solution you'd like
Would love to add a contribution guide on installing and running the repo

Light/Dark mode toggle

Light and Dark mode toggle button.
@Zack-Dx assign me this under Hacktoberfest 2022

No download Icon before the Download for Windows button

in original discord page there is a download icon before the "Download for Windows" button

We are hanging out Section on home page is missing correct bg color

We are hanging out Section on home page is missing correct bg color - Should be: background-color: var(--off-white);

Responsiveness.

improve button shadow

#Proposed Changes:

#Why is this feature important:

#Additional Context:

Adding a section

A section is missing for the Discord landing page.
section - The reliable tech for staying close.
I would like to work on this issue.

Add a documentation for the project

Why documentation?
-As it is very important for any project to have it's proper documentation for the contributors to know about the project in detail.

Please assign me this issue @Zack-Dx

Improve UI in "Where hanging out is easy" section

Describe the bug

In the "Where hanging out is easy" section, there is a png image that has a low resolution as you can see in the screenshot. So, I suggest using an SVG image instead. In addition, the background color of this section should be light gray (#f6f6f6) according to the real discord landing page.

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context
I can do this if you would like

Vercel deployment link is broen

Describe the bug
The vercel deployment link is broken

To Reproduce
Steps to reproduce the behavior:

1. Go to the vercel dashboard and open the project

2. Click on settings icon
   

3. Scroll down to Advanced
   

4. Enable the directory listing switch
   

Change document header

#Proposed Changes:

change the header from Discord clone to Discord | Your Place to Talk and Hang Out

#Why is this feature important:

This is how it is on the original webpage

#Additional Context:

Detect the Operating system of the user and display it in a button

Display the user's operating system in the download button (Hacktoberfest)

Enhance the hamburger menu logo & JS for download button.

#Proposed Changes:

#Why is this feature important:

#Additional Context:

typography fix

1. font weight is bold compare to the official website
2. should add line height to make text more readable

Different button sizes when resizing the window

Fonts don't look the same as on Discord's website

#Proposed Changes: Change the font family and use font query in CSS to make the font accessible for everyone.

#Why is this feature important: fonts play a major role in the UI of the website

#Additional Context: I @Shivangbhatnagar237 can fix this issue, this issue will bring other text-positioning issues under it as well


I've uploaded both images for comparison (1st image - Discord website, 2nd image - Discord-Clone)

Fix The position of buttons

#Proposed Changes:

#Why is this feature important:

#Additional Context:

Add issue templates

Add issue template for bug and feature requests.

Add scroll up button to Home page of Discord Clone

#Proposed Changes: Adding a scroll up button to the right bottom of the home page

#Why is this feature important: it makes the page more user friendly and saves time of the user to scroll up manually
@Zack-Dx Please assign

Animate on scroll

Use AOS Library for animations to elements as you scroll into view and improve the user experience.

Button not working

Describe the bug
open button is not working after click

Expected behavior
open the discord link

Screenshots
This button

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

RELIABLE TECH FOR STAYING CLOSE section is missing correct color bg

RELIABLE TECH FOR STAYING CLOSE section is missing correct color bg

Adding a dark theme toggle

We can add a dark theme mode along with the light theme to make it user ineteractive.

Fix the buttons positionment

On a large screen, these buttons is separated and not really like in the Discord page, I will fix it and will make the PR later

Use of pictures with transparent background in sections of landing page

#Proposed Changes:

Using images with transparent background so that the site's appearance is uniform in both light and dark mode.

#Why is this feature important:
This feature is important to improve the user experience while using the site. White backgrounds in the image will make it uncomfortable for visitors while everything in the background is dark.

#Additional Context:
Currently, these two sections don't use transparent images (which looks fine in light mode but looks odd in dark mode):

These sections would look like this in dark mode if transparent images are used:

I would like to work on this for hacktoberfest, please assign it to me.

Add new pages.

Change footer button style

#Proposed Changes:

Change the footer button to download button and logo.

#Why is this feature important:

The padding and margin of these two elements are off in smaller viewports.

#Additional Context:

Original footer

Footer on the local project

Adding Footer section

Footer section is not available for the page right now. I would like to work on this issue.
Please assign this to me.

Top section images overflowing out of the screen

A clear and concise description of what the bug is.
Images of the dino and the shoe going out of the screen in the top of the page.

To Reproduce
Just be on the top of the page.

The images should fit in the appointed window

Fedora OS
Firefox Dev Edition

css changes

text to be made more similar to main website, in terms of font weight, font , and words after which there is a line change

Layout Issue on mobile

Current:

Expected: (This is from actual discord)

Please assign. I will work on this. Thanks!

Hamburger menu for mobiles devices.

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

LIGHT / DARK mode toggle button

@Zack-Dx kindly assign me this issue under Hacktoberfest 2022.
Add any other context or screenshots about the feature request here.

Adding actual links to make clone more responsive

*Describe the bug
In both header and footer there is no proper links to the sections which are there such as nitro, discover, safety etc.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'header and footer'
2. Click on 'each section'
3. Scroll down to '..'
4. See error

Expected behavior
After clicking each section it should go to the actual pages. But as of now nothing is happening after clicking header or footer sections.

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser : Chrome

Smartphone (please complete the following information):

• Device: Realme Narzo
• OS: Android
• Browser : Chrome

Additional context
Add any other context about the problem here.

Support Page

i can complete support page for you.

Make Download Page responsive and link home page to it.

#Proposed Changes:

#Why is this feature important:

#Additional Context:

Social links not working

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to Footer
2. below the Imagine a place and country
3. See error

Expected behavior
Social links should be working

Screenshots

Desktop (please complete the following information):
checked on chrome, brave, edge but not working

Smartphone (please complete the following information):
Checked on realme 7 but same not working

Additional context
Pls assign it to me.

Adding fade animation to middle sections

Is your feature request related to a problem? Please describe.
No, I would like to add the fade animation like there is on the original landing page in middle sections when scrolling.

Describe the solution you'd like
Adding animation when scrolling down to make it more similar

Describe alternatives you've considered
NA

Additional context
NA

Language selector styles (Footer)

The language selector looks different from the original one.

Actual:

Original:

Create and add support page

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Scroll to top button should appear only when the user has scrolled a little

The scroll to the top button should appear only when the user has scrolled a little. It should be hidden when the user is on top of the page

Expected behavior
The button should not show when you land on the page as you would be on top of the page. After you scroll a bit, it should appear. Once you click on it and are scrolled to the top of the page, the button should disappear.