Skip to content

Commit

Permalink
Merge pull request #251 from shubhagarwal1/help
Browse files Browse the repository at this point in the history 
Add Help Page for User Assistance and Support Resources
  • Loading branch information
@rishicds
rishicds authored Oct 28, 2024
2 parents af15066 + 1f2b443 commit 43286bf
Show file tree
Hide file tree
Showing 2 changed files with 217 additions and 0 deletions.
139 changes: 139 additions & 0 deletions src/app/(pages)/helpCenter/page.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
"use client";
import React, { useState } from 'react';
import { Search, Mail, Phone, ChevronDown, ChevronUp } from 'lucide-react';

// Header Section with Search Bar and Decorative Elements
const Header = () => {
return (
<div className="relative bg-gradient-to-br from-blue-600 to-indigo-600 text-white py-20 px-6 text-center">
<h1 className="text-5xl font-bold mb-4">Help Center</h1>
<p className="text-xl font-light mb-8 max-w-lg mx-auto">
Find answers to common questions or get in touch for further assistance.
</p>
<div className="max-w-lg mx-auto flex items-center bg-white rounded-full overflow-hidden shadow-lg">
<input
type="text"
placeholder="Search for help articles..."
className="flex-grow py-3 px-4 text-gray-800 focus:outline-none"
/>
<button className="bg-blue-600 text-white px-6 py-3 hover:bg-blue-700 transition">
<Search className="w-5 h-5" />
</button>
</div>
</div>
);
};

// FAQ Section with Toggle Effect and Expand/Collapse Functionality
const FAQ = () => {
const [openIndex, setOpenIndex] = useState(null);

const faqs = [
{ question: "How can I reset my password?", answer: "To reset your password, go to the login page and click on 'Forgot password'. Follow the instructions to receive a password reset link in your email." },
{ question: "How do I update my profile information?", answer: "To update your profile, navigate to your account settings, and edit your profile information as needed." },
{ question: "What should I do if I encounter an error?", answer: "If you encounter an error, try refreshing the page. If the issue persists, reach out to our support team." },
{ question: "How do I contact customer support?", answer: "You can contact customer support via email at [email protected] or by calling our support number." },
];

const toggleFAQ = (index) => {
setOpenIndex(openIndex === index ? null : index);
};

return (
<div className="py-20 bg-gray-50">
<h2 className="text-4xl font-bold text-center text-gray-800 mb-10">Frequently Asked Questions</h2>
<div className="max-w-2xl mx-auto space-y-4">
{faqs.map((faq, index) => (
<div
key={index}
className="bg-white p-6 rounded-lg shadow-md border border-gray-200 cursor-pointer"
onClick={() => toggleFAQ(index)}
>
<div className="flex justify-between items-center">
<h3 className="text-xl font-medium text-gray-800">{faq.question}</h3>
<span className="text-gray-500">
{openIndex === index ? <ChevronUp /> : <ChevronDown />}
</span>
</div>
{openIndex === index && (
<p className="mt-4 text-gray-600">{faq.answer}</p>
)}
</div>
))}
</div>
</div>
);
};

// Resources Section with Card Links and Icons
const Resources = () => {
const resources = [
{ title: "Account & Settings", description: "Manage your account settings and update personal information.", link: "#", icon: "🔐" },
{ title: "Billing & Payments", description: "Learn about billing options and payment methods.", link: "#", icon: "💳" },
{ title: "Privacy & Security", description: "Find out how we protect your data and privacy.", link: "#", icon: "🔒" },
{ title: "Troubleshooting", description: "Get solutions to common issues and find troubleshooting answers.", link: "#", icon: "🔧" },
];

return (
<div className="py-20 bg-white text-center">
<h2 className="text-4xl font-bold text-gray-800 mb-10">Resources</h2>
<div className="max-w-6xl mx-auto flex flex-wrap gap-8 justify-center px-6">
{resources.map((resource, index) => (
<div key={index} className="bg-gray-50 rounded-lg shadow-lg p-6 w-72 text-left hover:bg-blue-50 transition">
<span className="text-4xl mb-2 block">{resource.icon}</span>
<h3 className="text-2xl font-semibold text-gray-800 mb-2">{resource.title}</h3>
<p className="text-gray-600 mb-4">{resource.description}</p>
<a
href={resource.link}
className="text-blue-600 font-medium hover:text-blue-800 transition"
>
Learn More
</a>
</div>
))}
</div>
</div>
);
};

// Contact Support Section with Contact Cards and Icons
const ContactSupport = () => {
return (
<div className="py-20 bg-gray-100 text-center">
<h2 className="text-4xl font-bold text-gray-800 mb-6">Need More Help?</h2>
<p className="text-lg text-gray-600 mb-10 max-w-xl mx-auto">
If you can't find the answer you're looking for, feel free to contact our support team.
</p>
<div className="flex flex-wrap gap-10 justify-center">
<div className="bg-white p-6 rounded-lg shadow-lg flex items-center space-x-4 w-80">
<Mail className="w-10 h-10 text-blue-600" />
<div>
<h3 className="text-xl font-semibold text-gray-800">Email Us</h3>
<p className="text-gray-600">[email protected]</p>
</div>
</div>
<div className="bg-white p-6 rounded-lg shadow-lg flex items-center space-x-4 w-80">
<Phone className="w-10 h-10 text-blue-600" />
<div>
<h3 className="text-xl font-semibold text-gray-800">Call Us</h3>
<p className="text-gray-600">1-800-123-4567</p>
</div>
</div>
</div>
</div>
);
};

// Main Help Center Page Component
const HelpCenterPage = () => {
return (
<div>
<Header />
<FAQ />
<Resources />
<ContactSupport />
</div>
);
};

export default HelpCenterPage;
78 changes: 78 additions & 0 deletions src/app/(pages)/participation-terms/page.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import React from 'react';

// Terms Content Section
const TermsContent = () => (
<div className="px-6 py-12 max-w-4xl mx-auto text-gray-800">
<h1 className="text-3xl font-bold mb-6">GDG Event Participation Terms</h1>
<p className="mb-6">
Welcome to the Google Developer Group program site. Thanks for your interest in participating in a local GDG event.
</p>
<p className="mb-6">
Please read these GDG Event Participation terms (the “Terms”) carefully because they are the agreement between you and Google.
By using or logging into gdg.community.dev (the “Site”) or participating in any GDG event you confirm that you understand and agree to these Terms.
</p>
<p className="mb-6">
Google may change these Terms from time to time. Revised Terms will be posted to the Site.
</p>

<h2 className="text-2xl font-semibold mt-8 mb-4">GDG Community Entities</h2>
<p className="mb-6">
Please note that GDG chapters and GDG events are not hosted, organized, or run by Google or its affiliates. GDG chapters and GDG events are run by independent
community organizers who are passionate about Google, our services and products. GDG community organizers are not agents or employees of Google and are not
compensated by Google. The views expressed by GDG community organizers (or expressed by any other GDG members) do not necessarily reflect the views of Google.
</p>

<h2 className="text-2xl font-semibold mt-8 mb-4">Meeting Conduct</h2>
<p className="mb-6">
While GDG events have different purposes, all GDG organizers, GDG chapter members and attendees should maintain a friendly, safe, supportive and harassment-free environment
and follow posted and/or applicable event guidelines, including the global community code of conduct.
</p>
<p className="mb-6">
Unacceptable behavior will not be tolerated. Anyone engaged in unacceptable behavior may be exited from the GDG(s), Site(s) or resources, including future event participation.
Unacceptable behavior may also result in prohibition from registering for or attending future GDG events.
</p>

<h2 className="text-2xl font-semibold mt-8 mb-4">Assumption of Risk</h2>
<p className="mb-6">
Your participation in and attendance of a GDG event or any related activities is completely voluntary. To the maximum extent permitted under applicable law, you accept and
assume all risks of any and all personal injury or damage to your personal property that you may face while attending a GDG event or related activities, and waive any claims
against Google relating to such risks.
</p>

<h2 className="text-2xl font-semibold mt-8 mb-4">Photo, Video and Other Media</h2>
<p className="mb-6">
GDG organizers, members, other GDG event attendees and/or Google may photograph, record (both audio and video), webcast, podcast during a GDG event. Your image, likeness,
voice, statements and other identifying characteristics may be captured and transmitted as a result. By attending and participating in a GDG event where such recording
is taking place, as well as agreeing to these Terms, you authorize the recording and agree that Google may use such recorded content for any purpose without compensation
to you.
</p>

<h2 className="text-2xl font-semibold mt-8 mb-4">Email Settings</h2>
<p className="mb-6">
By joining a GDG event you may receive service-related emails regarding your participation in the GDG event, the GDG program and related activities from Google.
</p>
<p className="mb-6">
You can unsubscribe from emails sent by a GDG chapter at any time by navigating to your GDG Member profile on the Site and adjusting your Updates settings or by using
the opt-out mechanism in the footer of the GDG chapter email. If you unsubscribe from GDG chapter emails you may still receive emails for GDG events in which you agree to participate.
</p>

<h2 className="text-2xl font-semibold mt-8 mb-4">Data Processing</h2>
<p className="mb-6">
By submitting your data on the Site at gdg.community.dev, you agree to have your event RSVP information collected by Google to share with local GDG organizers for the purpose
of administering each GDG event. Google will use any information that you provide in connection with the GDG program in accordance with Google's Privacy Policy.
</p>

<p className="mt-8 text-sm text-gray-500">These Terms were last updated on June 12, 2020.</p>
</div>
);

// Main GDG Event Participation Terms Page Component
const GDGEventParticipationTermsPage = () => {
return (
<div>
<TermsContent />
</div>
);
};

export default GDGEventParticipationTermsPage;

0 comments on commit 43286bf

Please sign in to comment.