Skip to content

Add auto scroll up when page open - privacy, contact, about #500

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.

Sign up for GitHub

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

Merged
mehul-m-prajapati merged 4 commits into from
May 29, 2026
+70 −86
Merged

Add auto scroll up when page open - privacy, contact, about #500

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
97812f1
Update PrivacyPolicy.tsx
firoziya May 25, 2026
08820dd
Update Contact.tsx
firoziya May 25, 2026
57f9d4e
Update About.tsx
firoziya May 25, 2026
c6d9221
Merge branch 'main' into main
mehul-m-prajapati May 29, 2026
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
12 changes: 8 additions & 4 deletions src/pages/About/About.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { motion } from "framer-motion";
import { Lightbulb, Users, Settings, Search } from "lucide-react";
import { useEffect } from "react";

const features = [
{
Expand All @@ -20,20 +21,23 @@ const features = [
];

const About = () => {
useEffect(() => {
window.scrollTo(0, 0);
}, []);
return (
<div className="bg-gradient-to-br from-white to-gray-100 dark:from-gray-900 dark:to-gray-800 text-black dark:text-white min-h-screen">

{/* Hero Section */}
<section className="py-24 text-center relative overflow-hidden">
<motion.h1
<motion.h1
className="text-5xl font-extrabold mb-4 drop-shadow-sm"
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
>
About Us
</motion.h1>
<motion.p
<motion.p
className="text-xl max-w-xl mx-auto text-gray-600 dark:text-gray-300"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
Expand All @@ -45,7 +49,7 @@ const About = () => {

{/* Mission Section */}
<section className="py-20 px-6 bg-white dark:bg-gray-900 text-center">
<motion.div
<motion.div
initial={{ opacity: 0, y: 10 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
Expand Down
122 changes: 49 additions & 73 deletions src/pages/Contact/Contact.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useState, useContext } from "react";
import { useState, useContext, useEffect } from "react";
import {
Github,
Mail,
Expand All @@ -16,6 +16,10 @@ function Contact() {
const themeContext = useContext(ThemeContext) as ThemeContextType;
const { mode } = themeContext;

useEffect(() => {
window.scrollTo(0, 0);
}, []);

const handleSubmit = async () => {
setIsSubmitting(true);

Expand All @@ -37,11 +41,10 @@ function Contact() {

return (
<div
className={`min-h-screen w-screen relative overflow-y-auto ${
mode === "dark"
className={`min-h-screen w-screen relative overflow-y-auto ${mode === "dark"
? "bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900"
: "bg-gradient-to-br from-indigo-100 via-purple-100 to-indigo-100"
}`}
}`}
>
{/* Animated background elements */}
<div className="absolute inset-0">
Expand All @@ -55,9 +58,8 @@ function Contact() {
<div className="text-center mb-8 flex-shrink-0">
<div className="flex flex-col sm:flex-row justify-center items-center gap-2 sm:gap-3 mb-4">
<div
className={`inline-flex items-center justify-center w-14 h-14 sm:w-20 sm:h-20 shadow-2xl transition-transform transform hover:scale-105 overflow-hidden rounded-2xl sm:rounded-3xl ${
mode === "dark" ? "bg-white" : "bg-purple-200"
}`}
className={`inline-flex items-center justify-center w-14 h-14 sm:w-20 sm:h-20 shadow-2xl transition-transform transform hover:scale-105 overflow-hidden rounded-2xl sm:rounded-3xl ${mode === "dark" ? "bg-white" : "bg-purple-200"
}`}
>
<img
src="/crl-icon.png"
Expand All @@ -73,9 +75,8 @@ function Contact() {
</h1>
</div>
<p
className={`text-sm sm:text-lg max-w-xl md:max-w-2xl mx-auto leading-relaxed ${
mode === "dark" ? "text-gray-300" : "text-gray-700"
}`}
className={`text-sm sm:text-lg max-w-xl md:max-w-2xl mx-auto leading-relaxed ${mode === "dark" ? "text-gray-300" : "text-gray-700"
}`}
>
Get in touch with us to discuss your project tracking needs or
report any issues
Expand All @@ -87,16 +88,14 @@ function Contact() {
<div className="space-y-4 sm:space-y-6 h-full flex flex-col">
<div className="text-center lg:text-left flex-shrink-0">
<h2
className={`text-lg sm:text-2xl font-bold mb-2 sm:mb-3 ${
mode === "dark" ? "text-white" : "text-gray-800"
}`}
className={`text-lg sm:text-2xl font-bold mb-2 sm:mb-3 ${mode === "dark" ? "text-white" : "text-gray-800"
}`}
>
Let's Connect
</h2>
<p
className={`text-xs sm:text-base ${
mode === "dark" ? "text-gray-400" : "text-gray-600"
}`}
className={`text-xs sm:text-base ${mode === "dark" ? "text-gray-400" : "text-gray-600"
}`}
>
We're here to help you track and manage your GitHub
repositories more effectively
Expand Down Expand Up @@ -133,49 +132,44 @@ function Contact() {
return (
<div
key={title}
className={`group p-3 sm:p-5 rounded-xl sm:rounded-2xl backdrop-blur-lg transition-all duration-300 hover:scale-105 ${
mode === "dark"
className={`group p-3 sm:p-5 rounded-xl sm:rounded-2xl backdrop-blur-lg transition-all duration-300 hover:scale-105 ${mode === "dark"
? "bg-white/10 border border-white/20 hover:bg-white/20"
: "bg-white border border-gray-300 hover:bg-gray-100"
}`}
}`}
>
<div className="flex items-center gap-3 sm:gap-4">
<div
className={`p-2 sm:p-2.5 rounded-full transition-transform duration-300 group-hover:scale-110 bg-gradient-to-r ${iconBg}`}
>
<Icon
className={`w-4 h-4 sm:w-5 sm:h-5 ${
mode === "dark"
className={`w-4 h-4 sm:w-5 sm:h-5 ${mode === "dark"
? "text-white"
: "text-gray-800"
}`}
}`}
/>
</div>
<div>
<h3
className={`text-sm sm:text-base font-semibold ${
mode === "dark"
className={`text-sm sm:text-base font-semibold ${mode === "dark"
? "text-white"
: "text-gray-800"
}`}
}`}
>
{title}
</h3>
<p
className={`text-xs sm:text-sm ${
mode === "dark"
className={`text-xs sm:text-sm ${mode === "dark"
? "text-gray-300"
: "text-gray-600"
}`}
}`}
>
{detail}
</p>
<p
className={`text-xs ${
mode === "dark"
className={`text-xs ${mode === "dark"
? "text-gray-400"
: "text-gray-500"
}`}
}`}
>
{sub}
</p>
Expand All @@ -189,16 +183,14 @@ function Contact() {

{/* Contact Form */}
<div
className={`p-4 sm:p-6 rounded-xl sm:rounded-3xl shadow-2xl h-full flex flex-col backdrop-blur-lg ${
mode === "dark"
className={`p-4 sm:p-6 rounded-xl sm:rounded-3xl shadow-2xl h-full flex flex-col backdrop-blur-lg ${mode === "dark"
? "bg-white/10 border border-white/20"
: "bg-white border border-gray-300"
}`}
}`}
>
<h2
className={`text-base sm:text-xl font-bold mb-4 text-center flex-shrink-0 ${
mode === "dark" ? "text-white" : "text-gray-800"
}`}
className={`text-base sm:text-xl font-bold mb-4 text-center flex-shrink-0 ${mode === "dark" ? "text-white" : "text-gray-800"
}`}
>
Send us a Message
</h2>
Expand All @@ -208,12 +200,10 @@ function Contact() {
{/* Full Name */}
<div>
<label
htmlFor="fullname"
className={`block text-xs font-medium mb-1 ${
mode === "dark"
className={`block text-xs font-medium mb-1 ${mode === "dark"
? "text-gray-300"
: "text-gray-700"
}`}
}`}
>
Full Name
</label>
Expand All @@ -223,23 +213,20 @@ function Contact() {
type="text"
placeholder="Enter your full name"
required
className={`w-full p-2 sm:p-3 rounded-lg sm:rounded-xl text-sm sm:text-base transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 ${
mode === "dark"
className={`w-full p-2 sm:p-3 rounded-lg sm:rounded-xl text-sm sm:text-base transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 ${mode === "dark"
? "bg-white/5 border border-white/20 text-white placeholder-gray-400"
: "bg-gray-50 border border-gray-300 text-gray-800 placeholder-gray-500"
}`}
}`}
/>
</div>

{/* Email */}
<div>
<label
htmlFor="email"
className={`block text-xs font-medium mb-1 ${
mode === "dark"
className={`block text-xs font-medium mb-1 ${mode === "dark"
? "text-gray-300"
: "text-gray-700"
}`}
}`}
>
Email Address
</label>
Expand All @@ -249,34 +236,28 @@ function Contact() {
type="email"
placeholder="your.email@example.com"
required
className={`w-full p-2 sm:p-3 rounded-lg sm:rounded-xl text-sm sm:text-base transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 ${
mode === "dark"
className={`w-full p-2 sm:p-3 rounded-lg sm:rounded-xl text-sm sm:text-base transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 ${mode === "dark"
? "bg-white/5 border border-white/20 text-white placeholder-gray-400"
: "bg-gray-50 border border-gray-300 text-gray-800 placeholder-gray-500"
}`}
}`}
/>
</div>

{/* Subject */}
<div>
<label
htmlFor="subject"
className={`block text-xs font-medium mb-1 ${
mode === "dark"
className={`block text-xs font-medium mb-1 ${mode === "dark"
? "text-gray-300"
: "text-gray-700"
}`}
}`}
>
Subject
</label>
<select
id="subject"
name="subject"
className={`w-full p-2 sm:p-3 rounded-lg sm:rounded-xl text-sm sm:text-base transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 ${
mode === "dark"
className={`w-full p-2 sm:p-3 rounded-lg sm:rounded-xl text-sm sm:text-base transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 ${mode === "dark"
? "bg-white/5 border border-white/20 text-white placeholder-gray-400"
: "bg-gray-50 border border-gray-300 text-gray-800 placeholder-gray-500"
}`}
}`}
required
defaultValue=""
>
Expand All @@ -293,12 +274,10 @@ function Contact() {
{/* Message */}
<div className="relative">
<label
htmlFor="message"
className={`block text-xs font-medium mb-1 ${
mode === "dark"
className={`block text-xs font-medium mb-1 ${mode === "dark"
? "text-gray-300"
: "text-gray-700"
}`}
}`}
>
Message
</label>
Expand All @@ -308,21 +287,19 @@ function Contact() {
placeholder="Type your message here..."
required
rows={4}
className={`w-full p-2 sm:p-3 rounded-lg sm:rounded-xl text-sm sm:text-base resize-none transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 ${
mode === "dark"
className={`w-full p-2 sm:p-3 rounded-lg sm:rounded-xl text-sm sm:text-base resize-none transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 ${mode === "dark"
? "bg-white/5 border border-white/20 text-white placeholder-gray-400"
: "bg-gray-50 border border-gray-300 text-gray-800 placeholder-gray-500"
}`}
}`}
></textarea>

<button
onClick={handleSubmit}
disabled={isSubmitting}
className={`absolute bottom-2 sm:bottom-3 right-2 sm:right-3 flex items-center gap-1.5 sm:gap-2 rounded-full px-3 sm:px-4 py-1.5 sm:py-2 text-xs sm:text-sm font-semibold transition-all duration-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-purple-500 ${
isSubmitting
className={`absolute bottom-2 sm:bottom-3 right-2 sm:right-3 flex items-center gap-1.5 sm:gap-2 rounded-full px-3 sm:px-4 py-1.5 sm:py-2 text-xs sm:text-sm font-semibold transition-all duration-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-purple-500 ${isSubmitting
? "bg-purple-400 cursor-wait text-white"
: "bg-purple-600 hover:bg-purple-700 text-white"
}`}
}`}
>
{isSubmitting ? "Sending..." : "Send"}
<Send className="w-4 h-4" />
Expand All @@ -337,11 +314,10 @@ function Contact() {
{/* Success Popup */}
{showPopup && (
<div
className={`fixed top-4 sm:top-6 left-1/2 transform -translate-x-1/2 z-50 w-[90%] sm:w-auto max-w-sm sm:max-w-md px-4 sm:px-6 py-3 sm:py-4 rounded-xl sm:rounded-2xl shadow-lg flex items-center gap-3 sm:gap-4 ${
mode === "dark"
className={`fixed top-4 sm:top-6 left-1/2 transform -translate-x-1/2 z-50 w-[90%] sm:w-auto max-w-sm sm:max-w-md px-4 sm:px-6 py-3 sm:py-4 rounded-xl sm:rounded-2xl shadow-lg flex items-center gap-3 sm:gap-4 ${mode === "dark"
? "bg-green-900 border border-green-700 text-green-100"
: "bg-green-100 border border-green-400 text-green-900"
}`}
}`}
>
<CheckCircle className="w-6 h-6 sm:w-7 sm:h-7" />
<div className="flex-1 text-xs sm:text-sm font-semibold">
Expand Down
22 changes: 13 additions & 9 deletions src/pages/Privacy/PrivacyPolicy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,20 @@
import React from 'react';
import {
FaShieldAlt, FaKey, FaDatabase, FaUserCheck, FaCheckCircle,
FaLock, FaClock, FaShareAlt, FaCookieBite, FaChild
import React, { useEffect } from 'react';
import {
FaShieldAlt, FaKey, FaDatabase, FaUserCheck, FaCheckCircle,
FaLock, FaClock, FaShareAlt, FaCookieBite, FaChild
} from 'react-icons/fa';

const PrivacyPolicy: React.FC = () => {
useEffect(() => {
window.scrollTo(0, 0);
}, []);

return (
<div className="w-full flex-1 flex flex-col items-stretch bg-gray-50 dark:bg-[#0f172a] min-h-full transition-colors duration-200 self-stretch">

{/* Centered Document Core Container */}
<div className="w-full max-w-4xl mx-auto px-6 md:px-12 py-16 text-zinc-600 dark:text-zinc-400 font-sans antialiased selection:bg-blue-500/20">

{/* Header Area */}
<div className="mb-14 pb-8 border-b border-zinc-200/80 dark:border-zinc-800/80 flex flex-col md:flex-row md:items-end md:justify-between gap-4">
<div>
Expand All @@ -30,7 +34,7 @@ const PrivacyPolicy: React.FC = () => {

{/* Document Sections */}
<div className="space-y-12">

{/* Section 1 */}
<section className="group relative">
<div className="flex flex-col sm:flex-row items-start gap-4">
Expand All @@ -44,7 +48,7 @@ const PrivacyPolicy: React.FC = () => {
<p className="text-sm md:text-base leading-7 text-zinc-600 dark:text-zinc-400">
Our GitHub Tracker system interfaces dynamically via encrypted requests using official GitHub REST and GraphQL v4 API structures. When authorizing our application, the platform requests specific parameters categorized into distinct transactional boundaries:
</p>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-2">
<div className="p-4 rounded-xl border border-zinc-200/60 dark:border-zinc-800/80 bg-white/40 dark:bg-zinc-900/30 flex items-start gap-3 shadow-sm">
<FaCheckCircle className="h-4 w-4 mt-0.5 shrink-0 text-blue-500" />
Expand Down Expand Up @@ -229,4 +233,4 @@ const PrivacyPolicy: React.FC = () => {
);
};

export default PrivacyPolicy;
export default PrivacyPolicy;
Loading