Skip to content

Commit

Permalink
Merge pull request #213 from NK-Works/login-signup-issue
Browse files Browse the repository at this point in the history 
Removed Bugs (Signup, Login and Landing Page)
  • Loading branch information
@shivamyadavrgipt
shivamyadavrgipt authored Nov 6, 2024
2 parents 9d9194c + 3b4e61e commit 80e182d
Show file tree
Hide file tree
Showing 5 changed files with 246 additions and 292 deletions.
102 changes: 47 additions & 55 deletions src/components/Footer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,76 +2,68 @@ import React from 'react';

const Footer = () => {
return (
<footer className="bg-gradient-to-r from-white to-blue-100 text-gray-800 dark:text-gray-300 py-16 relative">
<div className="flex items-center mb-4">
<footer className="bg-black/10 text-slate-500 dark:text-slate-400 py-10">
<div className="container mx-auto px-4">
<div className="flex justify-between">
<div className="flex ">

<img
src="https://cdn-icons-gif.flaticon.com/7211/7211809.gif"
alt="Logo"
className="mr-2 w-10 h-10 ml-10 rounded-full"
className="mr-2 w-10 h-10 rounded-full" // Adjust the size here
/>
<h1 className="text-2xl font-bold text-black">Socialplus</h1>

<h1 className="text-2xl font-bold text-gray/20 mb-4 ">SS͜͡o͜͡c͜͡i͜͡a͜͡l͜͡p͜͡l͜͡u͜͡s͜͡</h1>
</div>
<div className="container mx-auto px-6 lg:px-8">
<div className="flex flex-col lg:flex-row justify-between items-center mb-10">
<div className="text-center lg:text-left">
<h1 className="text-3xl font-semibold text-gray-900">Want to partner with us?</h1>
<p className="mt-4 max-w-md text-gray-600">
If you're interested in our partnerships and would like to find out more information, one of our advisors is excited to help.
</p>
<a href='#'><button className="mt-6 px-6 py-2 rounded-full bg-blue-600 text-white font-semibold hover:bg-blue-700 transition duration-200">
Get in Touch
</button></a>
<div>
<h2 className="text-lg font-bold text-gray/20 mb-4">SS͜͡o͜͡c͜͡i͜͡a͜͡l͜͡p͜͡l͜͡u͜͡s͜͡</h2>
<ul>
<li className="mb-2"><a href="#" className="hover:text-orange-500">Home</a></li>
<li className="mb-2"><a href="#" className="hover:text-orange-500">About</a></li>
<li className="mb-2"><a href="#" className="hover:text-orange-500"></a></li>
<li className="mb-2"><a href="#" className="hover:text-orange-500">Post</a></li>
<li className="mb-2"><a href="#" className="hover:text-orange-500">Contact</a></li>
</ul>
</div>

<div className="flex flex-col lg:flex-row lg:space-x-16 text-center lg:text-left mt-10 lg:mt-0">
<div>
<h2 className="text-xl font-semibold text-gray-800 mb-4">Socialplus</h2>
<ul className="space-y-2">
<li><a href="#" className="text-gray-600 hover:text-blue-500 transition">Home</a></li>
<li><a href="#" className="text-gray-600 hover:text-blue-500 transition">About</a></li>
<li><a href="#" className="text-gray-600 hover:text-blue-500 transition">Post</a></li>
<li><a href="#" className="text-gray-600 hover:text-blue-500 transition">Contact</a></li>
</ul>
</div>
<div>
<h2 className="text-xl font-semibold text-gray-800 mb-4">Services</h2>
<ul className="space-y-2">
<li><a href="#" className="text-gray-600 hover:text-blue-500 transition">Games</a></li>
<li><a href="#" className="text-gray-600 hover:text-blue-500 transition">Publishing</a></li>
<li><a href="#" className="text-gray-600 hover:text-blue-500 transition">Solutions</a></li>
</ul>
</div>
<div>
<h2 className="text-xl font-semibold text-gray-800 mb-4">Events</h2>
<ul className="space-y-2">
<li><a href="#" className="text-gray-600 hover:text-blue-500 transition">CVR</a></li>
<li><a href="#" className="text-gray-600 hover:text-blue-500 transition">Game Jams</a></li>
</ul>
</div>
<div>
<h2 className="text-xl font-semibold text-gray-800 mb-4">Follow</h2>
<div className="flex space-x-4 justify-center lg:justify-start">
<a href="#" className="text-blue-500 hover:text-blue-600"><i className="fab fa-twitter"></i></a>
<a href="#" className="text-blue-800 hover:text-blue-900"><i className="fab fa-facebook-f"></i></a>
<a href="#" className="text-red-500 hover:text-red-600"><i className="fab fa-youtube"></i></a>
<a href="#" className="text-pink-600 hover:text-pink-700"><i className="fab fa-instagram"></i></a>
</div>
<div>
<h2 className="text-lg font-bold text-gray/20 mb-4">SERVICES</h2>
<ul>
<li className="mb-2"><a href="#" className="hover:text-orange-500">Games</a></li>
<li className="mb-2"><a href="#" className="hover:text-orange-500">Publishing</a></li>
<li className="mb-2"><a href="#" className="hover:text-orange-500">Solutions</a></li>
</ul>
</div>
<div>
<h2 className="text-lg font-bold text-gray/20 mb-4">EVENTS</h2>
<ul>
<li className="mb-2"><a href="#" className="hover:text-orange-500">CVR</a></li>
<li className="mb-2"><a href="#" className="hover:text-orange-500">Game Jams</a></li>
</ul>
</div>
<div>
<h2 className="text-lg font-bold text-gray/20 mb-4">FOLLOW</h2>
<div className="flex space-x-4">
<a href="#" className="hover:text-cyan-500"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#" className="hover:text-sky-700"><i className="fab fa-facebook-f"></i></a>
<a href="#" className="hover:text-red-500"><i className="fab fa-youtube"></i></a>
<a href="#" className="hover:text-red-400"><i className="fab fa-pinterest"></i></a>
<a href="#" className="hover:text-orange-800"><i className="fab fa-google-plus-g"></i></a>
<a href="#" className="hover:text-pink-600"><i className="fab fa-instagram"></i></a>
</div>
</div>
</div>

<div className="text-center text-gray-600 mt-10 border-t border-gray-300 pt-6">
<div className="border-t border-gray-700 mt-10 pt-6 text-center">
<div className="flex justify-center space-x-8 mb-4">
<a href="#" className="hover:text-blue-500">Terms & Conditions</a>
<a href="#" className="hover:text-blue-500">Privacy Policy</a>
<a href="#" className="hover:text-blue-500">Sitemap</a>
<a href="#" className="hover:text-orange-500">TERMS & CONDITIONS</a>
<a href="#" className="hover:text-orange-500">PRIVACY POLICY</a>
<a href="#" className="hover:text-orange-500">SITEMAP</a>
</div>
<p>© 2024 Socialplus. All rights reserved.</p>
<p>Copyright 2024 © </p>
<p>Social Media</p>
</div>
</div>
</footer>
);
};

export default Footer;

4 changes: 2 additions & 2 deletions src/components/Navbar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -228,7 +228,7 @@ const NavMenu = ({ isDarkMode, showSearchBar }) => {
{/* Get Started Button */}
<Link to="/signup" className="md:hidden">
<button className=" bg-blue-600 text-white px-4 py-2 rounded-full">
Get started now {">>"}
Signup/Login {">>"}
</button>
</Link>
</nav>
Expand Down Expand Up @@ -337,7 +337,7 @@ const Navbar = () => {
{/* Get Started Button */}
<Link to="/signup" className="hidden md:block">
<button className="bg-blue-600 text-white px-4 py-2 rounded-full">
Get started now
Signup/Login
</button>
</Link>

Expand Down
195 changes: 91 additions & 104 deletions src/pages/LandingPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import '@fortawesome/fontawesome-free/css/all.min.css';
import Footer from '../components/Footer';
import { Link } from 'react-router-dom';


const LandingPage = () => {
const stats = [
{
Expand Down Expand Up @@ -52,124 +51,112 @@ const LandingPage = () => {
const repeatedStats = Array(10).fill(stats).flat();

return (

<div>
<div className="h-screen ">

{/* Main Section */}
<div className="flex flex-col gap-6 md:flex-row items-center justify-between p-8 md:p-16 bg-white/20">
<div className="md:w-1/2">
<h1 className="text-4xl md:text-5xl font-bold mb-4">
Grow your audience on social and beyond
</h1>
<p className="text-lg text-slate-500 dark:text-slate-400 mb-8">
Socialplus helps you build an audience organically. We’re a values-driven company that provides affordable, intuitive marketing tools for ambitious people and teams.
</p>
<div className="mb-4">

<Link to="/signup">
<button className="bg-blue-600 text-white px-4 py-2 rounded-full">
Do you want to Start
</button>
</Link>

<div className="h-screen ">
{/* Main Section */}
<div className="flex flex-col gap-6 md:flex-row items-center justify-between p-8 md:p-16 bg-white/20">
<div className="md:w-1/2">
<h1 className="text-4xl md:text-5xl font-bold mb-4">
Grow your audience on social and beyond
</h1>
<p className="text-lg text-slate-500 dark:text-slate-400 mb-8">
Socialplus helps you build an audience organically. We’re a values-driven company that provides affordable, intuitive marketing tools for ambitious people and teams.
</p>
<div className="mb-4">
<Link to="/signup">
<button className="bg-blue-600 text-white px-4 py-2 rounded-full">
Do you want to Start
</button>
</Link>
</div>
<div className="flex items-center text-sm text-slate-500 dark:text-slate-400">
<i className="fas fa-check-circle text-blue-600 mr-2"></i> Try for free
<i className="fas fa-check-circle text-blue-600 mx-2"></i> No credit card required
<i className="fas fa-check-circle text-blue-600 mx-2"></i> Cancel anytime
</div>
</div>
<div className="flex items-center text-sm text-slate-500 dark:text-slate-400">
<i className="fas fa-check-circle text-blue-600 mr-2"></i> Try for free
<i className="fas fa-check-circle text-blue-600 mx-2"></i> No credit card required
<i className="fas fa-check-circle text-blue-600 mx-2"></i> Cancel anytime
<div className="md:w-1/2 mt-8 md:mt-0 relative">
<img
src="https://buffer.com/static/homepage/webp/hero-2.webp"
alt="Dashboard with social media icons and analytics"
className="rounded-lg shadow-lg"
/>
</div>
</div>
<div className="md:w-1/2 mt-8 md:mt-0 relative">
<img
src="https://buffer.com/static/homepage/webp/hero-2.webp"
alt="Dashboard with social media icons and analytics"
className="rounded-lg shadow-lg"
/>
</div>
</div>

{/* Infinite Automatic Scrollable Statistics Section */}
<div className="relative w-full overflow-hidden bg-white/20 py-8">
{/* Scrollable div with Tailwind scroll animation */}
<div className="flex space-x-4 animate-scroll">
{repeatedStats.map((stat, index) => (
<div
key={index}
className="bg-white/20 shadow-md rounded-lg p-6 flex flex-col items-center min-w-[250px]"
>
<div className="text-2xl font-bold mb-2">
{stat.value} <span className="text-green-500">▲</span>
</div>
<div className="text-slate-500 dark:text-slate-400 mb-4">{stat.description}</div>
<div className="flex items-center">
<img
src={stat.image}
alt={stat.alt}
className="w-10 h-10 rounded-full mr-2"
/>
{/* Infinite Automatic Scrollable Statistics Section */}
<div className="relative w-full overflow-hidden bg-white/20 py-8">
{/* Scrollable div with Tailwind scroll animation */}
<div className="flex space-x-4 animate-scroll">
{repeatedStats.map((stat, index) => (
<div
key={index}
className="bg-white/20 shadow-md rounded-lg p-6 flex flex-col items-center min-w-[250px]"
>
<div className="text-2xl font-bold mb-2">
{stat.value} <span className="text-green-500">▲</span>
</div>
<div className="text-slate-500 dark:text-slate-400 mb-4">{stat.description}</div>
<div className="flex items-center">
<i className={`${stat.icon} text-blue-600 mr-1`}></i>
<span className="text-gray-800">{stat.name}</span>
<img
src={stat.image}
alt={stat.alt}
className="w-10 h-10 rounded-full mr-2"
/>
<div className="flex items-center">
<i className={`${stat.icon} text-blue-600 mr-1`}></i>
<span className="text-gray-800">{stat.name}</span>
</div>
</div>
</div>
</div>
))}
</div>
</div>






<div className="flex flex-col gap-6 md:flex-row items-center justify-between p-8 md:p-16 bg-white/20">
<div className="md:w-1/2 mt-8 md:mt-0 relative">
<img
src="https://media.sproutsocial.com/uploads/2023/03/What-is-social-media-management-everything-you-need-to-know-Final-1.svg"
alt="Dashboard with social media icons and analytics"
className="rounded-lg shadow-lg"
/>
))}
</div>
</div>
<div className="md:w-1/2">
<h1 className="text-4xl md:text-5xl font-bold mb-4">
Grow your audience on social and beyond
</h1>
<p className="text-lg text-slate-500 dark:text-slate-400 mb-8">
Socialplus helps you build an audience organically. We’re a values-driven company that provides affordable, intuitive marketing tools for ambitious people and teams.
</p>

{/* Additional Sections */}
<div className="flex flex-col gap-6 md:flex-row items-center justify-between p-8 md:p-16 bg-white/20">
<div className="md:w-1/2 mt-8 md:mt-0 relative">
<img
src="https://media.sproutsocial.com/uploads/2023/03/What-is-social-media-management-everything-you-need-to-know-Final-1.svg"
alt="Dashboard with social media icons and analytics"
className="rounded-lg shadow-lg"
/>
</div>
<div className="md:w-1/2">
<h1 className="text-4xl md:text-5xl font-bold mb-4">
Grow your audience on social and beyond
</h1>
<p className="text-lg text-slate-500 dark:text-slate-400 mb-8">
Socialplus helps you build an audience organically. We’re a values-driven company that provides affordable, intuitive marketing tools for ambitious people and teams.
</p>
</div>
</div>
</div>



<div className="flex flex-col gap-6 md:flex-row items-center justify-between p-8 md:p-16 bg-white/20">
<div className="md:w-1/2">
<h1 className="text-4xl md:text-5xl font-bold mb-4">
And we are here to help
</h1>
<p className="text-lg text-slate-500 dark:text-slate-400 mb-8">
Our customer advocates are standing by 24/7 to support you via email and social media. We also have a comprehensive, regularly updated help center for those who prefer to find help themselves.
</p>
<div className="flex gap-3 items-center mb-4">
<button className="px-6 py-3 border border-blue-500 text-blue-500 rounded-full hover:bg-blue-50">
Visit our help center
</button>
<div className="flex flex-col gap-6 md:flex-row items-center justify-between p-8 md:p-16 bg-white/20">
<div className="md:w-1/2">
<h1 className="text-4xl md:text-5xl font-bold mb-4">
And we are here to help
</h1>
<p className="text-lg text-slate-500 dark:text-slate-400 mb-8">
Our customer advocates are standing by 24/7 to support you via email and social media. We also have a comprehensive, regularly updated help center for those who prefer to find help themselves.
</p>
<div className="flex gap-3 items-center mb-4">
<button className="px-6 py-3 border border-blue-500 text-blue-500 rounded-full hover:bg-blue-50">
Visit our help center
</button>
</div>
</div>
<div className="md:w-1/2 mt-8 md:mt-0 relative">
<img
src="https://buffer.com/_next/image?url=%2Fstatic%2Fhomepage%2Fwebp%2Fteam-map.webp&w=1920&q=75"
alt="Dashboard with social media icons and analytics"
className="rounded-lg shadow-lg"
/>
</div>
</div>
<div className="md:w-1/2 mt-8 md:mt-0 relative">
<img
src="https://buffer.com/_next/image?url=%2Fstatic%2Fhomepage%2Fwebp%2Fteam-map.webp&w=1920&q=75"
alt="Dashboard with social media icons and analytics"
className="rounded-lg shadow-lg"
/>
</div>
</div>


<Footer />

<Footer />
</div>
</div>
);
};
Expand Down
Loading

0 comments on commit 80e182d

Please sign in to comment.