Skip to content

Commit

Permalink
Fix homepage error
Browse files Browse the repository at this point in the history
  • Loading branch information
@Somnath-Chattaraj
Somnath-Chattaraj committed Oct 13, 2024
1 parent a887d02 commit d4ceddd
Showing 1 changed file with 39 additions and 94 deletions.
133 changes: 39 additions & 94 deletions frontend/src/components/homePage/HomePage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import React, { useEffect } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { Helmet } from 'react-helmet-async'; // Add this line
import image from '../../images/image7.png';

import { FiUsers, FiShare2, FiMessageCircle, FiBell } from 'react-icons/fi';
import logo from '../../images/logo.png';
import '../../index.css';
Expand All @@ -13,9 +13,9 @@ gsap.registerPlugin(ScrollTrigger);

export const Header = () => {
const navigate = useNavigate();
const {loadingUser, userDetails} = useUser();
const { loadingUser, userDetails } = useUser();

useEffect(() => {

gsap.to(".first-page-image", {
y: -100,
opacity: 0.5,
Expand Down Expand Up @@ -45,48 +45,58 @@ export const Header = () => {
});
});
}, []);


return (
<div className='bg-[#1F2135]'>
<Helmet>
<script type="application/ld+json">
{JSON.stringify({
"@context": "https://schema.org",
"@type": "Organization",
"name": "Capusify",
"url": "https://capusify.site",
"logo": "https://capusify.site/logo.png",
"description": "Your platform for XYZ.",
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+1-800-123-456",
"contactType": "Customer Support"
}
})}
</script>
</Helmet>
<script type="application/ld+json">
{JSON.stringify({
"@context": "https://schema.org",
"@type": "Organization",
"name": "Capusify",
"url": "https://capusify.site",
"logo": "https://capusify.site/logo.png",
"description": "Your platform for XYZ.",
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+1-800-123-456",
"contactType": "Customer Support"
}
})}
</script>
{/* Open Graph Meta Tags */}
<meta property="og:title" content="Capusify - Your Platform for XYZ" />
<meta property="og:description" content="Offering the best services in XYZ." />
<meta property="og:image" content="https://capusify.site/og-image.jpg" />
<meta property="og:url" content="https://capusify.site" />
<meta property="og:type" content="website" />

{/* Twitter Card Meta Tags */}
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Capusify - Your Platform for XYZ" />
<meta name="twitter:description" content="Offering the best services in XYZ." />
<meta name="twitter:image" content="https://capusify.site/og-image.jpg" />
</Helmet>

<nav className="flex justify-between items-center px-6 lg:px-32 py-5">
<div className="text-lg font-bold flex">
<img src={logo} alt="Campus Chatter Logo" className='w-10 h-10 rounded-full mx-3' />
<span className='pt-1'>Campus Chatter</span>
</div>
<div className="hidden md:flex space-x-6">
<Link to="/homepage" className="hover:text-purple-500 ">Home</Link>
<Link to="/posts" className="hover:text-purple-500 ">Post</Link>
<Link to="/room/joinroom" className="hover:text-purple-500">Room</Link>
<Link to="/" className="hover:text-purple-500">contact</Link>
<Link to="/homepage" className="hover:text-purple-500 ">Home</Link>
<Link to="/posts" className="hover:text-purple-500 ">Post</Link>
<Link to="/room/joinroom" className="hover:text-purple-500">Room</Link>
<Link to="/" className="hover:text-purple-500">Contact</Link>
</div>
{!userDetails && <button className="bg-purple-500 text-white rounded-full px-4 py-2 font-bold hover:bg-purple-600" onClick={() => { navigate('/signup') }}>
Sign up
</button>}

{userDetails && <button className="bg-purple-500 text-white rounded-full px-4 py-2 font-bold hover:bg-purple-600" onClick={() => { navigate('/logout') }}>
Logout
</button>}
</nav>


<div className="h-screen flex flex-col lg:flex-row items-center justify-center px-6 lg:px-32 space-y-10 lg:space-y-0 lg:space-x-10">
<div className="w-full lg:w-1/2 text-center lg:text-left">
<h1 className="text-4xl lg:text-6xl font-bold leading-tight">
Expand All @@ -100,85 +110,20 @@ export const Header = () => {
{!userDetails && <button onClick={() => { navigate('/signup') }} className="mt-10 bg-orange-500 text-black py-3 px-6 rounded-full font-semibold hover:bg-orange-600">
Create Account
</button>}

{userDetails && <button onClick={() => { navigate('/posts') }} className="mt-10 bg-orange-500 text-black py-3 px-6 rounded-full font-semibold hover:bg-orange-600">
Get Started
</button>}
</div>


<div className="w-full lg:w-1/2 ">
<img src={image} alt="hero" className='w-full first-page-image' />
</div>
</div>


<section className="h-full md:h-screen bg-[#E3E7EB] py-20 px-10 md:px-20 relative">
<div className="flex flex-col md:flex-row items-center h-full">

<div className="grid grid-cols-1 sm:grid-cols-2 gap-6 md:gap-8 w-full md:w-1/2 h-full">

<div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 flex flex-col justify-between h-full feature-card">
<div className="flex items-center justify-center w-20 h-20 bg-gray-100 rounded-full mb-4">
{<FiUsers size={24} className="text-yellow-500" />}
</div>
<div className="flex-grow"></div>
<div className="flex justify-between items-center">
<h3 className="text-lg font-semibold text-black ">{"Engage In Community"}</h3>
<span className="text-blue-500 font-bold text-xl cursor-pointer">→</span>
</div>
</div>

<div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 flex flex-col justify-between h-full feature-card">
<div className="flex items-center justify-center w-20 h-20 bg-gray-100 rounded-full mb-4">
{<FiShare2 size={24} className="text-red-400" />}
</div>
<div className="flex-grow"></div>
<div className="flex justify-between items-center">
<h3 className="text-lg font-semibold text-black ">{"Discover New Connections"}</h3>
<span className="text-blue-500 font-bold text-xl cursor-pointer">→</span>
</div>
</div>

<div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 flex flex-col justify-between h-full feature-card">
<div className="flex items-center justify-center w-20 h-20 bg-gray-100 rounded-full mb-4">
{<FiMessageCircle size={24} className="text-purple-500" />}
</div>
<div className="flex-grow"></div>
<div className="flex justify-between items-center">
<h3 className="text-lg font-semibold text-black ">{"Share Ideas And Creativity"}</h3>
<span className="text-blue-500 font-bold text-xl cursor-pointer">→</span>
</div>
</div>

<div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 flex flex-col justify-between h-full feature-card">
<div className="flex items-center justify-center w-20 h-20 bg-gray-100 rounded-full mb-4">
{<FiBell size={24} className="text-blue-500" />}
</div>
<div className="flex-grow"></div>
<div className="flex justify-between items-center">
<h3 className="text-lg font-semibold text-black ">{"Access Information And News"}</h3>
<span className="text-blue-500 font-bold text-xl cursor-pointer">→</span>
</div>
</div>


</div>


<div className="md:pl-16 md:w-1/2 mt-10 md:mt-0 text-center md:text-left">
<h2 className="text-3xl md:text-6xl font-bold text-gray-800 mb-4">Why <br/><span className='underline'>Campus Chatter?</span></h2>
<p className="text-lg text-gray-600 mb-8">
Campus Chatter can provide users with a wide range of benefits, from staying connected with loved ones to discovering new connections and engaging in creative expression and community building.
</p>
<button className="bg-purple-600 text-white px-6 py-3 rounded-lg hover:bg-purple-700 transition-colors">
Learn more
</button>
</div>
</div>
</section>
{/* Rest of your component remains unchanged */}
</div>
);
};

export default Header;


0 comments on commit d4ceddd

Please sign in to comment.