feat: gm world!

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/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/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## 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/deployment) for more details.

app/component/About.tsx

@@ -0,0 +1,85 @@
+"use client";
+import React from "react";
+import {
+  Carousel,
+  Card,
+} from "@/app/component/aceternity-ui/apple-cards-carousel";
+import Image from "next/image";
+
+export default function About() {
+  const cards = data.map((card, index) => (
+    <Card key={card.src} card={card} index={index} />
+  ));
+
+  return (
+    <section className="w-full h-full py-20 bg-black">
+      <h2 className="max-w-7xl pl-4 mx-auto text-xl md:text-5xl font-bold text-neutral-200 font-sans">
+        About Luca3
+      </h2>
+      <Carousel items={cards} />
+    </section>
+  );
+}
+
+const DummyContent = () => {
+  return (
+    <>
+      {[...new Array(3).fill(1)].map((_, index) => {
+        return (
+          <div
+            key={"dummy-content" + index}
+            className="bg-neutral-800 p-8 md:p-14 rounded-3xl mb-4"
+          >
+            <p className="text-neutral-400 text-base md:text-2xl font-sans max-w-3xl mx-auto">
+              <span className="font-bold text-neutral-200">
+                Revolutionizing blockchain technology.
+              </span>{" "}
+              Luca3 is at the forefront of blockchain innovation, providing
+              cutting-edge solutions for businesses and developers alike.
+            </p>
+            <Image
+              src="/images/blockchain-illustration.png"
+              alt="Blockchain illustration"
+              height="500"
+              width="500"
+              className="md:w-1/2 md:h-1/2 h-full w-full mx-auto object-contain"
+            />
+          </div>
+        );
+      })}
+    </>
+  );
+};
+
+const data = [
+  {
+    category: "Our Mission",
+    title: "Empowering the Future of Web3",
+    src: "/images/mission.jpg",
+    content: <DummyContent />,
+  },
+  {
+    category: "Our Vision",
+    title: "Decentralized Solutions for All",
+    src: "/images/vision.jpg",
+    content: <DummyContent />,
+  },
+  {
+    category: "Our Values",
+    title: "Innovation, Security, Transparency",
+    src: "/images/values.jpg",
+    content: <DummyContent />,
+  },
+  {
+    category: "Our Team",
+    title: "Experts in Blockchain Technology",
+    src: "/images/team.jpg",
+    content: <DummyContent />,
+  },
+  {
+    category: "Our Technology",
+    title: "Cutting-edge Blockchain Solutions",
+    src: "/images/technology.jpg",
+    content: <DummyContent />,
+  },
+];

app/component/Contact.tsx

@@ -0,0 +1,34 @@
+import { LampContainer } from "./aceternity-ui/lamps";
+
+export default function Contact() {
+  return (
+    <LampContainer>
+      <h2 className="text-3xl font-bold mb-8 text-center text-white">
+        Contact Us
+      </h2>
+      <form className="max-w-md mx-auto">
+        <input
+          type="text"
+          placeholder="Name"
+          className="w-full mb-4 p-2 rounded"
+        />
+        <input
+          type="email"
+          placeholder="Email"
+          className="w-full mb-4 p-2 rounded"
+        />
+        <textarea
+          placeholder="Message"
+          className="w-full mb-4 p-2 rounded"
+          rows={4}
+        ></textarea>
+        <button
+          type="submit"
+          className="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded w-full"
+        >
+          Send Message
+        </button>
+      </form>
+    </LampContainer>
+  );
+}

app/component/Ecosystem.tsx

@@ -0,0 +1,15 @@
+export default function Ecosystem() {
+  return (
+    <section className="py-20 px-4">
+      <h2 className="text-3xl font-bold mb-8 text-center">Our Ecosystem</h2>
+      <div className="max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8">
+        {/* Add ecosystem logos here */}
+        <div className="bg-white/10 h-20 rounded-lg"></div>
+        <div className="bg-white/10 h-20 rounded-lg"></div>
+        <div className="bg-white/10 h-20 rounded-lg"></div>
+        <div className="bg-white/10 h-20 rounded-lg"></div>
+        <div className="bg-white/10 h-20 rounded-lg"></div>
+      </div>
+    </section>
+  );
+}

app/component/Footer.tsx

@@ -0,0 +1,33 @@
+export default function Footer() {
+  return (
+    <footer className="w-full py-6 bg-black/50 backdrop-blur-sm">
+      <div className="container mx-auto px-4 md:px-6">
+        <div className="flex flex-col items-center justify-between gap-4 md:flex-row">
+          <p className="text-sm text-gray-400">
+            © 2024 Luca3. All rights reserved.
+          </p>
+          <nav className="flex gap-4">
+            <a
+              href="#"
+              className="text-sm text-gray-400 hover:text-white transition-colors duration-200"
+            >
+              Terms
+            </a>
+            <a
+              href="#"
+              className="text-sm text-gray-400 hover:text-white transition-colors duration-200"
+            >
+              Privacy
+            </a>
+            <a
+              href="#"
+              className="text-sm text-gray-400 hover:text-white transition-colors duration-200"
+            >
+              Contact
+            </a>
+          </nav>
+        </div>
+      </div>
+    </footer>
+  );
+}

app/component/Header.tsx

@@ -0,0 +1,62 @@
+import Image from "next/image";
+import Link from "next/link";
+import { useState, useEffect } from "react";
+
+export const Header = () => {
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  const navItems = [
+    { name: "ABOUT", link: "#" },
+    { name: "SERVICES", link: "#" },
+    { name: "PROOF OF WORK", link: "#" },
+    { name: "CONTACT", link: "#" },
+  ];
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 0) {
+        setIsScrolled(true);
+      } else {
+        setIsScrolled(false);
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  return (
+    <header
+      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 font-barlow
+      ${
+        isScrolled
+          ? "bg-black bg-opacity-50 backdrop-blur-sm"
+          : "bg-transparent"
+      }`}
+    >
+      <div className="max-w-7xl mx-auto my-auto py-4 px-4 sm:md-6 lg:px-8 pd-8">
+        <div className="flex justify-between items-center py-4">
+          <div className="flex items-center">
+            <span className="text-white text-2xl font-bold font-barlow">
+              LUCA3
+            </span>
+          </div>
+          <nav className="hidden md:flex space-x-8">
+            {navItems.map((item) => (
+              <Link
+                key={item.name}
+                href={item.link}
+                className="text-white hover:text-purple-400 transition-colors text-lg"
+              >
+                {item.name}
+              </Link>
+            ))}
+          </nav>
+        </div>
+      </div>
+    </header>
+  );
+};

app/component/Hero.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import StatCard from "./StatCard";
+import { HoverBorderGradient } from "./aceternity-ui/hover-border-gradient";
+
+const Hero = () => {
+  return (
+    <div className="relative min-h-auto flex flex-col justify-center max-w-7xl mx-auto my-5 px-4 sm:px-6 lg:px-8 font-barlow">
+      <div className="flex flex-col md:flex-row justify-between items-start">
+        {/* Left side with main content */}
+        <div className="z-10 text-white md:w-1/2 pr-8 mb-8 md:mb-0">
+          <h1 className="text-8xl font-bold mb-4">
+            User-Centric
+            <br />
+            Blockchain
+            <br />
+            Consultancy
+          </h1>
+          <p className="text-3xl mb-6">
+            Luca3 is a blockchain consultancy firm specialized in building
+            blockchain-based solutions for anyone, anywhere.
+          </p>
+          <div className="flex space-x-4">
+            <button className="p-[3px] relative">
+              <div className="absolute inset-0 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-lg" />
+              <div className="px-8 py-2  bg-black rounded-[6px]  relative group transition duration-200 text-white hover:bg-transparent font-barlow">
+                Proof of Work
+              </div>
+            </button>
+            <button className="inline-flex h-12 animate-shimmer items-center justify-center rounded-md border border-slate-200 bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] bg-[length:200%_100%] px-6 font-medium text-slate-400 transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50">
+              Contact Us
+            </button>
+          </div>
+        </div>
+
+        {/* Right side with statistics cards */}
+        <div className="z-10 md:w-1/4 relative">
+          <div className="grid grid-cols-1 gap-4">
+            <StatCard value="3+" label="Years of Experience" />
+            <StatCard value="25+" label="Decentralized Apps Built" />
+            <StatCard value="80%" label="Hackathon Win Rate" />
+            <StatCard value="5k+" label="Lines of Code Written" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Hero;