CBID2 commented 1 year ago

Description

Hey everyone! 😊 If we want people to use Linkfree as opposed to Linktree, I think it’d be beneficial to add a “Linkfree vs Linktree” section on the website. It can outline the differences between the two products (e.g., features). What do you think?

Screenshots

No response

Additional information

No response

github-actions[bot] commented 1 year ago

It's great having you contribute to this project

Welcome to the community :nerd_face:

If you would like to continue contributing to open source and would like to do it with an awesome inclusive community, you should join our Discord chat and our GitHub Organisation - we help and encourage each other to contribute to open source little and often 🤓 . Any questions let us know.

orbitalmartian8 commented 1 year ago

Could I be assigned to this?

Ajiboso-Adeola commented 1 year ago

Could I be assigned to this

CBID2 commented 1 year ago

Could I be assigned to this?

Would you be up to working on this with me and @Ajiboso-Adeola? I’ve been wanting to do more collaborative coding projects, and this is a great way to start! 😄

Ajiboso-Adeola commented 1 year ago

Yeah

CBID2 commented 1 year ago

Yeah

Thanks

CBID2 commented 1 year ago

Hi @Ajiboso-Adeola and @LinuxGamer! :) I hope you are enjoying your holiday! :) I created a rough draft of the comparison chart. Outside of customization and one being free and the other being a paid tool, I'm not quite sure what other differing features these two sites have, so I'm going to need you two to add this information to the chart. If you don't have a Replit account, click here to create one(I personally recommend logging in with GitHub to speed up the process). If you already do have an account, here's my invitation link to the chart. Thanks for your help! :)

loftwah commented 1 year ago

Feature	LinkTree	LinkFree
Sign-up process	Sign up through website	Follow instructions in GitHub repository and submit pull request
Customization options	Customizable background image and color scheme	Customizable background image and color scheme
Link organization	Organize links with categories	Organize links with categories
Analytics	Available	Not available
Cost	Free or paid plans available	Free

How's this?

loftwah commented 1 year ago

Here is a HTML example of what it could look like.

<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      width: 50%;
      border-collapse: collapse;
    }

    th, td {
      padding: 8px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }

    tr:nth-child(even) {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Feature</th>
      <th>LinkTree</th>
      <th>LinkFree</th>
    </tr>
    <tr>
      <td>Sign-up process</td>
      <td>Sign up through website</td>
      <td>Follow instructions in GitHub repository and submit pull request</td>
    </tr>
    <tr>
      <td>Customization options</td>
      <td>Customizable background image and color scheme</td>
      <td>Customizable background image and color scheme</td>
    </tr>
    <tr>
      <td>Link organization</td>
      <td>Organize links with categories</td>
      <td>Organize links with categories</td>
    </tr>
    <tr>
      <td>Analytics</td>
      <td>Available</td>
      <td>Not available</td>
    </tr>
    <tr>
      <td>Cost</td>
      <td>Free or paid plans available</td>
      <td>Free</td>
    </tr>
  </table>
</body>
</html>

loftwah commented 1 year ago

Here is the one with the styling you used.

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Linkfree vs. Linktree</title>
  <link href="styles.css" rel="stylesheet"/>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
  <table>
    <tr>
      <th class="category"> Feature</th>
      <th>Linkfree</th>
      <th> Linktree</th>
    </tr>
    <tr>
      <td>Sign-up process</td>
      <td>Follow instructions in GitHub repository and submit pull request</td>
      <td>Sign up through website</td>
    </tr>
    <tr>
      <td>Customization options</td>
      <td><i class="fa fa-check"></i> Customizable background image and color scheme</td>
      <td><i class="fa fa-check"></i> Customizable background image and color scheme</td>
    </tr>
    <tr>
      <td>Link organization</td>
      <td><i class="fa fa-check"></i> Organize links with categories</td>
      <td><i class="fa fa-check"></i> Organize links with categories</td>
    </tr>
    <tr>
      <td>Analytics</td>
      <td><i class="fa fa-remove"></i> Not available</td>
      <td><i class="fa fa-check"></i> Available</td>
    </tr>
    <tr>
      <td>Cost</td>
      <td><i class="fa fa-check"></i> Free</td>
      <td><i class="fa fa-check"></i> Free or paid plans available</td>
    </tr>
  </table>
</body>
</html>

loftwah commented 1 year ago

Here are some styles you could try with it.

To create a new stylesheet and attach it to your HTML file, you can follow these steps:

Create a new file in the same directory as your HTML file, and name it styles.css. This will be your stylesheet file.
Open the styles.css file and copy one of the styles I provided into it.
In your HTML file, you will need to link to the stylesheet file using the link element. This element should go in the head section of your HTML file. The link element should have an href attribute that specifies the location of the stylesheet file, and a rel attribute that defines the relationship between the HTML file and the stylesheet file. Here's an example of how you might link to the stylesheet file:

<link href="styles.css" rel="stylesheet"/>

Save your HTML and CSS files and open the HTML file in a web browser to see the styles applied to your table.

Style 1: Using a color scheme and rounded corners

table {
  border-collapse: collapse;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}

th {
  background-color: #4caf50;
  color: white;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

.fa-check {
  color: green;
}

.fa-remove {
  color: red;
}

Style 2: Using a gradient background and box shadow

table {
  border-collapse: collapse;
  width: 100%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}

th {
  background: linear-gradient(to bottom, #4caf50, #43a047);
  color: white;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: white;
}

.fa-check {
  color: green;
}

.fa-remove {
  color: red;
}

Style 3: Using a striped pattern and hover effect

table {
  border-collapse: collapse;
  width: 100%;
  overflow: hidden;
}

th {
  background-color: #4caf50;
  color: white;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background: linear-gradient(to right, #f2f2f2, #ffffff);
  background-size: 200% auto;
  background-position: -100% 0;
  transition: all .5s ease-in;
}

tr:nth-child(even):hover {
  background-position: 0 0;
}

.fa-check {
  color: green;
}

.fa-remove {
  color: red;
}

I'm unsure where everyone is at, so please ignore if I'm overly verbose.

CBID2 commented 1 year ago

Hi y'all! I have added some things to the chart. Check it out

eddiejaoude commented 1 year ago

Great collaboration 💪 . We use tailwind, so we don't need to use custom styles. I also paid for their prebuilt components, so we can use one of those https://tailwindui.com/components

Vishrut19 commented 1 year ago

Anyone working on this issue ?

CBID2 commented 1 year ago

Anyone working on this issue ?

I am @Vishrut19. You want to help?

Vishrut19 commented 1 year ago

Definitely i think we can collab and do it together if it is possible @CBID2

CBID2 commented 1 year ago

Definitely i think we can collab and do it together if it is possible @CBID2

Absolutely @Vishrut19. I already did a rough draft of the chart here. I just need to find a way to implement Tailwind CSS. I've never used it before. I'm also not sure which file to put it in when PR'ing it Linkfree's main repo.

Vishrut19 commented 1 year ago

saw it let me see the way through which I can implement it using Tailwind CSS

CBID2 commented 1 year ago

saw it let me see the way through which I can implement it using Tailwind CSS

Thanks @Vishrut19!

CBID2 commented 1 year ago

saw it let me see the way through which I can implement it using Tailwind CSS

Thanks @Vishrut19!

How are things going @Vishrut19?

Vishrut19 commented 1 year ago

Sorry! @CBID2 actually I was a bit busy for some days will work in it either by today or by tomorrow.

CBID2 commented 1 year ago

Sorry! @CBID2 actually I was a bit busy for some days will work in it either by today or by tomorrow.

Ok keep me posted @Vishrut19

CBID2 commented 1 year ago

Sorry! @CBID2 actually I was a bit busy for some days will work in it either by today or by tomorrow.

How's it going @Vishrut19?

SaraJaoude commented 1 year ago

Whilst our most obvious competitor is Linktree, we have started branching away from this and will continue to do so with the planned future features. Therefore I think it is best to avoid always being compared to them - so I will be closing this issue.

CBID2 commented 1 year ago

Whilst our most obvious competitor is Linktree, we have started branching away from this and will continue to do so with the planned future features. Therefore I think it is best to avoid always being compared to them - so I will be closing this issue.

Ok

EddieHubCommunity / BioDrop

Adding a “Linkfree vs Linktree” comparison chart to website #2431

Description

Screenshots

Additional information

It's great having you contribute to this project