Merge version_4_1782384188447 into main

Merge version_4_1782384188447 into main

src/index.css

@@ -5,15 +5,15 @@
 
 :root {
   /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #f5faff;
-  --card: #ffffff;
-  --foreground: #001122;
-  --primary-cta: #15479c;
-  --primary-cta-text: #f5faff;
-  --secondary-cta: #ffffff;
-  --secondary-cta-text: #001122;
-  --accent: #a8cce8;
-  --background-accent: #7ba3cf;
+  --background: #f6f0e9;
+  --card: #efe7dd;
+  --foreground: #2b180a;
+  --primary-cta: #ff6207;
+  --primary-cta-text: #f6f0e9;
+  --secondary-cta: #2b180a;
+  --secondary-cta-text: #f6f0e9;
+  --accent: #94877c;
+  --background-accent: #afa094;
 
   /* @layout/border-radius/rounded */
   --radius: 1.5rem;

src/pages/HomePage.tsx

@@ -1,147 +1,36 @@
-import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
-import FeaturesTaggedCards from '@/components/sections/features/FeaturesTaggedCards';
-import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
-import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
-import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
-import TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+// AUTO-GENERATED shell by per-section-migrate.
+// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
+// files directly. Non-block content (wrappers, non-inlinable sections) is
+// preserved inline; extracted section blocks become <XSection/> refs.
 
-export default function HomePage() {
+import React from 'react';
+import HeroSection from './HomePage/sections/Hero';
+import MetricsSection from './HomePage/sections/Metrics';
+import FaqSection from './HomePage/sections/Faq';
+import SocialSection from './HomePage/sections/Social';
+import ContactSection from './HomePage/sections/Contact';
+
+
+import ResultSearchSection from './HomePage/sections/ResultSearch';
+import ProgressionStoriesSection from './HomePage/sections/ProgressionStories';
+import ReviewsSection from './HomePage/sections/Reviews';export default function HomePage(): React.JSX.Element {
   return (
-    <>
-      <div id="hero" data-section="hero">
-        <SectionErrorBoundary name="hero">
-          <HeroBillboardCarousel
-            tag="Secure Academic Portal"
-            title="Find Your Results in Seconds"
-            description="Enter your AG number to view your complete academic performance. Quick, secure, and always available."
-            primaryButton={{ text: "Search Results", href: "#contact" }}
-            secondaryButton={{ text: "Learn More", href: "#about" }}
-            items={[
-              { imageSrc: "http://img.b2bpic.net/free-photo/room-interior-design_23-2148899442.jpg" },
-              { imageSrc: "http://img.b2bpic.net/free-photo/students-studying-sunny-day_23-2147850716.jpg" },
-              { imageSrc: "http://img.b2bpic.net/free-photo/agronomist-examines-growing-melon-seedlings-farm-farmers-researchers-analysis-plant_1150-10620.jpg" },
-              { imageSrc: "http://img.b2bpic.net/free-photo/3d-motion-flow-background-with-digital-particles_1048-12441.jpg" },
-              { imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-bright-sunny-room-with-windows-tv-tables-many-cells_181624-13692.jpg" },
-              { imageSrc: "http://img.b2bpic.net/free-photo/front-view-colleagues-screaming-happiness_23-2148232806.jpg" },
-            ]}
-          />
-        </SectionErrorBoundary>
-      </div>
+<>
+      <HeroSection />
 
-      <div id="features" data-section="features">
-        <SectionErrorBoundary name="features">
-          <FeaturesTaggedCards
-            tag="How it works"
-            title="Streamlined Access"
-            description="Our platform provides instant, secure access to your academic journey."
-            items={[
-              {
-                tag: "Step 1",                title: "Enter AG Number",                description: "Simply input your registered AG roll number into the search field.",                primaryButton: { text: "Start", href: "#" },
-                imageSrc: "http://img.b2bpic.net/free-photo/close-up-adult-male-enjoying-remote-work_23-2148475605.jpg"
-              },
-              {
-                tag: "Step 2",                title: "Instant Verification",                description: "Our secure backend validates your credentials in real-time.",                primaryButton: { text: "Learn More", href: "#" },
-                imageSrc: "http://img.b2bpic.net/free-photo/supervisor-doing-server-diagnostic-test_482257-84917.jpg"
-              },
-              {
-                tag: "Step 3",                title: "View Performance",                description: "Retrieve comprehensive academic grades and course history.",                primaryButton: { text: "Check Now", href: "#" },
-                imageSrc: "http://img.b2bpic.net/free-photo/data-analysis-analytics-information-report-concept_53876-121035.jpg"
-              },
-            ]}
-          />
-        </SectionErrorBoundary>
-      </div>
 
-      <div id="about" data-section="about">
-        <SectionErrorBoundary name="about">
-          <AboutFeaturesSplit
-            tag="Our Commitment"
-            title="Academic Transparency"
-            description="We believe in providing students with easy, transparent access to their performance metrics."
-            items={[
-              { icon: "ShieldCheck", title: "Secure Data", description: "Your results are encrypted and protected at all times." },
-              { icon: "Clock", title: "Available 24/7", description: "Access your academic portal whenever you need it." },
-              { icon: "Award", title: "Accurate Reporting", description: "Verified grades straight from the registrar database." },
-            ]}
-            imageSrc="http://img.b2bpic.net/free-photo/real-estate-agent-presenting-property-investment-opportunity_482257-113440.jpg"
-          />
-        </SectionErrorBoundary>
-      </div>
 
-      <div id="metrics" data-section="metrics">
-        <SectionErrorBoundary name="metrics">
-          <MetricsMediaCards
-            tag="Institutional Reach"
-            title="Impact at Scale"
-            description="Empowering students across the faculty."
-            metrics={[
-              { value: "15,000+", title: "Active Students", description: "Currently using the platform to track performance.", imageSrc: "http://img.b2bpic.net/free-photo/people-sitting-wooden-bench-outside_23-2147657171.jpg" },
-              { value: "99.9%", title: "Uptime", description: "Reliable access during examination seasons.", imageSrc: "http://img.b2bpic.net/free-photo/optical-fiber-background_23-2149301539.jpg" },
-              { value: "50+", title: "Departments", description: "Covering the entire range of agricultural studies.", imageSrc: "http://img.b2bpic.net/free-photo/people-studying-college_23-2147678837.jpg" },
-            ]}
-          />
-        </SectionErrorBoundary>
-      </div>
+      <MetricsSection />
 
-      <div id="testimonials" data-section="testimonials">
-        <SectionErrorBoundary name="testimonials">
-          <TestimonialRatingCards
-            tag="Student Feedback"
-            title="What Students Say"
-            description="Hear from those who rely on our portal for their records."
-            testimonials={[
-              { name: "Ali Khan", role: "Senior", quote: "The portal is so fast, I get my results in seconds.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-afro-latin-man-smiling-while-standing-outdoors-street_58466-15613.jpg" },
-              { name: "Sara Ahmed", role: "Junior", quote: "Easy to navigate and very reliable during exams.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-student-girl-against-brick-wall_1163-2508.jpg" },
-              { name: "Bilal Ahmed", role: "Freshman", quote: "Clear dashboard showing all my course history.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/hispanic-young-man-smiling-wearing-headphones-university-campus_839833-11696.jpg" },
-              { name: "Mariam Ali", role: "Junior", quote: "Saved me a lot of time visiting the office.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-man-with-notebook-book_23-2147844900.jpg" },
-              { name: "Usman Tariq", role: "Senior", quote: "Simply the best improvement in our university IT.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-delighted-hipster-male-student-with-crisp-hair_176532-8157.jpg" },
-            ]}
-          />
-        </SectionErrorBoundary>
-      </div>
 
-      <div id="faq" data-section="faq">
-        <SectionErrorBoundary name="faq">
-          <FaqTwoColumn
-            tag="Common Questions"
-            title="Help Center"
-            description="Find answers to frequently asked questions about result lookups."
-            items={[
-              { question: "What if I forget my AG number?", answer: "Contact the registrar office with your student ID." },
-              { question: "Can I download my marksheet?", answer: "Yes, PDF download is available once results are published." },
-              { question: "Are results final?", answer: "They are provisional until officially declared by the university." },
-              { question: "Is the system secure?", answer: "We use end-to-end encryption for all lookups." },
-            ]}
-          />
-        </SectionErrorBoundary>
-      </div>
+      <FaqSection />
 
-      <div id="social" data-section="social">
-        <SectionErrorBoundary name="social">
-          <SocialProofMarquee
-            tag="Partnered With"
-            title="Our Network"
-            description="Collaborating for excellence across the board."
-            names={[
-              "Faisalabad Agri Union",              "National Research Council",              "Global Agriculture Tech",              "AgriSkills Institute",              "Academic Excellence Group",              "Future Farmers of Pakistan",              "Data Solutions Corp"
-            ]}
-          />
-        </SectionErrorBoundary>
-      </div>
+      <SocialSection />
 
-      <div id="contact" data-section="contact">
-        <SectionErrorBoundary name="contact">
-          <ContactCta
-            tag="Search Results"
-            text="Ready to view your academic progress? Enter your details to begin."
-            primaryButton={{ text: "Search Portal", href: "#" }}
-            secondaryButton={{ text: "Support", href: "#" }}
-          />
-        </SectionErrorBoundary>
-      </div>
+      <ContactSection />
+          <ResultSearchSection />
+          <ProgressionStoriesSection />
+          <ReviewsSection />
     </>
   );
 }

src/pages/HomePage/sections/Contact.tsx

@@ -0,0 +1,21 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "contact" section.
+
+import React from 'react';
+import ContactCta from '@/components/sections/contact/ContactCta';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ContactSection(): React.JSX.Element {
+  return (
+    <div id="contact" data-section="contact">
+            <SectionErrorBoundary name="contact">
+              <ContactCta
+                tag="Search Results"
+                text="Ready to view your academic progress? Enter your details to begin."
+                primaryButton={{ text: "Search Portal", href: "#" }}
+                secondaryButton={{ text: "Support", href: "#" }}
+              />
+            </SectionErrorBoundary>
+          </div>
+  );
+}

src/pages/HomePage/sections/Faq.tsx

@@ -0,0 +1,26 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "faq" section.
+
+import React from 'react';
+import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FaqSection(): React.JSX.Element {
+  return (
+    <div id="faq" data-section="faq">
+            <SectionErrorBoundary name="faq">
+              <FaqTwoColumn
+                tag="Common Questions"
+                title="Help Center"
+                description="Find answers to frequently asked questions about result lookups."
+                items={[
+                  { question: "What if I forget my AG number?", answer: "Contact the registrar office with your student ID." },
+                  { question: "Can I download my marksheet?", answer: "Yes, PDF download is available once results are published." },
+                  { question: "Are results final?", answer: "They are provisional until officially declared by the university." },
+                  { question: "Is the system secure?", answer: "We use end-to-end encryption for all lookups." },
+                ]}
+              />
+            </SectionErrorBoundary>
+          </div>
+  );
+}

src/pages/HomePage/sections/Hero.tsx

@@ -0,0 +1,30 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "hero" section.
+
+import React from 'react';
+import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div id="hero" data-section="hero">
+            <SectionErrorBoundary name="hero">
+              <HeroBillboardCarousel
+                tag="Secure Academic Portal"
+                title="Find Your Results in Seconds"
+                description="Enter your AG number to view your complete academic performance. Quick, secure, and always available."
+                primaryButton={{ text: "Search Results", href: "#contact" }}
+                secondaryButton={{ text: "Learn More", href: "#about" }}
+                items={[
+                  { imageSrc: "http://img.b2bpic.net/free-photo/room-interior-design_23-2148899442.jpg" },
+                  { imageSrc: "http://img.b2bpic.net/free-photo/students-studying-sunny-day_23-2147850716.jpg" },
+                  { imageSrc: "http://img.b2bpic.net/free-photo/agronomist-examines-growing-melon-seedlings-farm-farmers-researchers-analysis-plant_1150-10620.jpg" },
+                  { imageSrc: "http://img.b2bpic.net/free-photo/3d-motion-flow-background-with-digital-particles_1048-12441.jpg" },
+                  { imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-bright-sunny-room-with-windows-tv-tables-many-cells_181624-13692.jpg" },
+                  { imageSrc: "http://img.b2bpic.net/free-photo/front-view-colleagues-screaming-happiness_23-2148232806.jpg" },
+                ]}
+              />
+            </SectionErrorBoundary>
+          </div>
+  );
+}

src/pages/HomePage/sections/Metrics.tsx

@@ -0,0 +1,25 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "metrics" section.
+
+import React from 'react';
+import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function MetricsSection(): React.JSX.Element {
+  return (
+    <div id="metrics" data-section="metrics">
+            <SectionErrorBoundary name="metrics">
+              <MetricsMediaCards
+                tag="Institutional Reach"
+                title="Impact at Scale"
+                description="Empowering students across the faculty."
+                metrics={[
+                  { value: "15,000+", title: "Active Students", description: "Currently using the platform to track performance.", imageSrc: "http://img.b2bpic.net/free-photo/people-sitting-wooden-bench-outside_23-2147657171.jpg" },
+                  { value: "99.9%", title: "Uptime", description: "Reliable access during examination seasons.", imageSrc: "http://img.b2bpic.net/free-photo/optical-fiber-background_23-2149301539.jpg" },
+                  { value: "50+", title: "Departments", description: "Covering the entire range of agricultural studies.", imageSrc: "http://img.b2bpic.net/free-photo/people-studying-college_23-2147678837.jpg" },
+                ]}
+              />
+            </SectionErrorBoundary>
+          </div>
+  );
+}

src/pages/HomePage/sections/ProgressionStories.tsx

@@ -0,0 +1,72 @@
+import { motion } from "motion/react";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import TextAnimation from "@/components/ui/TextAnimation";
+import Tag from "@/components/ui/Tag";
+import Button from "@/components/ui/Button";
+
+export default function ProgressionStories() {
+  const images = [
+    "https://images.unsplash.com/photo-1523050854058-8df90110c9f1?auto=format&fit=crop&w=800&q=80",
+    "https://images.unsplash.com/photo-1541339907198-e08756dedf3f?auto=format&fit=crop&w=800&q=80",
+    "https://images.unsplash.com/photo-1523240795612-9a054b0db644?auto=format&fit=crop&w=800&q=80",
+    "https://images.unsplash.com/photo-1511629091441-ee46146481b6?auto=format&fit=crop&w=800&q=80",
+    "https://images.unsplash.com/photo-1627556592933-ffe99c1c9cd0?auto=format&fit=crop&w=800&q=80"
+  ];
+
+  return (
+    <section className="relative w-full py-24 bg-background overflow-hidden" data-webild-section="progression-stories">
+      <div className="w-content-width mx-auto">
+        <div className="flex flex-col items-center text-center mb-16">
+          <ScrollReveal variant="fade">
+            <Tag text="Student Success" className="mb-6" />
+          </ScrollReveal>
+          <TextAnimation
+            text="Progression Stories"
+            variant="slide-up"
+            gradientText={false}
+            tag="h2"
+            className="text-4xl md:text-5xl font-bold text-foreground mb-6"
+          />
+          <ScrollReveal variant="fade" delay={0.1}>
+            <p className="text-lg text-accent max-w-2xl">
+              See our graduates holding their degrees with pride after years of hard work and dedication.
+            </p>
+          </ScrollReveal>
+        </div>
+
+        <div className="relative h-[600px] w-full flex items-center justify-center perspective-[1000px]">
+          {images.map((src, index) => {
+            const rotation = (index - 2) * 15;
+            const zIndex = 5 - Math.abs(index - 2);
+            const scale = 1 - Math.abs(index - 2) * 0.1;
+            const xOffset = (index - 2) * 150;
+
+            return (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, y: 50 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.8, delay: index * 0.1 }}
+                className="absolute w-64 h-96 rounded-xl overflow-hidden shadow-2xl"
+                style={{
+                  zIndex,
+                  transform: `translateX(${xOffset}px) rotateY(${rotation}deg) scale(${scale})`,
+                  transformStyle: "preserve-3d"
+                }}
+              >
+                <img src={src} alt="Graduate" className="w-full h-full object-cover" />
+                <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
+              </motion.div>
+            );
+          })}
+        </div>
+
+        <ScrollReveal variant="fade" delay={0.4} className="mt-16 flex justify-center gap-4">
+          <Button text="View Alumni" variant="primary" />
+          <Button text="Read Stories" variant="secondary" />
+        </ScrollReveal>
+      </div>
+    </section>
+  );
+}

src/pages/HomePage/sections/ResultSearch.tsx

@@ -0,0 +1,187 @@
+import { useState } from "react";
+import { motion } from "motion/react";
+import Button from "@/components/ui/Button";
+import Input from "@/components/ui/Input";
+import Card from "@/components/ui/Card";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import Spinner from "@/components/ui/Spinner";
+import { Search, GraduationCap, BookOpen, Award } from "lucide-react";
+
+export default function ResultSearch() {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [hasSearched, setHasSearched] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (searchQuery.trim().toLowerCase() === "2025-ag-11653") {
+      setIsLoading(true);
+      setHasSearched(false);
+      setTimeout(() => {
+        setIsLoading(false);
+        setHasSearched(true);
+      }, 5000);
+    } else if (searchQuery.trim() !== "") {
+      alert("Please enter a valid AG No. (e.g., 2025-ag-11653)");
+      setHasSearched(false);
+    }
+  };
+
+  const semester1 = [
+    { code: "SOC-311", credit: "2(2-0)", marks: "32", grade: "A" },
+    { code: "PY-305", credit: "3(2-1)", marks: "39", grade: "B" },
+    { code: "MATH-408", credit: "3(3-0)", marks: "35", grade: "C" },
+    { code: "ECON-305", credit: "2(2-0)", marks: "31", grade: "B" },
+    { code: "FA-310", credit: "2(2-0)", marks: "18", grade: "D" },
+    { code: "CS-305", credit: "3(2-1)", marks: "39", grade: "B" },
+    { code: "SSH-302", credit: "2(2-0)", marks: "30", grade: "B" },
+  ];
+
+  const semester2 = [
+    { code: "Stat 408", credit: "3(3-0)", marks: "28", grade: "D" },
+    { code: "CS 306", credit: "3(3-0)", marks: "41", grade: "B" },
+    { code: "MATH 404", credit: "3(3-0)", marks: "39", grade: "B" },
+    { code: "IS 401", credit: "2(2-0)", marks: "32", grade: "A" },
+    { code: "ENG 307", credit: "3(3-0)", marks: "42", grade: "B" },
+    { code: "Stat 408", credit: "3(3-0)", marks: "28", grade: "C" },
+    { code: "PHY 305", credit: "3(3-0)", marks: "38", grade: "C" },
+  ];
+
+  return (
+    <section className="relative w-full bg-background" id="lookup" data-webild-section="result-search">
+      <div className="w-content-width mx-auto">
+        <ScrollReveal variant="fade">
+          <div className="text-center max-w-content-width mx-auto">
+            <h2 className="text-4xl font-bold text-foreground mb-4">Student Results Portal</h2>
+            <p className="text-lg text-accent">Enter your AG number to view your complete academic performance.</p>
+          </div>
+        </ScrollReveal>
+
+        <ScrollReveal variant="fade" delay={0.1}>
+          <Card className="max-w-content-width mx-auto p-8 card border border-primary-cta shadow-lg">
+            <form onSubmit={handleSearch} className="flex flex-col sm:flex-row gap-4">
+              <div className="flex-1 relative">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-accent" />
+                <Input 
+                  type="text" 
+                  placeholder="Enter AG No. (e.g., 2025-ag-11653)" 
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="w-full border-primary-cta/30 focus:border-primary-cta"
+                  required
+                />
+              </div>
+              <Button text="Search Results" variant="primary" onClick={() => {}} className="w-full sm:w-auto" />
+            </form>
+          </Card>
+        </ScrollReveal>
+
+        {isLoading && (
+          <div className="flex flex-col items-center justify-center py-12 space-y-4">
+            <Spinner size="lg" className="text-primary-cta" />
+            <p className="text-accent font-medium animate-pulse">Retrieving academic records...</p>
+          </div>
+        )}
+
+        {hasSearched && !isLoading && (
+          <ScrollReveal variant="fade" delay={0.2}>
+            <div className="max-w-content-width mx-auto space-y-8">
+              {/* Section 1: Student Info */}
+              <Card className="p-6 sm:p-8 border-l-4 border-primary-cta card shadow-md">
+                <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+                  <div className="flex items-center gap-4">
+                    <div className="w-16 h-16 rounded-full bg-primary-cta/10 flex items-center justify-center text-primary-cta">
+                      <GraduationCap className="w-8 h-8" />
+                    </div>
+                    <div>
+                      <h3 className="text-2xl font-bold text-foreground">MUHAMMAD SARAM</h3>
+                      <p className="text-accent font-mono">AG No: 2025-ag-11653</p>
+                    </div>
+                  </div>
+                  <div className="text-right">
+                    <p className="text-sm text-accent uppercase tracking-wider font-semibold">Cumulative GPA</p>
+                    <p className="text-4xl font-bold text-primary-cta">2.97</p>
+                  </div>
+                </div>
+              </Card>
+
+              <div className="grid md:grid-cols-2 gap-8">
+                {/* Section 2: 1st Semester */}
+                <Card className="p-6 sm:p-8 card shadow-md border border-background-accent">
+                  <div className="flex items-center gap-3 mb-6 pb-4 border-b border-background-accent/30">
+                    <BookOpen className="w-6 h-6 text-primary-cta" />
+                    <h4 className="text-xl font-bold text-foreground">1st Semester</h4>
+                  </div>
+                  
+                  <div className="overflow-x-auto">
+                    <table className="w-full text-sm text-left">
+                      <thead className="text-xs text-accent uppercase bg-background-accent/10">
+                        <tr>
+                          <th className="px-4 py-3 rounded-tl">Course</th>
+                          <th className="px-4 py-3">Cr.Hr</th>
+                          <th className="px-4 py-3">Marks</th>
+                          <th className="px-4 py-3 rounded-tr">Grade</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {semester1.map((item, idx) => (
+                          <tr key={idx} className="border-b border-background-accent/10 last:border-0">
+                            <td className="px-4 py-3 font-medium text-foreground">{item.code}</td>
+                            <td className="px-4 py-3 text-accent">{item.credit}</td>
+                            <td className="px-4 py-3 text-accent">{item.marks}</td>
+                            <td className="px-4 py-3 font-bold text-primary-cta">{item.grade}</td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                  
+                  <div className="mt-6 pt-4 border-t border-background-accent/30 flex justify-between items-center">
+                    <span className="font-semibold text-foreground">Semester GPA</span>
+                    <span className="text-2xl font-bold text-primary-cta">3.00</span>
+                  </div>
+                </Card>
+
+                {/* Section 3: 2nd Semester */}
+                <Card className="p-6 sm:p-8 card shadow-md border border-background-accent">
+                  <div className="flex items-center gap-3 mb-6 pb-4 border-b border-background-accent/30">
+                    <Award className="w-6 h-6 text-primary-cta" />
+                    <h4 className="text-xl font-bold text-foreground">2nd Semester</h4>
+                  </div>
+                  
+                  <div className="overflow-x-auto">
+                    <table className="w-full text-sm text-left">
+                      <thead className="text-xs text-accent uppercase bg-background-accent/10">
+                        <tr>
+                          <th className="px-4 py-3 rounded-tl">Course</th>
+                          <th className="px-4 py-3">Cr.Hr</th>
+                          <th className="px-4 py-3">Marks</th>
+                          <th className="px-4 py-3 rounded-tr">Grade</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {semester2.map((item, idx) => (
+                          <tr key={idx} className="border-b border-background-accent/10 last:border-0">
+                            <td className="px-4 py-3 font-medium text-foreground">{item.code}</td>
+                            <td className="px-4 py-3 text-accent">{item.credit}</td>
+                            <td className="px-4 py-3 text-accent">{item.marks}</td>
+                            <td className="px-4 py-3 font-bold text-primary-cta">{item.grade}</td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                  
+                  <div className="mt-6 pt-4 border-t border-background-accent/30 flex justify-between items-center">
+                    <span className="font-semibold text-foreground">Semester GPA</span>
+                    <span className="text-2xl font-bold text-primary-cta">2.95</span>
+                  </div>
+                </Card>
+              </div>
+            </div>
+          </ScrollReveal>
+        )}
+      </div>
+    </section>
+  );
+}

src/pages/HomePage/sections/Reviews.tsx

@@ -0,0 +1,80 @@
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import TextAnimation from "@/components/ui/TextAnimation";
+import Tag from "@/components/ui/Tag";
+import Card from "@/components/ui/Card";
+import RatingStars from "@/components/ui/RatingStars";
+
+export default function Reviews() {
+  const testimonials = [
+    {
+      name: "Sarah Ahmed",
+      role: "Computer Science Graduate",
+      company: "Tech Solutions",
+      rating: 5,
+      imageSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=800&q=80",
+      quote: "The results portal made it incredibly easy to track my progress throughout my degree. The interface is clean and finding my grades was always just a click away."
+    },
+    {
+      name: "Ali Khan",
+      role: "Agriculture Student",
+      company: "AgriTech",
+      rating: 5,
+      imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=800&q=80",
+      quote: "I love how quickly I can access my semester results. The breakdown of grades and GPA calculation is very clear and helpful for planning my next semester."
+    },
+    {
+      name: "Fatima Noor",
+      role: "Mathematics Major",
+      company: "Data Corp",
+      rating: 4,
+      imageSrc: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=800&q=80",
+      quote: "A very reliable system. I never had any issues logging in with my AG number and retrieving my academic records. Highly recommended for all students."
+    }
+  ];
+
+  return (
+    <section className="relative w-full py-24 bg-background" data-webild-section="reviews">
+      <div className="w-content-width mx-auto">
+        <div className="flex flex-col items-center text-center mb-16">
+          <ScrollReveal variant="fade">
+            <Tag text="Reviews" className="mb-6" />
+          </ScrollReveal>
+          <TextAnimation
+            text="What Our Students Say"
+            variant="slide-up"
+            gradientText={false}
+            tag="h2"
+            className="text-4xl md:text-5xl font-bold text-foreground mb-6"
+          />
+          <ScrollReveal variant="fade" delay={0.1}>
+            <p className="text-lg text-accent max-w-2xl">
+              Read reviews from our students about their academic journey and the ease of accessing their results.
+            </p>
+          </ScrollReveal>
+        </div>
+
+        <div className="grid md:grid-cols-3 gap-8">
+          {testimonials.map((testimonial, index) => (
+            <ScrollReveal variant="fade" key={index} delay={index * 0.1}>
+              <Card className="p-8 h-full flex flex-col">
+                <RatingStars rating={testimonial.rating} className="mb-6" />
+                <p className="text-foreground text-lg mb-8 flex-grow">"{testimonial.quote}"</p>
+                <div className="flex items-center gap-4 mt-auto">
+                  <img 
+                    src={testimonial.imageSrc} 
+                    alt={testimonial.name} 
+                    className="w-12 h-12 rounded-full object-cover"
+                  />
+                  <div>
+                    <h4 className="font-bold text-foreground">{testimonial.name}</h4>
+                    <p className="text-sm text-accent">{testimonial.role}</p>
+                  </div>
+                </div>
+              </Card>
+            </ScrollReveal>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

src/pages/HomePage/sections/Social.tsx

@@ -0,0 +1,23 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "social" section.
+
+import React from 'react';
+import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function SocialSection(): React.JSX.Element {
+  return (
+    <div id="social" data-section="social">
+            <SectionErrorBoundary name="social">
+              <SocialProofMarquee
+                tag="Partnered With"
+                title="Our Network"
+                description="Collaborating for excellence across the board."
+                names={[
+                  "Faisalabad Agri Union",              "National Research Council",              "Global Agriculture Tech",              "AgriSkills Institute",              "Academic Excellence Group",              "Future Farmers of Pakistan",              "Data Solutions Corp"
+                ]}
+              />
+            </SectionErrorBoundary>
+          </div>
+  );
+}