Merge version_2_1782382428754 into main #3
@@ -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;
|
||||
|
||||
@@ -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 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
21
src/pages/HomePage/sections/Contact.tsx
Normal file
21
src/pages/HomePage/sections/Contact.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
26
src/pages/HomePage/sections/Faq.tsx
Normal file
26
src/pages/HomePage/sections/Faq.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
30
src/pages/HomePage/sections/Hero.tsx
Normal file
30
src/pages/HomePage/sections/Hero.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
25
src/pages/HomePage/sections/Metrics.tsx
Normal file
25
src/pages/HomePage/sections/Metrics.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
72
src/pages/HomePage/sections/ProgressionStories.tsx
Normal file
72
src/pages/HomePage/sections/ProgressionStories.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
152
src/pages/HomePage/sections/ResultSearch.tsx
Normal file
152
src/pages/HomePage/sections/ResultSearch.tsx
Normal file
@@ -0,0 +1,152 @@
|
||||
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 { Search, GraduationCap, BookOpen, Award } from "lucide-react";
|
||||
|
||||
export default function ResultSearch() {
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [hasSearched, setHasSearched] = useState(false);
|
||||
|
||||
const handleSearch = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (searchQuery.trim().toLowerCase() === "2025-ag-11653") {
|
||||
setHasSearched(true);
|
||||
} else if (searchQuery.trim() !== "") {
|
||||
alert("Please enter a valid AG No. (e.g., 2025-ag-11653)");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="relative w-full py-24 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-2xl mx-auto mb-16">
|
||||
<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-xl mx-auto p-8 mb-16">
|
||||
<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 pl-10"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<Button text="Search Results" variant="primary" onClick={() => {}} className="w-full sm:w-auto" />
|
||||
</form>
|
||||
</Card>
|
||||
</ScrollReveal>
|
||||
|
||||
{hasSearched && (
|
||||
<ScrollReveal variant="fade" delay={0.2}>
|
||||
<div className="max-w-4xl mx-auto space-y-8">
|
||||
{/* Section 1: Student Info */}
|
||||
<Card className="p-6 sm:p-8 border-l-4 border-primary-cta">
|
||||
<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-background-accent 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: Spring Semester */}
|
||||
<Card className="p-6 sm:p-8">
|
||||
<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">Spring Semester (1st)</h4>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 mb-6">
|
||||
{[
|
||||
{ code: "SOC-311", cr: "2(2-0)", marks: "32", grade: "A" },
|
||||
{ code: "PY-305", cr: "3(2-1)", marks: "39", grade: "B" },
|
||||
{ code: "MATH-408", cr: "3(3-0)", marks: "35", grade: "C" },
|
||||
{ code: "ECON-305", cr: "2(2-0)", marks: "31", grade: "B" },
|
||||
{ code: "FA-310", cr: "2(2-0)", marks: "18", grade: "D" },
|
||||
{ code: "CS-305", cr: "3(2-1)", marks: "39", grade: "B" },
|
||||
{ code: "SSH-302", cr: "2(2-0)", marks: "30", grade: "B" },
|
||||
].map((course, i) => (
|
||||
<div key={i} className="flex items-center justify-between text-sm">
|
||||
<div className="flex gap-4 w-1/2">
|
||||
<span className="font-mono font-medium text-foreground w-20">{course.code}</span>
|
||||
<span className="text-accent">{course.cr}</span>
|
||||
</div>
|
||||
<div className="flex gap-4 w-1/2 justify-end">
|
||||
<span className="text-accent w-8 text-right">{course.marks}</span>
|
||||
<span className={`font-bold w-6 text-right ${course.grade === 'A' ? 'text-green-600' : course.grade === 'B' ? 'text-blue-600' : course.grade === 'C' ? 'text-yellow-600' : 'text-red-600'}`}>{course.grade}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="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-foreground">3.00</span>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Section 3: Winter Semester */}
|
||||
<Card className="p-6 sm:p-8">
|
||||
<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">Winter Semester (2nd)</h4>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 mb-6">
|
||||
{[
|
||||
{ code: "Stat 408", cr: "3(3-0)", marks: "28", grade: "D" },
|
||||
{ code: "CS 306", cr: "3(3-0)", marks: "41", grade: "B" },
|
||||
{ code: "MATH 404", cr: "3(3-0)", marks: "39", grade: "B" },
|
||||
{ code: "IS 401", cr: "2(2-0)", marks: "32", grade: "A" },
|
||||
{ code: "ENG 307", cr: "3(3-0)", marks: "42", grade: "B" },
|
||||
{ code: "Stat 408", cr: "3(3-0)", marks: "28", grade: "C" },
|
||||
{ code: "PHY 305", cr: "3(3-0)", marks: "38", grade: "C" },
|
||||
].map((course, i) => (
|
||||
<div key={i} className="flex items-center justify-between text-sm">
|
||||
<div className="flex gap-4 w-1/2">
|
||||
<span className="font-mono font-medium text-foreground w-20">{course.code}</span>
|
||||
<span className="text-accent">{course.cr}</span>
|
||||
</div>
|
||||
<div className="flex gap-4 w-1/2 justify-end">
|
||||
<span className="text-accent w-8 text-right">{course.marks}</span>
|
||||
<span className={`font-bold w-6 text-right ${course.grade === 'A' ? 'text-green-600' : course.grade === 'B' ? 'text-blue-600' : course.grade === 'C' ? 'text-yellow-600' : 'text-red-600'}`}>{course.grade}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="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-foreground">2.95</span>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
80
src/pages/HomePage/sections/Reviews.tsx
Normal file
80
src/pages/HomePage/sections/Reviews.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
23
src/pages/HomePage/sections/Social.tsx
Normal file
23
src/pages/HomePage/sections/Social.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user