Skip to content

Commit

Permalink
Merge branch 'shivamyadavrgipt:main' into main
Browse files Browse the repository at this point in the history
  • Loading branch information
@tohit09Fst
tohit09Fst authored Oct 18, 2024
2 parents a254e22 + 1fe0462 commit eefd4ea
Show file tree
Hide file tree
Showing 7 changed files with 511 additions and 21 deletions.
2 changes: 2 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
## ⭐️ Show Your Support
If you find this project valuable or appreciate the work, please consider starring the repository on [GitHub](https://github.com/shivamyadavrgipt). Your support helps increase its visibility and encourages further development. Thank you!
<div align="center">
<p>
<a href="https://github.com/shivamyadavrgipt/Social_media_management">
Expand Down
293 changes: 293 additions & 0 deletions homepage
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,293 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Media Management</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="icon" href="B.png" type="image/png"> <!-- Corrected type attribute -->
<style>
/* General styling */
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}

h1, h2, h3, p {
margin: 0;
padding: 0;
}

a {
text-decoration: none;
color: inherit;
}

/* Navigation Bar */
header nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #2980b9;
padding: 10px 20px;
color: #fff;
}

.nav-links {
list-style-type: none;
display: flex;
gap: 15px;
}

.nav-links li {
display: inline;
}

.nav-links li a {
color: white;
font-size: 18px;
}

.cta-button {
background-color: #e81a1a;
padding: 10px 20px;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
}

/* Hero Section */
.hero {
text-align: center;
padding: 50px 20px;
background-color: #f3f4f6;
}

.hero h1 {
font-size: 2.5rem;
margin-bottom: 20px;
}

.hero img {
max-width: 100%;
height: auto;
}

.hero p {
font-size: 1.2rem;
margin: 20px 0;
}

/* Features Section */
#features {
padding: 50px 20px;
background-color: #f7f7f7;
}

#features h2 {
text-align: center;
font-size: 2rem;
margin-bottom: 40px;
}

.feature-container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 30px;
}

.feature {
flex: 1;
max-width: 300px;
text-align: center;
}

.feature img {
max-width: 100%;
height: auto;
}

/* Pricing Section */
#pricing {
padding: 50px 20px;
background-color: #fff;
}

#pricing h2 {
text-align: center;
font-size: 2rem;
margin-bottom: 40px;
}

.pricing-plans {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 30px;
}

.plan {
flex: 1;
max-width: 300px;
text-align: center;
border: 2px solid #ddd;
padding: 30px;
border-radius: 10px;
}

/* Testimonials Section */
#testimonials {
padding: 50px 20px;
background-color: #f7f7f7;
}

#testimonials h2 {
text-align: center;
font-size: 2rem;
margin-bottom: 40px;
}

/* Footer Section */
footer {
background-color: #60e7f0;
padding: 50px 20px;
color: #fff;
text-align: center;
}

footer h3 {
font-size: 1.5rem;
margin-bottom: 20px;
}

footer a {
color: #000;
}

footer .social-icon {
font-size: 1.5rem;
margin: 0 10px;
color: #000;
text-decoration: none;
}

#backToTopBtn {
background-color: #e81a1a;
color: white;
padding: 10px;
border-radius: 5px;
cursor: pointer;
position: fixed;
bottom: 20px;
right: 20px;
display: none;
}

.logo {
display: flex; /* Align the logo and brand name horizontally */
align-items: center; /* Vertically center the logo and text */
}

.logo-image {
width: 40px; /* Adjust the size of the logo as needed */
height: auto; /* Keep aspect ratio */
margin-right: 10px; /* Space between the logo and brand name */
}

h1 {
font-size: 1.8rem; /* Adjust the size of your brand name */
color: #333; /* Customize the color */
}
</style>
</head>
<body>
<header>
<nav>
<div class="logo">
<img src="B.png" alt="Logo" class="logo-image"> <!-- Logo Image -->
<h1>BuzzSync</h1> <!-- Brand Name -->
</div>
<ul class="nav-links">
<li><a href="#features">Features</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<a href="#signup" class="cta-button">Start Free Trial</a>
</nav>
</header>

<div class="hero">
<h1>Social Media Management Platforms</h1>
<img src="image.png" alt="Landing">
<p>There isn't a single best social media management platform, as each one is ideal for different use cases.
There are many social media marketing tools available, and we’ve tried just about all of them. In this post, we'll give you an overview of each one so that you can select the best platform based on your needs.</p>
<h1>What is a social media management tool?</h1>
<p>A social media management tool is a software solution that lets you manage all aspects of your social media in one place. That means you can perform multiple social media tasks without having to switch to a different platform. This includes tasks related to creating, scheduling, publishing, monitoring, analyzing, engaging, and collaborating.
Most social media management tools let you manage more than one social media profile across several networks.</p>
</div>

<footer>
<div style="display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; padding: 20px 0;">
<!-- Contact Information Section -->
<div style="flex: 1; min-width: 200px; margin-bottom: 10px;">
<h3 style="font-size: 1.5rem; color: #2980b9;">Contact Info</h3>
<p style="color: #000;">123 Tech Park, Bengaluru, Karnataka, India</p>
<a href="mailto:[email protected]" class="footer-link">[email protected]</a>
<p style="color: #000000;">Phone: <a href="tel:+91-911-1234567" class="footer-link">+91-911-1234567</a></p>
</div>

<!-- Social Media Links -->
<div style="text-align: center; min-width: 200px; color: black;">
<h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Follow Us</h3>
<div style="display: flex; justify-content: center; align-items: center; gap: 15px; height: 50px;">
<a href="https://www.facebook.com" class="social-icon facebook" style="color: black; text-decoration: none; font-size: 1.5rem;"><i class="fab fa-facebook"></i></a>
<a href="https://www.instagram.com" class="social-icon instagram" style="color: black; text-decoration: none; font-size: 1.5rem;"><i class="fab fa-instagram"></i></a>
<a href="https://www.linkedin.com" class="social-icon linkedin" style="color: black; text-decoration: none; font-size: 1.5rem;"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>

<!-- Newsletter Subscription -->
<div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
<h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to our Newsletter</h3>
<form action="#" method="post">
<input type="email" placeholder="Your Email" required style="padding: 10px; width: 80%; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 5px;">
<button type="submit" style="padding: 10px; background-color: #e81a1a; color: white; border: none; border-radius: 5px; cursor: pointer;">Subscribe</button>
</form>
</div>
</div>
<p>&copy; 2024 BuzzSync. All rights reserved.</p>
</footer>

<!-- Back to Top Button -->
<button id="backToTopBtn">Back to Top</button>

<script>
// Show/hide the back-to-top button
window.onscroll = function() {
const backToTopBtn = document.getElementById("backToTopBtn");
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
backToTopBtn.style.display = "block";
} else {
backToTopBtn.style.display = "none";
}
};

// Scroll to the top of the page
document.getElementById("backToTopBtn").onclick = function() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE, and Opera
};

// Add interactivity (if needed)
document.addEventListener("DOMContentLoaded", function() {
console.log("Landing page loaded!");
});
</script>
</body>
</html>
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
"react": "^18.3.1",
"react-chartjs-2": "^5.2.0",
"react-dom": "^18.3.1",

"react-router-dom": "^6.26.2"
},
"devDependencies": {
Expand Down
Loading

0 comments on commit eefd4ea

Please sign in to comment.