Configuration File

The centralized configuration file is located at:

src/data/config.ts

Open this file in your code editor to customize all texts, lists, and settings. It is exported as a single object named siteConfig.

Website Name & Logo

The website name and navigation text logos are fully customizable:

• Navbar Brand Text: Edit the navbarLogoText property.
  TYPESCRIPT Copy

  navbarLogoText: "Helix Studio", // Appears in the top-left header

• Admin Dashboard Logo: Edit the logo text in the navigation section of `src/pages/Admin.tsx` if desired.
• Image Logo Option: If you prefer an image logo instead of text, open src/components/Navbar.tsx, find {siteConfig.navbarLogoText}, and replace it with an <img> tag referencing your asset (e.g. <img src="/logo.png" class="h-6 w-auto" />).

Discord Webhook

When a client submits the contact collaboration form, their message and requested services are sent instantly to your Discord server via a webhook.

1. Retrieve Your Discord Webhook

   In Discord, go to Server Settings -> Integrations -> Webhooks -> Create Webhook. Select the channel where you want to receive inquiries and copy the Webhook URL.

2. Paste the Webhook URL

   In src/data/config.ts, locate the contact block and paste your webhook URL:

   TYPESCRIPT Copy

   contact: {
     title: "CONTACT",
     subtitle: "contact for collaboration",
     discordWebhookUrl: "YOUR_DISCORD_WEBHOOK_URL_HERE", // Paste URL here
     ...
   }

3. Customize Embed Styles

   You can also edit the bot's display name, the embed header title, and the footer text inside the contactForm block:

   TYPESCRIPT Copy

   contactForm: {
     discordBotName: "Helix Studio Lead Capture",
     discordEmbedTitle: "📩 New Collaboration Request",
     discordEmbedFooter: "Helix Studio Leads",
     ...
   }

Social Links

The social media links displayed in the hero section and contact footer are read from the socials array. Helix Studio automatically resolves and renders the correct icon for supported platforms:

socials: [
  { platform: "GitHub", url: "https://github.com/helixstudio" },
  { platform: "Instagram", url: "https://instagram.com/helixstudio" },
  { platform: "YouTube", url: "https://youtube.com/helixstudio" },
  { platform: "BuildByBit", url: "https://buildbybit.com/helixstudio" },
  { platform: "Twitter", url: "https://twitter.com/helixstudio" },
  { platform: "LinkedIn", url: "https://linkedin.com/company/helixstudio" }
]

Contact Details

Update your public contact details in the contact block. These control the email, phone numbers, and support hour notices rendered in the footer cards:

contact: {
  ...
  email: "hello@helixstudio.xyz",
  phone: "+91 73804 83583",
  phoneRaw: "+917380483583", // Raw numbers (no spaces) for tap-to-call links
  whatsappLabel: "Whatsapp/Sms Us",
  supportHours: "Support available Mon-Sat, 10am-7pm IST.",
  emailFootnote: "We respond to all inquiries within 24 hours.",
  ...
}

SEO & Open Graph

For search engine visibility and dynamic social media link embeds, edit the seo block. These parameters dynamically update browser meta tags at runtime, while the preboot crawler handles static scrapes:

seo: {
  title: "Helix Studio | Creative Agency & Web Development Studio",
  description: "Helix Studio is a premium creative and development agency specializing in website development...",
  keywords: "Helix Studio, web development, creative agency, SaaS...",
  canonical: "https://helixstudio.xyz/",
  ogTitle: "Helix Studio | Creative Agency & Web Development",
  ogDescription: "Helix Studio is a premium creative and development agency...",
  ogImage: "https://helixstudio.xyz/og-main.png", // Full absolute URL is required for Discord/Twitter embeds
  robots: "index, follow",
}

Design Palette

The website is built using a strict, modern monochrome (black & white) theme, creating a highly professional and high-contrast digital showcase. All primary colors are structured around black background layers, white text layers, and varying shades of gray borders and overlays.

Typography & Fonts

The typography is defined globally in the Tailwind configuration and imported in the main CSS stylesheet.

1. Google Fonts Imports

   Google Fonts are imported at the top of src/index.css:

   CSS Copy

   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Outfit:wght@300;400;500;600;700;800;900&family=Syne:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

   You can swap these fonts out by updating the import URL and mapping the corresponding names in tailwind.config.js under the fontFamily extend block.

2. Local Premium Fonts

   Helix Studio includes premium, local font assets (like Deltha, Posterman, and Audiowide) inside `src/assets/`. They are loaded in src/index.css using standard CSS rules:

   CSS Copy

   @font-face {
     font-family: 'Deltha';
     src: url('./assets/Deltha.otf') format('opentype');
     font-display: swap;
   }

Hero Configuration

The hero layout uses a split grid representing agency details. The giant back-faded text and text-marquee triggers can be edited in src/data/config.ts:

hero: {
  backgroundTitle: "HELIX",   // Large background title
  studioLinkText: "STUDIO",   // Central marquee button link text
  leftColumnDetailLines: [
    "AN ELITE RANGE",
    "OF CREATIVE SERVICES"
  ],
  rightColumnDetailLines: [
    "SYSTEMS ARCHITECTURE",
    "AND INFRASTRUCTURE"
  ]
}

Favicon Setup

To change the browser tab icon (favicon), replace the favicon assets in the public directory:

• To customize the default icon instantly, open index.html and find the <link rel="icon" ...> tag on line 5. You can replace the inline SVG code with a link to a local PNG:
  HTML Copy

  <link rel="icon" type="image/png" href="/favicon.png" />

  Place your favicon.png directly inside the public/ folder.

How Showcase Works

The project showcase section (Showcase.tsx) displays an interactive, high-inertia sliding 3D card carousel. It pulls project information dynamically from the projects array in src/data/config.ts.

Project Addition Methods

We have simplified project image management to give you two easy options:

Removing Projects

To remove any project from the showcase:

1. Open src/data/config.ts.
2. Locate the project object you want to delete inside the projects array.
3. Delete the object (or comment it out by wrapping it with /* ... */).
4. Save the file. The carousel will automatically resize and update.

Adding Analytics (Google Analytics & Pixels)

To monitor visitor traffic and conversion rates, you can easily insert tracking scripts into the main document head:

1. Open index.html inside the project root folder.
2. Locate the ending </head> tag.
3. Paste your Google Analytics Global Site Tag (gtag.js) or Facebook Pixel code right before it:

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

Adding Custom Form Fields

To add new inputs to the contact collaboration form (for example, a Phone Number or a Budget Range field) and map them to your Discord webhook channel:

1. Add Input Markup in React

   Open src/components/Contact.tsx, locate the form inputs, and add your new HTML input tag:

   TSX Copy

   <input 
     type="text" 
     name="budget" 
     placeholder="Estimated Budget ($)" 
     className="w-full bg-black/40 border border-white/10 p-3 rounded ..."
   />

2. Update Submission Handler & State

   In the same file, locate the state declarations and ensure your new field is registered. Update the submit handler to capture the value from the form element.

3. Map to Discord Embed Payload

   Update the request payload sent to the Discord API inside your submission helper. Add a new field object to the embeds[0].fields array:

   TYPESCRIPT Copy

   {
     name: "💰 Estimated Budget",
     value: formData.budget || "Not specified",
     inline: true
   }

Email Notification Fallback

If you prefer receiving client inquiries directly in your email inbox instead of a Discord server channel, you can easily swap the backend service layer:

• EmailJS Integration: A popular, free service that sends form submissions directly via SMTP without maintaining a backend server. Read the official documentation on EmailJS and replace the fetch(siteConfig.contact.discordWebhookUrl) block in src/components/Contact.tsx with the EmailJS SDK hook:
  TYPESCRIPT Copy

  emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', e.target, 'YOUR_PUBLIC_KEY')
    .then(() => {
      // Show success banner
    }, (error) => {
      // Show error alert
    });

Turnstile Overview

Cloudflare Turnstile is a smart, non-intrusive CAPTCHA alternative that verifies website visitors are human without presenting annoying visual puzzles. It keeps scraper bots and spam requests out while providing a frictionless experience for legitimate users.

Key Configurations

The Turnstile keys are kept in a dedicated, lightweight configuration file to ensure the backend serverless routes and frontend widgets can load them without bundler conflicts:

src/data/keys.ts

export const keysConfig = {
  // Cloudflare Turnstile Site Key (Used on the frontend widget)
  turnstileSiteKey: "0x4AAAAAADp5Le-Mp1eOw9-E",

  // Cloudflare Turnstile Secret Key (Used on the backend verification api)
  turnstileSecretKey: "0x4AAAAAADp5LXw0x7G5RDQgxTPQbFoEKAw"
};

Creating Widget Keys

To set up your own free Turnstile widget and get your cryptographic keys, follow these steps:

1. Log into Cloudflare

   Go to the Cloudflare Dashboard and log in. If you don't have an account, sign up for free.

2. Add a Turnstile Widget

   On the left-hand sidebar of your dashboard, click on Turnstile -> Add Site.

3. Configure Settings
   • Site Name: Enter a friendly identifier (e.g. Helix Studio).
   • Domain: Add your production domain name (e.g. helixstudio.xyz).
     Important: Also add localhost and 127.0.0.1 so you can test the site locally!
   • Widget Mode: Select **Managed** (recommended, invisible challenge that only shows a checkmark if threat signature is detected) or **Invisible**.
4. Copy Keys to keys.ts

   Cloudflare will generate a **Site Key** and a **Secret Key**. Copy and paste them into their respective fields in src/data/keys.ts.

Security Gate Toggles

By default, the Turnstile human verification gate acts as a security splash wall when visitors load the site. You can toggle this gate on or off with a simple modification in the app shell:

src/App.tsx

Troubleshooting Guides

• Error: "Domain not allowed": This occurs if you open the website on a domain name (or local port) that has not been registered in your Cloudflare Turnstile dashboard. Go to Cloudflare, select your widget, and ensure localhost, 127.0.0.1, and your production URL are added to the allowed domains list.
• Local Development Testing Keys: If you do not have internet access or want to test without setting up a Cloudflare account, you can use Cloudflare's official testing keys, which always pass verification:
  • Site Key (Always Passes): 1x00000000000000000000AA
  • Secret Key (Always Passes): 1x00000000000000000000000000000000
• Widget Failing to Render: Ensure that you have loaded the Cloudflare script in index.html. It is included in the head tag:
  HTML Copy

  <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit" async defer></script>

Preboot Shield Core

Helix Studio contains an advanced, high-performance security shield embedded directly within the head of index.html. This script executes during the preboot phase (before any React elements load) to protect the site's design assets and code from being scraped or cloned.

Allowed Hostnames

The preboot shield blocks visitors and displays a secure firewall intercept screen if they attempt to run the site offline or from an unauthorized domain. You must configure which domains are allowed to host the site:

Open src/data/config.ts and locate the securityShield object:

securityShield: {
  title: "SECURE-CORE ENGAGED",
  subtitle: "Sandboxed Copy Detected",
  // ...
  allowedHostnames: ["helixstudio.xyz", "localhost", "127.0.0.1"], // <-- Add your domains here!
  // ...
}

Threat Interceptions

1. File Protocol Blocker

   If someone downloads the site assets via tools like HTTrack, Wget, or Curl and double-clicks the local HTML file (running under the file: protocol), the shield immediately overrides the document, locks the thread, and renders a security troll screen.

2. Headless / Automation Blocker

   The script detects browser automation signatures (such as Puppeteer, Selenium, Playwright, or headless user agents). If identified, it replaces the content with a decoy firewall terminal (FakeLoader.tsx).

3. Keyboard Shortcut Blocking

   The shield intercepts keyboard shortcuts in the capture phase to block inspections:

   • F12 (Opens developer console)
   • Ctrl + Shift + I / Ctrl + Shift + J (Inspect elements / console)
   • Ctrl + U (View page source code)
   • Ctrl + S (Save page assets locally)

Compile-Time Obfuscation

When you run npm run build, the bundler runs the JavaScript Obfuscator configured in vite.config.ts. This compiler-level security:

• Minifies and scrambles all variables, functions, and string values into hexadecimal hashes.
• Injects self-defending code: if a buyer tries to pretty-print or alter the compiled script, it enters an infinite debugger loop and crashes their browser.
• Encrypts critical strings (like the Discord webhook or keys) with RC4 encryption.
• Disables source map generation to ensure no original source code is exposed.

Vercel Deployment (Recommended)

Vercel is the optimal hosting platform for Helix Studio, offering instant edge networking and zero-config deployment for Vite and React serverless environments.

1. Push Code to Git

   Upload your customized SourceCode folder to a private repository on GitHub, GitLab, or Bitbucket.

2. Import Project in Vercel

   Log into the Vercel Dashboard, click Add New -> Project, and import your repository.

3. Configure Build Settings

   Vercel will automatically detect the Vite build profile. Keep the default settings:

   • Build Command: npm run build
   • Output Directory: dist
   • Install Command: npm install
4. Click Deploy

   Click the Deploy button. Vercel will compile the project, apply obfuscation shields, and launch your site live on a free .vercel.app preview subdomain.

Cloudflare Pages Deployment

Cloudflare Pages is an exceptionally fast static hosting platform that integrates natively with Cloudflare Turnstile CAPTCHA routing.

1. Go to your Cloudflare Dashboard, navigate to Workers & Pages -> Create application -> Pages -> Connect to Git.
2. Import your project repository.
3. Under Framework preset, select **Vite**.
4. Click **Save and Deploy**. Cloudflare will host your site on a secure edge CDN with DDoS protection out of the box.

Custom Domains & SSL Setup

To point a custom domain (like myagency.com) to your deployed static assets:

1. Register in Hosting Provider

   In your Vercel or Cloudflare Pages project settings, go to Domains, enter your custom domain name, and click Add.

2. Configure DNS Records

   In your domain registrar dashboard (e.g. Namecheap, GoDaddy, Cloudflare DNS), add the required records:

   • For Apex Domain (e.g. myagency.com): Add an **A Record** pointing to Vercel's IP address: 76.76.21.21.
   • For Subdomain (e.g. www.myagency.com): Add a **CNAME Record** pointing to cname.vercel-dns.com.
3. Verify SSL

   Your hosting provider will automatically provision a free, auto-renewing Let's Encrypt SSL certificate once DNS propagation completes (usually within 10–30 minutes).