First draft

.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/globals.css

@@ -0,0 +1,76 @@
+@tailwind base;
+  @tailwind components;
+  @tailwind utilities;
+
+  @layer base {
+    :root {
+      --background: 0 0% 100%;
+      --foreground: 0 0% 3.9%;
+
+      --card: 0 0% 100%;
+      --card-foreground: 0 0% 3.9%;
+
+      --popover: 0 0% 100%;
+      --popover-foreground: 0 0% 3.9%;
+
+      --primary: 0 0% 9%;
+      --primary-foreground: 0 0% 98%;
+
+      --secondary: 0 0% 96.1%;
+      --secondary-foreground: 0 0% 9%;
+
+      --muted: 0 0% 96.1%;
+      --muted-foreground: 0 0% 45.1%;
+
+      --accent: 0 0% 96.1%;
+      --accent-foreground: 0 0% 9%;
+
+      --destructive: 0 84.2% 60.2%;
+      --destructive-foreground: 0 0% 98%;
+
+      --border: 0 0% 89.8%;
+      --input: 0 0% 89.8%;
+      --ring: 0 0% 3.9%;
+
+      --radius: 0.5rem;
+    }
+
+    .dark {
+      --background: 0 0% 3.9%;
+      --foreground: 0 0% 98%;
+
+      --card: 0 0% 3.9%;
+      --card-foreground: 0 0% 98%;
+
+      --popover: 0 0% 3.9%;
+      --popover-foreground: 0 0% 98%;
+
+      --primary: 0 0% 98%;
+      --primary-foreground: 0 0% 9%;
+
+      --secondary: 0 0% 14.9%;
+      --secondary-foreground: 0 0% 98%;
+
+      --muted: 0 0% 14.9%;
+      --muted-foreground: 0 0% 63.9%;
+
+      --accent: 0 0% 14.9%;
+      --accent-foreground: 0 0% 98%;
+
+      --destructive: 0 62.8% 30.6%;
+      --destructive-foreground: 0 0% 98%;
+
+      --border: 0 0% 14.9%;
+      --input: 0 0% 14.9%;
+      --ring: 0 0% 83.1%;
+    }
+  }
+
+  @layer base {
+    * {
+      @apply border-border;
+    }
+    body {
+      @apply bg-background text-foreground;
+    }
+  }

app/java_tutorial.json

@@ -0,0 +1,176 @@
+{
+  "sections": [
+    {
+      "id": "basics",
+      "title": "Java Basics",
+      "description": "Explore the fundamental concepts of the Java programming language, including data types, variables, operators, control structures, and methods.",
+      "items": [
+        {
+          "title": "Data Types",
+          "description": "Different data types in Java such as int, double, boolean, and String, allow you to store various kinds of data.",
+          "code": "int x = 10;\ndouble y = 3.14;\nboolean isTrue = true;\nString name = \"John Doe\";",
+          "explanation": "This code snippet demonstrates the declaration and initialization of variables with different data types: an integer, a double, a boolean, and a string."
+        },
+        {
+          "title": "Variables",
+          "description": "Variables in Java store data values that can be used and manipulated throughout the program.",
+          "code": "int age = 25;\nString city = \"New York\";\ndouble salary = 50000.0;",
+          "explanation": "This code shows how to declare variables of various types and initialize them with values. Variables store data that can be used and manipulated throughout the program."
+        },
+        {
+          "title": "Operators",
+          "description": "Operators in Java are special symbols used to perform operations on variables and values.",
+          "code": "int a = 10;\nint b = 5;\nint sum = a + b;\nint diff = a - b;\nint product = a * b;\nint quotient = a / b;",
+          "explanation": "This example demonstrates the use of arithmetic operators in Java. It shows how to perform basic mathematical operations like addition, subtraction, multiplication, and division."
+        },
+        {
+          "title": "Control Structures",
+          "description": "Control structures like if-else, switch-case, and loops determine the flow of execution in a Java program.",
+          "code": "int num = 10;\nif (num > 0) {\n  System.out.println(\"Positive number\");\n} else {\n  System.out.println(\"Non-positive number\");\n}\n\nswitch (num) {\n  case 1:\n    System.out.println(\"One\");\n    break;\n  case 10:\n    System.out.println(\"Ten\");\n    break;\n  default:\n    System.out.println(\"Other number\");\n}\n\nfor (int i = 0; i < 5; i++) {\n  System.out.println(i);\n}",
+          "explanation": "This snippet demonstrates the use of control structures in Java. The if-else statement checks if a number is positive. The switch-case statement executes different code blocks based on the value of the number. The for loop iterates from 0 to 4 and prints each value."
+        },
+        {
+          "title": "Methods",
+          "description": "Methods in Java are blocks of code that perform a specific task and can be called upon when needed.",
+          "code": "public class Main {\n  public static void main(String[] args) {\n    greet(\"John\");\n  }\n\n  public static void greet(String name) {\n    System.out.println(\"Hello, \" + name);\n  }\n}",
+          "explanation": "This code defines a class with a main method that calls another method named greet. The greet method takes a string parameter and prints a greeting message. Methods help organize code into reusable blocks."
+        }
+      ]
+    },
+    {
+      "id": "oop",
+      "title": "Java Object-Oriented Programming",
+      "description": "Dive into the principles of object-oriented programming in Java, including classes, objects, inheritance, and encapsulation.",
+      "items": [
+        {
+          "title": "Classes and Objects",
+          "description": "Classes are blueprints for creating objects, which are instances of classes containing attributes and methods.",
+          "code": "class Person {\n  String name;\n  int age;\n\n  void introduce() {\n    System.out.println(\"Hello, my name is \" + name);\n  }\n}\n\nPerson p = new Person();\np.name = \"John\";\np.age = 30;\np.introduce();",
+          "explanation": "This example defines a class named Person with two fields (name and age) and a method (introduce). An object of the Person class is created, its fields are assigned values, and the introduce method is called to print a message."
+        },
+        {
+          "title": "Inheritance",
+          "description": "Inheritance allows one class to inherit fields and methods from another class, promoting code reuse and organization.",
+          "code": "class Employee extends Person {\n  double salary;\n\n  void displaySalary() {\n    System.out.println(\"Salary: \" + salary);\n  }\n}\n\nEmployee e = new Employee();\ne.name = \"John\";\ne.age = 35;\ne.salary = 50000.0;\ne.introduce();\ne.displaySalary();",
+          "explanation": "This code demonstrates inheritance, where the Employee class inherits from the Person class. The Employee class has an additional field (salary) and a method (displaySalary). An object of the Employee class is created and methods from both the Employee and Person classes are called."
+        },
+        {
+          "title": "Encapsulation",
+          "description": "Encapsulation restricts direct access to certain components of an object, promoting modularity and maintainability.",
+          "code": "class BankAccount {\n  private double balance;\n\n  public void deposit(double amount) {\n    balance += amount;\n  }\n\n  public void withdraw(double amount) {\n    if (balance >= amount) {\n      balance -= amount;\n    } else {\n      System.out.println(\"Insufficient funds.\");\n    }\n  }\n\n  public double getBalance() {\n    return balance;\n  }\n}\n\nBankAccount account = new BankAccount();\naccount.deposit(1000.0);\naccount.withdraw(500.0);\nSystem.out.println(\"Balance: \" + account.getBalance());",
+          "explanation": "This example illustrates encapsulation, where the BankAccount class's balance field is private and can only be accessed through public methods (deposit, withdraw, getBalance). This ensures that the balance cannot be directly modified from outside the class."
+        },
+        {
+          "title": "Polymorphism",
+          "description": "Polymorphism allows objects of different classes to be treated as objects of a common super class, enhancing flexibility and integration.",
+          "code": "class Animal {\n  void sound() {\n    System.out.println(\"Animal makes a sound\");\n  }\n}\n\nclass Dog extends Animal {\n  void sound() {\n    System.out.println(\"Dog barks\");\n  }\n}\n\nclass Cat extends Animal {\n  void sound() {\n    System.out.println(\"Cat meows\");\n  }\n}\n\nAnimal a1 = new Dog();\nAnimal a2 = new Cat();\na1.sound(); // Dog barks\na2.sound(); // Cat meows",
+          "explanation": "This code demonstrates polymorphism, where a single interface (Animal) can be used for different types (Dog and Cat). The sound method is overridden in Dog and Cat classes, and when called, the appropriate method for the actual object type is executed."
+        },
+        {
+          "title": "Interfaces",
+          "description": "Interfaces in Java are abstract types that allow classes to implement multiple inheritance-like structures.",
+          "code": "interface Animal {\n  void makeSound();\n}\n\nclass Dog implements Animal {\n  public void makeSound() {\n    System.out.println(\"Bark\");\n  }\n}\n\nclass Cat implements Animal {\n  public void makeSound() {\n    System.out.println(\"Meow\");\n  }\n}\n\npublic class Main {\n  public static void main(String[] args) {\n    Animal dog = new Dog();\n    Animal cat = new Cat();\n    dog.makeSound(); // Bark\n    cat.makeSound(); // Meow\n  }\n}",
+          "explanation": "This example demonstrates how to define an interface and implement it in multiple classes. The Animal interface has a single method, makeSound, which is implemented differently in Dog and Cat classes."
+        },
+        {
+          "title": "Abstract Classes and Methods",
+          "description": "Abstract classes and methods define a template for other classes to extend and provide concrete implementations.",
+          "code": "abstract class Animal {\n  abstract void makeSound();\n\n  public void sleep() {\n    System.out.println(\"Sleeping...\");\n  }\n}\n\nclass Dog extends Animal {\n  public void makeSound() {\n    System.out.println(\"Bark\");\n  }\n}\n\nclass Cat extends Animal {\n  public void makeSound() {\n    System.out.println(\"Meow\");\n  }\n}\n\npublic class Main {\n  public static void main(String[] args) {\n    Animal dog = new Dog();\n    Animal cat = new Cat();\n    dog.makeSound(); // Bark\n    cat.makeSound(); // Meow\n    dog.sleep();     // Sleeping...\n    cat.sleep();     // Sleeping...\n  }\n}",
+          "explanation": "This example demonstrates how to use abstract classes and methods. The Animal class is abstract and includes an abstract method makeSound that must be implemented by any subclass. It also includes a regular method sleep that can be used by all subclasses."
+        },
+        {
+          "title": "Constructors",
+          "description": "Constructors in Java initialize new objects and set initial values for fields.",
+          "code": "class Person {\n  String name;\n  int age;\n\n  // Default constructor\n  public Person() {\n    this.name = \"Unknown\";\n    this.age = 0;\n  }\n\n  // Parameterized constructor\n  public Person(String name, int age) {\n    this.name = name;\n    this.age = age;\n  }\n}\n\npublic class Main {\n  public static void main(String[] args) {\n    Person p1 = new Person(); // Calls default constructor\n    Person p2 = new Person(\"Alice\", 30); // Calls parameterized constructor\n    System.out.println(p1.name + \" is \" + p1.age + \" years old.\");\n    System.out.println(p2.name + \" is \" + p2.age + \" years old.\");\n  }\n}",
+          "explanation": "This code demonstrates how to define default and parameterized constructors in a class. The default constructor initializes fields to default values, while the parameterized constructor sets them based on provided arguments."
+        }
+      ]
+    },
+    {
+      "id": "library",
+      "title": "Java Standard Library",
+      "description": "Explore the most commonly used Java standard library classes and their usage, including collections, I/O, and more.",
+      "items": [
+        {
+          "title": "Collections",
+          "description": "Collections in Java provide a framework for storing and manipulating groups of objects.",
+          "code": "List<String> names = new ArrayList<>();\nnames.add(\"John\");\nnames.add(\"Jane\");\nnames.add(\"Bob\");\n\nSet<Integer> numbers = new HashSet<>();\nnumbers.add(1);\nnumbers.add(2);\nnumbers.add(3);\n\nMap<String, Integer> ages = new HashMap<>();\nages.put(\"John\", 30);\nages.put(\"Jane\", 25);\nages.put(\"Bob\", 35);",
+          "explanation": "This example demonstrates the usage of Java collections. An ArrayList is used to store a list of names, a HashSet is used to store unique numbers, and a HashMap is used to store key-value pairs of names and ages."
+        },
+        {
+          "title": "I/O",
+          "description": "Java's I/O (Input/Output) classes are used to read data from and write data to files and other input and output sources.",
+          "code": "try {\n  FileWriter writer = new FileWriter(\"output.txt\");\n  writer.write(\"Hello, World!\");\n  writer.close();\n} catch (IOException e) {\n  System.out.println(\"An error occurred.\");\n  e.printStackTrace();\n}\n\ntry {\n  FileReader reader = new FileReader(\"input.txt\");\n  // Read operations\n} catch (FileNotFoundException e) {\n  System.out.println(\"An error occurred.\");\n  e.printStackTrace();\n}",
+          "explanation": "This code snippet shows basic file I/O operations in Java. A FileWriter is used to write text to a file, and a FileReader (commented) is used to read text from a file. Exception handling ensures that any I/O errors are caught and handled appropriately."
+        },
+        {
+          "title": "Networking",
+          "description": "Java's networking classes allow you to communicate with other computers over a network using sockets and other protocols.",
+          "code": "try {\n  Socket socket = new Socket(\"example.com\", 80);\n  PrintWriter out = new PrintWriter(socket.getOutputStream(), true);\n  BufferedReader in = new BufferedReader(new InputStreamReader(socket.getInputStream()));\n  out.println(\"GET / HTTP/1.1\\nHost: example.com\\n\\n\");\n  String response = in.readLine();\n  while (response != null) {\n    System.out.println(response);\n    response = in.readLine();\n  }\n  socket.close();\n} catch (IOException e) {\n  System.out.println(\"An error occurred.\");\n  e.printStackTrace();\n}",
+          "explanation": "This example demonstrates basic networking in Java. A socket connection is established to a web server, an HTTP GET request is sent, and the server's response is read and printed line by line. Proper exception handling ensures that any networking errors are caught and handled."
+        },
+        {
+          "title": "Concurrency",
+          "description": "Java's concurrency utilities enable parallel execution of code using threads and synchronization.",
+          "code": "class MyThread extends Thread {\n  public void run() {\n    System.out.println(\"Thread running\");\n  }\n}\n\nMyThread t1 = new MyThread();\nMyThread t2 = new MyThread();\nt1.start();\nt2.start();",
+          "explanation": "This code demonstrates concurrency in Java using threads. A custom thread class is created by extending the Thread class and overriding the run method. Two threads are instantiated and started, running concurrently and printing a message."
+        },
+        {
+          "title": "Date and Time",
+          "description": "Java's date and time API provides classes for managing dates, times, and durations.",
+          "code": "import java.time.LocalDate;\nimport java.time.LocalTime;\nimport java.time.LocalDateTime;\n\nLocalDate date = LocalDate.now();\nLocalTime time = LocalTime.now();\nLocalDateTime dateTime = LocalDateTime.now();\n\nSystem.out.println(\"Date: \" + date);\nSystem.out.println(\"Time: \" + time);\nSystem.out.println(\"DateTime: \" + dateTime);",
+          "explanation": "This example shows how to work with date and time using the java.time package. It retrieves and prints the current date, time, and date-time using LocalDate, LocalTime, and LocalDateTime classes, respectively."
+        }
+      ]
+    },
+    {
+      "id": "advanced",
+      "title": "Advanced Java",
+      "description": "Explore advanced topics in Java, including generics, lambda expressions, streams, and more.",
+      "items": [
+        {
+          "title": "Generics",
+          "description": "Generics enable types (classes and methods) to operate on objects of various types while providing compile-time type safety.",
+          "code": "class Box<T> {\n  private T value;\n\n  public void setValue(T value) {\n    this.value = value;\n  }\n\n  public T getValue() {\n    return value;\n  }\n}\n\nBox<Integer> intBox = new Box<>();\nintBox.setValue(10);\nSystem.out.println(\"Integer Value: \" + intBox.getValue());\n\nBox<String> strBox = new Box<>();\nstrBox.setValue(\"Hello\");\nSystem.out.println(\"String Value: \" + strBox.getValue());",
+          "explanation": "This example demonstrates the use of generics in Java, which allow classes, interfaces, and methods to operate on types specified by the programmer. The Box class can store any type of value, and two instances of Box are created to store an Integer and a String."
+        },
+        {
+          "title": "Lambda Expressions",
+          "description": "Lambda expressions provide a clear and concise way to represent one method interface using an expression.",
+          "code": "List<String> names = Arrays.asList(\"John\", \"Jane\", \"Bob\");\n\nnames.forEach(name -> System.out.println(name));",
+          "explanation": "This code demonstrates the use of lambda expressions in Java. The forEach method of the List interface is used to iterate over the list of names and print each name. Lambda expressions provide a concise way to represent anonymous functions."
+        },
+        {
+          "title": "Streams",
+          "description": "Streams support functional-style operations on sequences of elements, such as map-reduce transformations.",
+          "code": "List<Integer> numbers = Arrays.asList(1, 2, 3, 4, 5);\n\nint sum = numbers.stream()\n  .filter(n -> n % 2 == 0)\n  .mapToInt(Integer::intValue)\n  .sum();\n\nSystem.out.println(\"Sum of even numbers: \" + sum);",
+          "explanation": "This example demonstrates the use of streams in Java to process a list of integers. The stream pipeline filters even numbers, converts them to integers, and calculates their sum. Streams allow for functional-style operations on collections of objects."
+        },
+        {
+          "title": "Annotations",
+          "description": "Annotations provide metadata about the program, which can be used by the compiler or at runtime.",
+          "code": "@Override\npublic String toString() {\n  return \"Custom toString implementation\";\n}\n\n@SuppressWarnings(\"unchecked\")\npublic void myMethod() {\n  List rawList = new ArrayList();\n  rawList.add(\"Test\");\n}",
+          "explanation": "This code demonstrates the use of annotations in Java. The @Override annotation indicates that a method is overriding a superclass method. The @SuppressWarnings annotation is used to suppress compiler warnings, in this case, unchecked type operations."
+        },
+        {
+          "title": "Reflection",
+          "description": "Reflection allows inspection and manipulation of classes, methods, and fields at runtime.",
+          "code": "try {\n  Class<?> clazz = Class.forName(\"java.lang.String\");\n  Method method = clazz.getMethod(\"substring\", int.class, int.class);\n  String str = \"Hello, World!\";\n  String result = (String) method.invoke(str, 7, 12);\n  System.out.println(\"Result: \" + result);\n} catch (Exception e) {\n  e.printStackTrace();\n}",
+          "explanation": "This code demonstrates the use of reflection in Java to inspect and manipulate classes at runtime. The Class.forName method retrieves the String class, the getMethod method retrieves the substring method, and the method.invoke method calls substring on the given string."
+        },
+        {
+          "title": "Enums",
+          "description": "Enums are special Java types used to define collections of constants.",
+          "code": "enum Day {\n  SUNDAY, MONDAY, TUESDAY, WEDNESDAY, THURSDAY, FRIDAY, SATURDAY\n}\n\npublic class Main {\n  public static void main(String[] args) {\n    Day today = Day.MONDAY;\n    switch (today) {\n      case MONDAY:\n        System.out.println(\"Today is Monday\");\n        break;\n      case FRIDAY:\n        System.out.println(\"Today is Friday\");\n        break;\n      default:\n        System.out.println(\"Another day\");\n    }\n  }\n}",
+          "explanation": "This example shows how to define and use an enum. The Day enum represents the days of the week, and a switch statement is used to print a message based on the current day."
+        },
+        {
+          "title": "Records",
+          "description": "Records provide a compact syntax for declaring classes that are primarily used to store data.",
+          "code": "public record Person(String name, int age) {}\n\npublic class Main {\n  public static void main(String[] args) {\n    Person person = new Person(\"John\", 25);\n    System.out.println(person.name() + \" is \" + person.age() + \" years old.\");\n  }\n}",
+          "explanation": "This example shows how to define and use a record in Java. Records provide a compact syntax for declaring classes that are primarily used to store data and automatically generate common methods like constructors, equals, hashCode, and toString."
+        }
+      ]
+    }
+  ]
+}

app/layout.tsx

@@ -0,0 +1,153 @@
+import { useState, useEffect } from "react"
+import Link from "next/link"
+import JavaText from "./java_tutorial.json"
+import { JSX, SVGProps } from "react"
+
+export default function Layout({ children }) {
+  const JavaContent = JavaText
+  const [showButton, setShowButton] = useState(false)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 300) {
+        setShowButton(true)
+      } else {
+        setShowButton(false)
+      }
+    }
+
+    window.addEventListener("scroll", handleScroll)
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll)
+    }
+  }, [])
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth"
+    })
+  }
+
+  return (
+      <div className="flex flex-col min-h-[100dvh] scroll-smooth">
+        <style jsx global>{`
+                html {
+                    scroll-behavior: smooth;
+                }
+            `}</style>
+        <header className="bg-primary text-primary-foreground py-4 px-6 shadow">
+          <div className="container mx-auto flex items-center justify-between">
+            <Link href="/" className="flex items-center gap-2 font-bold text-xl" prefetch={false}>
+              <CodeIcon className="w-6 h-6"/>
+              Dot Java
+            </Link>
+            <nav className="hidden md:flex items-center gap-6">
+              {JavaContent.sections.map((section, index) => (
+                  <Link key={index} href={`#${section.id}`} className="hover:underline" prefetch={false}>
+                    {section.title}
+                  </Link>
+              ))}
+              <Link href="/editor" className="hover:underline" prefetch={false}>
+                Java Code Editor
+              </Link>
+            </nav>
+          </div>
+        </header>
+        <main className="flex-1">
+          {children}
+        </main>
+        {showButton && (
+            <button
+                onClick={scrollToTop}
+                className="fixed bottom-10 right-10 bg-primary text-primary-foreground p-3 rounded-full shadow-lg hover:bg-primary-dark transition"
+            >
+              ↑ Top
+            </button>
+        )}
+        <footer className="bg-muted text-muted-foreground py-6">
+          <div className="container mx-auto px-4 md:px-6 flex items-center justify-between">
+            <p className="text-sm">&copy; 2024 Java Tutorials. All rights reserved.</p>
+            <nav className="flex items-center gap-4">
+              <a href="#" className="hover:underline">License</a>
+              <a href="https://github.com" target="_blank" rel="noopener noreferrer" className="hover:underline">
+                <GitHubIcon className="w-6 h-6"/>
+              </a>
+              <a href="mailto:your-email@gmail.com" className="hover:underline">
+                <GmailIcon className="w-6 h-6"/>
+              </a>
+              <a href="https://www.linkedin.com" target="_blank" rel="noopener noreferrer" className="hover:underline">
+                <LinkedInIcon className="w-6 h-6"/>
+              </a>
+            </nav>
+          </div>
+        </footer>
+      </div>
+  )
+}
+
+function CodeIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+  return (
+      <svg
+          {...props}
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+      >
+        <polyline points="16 18 22 12 16 6" />
+        <polyline points="8 6 2 12 8 18" />
+      </svg>
+  )
+}
+
+function GitHubIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+  return (
+      <svg
+          {...props}
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          stroke="currentColor"
+          strokeWidth="0"
+      >
+        <path d="M12 .5C5.48.5.5 5.48.5 12c0 5.08 3.29 9.35 7.85 10.86.58.1.79-.24.79-.54 0-.27-.01-.99-.01-1.94-3.19.69-3.86-1.54-3.86-1.54-.53-1.36-1.29-1.72-1.29-1.72-1.05-.72.08-.71.08-.71 1.16.08 1.77 1.2 1.77 1.2 1.03 1.77 2.69 1.26 3.34.96.1-.75.4-1.26.73-1.55-2.55-.29-5.23-1.28-5.23-5.72 0-1.26.45-2.29 1.2-3.1-.12-.29-.52-1.45.12-3.02 0 0 .97-.31 3.17 1.18.92-.26 1.91-.39 2.89-.39.98 0 1.97.13 2.89.39 2.2-1.49 3.17-1.18 3.17-1.18.64 1.57.24 2.73.12 3.02.75.81 1.2 1.84 1.2 3.1 0 4.46-2.69 5.43-5.25 5.71.41.35.78 1.03.78 2.08 0 1.5-.01 2.72-.01 3.08 0 .3.21.65.8.54C20.71 21.35 24 17.08 24 12c0-6.52-4.98-11.5-12-11.5z"/>
+      </svg>
+  )
+}
+
+function GmailIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+  return (
+      <svg
+          {...props}
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          stroke="currentColor"
+          strokeWidth="0"
+      >
+        <path d="M12 12.713l11.985-8.677a.868.868 0 0 0-.491-.148H.506c-.177 0-.344.055-.491.148L12 12.713zm0 1.431L.035 5.596A.875.875 0 0 0 0 6.125v11.75c0 .478.387.875.875.875h22.25c.478 0 .875-.387.875-.875V6.125a.875.875 0 0 0-.035-.529L12 14.144z"/>
+      </svg>
+  )
+}
+
+function LinkedInIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+  return (
+      <svg
+          {...props}
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          stroke="currentColor"
+          strokeWidth="0"
+      >
+        <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.761 0 5-2.239 5-5v-14c0-2.761-2.239-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.5c-.966 0-1.75-.784-1.75-1.75s.784-1.75 1.75-1.75 1.75.784 1.75 1.75-.784 1.75-1.75 1.75zm13.5 12.5h-3v-5.5c0-1.379-1.121-2.5-2.5-2.5s-2.5 1.121-2.5 2.5v5.5h-3v-11h3v1.474c.809-1.161 2.201-1.974 3.5-1.974 2.481 0 4.5 2.019 4.5 4.5v7z"/>
+      </svg>
+  )
+}

app/page.tsx

@@ -0,0 +1,173 @@
+"use client"
+import { useState, useEffect } from "react"
+import Link from "next/link"
+import JavaText from "./java_tutorial.json"
+import { JSX, SVGProps } from "react"
+
+export default function Component() {
+    const JavaContent = JavaText
+    const [showButton, setShowButton] = useState(false)
+
+    useEffect(() => {
+        const handleScroll = () => {
+            if (window.scrollY > 300) {
+                setShowButton(true)
+            } else {
+                setShowButton(false)
+            }
+        }
+
+        window.addEventListener("scroll", handleScroll)
+
+        return () => {
+            window.removeEventListener("scroll", handleScroll)
+        }
+    }, [])
+
+    const scrollToTop = () => {
+        window.scrollTo({
+            top: 0,
+            behavior: "smooth"
+        })
+    }
+
+    return (
+        <div className="flex flex-col min-h-[100dvh] scroll-smooth">
+            <style jsx global>{`
+                html {
+                    scroll-behavior: smooth;
+                }
+            `}</style>
+            <header className="bg-primary text-primary-foreground py-4 px-6 shadow">
+                <div className="container mx-auto flex items-center justify-between">
+                    <Link href="#" className="flex items-center gap-2 font-bold text-xl" prefetch={false}>
+                        <CodeIcon className="w-6 h-6"/>
+                        Dot Java
+                    </Link>
+                    <nav className="hidden md:flex items-center gap-6">
+                        {JavaContent.sections.map((section, index) => (
+                            <Link key={index} href={`#${section.id}`} className="hover:underline" prefetch={false}>
+                                {section.title}
+                            </Link>
+                        ))}
+                    </nav>
+                </div>
+            </header>
+            <main className="flex-1">
+                {JavaContent.sections.map((section, index) => (
+                    <section key={index} id={section.id}
+                             className={`py-12 md:py-24 ${index % 2 === 0 ? 'bg-muted' : ''}`}>
+                        <div className="container mx-auto px-4 md:px-6">
+                            <h2 className="text-3xl font-bold mb-8">{section.title}</h2>
+                            <p className="text-lg mb-8">{section.description}</p>
+                            <div className="grid md:grid-cols-2 gap-10">
+                                {section.items.map((item, itemIndex) => (
+                                    <div key={itemIndex}>
+                                        <h3 className="text-2xl font-bold mb-4">{item.title}</h3>
+                                        <p className="text-muted-foreground mb-6">{item.description}</p>
+                                        <div className="bg-background rounded-lg p-6 shadow my-4">
+                                            <pre className="text-sm font-mono">
+                                                <code className="text-pretty">{item.code}</code>
+                                            </pre>
+                                        </div>
+                                        <p className="text-pretty">{item.explanation}</p>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    </section>
+                ))}
+            </main>
+            {showButton && (
+                <button
+                    onClick={scrollToTop}
+                    className="fixed bottom-10 right-10 bg-primary text-primary-foreground p-3 rounded-full shadow-lg hover:bg-primary-dark transition"
+                >
+                    ↑ Top
+                </button>
+            )}
+            <footer className="bg-muted text-muted-foreground py-6">
+                <div className="container mx-auto px-4 md:px-6 flex items-center justify-between">
+                    <p className="text-sm">&copy; 2024 Java Tutorials. All rights reserved.</p>
+                    <nav className="flex items-center gap-4">
+                        <a href="#" className="hover:underline">License</a>
+                        <a href="https://github.com/Quinta0" target="_blank" rel="noopener noreferrer" className="hover:underline">
+                            <GitHubIcon className="w-6 h-6"/>
+                        </a>
+                        <a href="mailto:0pietroquintavalle0@gmail.com" className="hover:underline">
+                            <GmailIcon className="w-6 h-6"/>
+                        </a>
+                        <a href="https://www.linkedin.com/in/pietro-quintavalle-996b96267/" target="_blank" rel="noopener noreferrer" className="hover:underline">
+                            <LinkedInIcon className="w-6 h-6"/>
+                        </a>
+                    </nav>
+                </div>
+            </footer>
+        </div>
+    )
+}
+
+function CodeIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+    return (
+        <svg
+            {...props}
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        >
+            <polyline points="16 18 22 12 16 6" />
+            <polyline points="8 6 2 12 8 18" />
+        </svg>
+    )
+}
+
+function GitHubIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+    return (
+        <svg
+            {...props}
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            stroke="currentColor"
+            strokeWidth="0"
+        >
+            <path d="M12 .5C5.48.5.5 5.48.5 12c0 5.08 3.29 9.35 7.85 10.86.58.1.79-.24.79-.54 0-.27-.01-.99-.01-1.94-3.19.69-3.86-1.54-3.86-1.54-.53-1.36-1.29-1.72-1.29-1.72-1.05-.72.08-.71.08-.71 1.16.08 1.77 1.2 1.77 1.2 1.03 1.77 2.69 1.26 3.34.96.1-.75.4-1.26.73-1.55-2.55-.29-5.23-1.28-5.23-5.72 0-1.26.45-2.29 1.2-3.1-.12-.29-.52-1.45.12-3.02 0 0 .97-.31 3.17 1.18.92-.26 1.91-.39 2.89-.39.98 0 1.97.13 2.89.39 2.2-1.49 3.17-1.18 3.17-1.18.64 1.57.24 2.73.12 3.02.75.81 1.2 1.84 1.2 3.1 0 4.46-2.69 5.43-5.25 5.71.41.35.78 1.03.78 2.08 0 1.5-.01 2.72-.01 3.08 0 .3.21.65.8.54C20.71 21.35 24 17.08 24 12c0-6.52-4.98-11.5-12-11.5z"/>
+        </svg>
+    )
+}
+
+function GmailIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+    return (
+        <svg
+            {...props}
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            stroke="currentColor"
+            strokeWidth="0"
+        >
+            <path d="M12 12.713l11.985-8.677a.868.868 0 0 0-.491-.148H.506c-.177 0-.344.055-.491.148L12 12.713zm0 1.431L.035 5.596A.875.875 0 0 0 0 6.125v11.75c0 .478.387.875.875.875h22.25c.478 0 .875-.387.875-.875V6.125a.875.875 0 0 0-.035-.529L12 14.144z"/>
+        </svg>
+    )
+}
+
+function LinkedInIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+    return (
+        <svg
+            {...props}
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            stroke="currentColor"
+            strokeWidth="0"
+        >
+            <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.761 0 5-2.239 5-5v-14c0-2.761-2.239-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.5c-.966 0-1.75-.784-1.75-1.75s.784-1.75 1.75-1.75 1.75.784 1.75 1.75-.784 1.75-1.75 1.75zm13.5 12.5h-3v-5.5c0-1.379-1.121-2.5-2.5-2.5s-2.5 1.121-2.5 2.5v5.5h-3v-11h3v1.474c.809-1.161 2.201-1.974 3.5-1.974 2.481 0 4.5 2.019 4.5 4.5v7z"/>
+        </svg>
+    )
+}

components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

components/codeeditor.tsx

@@ -0,0 +1,25 @@
+import { Button } from "@/components/ui/button"
+
+export default function Component() {
+    return (
+        <div className="flex h-screen w-full">
+            <div className="flex-1 bg-background p-6">
+                <div className="flex h-full flex-col gap-6">
+                    <div className="flex items-center justify-between">
+                        <h1 className="text-2xl font-bold">Java Code Editor</h1>
+                        <Button>Run</Button>
+                    </div>
+                    <div className="flex-1 rounded-md border border-input">
+                        <div className="h-full w-full p-4 text-sm" />
+                    </div>
+                </div>
+            </div>
+            <div className="flex w-1/2 flex-col bg-muted p-6">
+                <h2 className="text-xl font-bold">Output</h2>
+                <div className="flex-1 rounded-md border border-input p-4 text-sm">
+                    <pre className="whitespace-pre-wrap">Hello, World!</pre>
+                </div>
+            </div>
+        </div>
+    )
+}

components/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

components/ui/card.tsx

@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

components/ui/carousel.tsx

@@ -0,0 +1,262 @@
+"use client"
+
+import * as React from "react"
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+const Carousel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(
+  (
+    {
+      orientation = "horizontal",
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+      },
+      plugins
+    )
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+    const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return
+      }
+
+      setCanScrollPrev(api.canScrollPrev())
+      setCanScrollNext(api.canScrollNext())
+    }, [])
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev()
+    }, [api])
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext()
+    }, [api])
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault()
+          scrollPrev()
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault()
+          scrollNext()
+        }
+      },
+      [scrollPrev, scrollNext]
+    )
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return
+      }
+
+      setApi(api)
+    }, [api, setApi])
+
+    React.useEffect(() => {
+      if (!api) {
+        return
+      }
+
+      onSelect(api)
+      api.on("reInit", onSelect)
+      api.on("select", onSelect)
+
+      return () => {
+        api?.off("select", onSelect)
+      }
+    }, [api, onSelect])
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation:
+            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn("relative", className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    )
+  }
+)
+Carousel.displayName = "Carousel"
+
+const CarouselContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden">
+      <div
+        ref={ref}
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+})
+CarouselContent.displayName = "CarouselContent"
+
+const CarouselItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+CarouselItem.displayName = "CarouselItem"
+
+const CarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute  h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-left-12 top-1/2 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft className="h-4 w-4" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+})
+CarouselPrevious.displayName = "CarouselPrevious"
+
+const CarouselNext = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-right-12 top-1/2 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight className="h-4 w-4" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+})
+CarouselNext.displayName = "CarouselNext"
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}

lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "dotjava",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@fontsource/jetbrains-mono": "^5.0.20",
+    "@radix-ui/react-slot": "^1.0.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "embla-carousel-react": "^8.1.5",
+    "lucide-react": "^0.395.0",
+    "next": "14.2.4",
+    "react": "^18",
+    "react-dom": "^18",
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.4",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

public/vercel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

tailwind.config.ts

@@ -0,0 +1,83 @@
+import type { Config } from "tailwindcss"
+
+const config = {
+  darkMode: ["class"],
+  content: [
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+  ],
+  prefix: "",
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      fontFamily: {
+        'mono': ['"JetBrains Mono"', 'monospace'],
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+} satisfies Config
+
+export default config

tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}