Skip to content

issue #272 added feature watch demo functioning gssoc25 level3 #400

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

Open
Divyasharma11245 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

issue #272 added feature watch demo functioning gssoc25 level3 #400

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
33 changes: 32 additions & 1 deletion client/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -685,4 +685,35 @@ span.doated{
padding: 10px;
}
}
/* media query end */
/* media query end */

.video-wrapper {
width: 90%;
max-width: 1000px;
margin: 20px auto;
border: 2px solid var(--bg_buttons);
border-radius: 12px;
padding: 10px;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
background: var(--bg_secondary);
}

.video-wrapper iframe {
width: 100%;
height: 550px;
border-radius: 12px;
}

.video-card {
background-color: var(--bg_secondary);
border: 1px solid var(--subtext);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
overflow: hidden;
margin: 0 auto;
}

.video-wrapper iframe {
border-radius: 15px;
}

2 changes: 2 additions & 0 deletions client/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ const Bookmarks = lazy(() => import("./pages/Bookmarks"));
const QuestionsPage = lazy(() => import("./pages/QuestionPage.jsx"));
const QuestionDetail = lazy(() => import("./components/QuestionDetail.jsx"))
const OAuthCallback = lazy(() => import("./pages/OAuthCallback"));
const DemoVideo = lazy(() => import("./pages/DemoVideo"));

// Notes components
const JavaScriptFundamentals = lazy(() => import("./pages/Notes/JavaScriptFundamentals/JavaScriptFundamentals.jsx"));
Expand Down Expand Up @@ -88,6 +89,7 @@ function App() {
<Route path="/contact" element={<ContactUs />} />
<Route path="/questions" element={<QuestionsPage />} />
<Route path="/questions/:id" element={<QuestionDetail />} />
<Route path="/demo" element={<DemoVideo />} />

{/* Notes Routes */}
<Route path="/notes" element={<NotesPage />} />
Expand Down
54 changes: 54 additions & 0 deletions client/src/pages/DemoVideo.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import React from "react";
import { motion } from "framer-motion";
import { Link } from "react-router-dom";

function DemoVideo() {
return (
<div className="container video-page">

<div className="gradient-background"></div>
<motion.div

// initial="hidden"
// animate="visible"
// transition={{ delay: 1.3 }}
className="flex items-center justify-center m-5"
>
<div className={`h-px flex-1 `}></div>
<h2 className={`text-2xl sm:text-3xl md:text-4xl font-righteous tracking-wider px-4 sm:px-8 `}>
Demo Video

</h2>
<div className={`h-px flex-1 `}></div>
</motion.div>

{/* Video Card */}
<div className="video-card mx-auto p-5 rounded-2xl shadow-xl bg-bg_secondary_light max-w-4xl">
<div className="video-wrapper relative" style={{ paddingTop: "56.25%" }}>
<iframe
className="absolute top-0 left-0 w-full h-full rounded-xl"
src="https://www.youtube.com/embed/Y8Tko2YC5hA"
title="Demo Video"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
></iframe>
</div>
</div>

{/* Back Button */}
<div className="flex justify-center m-5">
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.98 }}
className="group bg-transparent border-2 border-primary text-primary py-4 px-8 text-lg rounded-xl font-semibold transition-all duration-300 hover:bg-primary hover:text-white hover:shadow-xl inline-flex items-center gap-3"
>
<Link to="/" className="flex items-center gap-3">
<span>Back to Home</span>
</Link>
</motion.button>
</div>
</div>
);
}

export default DemoVideo;
21 changes: 20 additions & 1 deletion client/src/pages/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import { useTheme } from "../context/ThemeContext";
import { motion } from "framer-motion";
import Counter from "../utils/Counter";
import { FaArrowUp } from "react-icons/fa";


import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
Expand All @@ -23,6 +25,7 @@ function Home() {

const [isVisible, setIsVisible] = useState(false);
const [showScrollTop, setShowScrollTop] = useState(false);
const [showVideo, setShowVideo] = useState(false);

// refs for scoped GSAP
const root = useRef(null);
Expand Down Expand Up @@ -300,8 +303,10 @@ function Home() {
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.98 }}
className="group bg-transparent border-2 border-primary text-primary py-4 px-8 text-lg rounded-xl font-semibold transition-all duration-300 hover:bg-primary hover:text-white hover:shadow-xl inline-flex items-center gap-3"
>

> <Link to="/demo">
<span>Watch Demo</span>
</Link>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4 sm:h-5 sm:w-5 transform group-hover:scale-110 transition-transform"
Expand All @@ -317,6 +322,20 @@ function Home() {
</motion.button>
</motion.div>

{showVideo && (
<div className="mt-6">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="YouTube video player"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
></iframe>
</div>
)}

{/* Trust Indicators */}
<div className="mt-10 sm:mt-16">
<p
Expand Down