test

1"use client";
2
3import { useEffect, useState } from "react";
4import Navbar from "@/components/Navbar";
5import HeroWave from "@/components/HeroWave";
6import EditorialVision from "@/components/EditorialVision";
7import DivisionCardStack from "@/components/DivisionCardStack";
8import ShowcaseFrame from "@/components/ShowcaseFrame";
9import ArmyOfBuilders from "@/components/ArmyOfBuilders";
10import FaqAccordion from "@/components/FaqAccordion";
11import BlogGrid from "@/components/BlogGrid";
12import Footer from "@/components/Footer";
13import DottedLogoMarquee from "@/components/DottedLogoMarquee";
14import FacultyTestimonial from "@/components/FacultyTestimonial";
15import { motion, AnimatePresence } from "framer-motion";
16
17const jumpSectionIds = ["home", "community", "faculty", "about", "divisions", "showcase", "builders", "faq", "blog", "join", "footer"] as const;
18
19export default function Home() {
20  const [isControlsHovered, setIsControlsHovered] = useState(false);
21  const [activeSectionIndex, setActiveSectionIndex] = useState(0);
22
23  useEffect(() => {
24    // A plain homepage visit should always begin at the hero. Keep hash links
25    // working so intentional navigation such as /#showcase still lands there.
26    if (window.location.hash) return;
27
28    const previousScrollRestoration = window.history.scrollRestoration;
29    window.history.scrollRestoration = "manual";
30
31    const scrollToTop = () => window.scrollTo({ top: 0, left: 0, behavior: "auto" });
32    scrollToTop();
33    const frame = requestAnimationFrame(scrollToTop);
34
35    return () => {
36      cancelAnimationFrame(frame);
37      window.history.scrollRestoration = previousScrollRestoration;
38    };
39  }, []);
40
41  useEffect(() => {
42    let frame = 0;
43    const updateActiveSection = () => {
44      cancelAnimationFrame(frame);
45      frame = requestAnimationFrame(() => {
46        const marker = window.scrollY + window.innerHeight * 0.38;
47        let current = 0;
48        jumpSectionIds.forEach((id, index) => {
49          const section = document.getElementById(id);
50          if (section && section.getBoundingClientRect().top + window.scrollY <= marker) current = index;
51        });
52        setActiveSectionIndex(current);
53      });
54    };
55
56    updateActiveSection();
57    window.addEventListener("scroll", updateActiveSection, { passive: true });
58    window.addEventListener("resize", updateActiveSection);
59    return () => {
60      cancelAnimationFrame(frame);
61      window.removeEventListener("scroll", updateActiveSection);
62      window.removeEventListener("resize", updateActiveSection);
63    };
64  }, []);
65
66  function jumpToSection(direction: 1 | -1) {
67    const marker = window.scrollY + window.innerHeight * 0.38;
68    let current = 0;
69    jumpSectionIds.forEach((id, index) => {
70      const section = document.getElementById(id);
71      if (section && section.getBoundingClientRect().top + window.scrollY <= marker) current = index;
72    });
73
74    const next = Math.max(0, Math.min(jumpSectionIds.length - 1, current + direction));
75    const targetId = jumpSectionIds[next];
76    const target = document.getElementById(targetId);
77    if (!target || next === current) return;
78
79    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
80    const scrollOffset = window.innerWidth >= 768 ? 96 : 76;
81    const targetTop = Math.max(0, target.getBoundingClientRect().top + window.scrollY - scrollOffset);
82
83    // Stop a previous smooth jump before starting a new direction.
84    window.scrollTo({ top: window.scrollY, behavior: "auto" });
85    requestAnimationFrame(() => {
86      window.scrollTo({ top: targetTop, behavior: reduceMotion ? "auto" : "smooth" });
87    });
88    window.history.replaceState(null, "", `#${targetId}`);
89    setActiveSectionIndex(next);
90  }
91
92  return (
93    <>
94      <Navbar />
95
96      {/* 2. Hero Section */}
97      <section id="home" className="relative flex min-h-[100svh] items-center justify-center overflow-hidden px-0 pb-20 pt-28 sm:pb-24 sm:pt-32 lg:pb-28 lg:pt-36 2xl:min-h-[min(900px,100svh)] 2xl:py-40">
98        {/* Dynamic Fluid Shader Canvas Background */}
99        <HeroWave />
100
101        {/* Subtle dark vignette overlay to enhance text readability */}
102        <div className="absolute inset-0 bg-black/35 pointer-events-none" />
103
104        {/* Centered Widescreen Content Container */}
105        <div className="relative z-10 mx-auto flex w-full max-w-[1600px] flex-col items-center justify-center px-5 text-center sm:px-8 lg:px-12 2xl:px-16">
106          <div className="flex max-w-3xl flex-col items-center space-y-8 sm:space-y-10 2xl:max-w-5xl">
107            <div className="space-y-6">
108              <h1 className="text-balance font-serif text-[clamp(3.25rem,9vw,5rem)] font-normal leading-[0.98] tracking-[-0.045em] text-white sm:leading-[1.02] lg:text-[clamp(4.5rem,6.5vw,6.5rem)] 2xl:text-[7.5rem]">
109                Technology built by students.
110              </h1>
111              <p className="mx-auto max-w-2xl px-1 font-sans text-base leading-relaxed text-white/80 sm:text-lg md:text-xl 2xl:max-w-3xl 2xl:text-2xl">
112                MCCICTS is the student technology community of Mayurapada Central College—learning together, shipping real systems, and building our school&apos;s digital future.
113              </p>
114            </div>
115
116            <div className="flex w-full flex-col items-center justify-center gap-3 sm:w-auto sm:flex-row sm:gap-5">
117              <a
118                href="/join"
119                className="inline-flex w-full max-w-xs items-center justify-center rounded-full bg-white px-8 py-3.5 font-sans text-sm font-bold text-dark shadow-soft-sm transition-all duration-200 hover:bg-white/90 focus:outline-none sm:w-auto"
120              >
121                Join MCCICTS
122              </a>
123              <a
124                href="#showcase"
125                className="group relative inline-flex w-full max-w-xs items-center justify-center px-6 py-3.5 font-sans text-sm font-semibold text-white transition-colors hover:text-white/80 focus:outline-none sm:w-auto"
126              >
127                {/* Corner bracket styling around the second button */}
128                <span className="absolute top-0 left-0 w-2 h-2 border-t border-l border-white/40 group-hover:border-white transition-colors" />
129                <span className="absolute top-0 right-0 w-2 h-2 border-t border-r border-white/40 group-hover:border-white transition-colors" />
130                <span className="absolute bottom-0 left-0 w-2 h-2 border-b border-l border-white/40 group-hover:border-white transition-colors" />
131                <span className="absolute bottom-0 right-0 w-2 h-2 border-b border-r border-white/40 group-hover:border-white transition-colors" />
132                Explore our projects
133              </a>
134            </div>
135          </div>
136        </div>
137
138        {/* Bottom fade — blends hero into next section */}
139        <div className="absolute bottom-0 left-0 right-0 h-48 pointer-events-none" style={{background: 'linear-gradient(to bottom, transparent, #0A0A0A)'}} />
140
141        {/* Floating Navigation Controls (Bottom Right) */}
142        <div className="pointer-events-auto fixed bottom-6 right-6 z-50 hidden select-none items-center gap-2 font-sans sm:flex">
143          <motion.div
144            layout
145            onMouseEnter={() => setIsControlsHovered(true)}
146            onMouseLeave={() => setIsControlsHovered(false)}
147            transition={{
148              type: "spring",
149              stiffness: 300,
150              damping: 30,
151            }}
152            className={`flex items-center h-9 bg-black/35 hover:bg-black/45 backdrop-blur-md border border-white/10 rounded-full p-0.5 shadow-soft-sm overflow-hidden cursor-pointer transition-all duration-300 ${isControlsHovered ? "pl-4 pr-0.5" : "px-0.5"
153              }`}
154          >
155            <AnimatePresence initial={false}>
156              {isControlsHovered && (
157                <motion.span
158                  initial={{ opacity: 0, width: 0, marginRight: 0 }}
159                  animate={{ opacity: 1, width: "auto", marginRight: 16 }}
160                  exit={{ opacity: 0, width: 0, marginRight: 0 }}
161                  transition={{ duration: 0.2 }}
162                  className="font-mono text-[8px] tracking-[0.22em] text-white/55 font-semibold whitespace-nowrap overflow-hidden uppercase"
163                >
164                  Jump Sections
165                </motion.span>
166              )}
167            </AnimatePresence>
168
169            <div className="flex items-center gap-1.5">
170              <button
171                type="button"
172                onClick={() => jumpToSection(1)}
173                disabled={activeSectionIndex >= jumpSectionIds.length - 1}
174                className="w-7 h-7 rounded-full flex items-center justify-center bg-white/[0.04] hover:bg-white/10 transition-all text-white/65 hover:text-white/90 focus:outline-none disabled:cursor-not-allowed disabled:opacity-25"
175                aria-label="Jump to next section"
176                title="Jump to next section"
177              >
178                <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
179                  <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
180                </svg>
181              </button>
182              <button
183                type="button"
184                onClick={() => jumpToSection(-1)}
185                disabled={activeSectionIndex <= 0}
186                className="w-7 h-7 rounded-full flex items-center justify-center bg-white/[0.04] hover:bg-white/10 transition-all text-white/65 hover:text-white/90 focus:outline-none disabled:cursor-not-allowed disabled:opacity-25"
187                aria-label="Jump to previous section"
188                title="Jump to previous section"
189              >
190                <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
191                  <path strokeLinecap="round" strokeLinejoin="round" d="M5 15l7-7 7 7" />
192                </svg>
193              </button>
194            </div>
195          </motion.div>
196
197          <button
198            className="w-8 h-8 rounded-full flex items-center justify-center bg-black/35 hover:bg-black/45 backdrop-blur-md border border-white/10 shadow-soft-sm text-white/65 hover:text-white/90 transition-all focus:outline-none"
199            aria-label="Search"
200          >
201            <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
202              <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
203            </svg>
204          </button>
205        </div>
206      </section>
207
208      <DottedLogoMarquee />
209
210      <FacultyTestimonial />
211
212      <EditorialVision />
213
214      {/* 5. Divisions section */}
215      <DivisionCardStack />
216
217      {/* 6. Product showcase */}
218      <ShowcaseFrame />
219
220      {/* 7. Ecosystem section */}
221      <ArmyOfBuilders />
222
223      {/* 8. FAQ Accordion */}
224      <FaqAccordion />
225
226      {/* 9. Blog log grid */}
227      <BlogGrid />
228
229      {/* 10 & 11. Footer band and Footer */}
230      <Footer />
231    </>
232  );
233}