Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Rate Us #268

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Login from './pages/Login';
import Signup from './pages/Signup';
import MenuPage from './pages/MenuPage';
import About from './pages/About';
import Rateus from './pages/Rateus';
import SectionPage from './pages/SectionPage';
import News from './pages/News';
import NotFound from './pages/NotFound';
Expand All @@ -30,6 +31,7 @@ function App() {
<Route path='/login' element={<Login />} />
<Route path='/signup' element={<Signup />} />
<Route path='/about' element={<Layout><About /></Layout>} />
<Route path='/rateus' element={<Layout><Rateus /></Layout>} />
<Route path='/section/:_id' element={<Layout><SectionPage /></Layout>} />
<Route path="/menu/:_id" element={<Layout><MenuPage /></Layout>} />
<Route path='/news' element={<Layout><News /></Layout>} />
Expand Down
55 changes: 29 additions & 26 deletions src/components/Navbar.jsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,26 @@
import React, { useState,useContext } from "react";
import React, { useState, useContext } from "react";
import { Link } from "react-router-dom";
import logo from "../assets/logo2.png";
import { motion, AnimatePresence,useScroll} from "framer-motion";
import { motion, AnimatePresence, useScroll } from "framer-motion";
import { IoClose } from "react-icons/io5";
import { GiHamburgerMenu } from "react-icons/gi";
import { MdDarkMode } from "react-icons/md";
import { ThemeContext } from '../themeContext';

const Navbar = () => {
const { theme, toggleTheme } = useContext(ThemeContext);
const [isOpen, setIsOpen] = useState(false);
const {scrollYProgress} = useScroll();
const { scrollYProgress } = useScroll();

const toggleMenu = () => {
setIsOpen(!isOpen);
};

return (
<nav className="text-white p-3 font-semibold shadow-lg top-0 bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 w-full fixed z-40 dark:bg-cadetblue dark:bg-none">
<motion.div
className="left-0 top-0 w-full h-1 bg-blue-500 fixed z-50"
style={{ scaleX: scrollYProgress }}
/>
<motion.div
className="left-0 top-0 w-full h-1 bg-blue-500 fixed z-50"
style={{ scaleX: scrollYProgress }}
/>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
<div className="flex items-center">
Expand All @@ -32,27 +34,28 @@ const Navbar = () => {
<NavItem to="/home">Home</NavItem>
<NavItem to="/about">About</NavItem>
<NavItem to="/news">News</NavItem>
<NavItem to="/rateus">RateUs</NavItem>
</div>
</div>
</div>
<div className="hidden md:flex items-center gap-5">
<button onClick={toggleTheme} className="p-2 rounded focus:outline-none focus:ring">
{theme === 'dark' ? '🌞 Light Mode' : '🌙 Dark Mode'}
</button>
<div>
<Link to="/">
<button
className="bg-green-400 hover:bg-green-600 hover:shadow-green text-white py-1 px-2 rounded w-full h-auto text-l relative z-0 rounded-lg transition-all duration-200 hover:scale-110"
<button onClick={toggleTheme} className="p-2 rounded focus:outline-none focus:ring">
{theme === 'dark' ? '🌞 Light Mode' : '🌙 Dark Mode'}
</button>
<div>
<Link to="/">
<button
className="bg-green-400 hover:bg-green-600 hover:shadow-green text-white py-1 px-2 rounded w-full h-auto text-l relative z-0 rounded-lg transition-all duration-200 hover:scale-110"
>
Log out
</button>
</Link>
</div>
Log out
</button>
</Link>
</div>
</div>
<div className="-mr-2 flex md:hidden">
<button onClick={toggleTheme} className="p-2 rounded focus:outline-none focus:ring">
{theme === 'dark' ? '🌞 Light Mode' : '🌙 Dark Mode'}
</button>
{theme === 'dark' ? '🌞 Light Mode' : '🌙 Dark Mode'}
</button>
<button
onClick={toggleMenu}
className="inline-flex items-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white"
Expand All @@ -75,12 +78,11 @@ const Navbar = () => {
exit={{ opacity: 0, y: -50 }}
className="md:hidden absolute left-0 w-full flex flex-col items-center justify-center"
>

<div className="w-[100%] bg-[#282c34] px-[20%] pt-2 pb-3 space-y-1 mt-1 dark:bg-teal-900">

<MobileNavItem to="/home">Home</MobileNavItem>
<MobileNavItem to="/about">About us</MobileNavItem>
<MobileNavItem to="/news">News</MobileNavItem>
<MobileNavItem to="/rateus">Rateus</MobileNavItem>
<MobileNavItem to="/">
<button
className="bg-green-500 hover:bg-green-700 text-white py-1 px-2 rounded transition duration-300 ease-in-out transform hover:scale-105"
Expand All @@ -95,11 +97,12 @@ const Navbar = () => {
</nav>
);
};

const NavItem = ({ icon, to, children }) => {
return (
<Link
to={to}
className="w-full h-auto relative z-0 rounded-lg transition-all duration-200 hover:scale-125 text-l block after:block after:content-[''] after:absolute after:h-[3px] after:bg-gradient-to-r from-green-300 to-green-600 after:w-full after:scale-x-0 after:hover:scale-x-100 after:transition after:duration-300 after:origin-center
className="w-full h-auto relative z-0 rounded-lg transition-all duration-200 hover:scale-125 text-xl block after:block after:content-[''] after:absolute after:h-[3px] after:bg-gradient-to-r from-green-300 to-green-600 after:w-full after:scale-x-0 after:hover:scale-x-100 after:transition after:duration-300 after:origin-center
"
>
{icon}
Expand All @@ -109,11 +112,11 @@ const NavItem = ({ icon, to, children }) => {
};

const MobileNavItem = ({ to, children }) => {
let classname = "z-[2] text-gray-300 text-center hover:text-white block px-3 py-2 rounded-md text-base font-medium ";
let classname = "z-[2] text-gray-300 text-center hover:text-white block px-3 py-2 rounded-md text-xl font-medium ";
return (
<Link
to={to}
className={ children.type == "button" ? classname : classname + "hover:bg-gray-700" }
className={ children.type === "button" ? classname : classname + "hover:bg-gray-700" }
>
{children}
</Link>
Expand Down
3 changes: 0 additions & 3 deletions src/pages/News.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@ import NewsCard from "../components/NewsCard";
import Loader from "../components/Loader/Loader";
import Footer from "../components/Footer";



function News() {
const [articles, setArticles] = useState([]);
const [loading, setLoading] = useState(false);
Expand Down Expand Up @@ -53,7 +51,6 @@ function News() {
</div>
)
}

</>
);
}
Expand Down
169 changes: 169 additions & 0 deletions src/pages/Rateus.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,169 @@
/* Basic reset and styling */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: url('https://images.pexels.com/photos/1640774/pexels-photo-1640774.jpeg') no-repeat fixed;
background-size: cover;
background-position: center;
color: #333;
}

/* Header and Navbar styling */
header {
background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black background */
padding: 10px 0;
}

.navigbar {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

.logo img {
height: 40px;
}

.ul1 {
list-style: none;
display: flex;
margin: 0;
padding: 0;
}

.ul1 li {
margin: 0 10px;
}

.ul1 li a {
color: #fff; /* White text color for navbar items */
text-decoration: none;
font-size: 16px;
padding: 5px 10px;
transition: color 0.3s, border-bottom 0.3s;
}

.ul1 li a:hover, #active-page {
color: #f29523; /* Highlight color for active and hovered items */
border-bottom: 2px solid #f29523;
}

/* Container styling */
.container {
max-width: 600px;
margin: 100px auto; /* Adjusted margin for better spacing */
padding: 30px;
background-color: rgba(255, 255, 255, 0.9); /* Slightly less transparent white background */
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
text-align: center;
transition: box-shadow 0.3s, transform 0.3s;
}

.container:hover {
box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
transform: scale(1.02);
}

h1 {
margin-bottom: 10px; /* Increased margin-bottom */
color: #333;
font-size: 36px; /* Increased font size */
}


/* Star rating styling */
.stars {
display: flex;
justify-content: center;
font-size: 30px; /* Increased font size for stars */
margin-bottom: 20px;
}

.stars input[type="radio"] {
display: none;
}

.stars label {
cursor: pointer;
color: #ccc;
transition: color 0.3s;
padding: 0 5px; /* Padding between stars */
}

/* Highlight stars up to and including the hovered or checked star */
.stars label:hover,
.stars label:hover ~ label {
color: #ffcf00;
}

.stars input[type="radio"]:checked ~ label {
color: #ffcf00;
}

.stars input[type="radio"]:checked ~ label ~ label {
color: #ccc;
}

.stars label.active {
color: #ffcf00;
}

/* Feedback textarea styling */
.feedback {
width: calc(100% - 40px);
height: 150px;
padding: 15px;
margin: 20px 0;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 16px;
resize: none;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

/* Submit button styling */
.submit-btn {
display: block;
margin: 20px auto;
padding: 10px 30px;
background-color: #0056b3;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s;
}

.submit-btn:hover {
background-color: #0056b3;
transform: scale(1.05);
}

/* Additional responsive adjustments */
@media (max-width: 768px) {
.container {
margin: 50px 20px;
padding: 20px;
}

.ul1 li a {
font-size: 14px;
}
}

@media (max-width: 480px) {
.ul1 {
flex-direction: column;
align-items: center;
}

.ul1 li {
margin: 5px 0;
}
}
Comment on lines +1 to +169
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sailaja-adapa I think instead of creating a css file we should use tailwind only because the full project is written in tailwind only. This will maintain consistency.

@hustlerZzZ what do you think about his?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ya tailwind will be better

Loading
Loading