Redesign landing page

NextProduction · Feb 6, 2024 · fb9cb43 · fb9cb43
1 parent c48e1f9
commit fb9cb43
Show file tree

Hide file tree

Showing 64 changed files with 749 additions and 9 deletions.
diff --git a/app/layout.js b/app/layout.js
@@ -11,7 +11,7 @@ export const metadata = {
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={`${inter.className} overflow-y-scroll overflow-x-hidden`}>{children}</body>
     </html>
   );
 }
diff --git a/app/page.js b/app/page.js
@@ -1,7 +1,11 @@
+"use client"
+import Landing from "@/components/Landing";
 export default function Home() {
-  return (
-    <main>
-      <span>Next Production Dev</span>
-    </main>
-  );
+    return (
+        <main className="h-full w-full">
+            <div className="flex flex-col">
+                <Landing />
+            </div>
+        </main>
+    );
 }
diff --git a/components/Landing.js b/components/Landing.js
@@ -0,0 +1,143 @@
+import Head from "next/head";
+import Lottie from "react-lottie";
+import animationData from "../public/animation.json"; // Path to your Lottie animation JSON file
+import animationData2 from "../public/animation2.json"; // Path to your Lottie animation JSON file
+
+const LandingPage = () => {
+    const log = () => {
+        const path = "NextProduction.dev/hering";
+        console.log(
+            `\n%c ${path}`,
+            "color:#0dd8d8; background:#0b1021; font-size:1rem; padding:0.15rem 0.25rem; margin: 0.5rem auto; font-family: Rockwell; border: 2px solid #0dd8d8; border-radius: 4px;font-weight: bold;"
+        );
+    };
+    return (
+        <div className="bg-gray-900 text-white">
+            <Head>
+                <title>NextProduction | Shaping Tomorrow</title>
+                <meta
+                    name="description"
+                    content="Empowering businesses through cutting-edge technology. Join us in shaping tomorrow."
+                />
+            </Head>
+            {/* Hero Section */}
+            <section
+                id="hero"
+                className="hero h-screen flex items-center justify-center"
+            >
+                <div className="text-center">
+                    <h1 className="text-4xl md:text-6xl font-bold my-4">
+                        Welcome to NextProduction
+                        {log()}
+                    </h1>
+                    <p className="mt-4 text-lg">
+                        Shaping Tomorrow with Innovation
+                    </p>
+                    {/* Add Lottie animation */}
+                    <div className="">
+                        <Lottie
+                            options={{
+                                animationData: animationData,
+                                loop: true,
+                                autoplay: true,
+                            }}
+                            style={{ maxWidth: "60%", height: "auto" }}
+                            />
+                    </div>
+                </div>
+            </section>
+
+            {/* About Section */}
+            <section id="about" className="about py-16">
+                <div className="max-w-3xl mx-auto text-center">
+                    <h2 className="text-3xl font-bold mb-4">
+                        About NextProduction
+                    </h2>
+                    <p className="text-lg mb-6">
+                        NextProduction is an open-source tech company dedicated
+                        to pushing the boundaries of innovation. Were a team of
+                        passionate developers, engineers, and technologists who
+                        are committed to creating cutting-edge software
+                        solutions, pioneering AI algorithms, crafting innovative
+                        packages, and providing top-notch development services.
+                    </p>
+                </div>
+            </section>
+
+            {/* Our Innovations Section */}
+            <section id="innovations" className="innovations py-16">
+                <div className="max-w-3xl mx-auto text-center">
+                    <h2 className="text-3xl font-bold mb-4">Our Innovations</h2>
+                    <p className="text-lg mb-6">
+                        At NextProduction, we re constantly pushing the envelope
+                        by introducing groundbreaking technologies and
+                        solutions. Whether it s developing new software
+                        products, pioneering AI algorithms, or creating
+                        innovative packages, we re committed to driving progress
+                        and empowering businesses.
+                    </p>
+                </div>
+            </section>
+
+            {/* Join us Section */}
+            <section id="join-us" className="join-us py-16">
+                <div className="max-w-3xl mx-auto text-center">
+                    <h2 className="text-3xl font-bold mb-4">
+                        Join us in Shaping Tomorrow
+                    </h2>
+                    <p className="text-lg mb-6">
+                        Are you ready to be part of something extraordinary?
+                        Join us at NextProduction and be at the forefront of
+                        technological innovation. Together, let s build a future
+                        where technology is limitless and possibilities are
+                        endless.
+                    </p>
+                    <Lottie
+                        options={{
+                            animationData: animationData2,
+                            loop: true,
+                            autoplay: true,
+                        }}
+                        style={{ maxWidth: "100%", height: "auto" }}
+                    />
+                </div>
+            </section>
+
+            {/* Geeky joke Section */}
+            <section id="geeky-joke" className="geeky-joke py-16">
+                <div className="max-w-3xl mx-auto text-center">
+                    <h2 className="text-3xl font-bold mb-4">
+                        Geeky Joke of Day
+                    </h2>
+                    <p className="text-lg mb-6">
+                        Why do programmers prefer dark mode? Because light
+                        attracts bugs! 😄
+                    </p>
+                </div>
+            </section>
+
+            {/* Contact Section */}
+            <section id="contact" className="contact py-16">
+                <div className="max-w-3xl mx-auto text-center">
+                    <h2 className="text-3xl font-bold mb-4">Contact Us</h2>
+                    <p className="text-lg mb-6">
+                        Ready to take the next step? Reach out to us today!
+                    </p>
+                    <a
+                        href="mailto:[email protected]"
+                        className="text-lg underline hover:text-blue-300"
+                    >
+                        [email protected]
+                    </a>
+                </div>
+            </section>
+
+            {/* Footer Section */}
+            <footer className="bg-gray-800 py-4 text-center">
+                <p>&copy; 2024 NextProduction. All rights reserved.</p>
+            </footer>
+        </div>
+    );
+};
+
+export default LandingPage;
diff --git a/package-lock.json b/package-lock.json