Untitled

export default function EPortfolioWebsite() {
  const projects = [
    {
      title: "Inclusive Learning Spaces Project",
      description:
        "A collaborative project focused on creating accessible and inclusive classroom environments for learners with diverse needs.",
      category: "Research & Collaboration",
    },
    {
      title: "Gamified Values Integration Activity",
      description:
        "A circus-themed educational game designed for visually impaired, hearing impaired, and regular learners.",
      category: "Creative Instruction",
    },
    {
      title: "Grade 1 Time Lesson Plan",
      description:
        "A detailed lesson plan teaching clock reading and AM/PM concepts using interactive activities and assessments.",
      category: "Lesson Planning",
    },
    {
      title: "Communitarianism Thought Piece",
      description:
        "A reflective academic writing piece integrating social values, community perspectives, and collaboration.",
      category: "Academic Writing",
    },
  ];

  const skills = [
    "Lesson Planning",
    "Educational Technology",
    "Inclusive Education",
    "Research Writing",
    "Classroom Creativity",
    "Collaboration",
    "Public Speaking",
    "Leadership",
  ];

  return (
    <div className="min-h-screen bg-gradient-to-b from-slate-100 to-white text-slate-800">
      <header className="relative overflow-hidden bg-slate-900 text-white">
        <div className="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_top_right,_white,_transparent_40%)]" />

        <div className="relative max-w-7xl mx-auto px-6 py-20 lg:py-28">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <p className="uppercase tracking-[0.3em] text-sm text-slate-300 mb-4">
                Student E-Portfolio
              </p>

              <h1 className="text-5xl lg:text-6xl font-bold leading-tight mb-6">
                Shamsa Shevy Peñaranda
              </h1>

              <p className="text-lg text-slate-300 leading-relaxed max-w-xl mb-8">
                A digital collection of my academic achievements, lesson plans,
                research outputs, classroom activities, and creative projects
                that reflect my growth as a future educator.
              </p>

              <div className="flex flex-wrap gap-4">
                <a
                  href="#projects"
                  className="px-6 py-3 rounded-2xl bg-white text-slate-900 font-semibold shadow-lg hover:scale-105 transition"
                >
                  View My Works
                </a>

                <a
                  href="#about"
                  className="px-6 py-3 rounded-2xl border border-white/30 hover:bg-white/10 transition"
                >
                  About Me
                </a>
              </div>
            </div>

            <div className="flex justify-center">
              <div className="bg-white/10 backdrop-blur-lg border border-white/20 rounded-[2rem] p-8 shadow-2xl w-full max-w-md">
                <div className="space-y-6">
                  <div>
                    <p className="text-slate-300 text-sm mb-2">Portfolio Focus</p>
                    <h2 className="text-2xl font-semibold">
                      Education, Leadership, and Creativity
                    </h2>
                  </div>

                  <div className="grid grid-cols-2 gap-4">
                    <div className="bg-white/10 rounded-2xl p-4">
                      <h3 className="text-3xl font-bold">4+</h3>
                      <p className="text-slate-300 text-sm mt-1">Major Projects</p>
                    </div>

                    <div className="bg-white/10 rounded-2xl p-4">
                      <h3 className="text-3xl font-bold">8</h3>
                      <p className="text-slate-300 text-sm mt-1">Core Skills</p>
                    </div>
                  </div>

                  <div className="bg-white/10 rounded-2xl p-5">
                    <p className="text-slate-300 text-sm mb-2">
                      Vision Statement
                    </p>
                    <p className="leading-relaxed text-sm">
                      To become an educator who creates meaningful, inclusive,
                      and engaging learning experiences for every student.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </header>

      <section id="about" className="max-w-7xl mx-auto px-6 py-20">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          <div>
            <p className="text-sm uppercase tracking-[0.25em] text-slate-500 mb-3">
              About Me
            </p>

            <h2 className="text-4xl font-bold mb-6">
              Passionate Future Educator
            </h2>

            <p className="text-slate-600 leading-relaxed mb-5">
              This e-portfolio highlights my journey as a student and aspiring
              educator. It showcases my best classroom outputs, collaborative
              projects, lesson plans, research works, and creative activities
              developed throughout my academic experience.
            </p>

            <p className="text-slate-600 leading-relaxed">
              My goal is to create learning environments that are engaging,
              inclusive, and meaningful for all learners while continuously
              improving my teaching skills and professional growth.
            </p>
          </div>

          <div className="bg-white rounded-[2rem] shadow-xl border border-slate-200 p-8">
            <h3 className="text-2xl font-semibold mb-6">Core Skills</h3>

            <div className="flex flex-wrap gap-3">
              {skills.map((skill, index) => (
                <span
                  key={index}
                  className="px-4 py-2 rounded-full bg-slate-100 text-slate-700 text-sm font-medium"
                >
                  {skill}
                </span>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section
        id="projects"
        className="bg-slate-50 border-y border-slate-200"
      >
        <div className="max-w-7xl mx-auto px-6 py-20">
          <div className="mb-12">
            <p className="text-sm uppercase tracking-[0.25em] text-slate-500 mb-3">
              Featured Works
            </p>

            <h2 className="text-4xl font-bold mb-4">
              Best Academic Outputs
            </h2>

            <p className="text-slate-600 max-w-2xl leading-relaxed">
              A curated collection of projects and activities that demonstrate
              my academic growth, creativity, teamwork, and teaching skills.
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            {projects.map((project, index) => (
              <div
                key={index}
                className="bg-white rounded-[2rem] p-8 shadow-lg border border-slate-200 hover:-translate-y-1 transition"
              >
                <div className="inline-block px-4 py-2 rounded-full bg-slate-100 text-slate-600 text-xs font-semibold mb-5">
                  {project.category}
                </div>

                <h3 className="text-2xl font-semibold mb-4">
                  {project.title}
                </h3>

                <p className="text-slate-600 leading-relaxed mb-6">
                  {project.description}
                </p>

                <button className="px-5 py-3 rounded-2xl bg-slate-900 text-white hover:opacity-90 transition">
                  View Project
                </button>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="max-w-7xl mx-auto px-6 py-20">
        <div className="grid lg:grid-cols-3 gap-8">
          <div className="bg-white rounded-[2rem] shadow-lg border border-slate-200 p-8">
            <h3 className="text-2xl font-semibold mb-4">Achievements</h3>
            <p className="text-slate-600 leading-relaxed">
              Participation in collaborative educational activities, lesson
              demonstrations, and academic research presentations.
            </p>
          </div>

          <div className="bg-white rounded-[2rem] shadow-lg border border-slate-200 p-8">
            <h3 className="text-2xl font-semibold mb-4">Reflection</h3>
            <p className="text-slate-600 leading-relaxed">
              Every project and classroom experience helped strengthen my
              confidence, creativity, and understanding of effective teaching.
            </p>
          </div>

          <div className="bg-white rounded-[2rem] shadow-lg border border-slate-200 p-8">
            <h3 className="text-2xl font-semibold mb-4">Future Goals</h3>
            <p className="text-slate-600 leading-relaxed">
              To continue learning innovative teaching strategies and become a
              professional educator who inspires and supports every learner.
            </p>
          </div>
        </div>
      </section>

      <footer className="bg-slate-900 text-white">
        <div className="max-w-7xl mx-auto px-6 py-10 flex flex-col md:flex-row justify-between items-center gap-4">
          <div>
            <h2 className="font-semibold text-lg">
              Shamsa Shevy Peñaranda
            </h2>
            <p className="text-slate-400 text-sm">
              Student E-Portfolio Website
            </p>
          </div>

          <div className="flex gap-4 text-sm text-slate-300">
            <a href="#about" className="hover:text-white transition">
              About
            </a>
            <a href="#projects" className="hover:text-white transition">
              Projects
            </a>
            <a href="#" className="hover:text-white transition">
              Contact
            </a>
          </div>
        </div>
      </footer>
    </div>
  );
}