Port HTML to Next.js app

reimagined-mohan/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

reimagined-mohan/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

reimagined-mohan/app/components/Particles.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import Particles, { initParticlesEngine } from "@tsparticles/react";
+import { type Container, type ISourceOptions } from "@tsparticles/engine";
+import { loadSlim } from "@tsparticles/slim"; 
+
+const ParticlesComponent = () => {
+  const [init, setInit] = useState(false);
+
+  useEffect(() => {
+    initParticlesEngine(async (engine) => {
+      await loadSlim(engine);
+    }).then(() => {
+      setInit(true);
+    });
+  }, []);
+
+  const particlesLoaded = async (container?: Container): Promise<void> => {
+    // console.log(container);
+  };
+
+  const options: ISourceOptions = useMemo(
+    () => ({
+      background: {
+        color: {
+          value: "transparent",
+        },
+      },
+      fpsLimit: 60,
+      interactivity: {
+        events: {
+          onHover: {
+            enable: true,
+            mode: "repulse",
+          },
+        },
+        modes: {
+          repulse: {
+            distance: 100,
+            duration: 0.4,
+          },
+        },
+      },
+      particles: {
+        color: {
+          value: "#8b5cf6", // a shade of purple
+        },
+        links: {
+          color: "#4f46e5", // a shade of indigo
+          distance: 150,
+          enable: true,
+          opacity: 0.1,
+          width: 1,
+        },
+        move: {
+          direction: "none",
+          enable: true,
+          outModes: {
+            default: "out",
+          },
+          random: true,
+          speed: 1,
+          straight: false,
+        },
+        number: {
+          density: {
+            enable: true,
+          },
+          value: 50,
+        },
+        opacity: {
+          value: { min: 0.1, max: 0.5 },
+        },
+        shape: {
+          type: "circle",
+        },
+        size: {
+          value: { min: 1, max: 3 },
+        },
+      },
+      detectRetina: true,
+    }),
+    [],
+  );
+
+  if (init) {
+    return (
+      <Particles
+        id="tsparticles"
+        particlesLoaded={particlesLoaded}
+        options={options}
+        className="fixed inset-0 pointer-events-none z-0"
+      />
+    );
+  }
+
+  return null;
+};
+
+export default ParticlesComponent;
+

reimagined-mohan/app/components/sections/01_Hero.tsx

@@ -0,0 +1,36 @@
+"use client";
+import { motion } from "framer-motion";
+
+const animationProps = {
+  initial: { opacity: 0, y: 40 },
+  whileInView: { opacity: 1, y: 0 },
+  transition: { duration: 0.8, ease: "easeOut" },
+  viewport: { once: true },
+};
+
+export default function Hero() {
+  return (
+    <motion.section
+      {...animationProps}
+      className="w-full min-h-screen flex justify-center items-center p-8 box-border bg-cosmic relative overflow-hidden"
+    >
+      <div className="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-transparent to-blue-900/20"></div>
+      <div className="w-full max-w-5xl text-center glass-dark p-8 md:p-12 rounded-3xl relative z-10">
+        <div className="animate-float">
+          <h1 className="text-5xl md:text-8xl font-black text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-pink-400 to-blue-400 font-space mb-6 shimmer-text">
+            Who is Mohan?
+          </h1>
+        </div>
+        <h3 className="text-xl md:text-3xl text-slate-300 mt-8 font-light leading-relaxed">
+          A revolutionary project to{" "}
+          <span className="text-purple-400 font-semibold">reimagine Sri Lankan literature</span> for the digital age.
+        </h3>
+        <div className="mt-10 p-6 glass rounded-2xl animate-glow">
+          <p className="text-lg text-purple-300 font-medium">
+            Fusing magic realism with artificial intelligence to create a transcendent literary icon for CIBF 2025.
+          </p>
+        </div>
+      </div>
+    </motion.section>
+  );
+}

reimagined-mohan/app/components/sections/02_MarketAnalysis.tsx

@@ -0,0 +1,69 @@
+"use client";
+import { motion } from "framer-motion";
+
+const sectionAnimation = {
+  initial: { opacity: 0, y: 50 },
+  whileInView: { opacity: 1, y: 0 },
+  transition: { duration: 0.8, ease: "easeOut" },
+  viewport: { once: true },
+};
+
+const cardAnimationLeft = {
+    initial: { opacity: 0, x: -60 },
+    whileInView: { opacity: 1, x: 0 },
+    transition: { duration: 0.8, ease: "easeOut" },
+    viewport: { once: true },
+}
+
+const cardAnimationRight = {
+    initial: { opacity: 0, x: 60 },
+    whileInView: { opacity: 1, x: 0 },
+    transition: { duration: 0.8, ease: "easeOut" },
+    viewport: { once: true },
+}
+
+
+export default function MarketAnalysis() {
+  return (
+    <motion.section
+      {...sectionAnimation}
+      className="w-full min-h-screen flex justify-center items-center p-8 box-border bg-ethereal relative"
+    >
+      <div className="w-full max-w-6xl">
+        <h2 className="text-4xl md:text-6xl font-bold text-center text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400 mb-12 font-space">
+          A New Cultural Economy Awaits
+        </h2>
+        <div className="grid md:grid-cols-2 gap-10 text-lg">
+          <motion.div {...cardAnimationLeft} className="glass-dark p-8 rounded-2xl">
+            <div className="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl mb-6 flex items-center justify-center">
+              <svg className="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
+                <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z" />
+              </svg>
+            </div>
+            <h4 className="font-bold text-white text-2xl mb-4 font-space">
+              Digitally-Driven Audiences
+            </h4>
+            <p className="text-slate-300 leading-relaxed">
+              Gen Z & Millennials crave{" "}
+              <span className="text-purple-400 font-semibold">novel, visual, and shareable experiences</span>. Traditional book marketing doesn't reach them.
+            </p>
+          </motion.div>
+          <motion.div {...cardAnimationRight} className="glass-dark p-8 rounded-2xl">
+            <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-500 rounded-xl mb-6 flex items-center justify-center">
+              <svg className="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
+                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+              </svg>
+            </div>
+            <h4 className="font-bold text-white text-2xl mb-4 font-space">
+              The Next Wave
+            </h4>
+            <p className="text-slate-300 leading-relaxed">
+              Gen Alpha is captivated by{" "}
+              <span className="text-blue-400 font-semibold">interactive and gamified content</span> like chatbots and AR experiences.
+            </p>
+          </motion.div>
+        </div>
+      </div>
+    </motion.section>
+  );
+}

reimagined-mohan/app/components/sections/03_Solution.tsx

@@ -0,0 +1,39 @@
+"use client";
+import { motion } from "framer-motion";
+
+const sectionAnimation = {
+  initial: { opacity: 0, y: 50 },
+  whileInView: { opacity: 1, y: 0 },
+  transition: { duration: 0.8, ease: "easeOut" },
+  viewport: { once: true },
+};
+
+export default function Solution() {
+    return (
+        <motion.section 
+            {...sectionAnimation}
+            className="w-screen min-h-screen flex justify-center items-center p-8 box-border bg-gradient-to-br from-slate-900 via-purple-900/20 to-pink-900/20"
+        >
+            <div className="w-full max-w-5xl text-center">
+                <h2 className="text-4xl md:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400 mb-8 font-space">
+                    Legacy Meets Innovation
+                </h2>
+                <div className="glass-dark p-10 rounded-3xl animate-glow">
+                    <p className="text-2xl md:text-3xl text-slate-200 leading-relaxed font-light">
+                    Position Mohan Madawala as the{" "}
+                    <span className="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400 font-bold">
+                        first author in Sri Lanka to fuse serious literature with
+                        cutting-edge, tech-driven engagement
+                    </span>.
+                    </p>
+                    <div className="mt-8 h-1 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full"></div>
+                    <p className="mt-6 text-xl text-slate-400 font-light">
+                        Making literature a dynamic, must-have cultural experience for a
+                        new generation.
+                    </p>
+                </div>
+            </div>
+        </motion.section>
+    );
+}
+

reimagined-mohan/app/components/sections/04_CreativeConcept.tsx

@@ -0,0 +1,52 @@
+"use client";
+import { motion } from "framer-motion";
+
+const sectionAnimation = {
+  initial: { opacity: 0, y: 50 },
+  whileInView: { opacity: 1, y: 0 },
+  transition: { duration: 0.8, ease: "easeOut" },
+  viewport: { once: true },
+};
+
+export default function CreativeConcept() {
+  return (
+    <motion.section
+      {...sectionAnimation}
+      className="w-screen h-screen flex justify-center items-center p-8 box-border bg-cosmic relative overflow-hidden"
+    >
+      <div className="absolute inset-0 bg-gradient-to-tr from-purple-900/30 via-transparent to-blue-900/30"></div>
+      <div className="w-full max-w-5xl text-center animate-fade-in-up relative z-10">
+        <div className="glass-dark p-12 rounded-3xl animate-glow">
+          <h2 className="text-4xl md:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400 mb-8 font-space">
+            We Will Build a Myth
+          </h2>
+          <div className="text-left max-w-4xl mx-auto">
+            <p className="text-xl text-slate-300 leading-relaxed mb-6">
+              Our core creative is the <span className="text-purple-400 font-bold text-2xl">"Who is Mohan?"</span> digital campaign, designed to build a mythic identity for the author.
+            </p>
+            <div className="grid md:grid-cols-3 gap-6 mt-8">
+              <div className="glass p-6 rounded-xl text-center">
+                <div className="w-12 h-12 bg-purple-500 rounded-lg mx-auto mb-4 flex items-center justify-center">
+                  <span className="text-2xl">🔮</span>
+                </div>
+                <h4 className="text-purple-400 font-semibold">Mystery</h4>
+              </div>
+              <div className="glass p-6 rounded-xl text-center">
+                <div className="w-12 h-12 bg-pink-500 rounded-lg mx-auto mb-4 flex items-center justify-center">
+                  <span className="text-2xl">📖</span>
+                </div>
+                <h4 className="text-pink-400 font-semibold">Story Fragments</h4>
+              </div>
+              <div className="glass p-6 rounded-xl text-center">
+                <div className="w-12 h-12 bg-blue-500 rounded-lg mx-auto mb-4 flex items-center justify-center">
+                  <span className="text-2xl">💭</span>
+                </div>
+                <h4 className="text-blue-400 font-semibold">Fan Theories</h4>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </motion.section>
+  );
+}