Welcome to the documentation for Futura, a Tailwind CSS-based template designed with a cyberpunk aesthetic. This guide covers setup, installation, and customization to help you build stunning websites.

Setup and Installation

Follow these steps to set up and run the Futura template on your local machine.

Step 1: Prepare Your Tools

Before starting, ensure you have the following tools installed:

• Node.js and npm: Download and install from nodejs.org. We recommend using the LTS version.
• Code Editor: Use a code editor like Visual Studio Code, Sublime Text, or your preferred IDE.

Step 2: Open the Project

Downloading the ZIP file and Navigate to the project directory:

cd futura

Step 3: Install Dependencies and Run the Project

Run the following commands to install dependencies and start the development server:

1. Install Dependencies:

   npm install

   This installs all required packages listed in package.json.

2. Start Development Server:

   npm run dev

   This starts the development server using Browsersync. Open http://localhost:3000 in your browser.

3. Build for Production:

   npm run build

   This generates optimized production files in the dist folder, ready for deployment.

Step 4: Customize Appearance

Customize the template to match your brand and content:

• Edit HTML Files: Modify the HTML files in the futura folder to update content, such as text, images, and links.
• Replace Images: Update images in the src/img folder with your own assets. Ensure paths in HTML files match the new filenames.

Customization

Futura is built with Tailwind CSS, offering flexible customization options. Below are the primary ways to customize the template.

1. Customize Tailwind Styles

You can customize Tailwind styles in two ways:

• Modify Tailwind Configuration: Edit the src/tailwind/tailwindcss.css file to adjust Tailwind’s configuration. For example, add custom colors, fonts, or spacing:

  @import "tailwindcss";
  @theme {
      --font-sans: 'Poppins', sans-serif;
      --font-future: 'Orbitron', sans-serif;
      --color-cyber-blue: #00e5ff;
      --color-cyber-dark: #001a2c;
      --color-cyber-light: #0af0ff;
      --animation-pulse-slow: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      --animation-float: float 6s ease-in-out infinite;
      --animation-data-stream: dataStream 10s linear infinite;
  }
  @layer base {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
      border-color: var(--color-gray-200, currentColor);
    }
    input::placeholder,
    textarea::placeholder {
      color: theme(--color-gray-400);
    }
    button, [role="button"] {
      cursor: pointer;
    }
  }
  @custom-variant dark (&:where(.dark, .dark *));
  
  /* plugins */
  @import "./vendors/theme.css";

• Customize Directly in HTML: Add or modify Tailwind classes directly in HTML files to change styles. For example:

  <h1 class="text-4xl font-bold text-cyber-blue hover:text-white">Your Title</h1>

  Use Tailwind’s utility classes to adjust layout, colors, typography, and more without writing custom CSS.

2. Add Custom CSS

For styles beyond Tailwind’s utilities, add custom CSS in src/tailwind/vendors/theme.css. For example:

/* Custom animations */
@keyframes pulse-slow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

.animate-pulse-slow {
  animation: pulse-slow 6s ease-in-out infinite;
}

/* Custom button styles */
.custom-btn {
  background: linear-gradient(45deg, #00b7eb, #007acc);
  padding: 12px 24px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

Apply these custom classes in your HTML files, e.g.,

<button class="custom-btn">Click Me</button>

Need Help?

If you encounter issues or have questions about customizing Futura, contact our support team: Lightestcode@gmail.com