[V0_FILE]png:file="public/images/veil-token-3d.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Untitled%20design%20-%202025-07-13T102531.482-DvenCMm24UTzMJDKa5AAotVmrskzge.png" isMerged="true" [V0_FILE]typescriptreact:file="app/privacy-policy/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import Link from "next/link" import Image from "next/image" export default function PrivacyPolicyPage() { return (

{/* Navigation */} {/* Privacy Policy Content */}

Privacy Policy

Your privacy is important to us. This policy explains how we collect, use, and protect your information.

Last updated: January 13, 2025

1. Information We Collect

We collect information you provide directly to us, such as when you create an account, use our services, or contact us for support. This may include:

Personal information (name, email address, phone number)
Account credentials and preferences
Transaction history and wallet addresses
Device information and usage data
Communication records with our support team

2. How We Use Your Information

We use the information we collect to:

Provide, maintain, and improve our services
Process transactions and send related information
Send technical notices, updates, and support messages
Respond to your comments, questions, and customer service requests
Monitor and analyze trends, usage, and activities
Detect, investigate, and prevent fraudulent transactions

3. Information Sharing and Disclosure

We do not sell, trade, or otherwise transfer your personal information to third parties without your consent, except in the following circumstances:

With your explicit consent
To comply with legal obligations
To protect our rights, property, or safety
With service providers who assist in our operations
In connection with a merger, acquisition, or sale of assets

4. Data Security

We implement appropriate technical and organizational measures to protect your personal information against unauthorized access, alteration, disclosure, or destruction. These measures include:

Encryption of sensitive data in transit and at rest
Regular security assessments and updates
Access controls and authentication mechanisms
Employee training on data protection practices

5. Your Rights and Choices

You have certain rights regarding your personal information, including:

Access to your personal information
Correction of inaccurate or incomplete information
Deletion of your personal information
Restriction of processing
Data portability
Objection to processing

6. Cookies and Tracking Technologies

We use cookies and similar tracking technologies to collect and use personal information about you. You can control cookies through your browser settings and other tools.

7. International Data Transfers

Your information may be transferred to and processed in countries other than your own. We ensure appropriate safeguards are in place to protect your information during such transfers.

8. Children's Privacy

Our services are not intended for children under 18 years of age. We do not knowingly collect personal information from children under 18.

9. Changes to This Privacy Policy

We may update this privacy policy from time to time. We will notify you of any changes by posting the new privacy policy on this page and updating the "Last updated" date.

10. Contact Us

If you have any questions about this privacy policy or our privacy practices, please contact us at:

Email: support@tradeveil.com
Address: VEIL Privacy Team
State of Pakistan

{/* Footer */}

) } [V0_FILE]png:file="public/images/instagram-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/instagram%20%282%29-2WuZSsIpCPkbdsXu0IgMs2XOty2aD3.png" isMerged="true" [V0_FILE]png:file="public/images/telegram-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/telegram-pGn9HUt0Rl1QJmDzp2g8gIA2u5vOvN.png" isMerged="true" [V0_FILE]typescriptreact:file="app/help/delete-account/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import Link from "next/link" import Image from "next/image" import { Trash2, ArrowLeft, AlertTriangle } from "lucide-react" export default function DeleteAccountPage() { const [formData, setFormData] = useState({ email: "", appPassword: "", reason: "", feedback: "", }) const [showSuccess, setShowSuccess] = useState(false) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Here you would typically send the data to your backend console.log("Delete account request:", formData) setShowSuccess(true) } const handleChange = (e: React.ChangeEvent) => { setFormData({ ...formData, [e.target.name]: e.target.value, }) } const handleReasonChange = (value: string) => { setFormData({ ...formData, reason: value, }) } if (showSuccess) { return (

Request Received!

We have received your account deletion request. Our team will contact you within 24-48 hours to confirm and process your request.

) } return (

{/* Navigation */} {/* Delete Account Form */}

{/* Back Button */}

Delete My Account

We're sorry to see you go. Please fill out the form below to request account deletion.

{/* Warning */}

Important Warning

Account deletion is permanent and cannot be undone. All your VEIL tokens, transaction history, and account data will be permanently lost.

Email Address *

VEIL App Password *

Why are you deleting your account? *

Additional Feedback (Optional)

</div>

<div className="bg-gray-50 p-4 rounded-lg">
                  <p className="text-sm text-gray-600">
                    By submitting this form, you confirm that you want to permanently delete your VEIL account and
                    understand that this action cannot be reversed.
                  </p>
                </div>

<Button
                  type="submit"
                  size="lg"
                  className="w-full bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 h-14 text-lg font-semibold shadow-xl"
                >
                  Delete My Account
                </Button>
              </form>
            </CardContent>
          </Card>
        </div>
      </section>

{/* Footer */}
      <footer className="bg-gray-900 text-white py-12 px-4 sm:px-6 lg:px-8">
        <div className="max-w-7xl mx-auto text-center">
          <Link href="/" className="inline-flex items-center space-x-2 mb-4">
            <Image
              src="/images/design-mode/veil%20logo.png"
              alt="VEIL Logo"
              width={32}
              height={32}
              className="rounded-lg object-contain"
            />
            <span className="text-xl font-bold">VEIL</span>
          </Link>
          <p className="text-gray-400 text-sm">
            © 2024 VEIL. All rights reserved. Verified from the State of Georgia.
          </p>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/help/delete-data/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"
import Link from "next/link"
import Image from "next/image"
import { Database, ArrowLeft, Shield } from "lucide-react"

export default function DeleteDataPage() {
  const [formData, setFormData] = useState({
    email: "",
    appPassword: "",
    dataTypes: [] as string[],
    additionalInfo: "",
  })
  const [showSuccess, setShowSuccess] = useState(false)

const dataTypeOptions = [
    { id: "personal", label: "Personal Information (Name, Phone, etc.)" },
    { id: "transaction", label: "Transaction History" },
    { id: "activity", label: "Activity Logs" },
    { id: "preferences", label: "App Preferences & Settings" },
    { id: "communication", label: "Communication History" },
    { id: "analytics", label: "Analytics & Usage Data" },
  ]

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // Here you would typically send the data to your backend
    console.log("Delete data request:", formData)
    setShowSuccess(true)
  }

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    })
  }

const handleDataTypeChange = (dataType: string, checked: boolean) => {
    if (checked) {
      setFormData({
        ...formData,
        dataTypes: [...formData.dataTypes, dataType],
      })
    } else {
      setFormData({
        ...formData,
        dataTypes: formData.dataTypes.filter((type) => type !== dataType),
      })
    }
  }

if (showSuccess) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-white flex items-center justify-center px-4">
        <Card className="max-w-md w-full shadow-2xl border-0">
          <CardContent className="p-8 text-center">
            <div className="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-6">
              <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <h2 className="text-2xl font-bold text-gray-900 mb-4">Request Submitted!</h2>
            <p className="text-gray-600 mb-6">
              Thank you! We will delete your requested data as soon as possible from our database. You'll receive a
              confirmation email once the process is complete.
            </p>
            <div className="space-y-3">
              <Button
                asChild
                className="w-full bg-gradient-to-r from-[#5271FF] to-[#7B8CFF] hover:from-[#4461EE] hover:to-[#6A7BFF]"
              >
                <Link href="/">Return to Home</Link>
              </Button>
              <Button asChild variant="outline" className="w-full bg-transparent">
                <Link href="/help">Back to Help Center</Link>
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-white">
      {/* Navigation */}
      <nav className="bg-white/90 backdrop-blur-lg border-b border-blue-100 shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <Link href="/" className="flex items-center space-x-3">
              <Image
                src="/images/design-mode/veil%20logo.png"
                alt="VEIL Logo"
                width={40}
                height={40}
                className="rounded-lg object-contain"
              />
              <span className="text-2xl font-bold text-gray-900">VEIL</span>
            </Link>
            <div className="hidden md:flex items-center space-x-8">
              <Link href="/contact" className="text-gray-700 hover:text-[#5271FF] transition-colors font-medium">
                Contact Us
              </Link>
              <Button className="bg-gradient-to-r from-[#5271FF] to-[#7B8CFF] hover:from-[#4461EE] hover:to-[#6A7BFF] shadow-lg">
                Download App
              </Button>
            </div>
          </div>
        </div>
      </nav>

{/* Delete Data Form */}
      <section className="py-20 px-4 sm:px-6 lg:px-8">
        <div className="max-w-2xl mx-auto">
          {/* Back Button */}
          <div className="mb-8">
            <Button asChild variant="ghost" className="text-gray-600 hover:text-[#5271FF]">
              <Link href="/help">
                <ArrowLeft className="mr-2 h-4 w-4" />
                Back to Help Center
              </Link>
            </Button>
          </div>

<Card className="shadow-2xl border-0">
            <CardHeader className="text-center pb-6">
              <div className="w-16 h-16 bg-gradient-to-r from-orange-500 to-orange-600 rounded-full flex items-center justify-center mx-auto mb-4">
                <Database className="h-8 w-8 text-white" />
              </div>
              <CardTitle className="text-3xl font-bold text-gray-900">Delete My Data</CardTitle>
              <p className="text-gray-600 mt-2">
                Request deletion of specific personal data while keeping your account active.
              </p>
            </CardHeader>
            <CardContent className="p-8">
              {/* Info */}
              <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-8">
                <div className="flex items-start space-x-3">
                  <Shield className="h-6 w-6 text-blue-500 flex-shrink-0 mt-0.5" />
                  <div>
                    <h4 className="text-blue-800 font-semibold mb-1">Your Privacy Rights</h4>
                    <p className="text-blue-700 text-sm">
                      You have the right to request deletion of your personal data. We'll process your request within 30
                      days and send you a confirmation.
                    </p>
                  </div>
                </div>
              </div>

<form onSubmit={handleSubmit} className="space-y-6">
                <div className="space-y-2">
                  <Label htmlFor="email" className="text-gray-700 font-semibold">
                    Email Address *
                  </Label>
                  <Input
                    id="email"
                    name="email"
                    type="email"
                    value={formData.email}
                    onChange={handleChange}
                    placeholder="Enter your registered email"
                    required
                    className="border-2 border-gray-200 focus:border-orange-500 rounded-xl h-12"
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="appPassword" className="text-gray-700 font-semibold">
                    VEIL App Password *
                  </Label>
                  <Input
                    id="appPassword"
                    name="appPassword"
                    type="password"
                    value={formData.appPassword}
                    onChange={handleChange}
                    placeholder="Enter your app password"
                    required
                    className="border-2 border-gray-200 focus:border-orange-500 rounded-xl h-12"
                  />
                </div>

<div className="space-y-4">
                  <Label className="text-gray-700 font-semibold">What data would you like us to delete? *</Label>
                  <div className="space-y-3">
                    {dataTypeOptions.map((option) => (
                      <div key={option.id} className="flex items-center space-x-3">
                        <Checkbox
                          id={option.id}
                          checked={formData.dataTypes.includes(option.id)}
                          onCheckedChange={(checked) => handleDataTypeChange(option.id, checked as boolean)}
                          className="border-2 border-gray-300"
                        />
                        <Label htmlFor={option.id} className="text-gray-700 cursor-pointer">
                          {option.label}
                        </Label>
                      </div>
                    ))}
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="additionalInfo" className="text-gray-700 font-semibold">
                    Additional Information (Optional)
                  </Label>
                  <Textarea
                    id="additionalInfo"
                    name="additionalInfo"
                    value={formData.additionalInfo}
                    onChange={handleChange}
                    placeholder="Please specify any additional data you'd like deleted or provide more details..."
                    rows={4}
                    className="border-2 border-gray-200 focus:border-orange-500 rounded-xl"
                  />
                </div>

<div className="bg-gray-50 p-4 rounded-lg">
                  <p className="text-sm text-gray-600">
                    <strong>Note:</strong> Some data may be retained for legal or security purposes as outlined in our
                    Privacy Policy. We'll inform you of any data that cannot be deleted and the reasons why.
                  </p>
                </div>

<Button
                  type="submit"
                  size="lg"
                  disabled={formData.dataTypes.length === 0}
                  className="w-full bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 h-14 text-lg font-semibold shadow-xl disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  Submit Request
                </Button>
              </form>
            </CardContent>
          </Card>
        </div>
      </section>

{/* Footer */}
      <footer className="bg-gray-900 text-white py-12 px-4 sm:px-6 lg:px-8">
        <div className="max-w-7xl mx-auto text-center">
          <Link href="/" className="inline-flex items-center space-x-2 mb-4">
            <Image
              src="/images/design-mode/veil%20logo.png"
              alt="VEIL Logo"
              width={32}
              height={32}
              className="rounded-lg object-contain"
            />
            <span className="text-xl font-bold">VEIL</span>
          </Link>
          <p className="text-gray-400 text-sm">
            © 2024 VEIL. All rights reserved. Verified from the State of Georgia.
          </p>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import {
  ArrowRight,
  Download,
  Users,
  Coins,
  MessageCircle,
  Target,
  Gift,
  Smartphone,
  Star,
  CheckCircle,
  Globe,
  Shield,
  Zap,
  QrCode,
  Menu,
} from "lucide-react"
import Image from "next/image"
import Link from "next/link"

export default function HomePage() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

return (
    <div className="min-h-screen bg-gradient-to-br from-[#5271FF]/5 to-white font-inter">
      {/* Navigation */}
      <nav className="bg-white/90 backdrop-blur-lg border-b border-[#5271FF]/10 sticky top-0 z-50 shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center space-x-3">
              <Image
                src="/images/design-mode/veil%20logo.png"
                alt="VEIL Logo"
                width={40}
                height={40}
                className="rounded-lg object-contain"
              />
              <span className="text-2xl font-bold text-gray-900">VEIL</span>
            </div>
            <div className="hidden md:flex items-center space-x-8">
              <Link href="/contact" className="text-gray-700 hover:text-[#5271FF] transition-colors font-medium">
                Contact Us
              </Link>
              <Button className="bg-gradient-to-r from-[#5271FF] to-[#7B8CFF] hover:from-[#4461EE] hover:to-[#6A7BFF] shadow-lg">
                Download App
              </Button>
            </div>
            <div className="md:hidden">
              <Button variant="ghost" size="sm" onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
                <Menu className="h-6 w-6" />
              </Button>
            </div>
          </div>

{/* Mobile Menu */}
          {mobileMenuOpen && (
            <div className="md:hidden absolute top-16 left-0 right-0 bg-white/95 backdrop-blur-lg border-b border-[#5271FF]/10 shadow-lg">
              <div className="px-4 py-4 space-y-4">
                <Link
                  href="/contact"
                  className="block text-gray-700 hover:text-[#5271FF] transition-colors font-medium py-2"
                  onClick={() => setMobileMenuOpen(false)}
                >
                  Contact Us
                </Link>
                <Button
                  className="w-full bg-gradient-to-r from-[#5271FF] to-[#7B8CFF] hover:from-[#4461EE] hover:to-[#6A7BFF] shadow-lg"
                  onClick={() => setMobileMenuOpen(false)}
                >
                  Download App
                </Button>
              </div>
            </div>
          )}
        </div>
      </nav>

{/* Hero Section */}
      <section className="relative py-12 md:py-20 px-4 sm:px-6 lg:px-8 overflow-hidden">
        {/* Enhanced Background Elements */}
        <div className="absolute inset-0 bg-gradient-to-br from-[#5271FF]/5 via-[#5271FF]/3 to-[#7B8CFF]/5"></div>
        <div className="absolute top-20 left-10 w-72 md:w-96 h-72 md:h-96 bg-gradient-to-r from-[#5271FF]/20 to-[#7B8CFF]/20 rounded-full mix-blend-multiply filter blur-3xl animate-pulse"></div>
        <div className="absolute top-40 right-10 w-64 md:w-80 h-64 md:h-80 bg-gradient-to-r from-[#7B8CFF]/30 to-[#5271FF]/30 rounded-full mix-blend-multiply filter blur-3xl animate-pulse delay-1000"></div>

<div className="max-w-7xl mx-auto relative z-10 w-full">
          <div className="grid lg:grid-cols-12 gap-8 lg:gap-12 items-center">
            {/* Left Content - 7 columns */}
            <div className="lg:col-span-7 space-y-6 md:space-y-8 text-center lg:text-left">
              <div className="space-y-4 md:space-y-6">
                <div className="inline-flex items-center space-x-2 bg-white/80 backdrop-blur-sm border border-[#5271FF]/20 rounded-full px-4 md:px-6 py-2 md:py-3 shadow-lg">
                  <div className="w-3 h-3 bg-gradient-to-r from-[#5271FF] to-[#7B8CFF] rounded-full animate-pulse"></div>
                  <span className="text-[#5271FF] font-semibold text-sm">Verified from the State of Pakistan </span>
                </div>

<h1 className="text-4xl md:text-6xl lg:text-7xl font-black leading-tight text-gray-900">
                  Earn Crypto
                  <br />
                  <span className="text-[#5271FF]">Every Day</span>
                </h1>

<p className="text-lg md:text-xl lg:text-2xl text-gray-600 leading-relaxed max-w-2xl mx-auto lg:mx-0">
                  Join <span className="font-bold text-[#5271FF]">10,000+ users</span> earning{" "}
                  <span className="font-bold text-[#5271FF]">VEIL tokens</span> daily through simple tasks, community
                  engagement, and our innovative reward system.
                </p>
              </div>

{/* Enhanced CTA Section */}
              <div className="space-y-6">
                <div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
                  <Button
                    size="lg"
                    className="group relative bg-gradient-to-r from-[#5271FF] to-[#7B8CFF] hover:from-[#4461EE] hover:to-[#6A7BFF] text-white text-base md:text-lg px-8 md:px-10 py-4 md:py-6 rounded-2xl shadow-2xl hover:shadow-[#5271FF]/25 transform hover:scale-105 transition-all duration-300"
                  >
                    <div className="flex items-center">
                      <Download className="mr-3 h-5 w-5 md:h-6 md:w-6" />
                      Download App (Soon)
                    </div>
                  </Button>

<Button
                    size="lg"
                    variant="outline"
                    className="text-base md:text-lg px-8 md:px-10 py-4 md:py-6 border-2 border-[#5271FF]/30 hover:border-[#5271FF] hover:bg-gradient-to-r hover:from-[#5271FF]/5 hover:to-[#7B8CFF]/5 bg-white/80 backdrop-blur-sm shadow-xl hover:shadow-2xl transform hover:scale-105 transition-all duration-300 rounded-2xl"
                  >
                    <div className="flex items-center text-[#5271FF]">
                      Watch Demo
                      <ArrowRight className="ml-3 h-5 w-5 md:h-6 md:w-6" />
                    </div>
                  </Button>
                </div>

{/* Trust Indicators */}
                <div className="flex flex-col sm:flex-row items-center justify-center lg:justify-start space-y-4 sm:space-y-0 sm:space-x-6 pt-4">
                  <div className="flex items-center space-x-2">
                    <div className="flex -space-x-2">
                      <div className="w-8 h-8 rounded-full border-2 border-white shadow-md bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center">
                        <span className="text-white text-xs">👤</span>
                      </div>
                      <div className="w-8 h-8 rounded-full border-2 border-white shadow-md bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center">
                        <span className="text-white text-xs">👨</span>
                      </div>
                      <div className="w-8 h-8 rounded-full border-2 border-white shadow-md bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center">
                        <span className="text-white text-xs">👩</span>
                      </div>
                    </div>
                    <span className="text-sm text-gray-600 font-medium">10K+ Happy Users</span>
                  </div>
                  <div className="flex items-center space-x-1">
                    {[...Array(5)].map((_, i) => (
                      <Star key={i} className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                    ))}
                    <span className="text-sm text-gray-600 font-medium ml-1">4.8 Rating</span>
                  </div>
                </div>
              </div>

{/* Stats Grid */}
              <div className="grid grid-cols-3 gap-4 md:gap-6 pt-6 md:pt-8">
                <div className="text-center p-3 md:p-4 bg-white/60 backdrop-blur-sm rounded-2xl border border-[#5271FF]/10 shadow-lg">
                  <div className="text-2xl md:text-3xl font-bold text-[#5271FF]">100K+</div>
                  <div className="text-xs md:text-sm text-gray-600 font-medium">Tokens Earned</div>
                </div>
                <div className="text-center p-3 md:p-4 bg-white/60 backdrop-blur-sm rounded-2xl border border-[#5271FF]/10 shadow-lg">
                  <div className="text-2xl md:text-3xl font-bold text-[#5271FF]">1500</div>
                  <div className="text-xs md:text-sm text-gray-600 font-medium">Daily Points</div>
                </div>
                <div className="text-center p-3 md:p-4 bg-white/60 backdrop-blur-sm rounded-2xl border border-[#5271FF]/10 shadow-lg">
                  <div className="text-2xl md:text-3xl font-bold text-[#5271FF]">24/7</div>
                  <div className="text-xs md:text-sm text-gray-600 font-medium">Support</div>
                </div>
              </div>
            </div>

{/* Right Content - 5 columns with Single Image */}
            <div className="lg:col-span-5 relative mt-12 lg:mt-0">
              {/* Single Home Dashboard Image */}
              <div className="relative flex justify-center">
                <div className="absolute inset-0 bg-gradient-to-r from-[#5271FF]/30 via-[#7B8CFF]/30 to-[#5271FF]/30 rounded-3xl blur-3xl opacity-60 animate-pulse"></div>
                <div className="relative z-10 transform hover:scale-105 transition-transform duration-700">
                  <Image
                    src="/images/design-mode/home%20veil.png"
                    alt="VEIL App Dashboard"
                    width={350}
                    height={700}
                    className="rounded-3xl shadow-2xl border-4 border-white object-contain w-full max-w-[350px]"
                  />
                </div>
              </div>
            </div>
          </div>

{/* Download Section with QR Code */}
          <div className="mt-16 text-center">
            <div className="bg-gradient-to-r from-[#5271FF]/10 to-[#7B8CFF]/10 backdrop-blur-sm border border-[#5271FF]/20 rounded-3xl p-6 md:p-8 shadow-2xl max-w-4xl mx-auto">
              <div className="grid md:grid-cols-2 gap-6 md:gap-8 items-center">
                <div className="space-y-4 md:space-y-6">
                  <div className="space-y-3 md:space-y-4">
                    <h3 className="text-xl md:text-2xl font-bold text-gray-900">Download VEIL Soon</h3>
                    <p className="text-gray-600">Get 500 bonus VEIL tokens when you download today!</p>
                  </div>

<div className="flex flex-col sm:flex-row gap-3 md:gap-4 justify-center">
                    <Button className="bg-gradient-to-r from-[#5271FF] to-[#7B8CFF] hover:from-[#4461EE] hover:to-[#6A7BFF] text-white px-6 py-3 rounded-xl shadow-lg">
                      <Download className="mr-2 h-5 w-5" />
                      Play Store
                    </Button>
                    <Button
                      variant="outline"
                      className="border-2 border-[#5271FF]/30 hover:border-[#5271FF] hover:bg-gradient-to-r hover:from-[#5271FF]/5 hover:to-[#7B8CFF]/5 px-6 py-3 rounded-xl bg-transparent"
                    >
                      <Download className="mr-2 h-5 w-5" />
                      Download APK Soon
                    </Button>
                  </div>
                </div>

<div className="flex justify-center">
                  <div className="relative">
                    <div className="bg-white p-4 md:p-6 rounded-2xl shadow-xl border border-[#5271FF]/20">
                      <div className="w-24 h-24 md:w-32 md:h-32 bg-gradient-to-r from-[#5271FF] to-[#7B8CFF] rounded-xl flex items-center justify-center">
                        <QrCode className="w-16 h-16 md:w-20 md:h-20 text-white" />
                      </div>
                      <p className="text-sm text-gray-600 mt-3 text-center">Scan to Download</p>
                    </div>

{/* Share Button */}
                    <button
                      onClick={() => {
                        // Create share modal
                        const modal = document.createElement("div")
                        modal.className =
                          "fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4"
                        modal.innerHTML = `
                <div class="bg-white rounded-3xl p-8 max-w-md w-full shadow-2xl transform animate-in fade-in zoom-in duration-300">
                  <div class="text-center space-y-6">
                    <div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center mx-auto">
                      <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"></path>
                      </svg>
                    </div>
                    <div>
                      <h3 class="text-2xl font-bold text-gray-900 mb-2">Share VEIL App</h3>
                      <p class="text-gray-600">Share our app with friends and earn together!</p>
                    </div>
                    <div class="bg-gradient-to-br from-blue-50 to-purple-50 p-6 rounded-2xl border border-blue-200">
                      <div class="w-48 h-48 bg-white rounded-2xl flex items-center justify-center mx-auto shadow-lg border-2 border-blue-100">
                        <div class="w-40 h-40 bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
                          <svg class="w-24 h-24 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h4"></path>
                          </svg>
                        </div>
                      </div>
                      <p class="text-sm text-gray-600 mt-4">Scan QR Code to Download VEIL App</p>
                    </div>
                    <div class="flex gap-3">
                      <button onclick="navigator.share ? navigator.share({title: 'VEIL App', text: 'Join me on VEIL and earn crypto daily!', url: window.location.origin}) : navigator.clipboard.writeText(window.location.origin).then(() => alert('Link copied!'))" class="flex-1 bg-gradient-to-r from-blue-500 to-purple-600 text-white px-6 py-3 rounded-xl font-semibold hover:from-blue-600 hover:to-purple-700 transition-all">
                        Share Link
                      </button>
                      <button onclick="this.closest('.fixed').remove()" class="flex-1 border-2 border-gray-300 text-gray-700 px-6 py-3 rounded-xl font-semibold hover:bg-gray-50 transition-all">
                        Close
                      </button>
                    </div>
                  </div>
                </div>
              `
                        document.body.appendChild(modal)

// Close on backdrop click
                        modal.addEventListener("click", (e) => {
                          if (e.target === modal) modal.remove()
                        })
                      }}
                      className="absolute -top-2 -right-2 w-10 h-10 bg-gradient-to-r from-[#5271FF] to-[#7B8CFF] rounded-full flex items-center justify-center shadow-lg hover:shadow-xl transform hover:scale-110 transition-all duration-200 group"
                    >
                      <svg
                        className="w-5 h-5 text-white group-hover:scale-110 transition-transform"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={2}
                          d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* App Preview Section */}
      <section
        id="preview"
        className="py-16 md:py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-gray-50 to-[#5271FF]/5"
      >
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16 md:mb-20">
            <Badge className="bg-gray-900 text-white border-gray-800 mb-4 px-4 py-2">📱 App Preview</Badge>
            <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 mb-4 md:mb-6">
              Experience the App
            </h2>
            <p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto">
              Get a glimpse of our intuitive interface and powerful features designed to maximize your earning
              potential.
            </p>
          </div>
          <div className="grid lg:grid-cols-3 gap-6 md:gap-8 items-center">
            <div className="space-y-6">
              <Card className="p-6 border-0 shadow-xl bg-gradient-to-br from-white to-[#5271FF]/5 hover:shadow-2xl transition-all duration-300">
                <CardContent className="p-0">
                  <div className="flex items-center space-x-4 mb-4">
                    <div className="w-12 h-12 bg-gradient-to-r from-[#5271FF] to-[#7B8CFF] rounded-2xl flex items-center justify-center shadow-lg">
                      <Coins className="h-6 w-6 text-white" />
                    </div>
                    <div>
                      <h3 className="text-lg font-bold text-gray-900">Daily Rewards</h3>
                      <p className="text-[#5271FF] font-semibold">Up to 1500 VEIL points</p>
                    </div>
                  </div>
                  <p className="text-gray-600">Check in daily and maintain your streak to earn maximum rewards.</p>
                </CardContent>
              </Card>

<Card className="p-6 border-0 shadow-xl bg-gradient-to-br from-white to-[#7B8CFF]/5 hover:shadow-2xl transition-all duration-300">
                <CardContent className="p-0">
                  <div className="flex items-center space-x-4 mb-4">
                    <div className="w-12 h-12 bg-gradient-to-r from-[#7B8CFF] to-[#5271FF] rounded-2xl flex items-center justify-center shadow-lg">
                      <MessageCircle className="h-6 w-6 text-white" />
                    </div>
                    <div>
                      <h3 className="text-lg font-bold text-gray-900">Global Community</h3>
                      <p className="text-[#5271FF] font-semibold">Connect worldwide</p>
                    </div>
                  </div>
                  <p className="text-gray-600">Join our vibrant community chat and share experiences.</p>
                </CardContent>
              </Card>
            </div>

<div className="space-y-6">
              <Card className="p-6 border-0 shadow-xl bg-gradient-to-br from-white to-[#5271FF]/5 hover:shadow-2xl transition-all duration-300">
                <CardContent className="p-0">
                  <div className="flex items-center space-x-4 mb-4">
                    <div className="w-12 h-12 bg-gradient-to-r from-[#5271FF] to-[#7B8CFF] rounded-2xl flex items-center justify-center shadow-lg">
                      <Target className="h-6 w-6 text-white" />
                    </div>
                    <div>
                      <h3 className="text-lg font-bold text-gray-900">Token Swap</h3>
                      <p className="text-[#5271FF] font-semibold">Exchange VEIL to USDT</p>
                    </div>
                  </div>
                  <p className="text-gray-600">Easily swap your earned VEIL tokens for USDT.</p>
                </CardContent>
              </Card>

<Card className="p-6 border-0 shadow-xl bg-gradient-to-br from-white to-[#7B8CFF]/5 hover:shadow-2xl transition-all duration-300">
                <CardContent className="p-0">
                  <div className="flex items-center space-x-4 mb-4">
                    <div className="w-12 h-12 bg-gradient-to-r from-[#7B8CFF] to-[#5271FF] rounded-2xl flex items-center justify-center shadow-lg">
                      <Users className="h-6 w-6 text-white" />
                    </div>
                    <div>
                      <h3 className="text-lg font-bold text-gray-900">Team Building</h3>
                      <p className="text-[#5271FF] font-semibold">Refer & Earn</p>
                    </div>
                  </div>
                  <p className="text-gray-600">Build your team and earn from referrals.</p>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>

{/* How They Earn Section */}
      <section id="earn" className="py-16 md:py-20 px-4 sm:px-6 lg:px-8">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-12 md:mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">How You Earn VEIL Tokens</h2>
            <p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto">
              Multiple ways to earn crypto rewards through our platform. Start earning today with these simple methods.
            </p>
          </div>
          <div className="grid md:grid-cols-3 gap-6 md:gap-8">
            <Card className="p-6 md:p-8 text-center hover:shadow-lg transition-shadow border-[#5271FF]/10">
              <CardContent className="p-0">
                <div className="w-16 h-16 bg-gradient-to-r from-[#5271FF] to-[#7B8CFF] rounded-full flex items-center justify-center mx-auto mb-6">
                  <CheckCircle className="h-8 w-8 text-white" />
                </div>
                <h3 className="text-xl font-semibold text-gray-900 mb-4">Daily Check-ins</h3>
                <p className="text-gray-600 mb-4">
                  Simply open the app daily and check in to earn up to 1500 VEIL points. Maintain your streak for bonus
                  rewards.
                </p>
                <Badge className="bg-gradient-to-r from-green-100 to-green-200 text-green-700">
                  Up to 1500 points/day
                </Badge>
              </CardContent>
            </Card>
            <Card className="p-6 md:p-8 text-center hover:shadow-lg transition-shadow border-[#5271FF]/10">
              <CardContent className="p-0">
                <div className="w-16 h-16 bg-gradient-to-r from-[#7B8CFF] to-[#5271FF] rounded-full flex items-center justify-center mx-auto mb-6">
                  <Target className="h-8 w-8 text-white" />
                </div>
                <h3 className="text-xl font-semibold text-gray-900 mb-4">Complete Missions</h3>
                <p className="text-gray-600 mb-4">
                  Take on various missions and challenges to earn bonus tokens. From quizzes to social tasks.
                </p>
                <Badge className="bg-gradient-to-r from-[#5271FF]/10 to-[#7B8CFF]/10 text-[#5271FF]">
                  Bonus Rewards
                </Badge>
              </CardContent>
            </Card>
            <Card className="p-6 md:p-8 text-center hover:shadow-lg transition-shadow border-[#5271FF]/10">
              <CardContent className="p-0">
                <div className="w-16 h-16 bg-gradient-to-r from-[#5271FF] to-[#7B8CFF] rounded-full flex items-center justify-center mx-auto mb-6">
                  <Users className="h-8 w-8 text-white" />
                </div>
                <h3 className="text-xl font-semibold text-gray-900 mb-4">Refer Friends</h3>
                <p className="text-gray-600 mb-4">
                  Invite friends to join and earn a percentage of their earnings. Build your team and multiply your
                  income.
                </p>
                <Badge className="bg-gradient-to-r from-orange-100 to-orange-200 text-orange-700">Team Rewards</Badge>
              </CardContent>
            </Card>
          </div>
          <div className="mt-12 md:mt-16 text-center">
            <div className="relative inline-block">
              <div className="absolute inset-0 bg-gradient-to-r from-[#5271FF]/20 to-[#7B8CFF]/20 rounded-3xl blur-2xl opacity-50"></div>
              <div className="relative z-10 transform hover:scale-105 transition-transform duration-500">
                <Image
                  src="/images/design-mode/Global%20chat%20%282%29.png"
                  alt="VEIL Global Chat"
                  width={300}
                  height={600}
                  className="rounded-3xl shadow-2xl border-4 border-white object-contain w-full max-w-[300px] md:max-w-[350px] mx-auto"
                />
              </div>
            </div>
            <div className="mt-6 md:mt-8">
              <h3 className="text-xl md:text-2xl font-bold text-gray-900 mb-4">Join the Conversation</h3>
              <p className="text-base md:text-lg text-gray-600 max-w-2xl mx-auto">
                See what our community is saying! Real users sharing their success stories and earning tips in our
                global chat.
              </p>
            </div>
          </div>
        </div>
      </section>

{/* App Features Section */}
      <section
        id="features"
        className="py-16 md:py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-gray-50 to-[#5271FF]/5"
      >
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-12 md:mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Powerful Features</h2>
            <p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto">
              Everything you need to maximize your crypto earnings in one powerful platform.
            </p>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
            <Card className="p-6 hover:shadow-lg transition-shadow">
              <CardContent className="p-0">
                <Globe className="h-12 w-12 text-[#5271FF] mb-4" />
                <h3 className="text-lg font-semibold text-gray-900 mb-2">Global Community</h3>
                <p className="text-gray-600">Connect with users worldwide and share earning strategies.</p>
              </CardContent>
            </Card>
            <Card className="p-6 hover:shadow-lg transition-shadow">
              <CardContent className="p-0">
                <Shield className="h-12 w-12 text-[#7B8CFF] mb-4" />
                <h3 className="text-lg font-semibold text-gray-900 mb-2">Secure Wallet</h3>
                <p className="text-gray-600">Your tokens are safe with our advanced security measures.</p>
              </CardContent>
            </Card>
            <Card className="p-6 hover:shadow-lg transition-shadow">
              <CardContent className="p-0">
                <Zap className="h-12 w-12 text-[#5271FF] mb-4" />
                <h3 className="text-lg font-semibold text-gray-900 mb-2">Instant Rewards</h3>
                <p className="text-gray-600">Earn and receive your tokens instantly upon task completion.</p>
              </CardContent>
            </Card>
            <Card className="p-6 hover:shadow-lg transition-shadow">
              <CardContent className="p-0">
                <Star className="h-12 w-12 text-[#7B8CFF] mb-4" />
                <h3 className="text-lg font-semibold text-gray-900 mb-2">Level System</h3>
                <p className="text-gray-600">Progress through levels to unlock higher earning potential.</p>
              </CardContent>
            </Card>
            <Card className="p-6 hover:shadow-lg transition-shadow">
              <CardContent className="p-0">
                <Gift className="h-12 w-12 text-[#5271FF] mb-4" />
                <h3 className="text-lg font-semibold text-gray-900 mb-2">Daily Bonuses</h3>
                <p className="text-gray-600">Special bonuses and surprise rewards for active users.</p>
              </CardContent>
            </Card>
            <Card className="p-6 hover:shadow-lg transition-shadow">
              <CardContent className="p-0">
                <Smartphone className="h-12 w-12 text-[#7B8CFF] mb-4" />
                <h3 className="text-lg font-semibold text-gray-900 mb-2">Mobile First</h3>
                <p className="text-gray-600">Optimized for mobile with a beautiful, intuitive interface.</p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Token Distribution Section */}
      <section id="tokenomics" className="py-16 md:py-20 px-4 sm:px-6 lg:px-8">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-12 md:mb-16">
            <Badge className="bg-gradient-to-r from-[#5271FF]/10 to-[#7B8CFF]/10 text-[#5271FF] border-[#5271FF]/20 mb-4">
              🪙 Tokenomics
            </Badge>
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">VEIL Token Distribution</h2>
            <p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto">
              Transparent and fair distribution designed to reward our community and ensure long-term sustainability.
            </p>
          </div>

<div className="grid lg:grid-cols-2 gap-8 md:gap-12 items-center">
            {/* Left side - 3D Token Image */}
            <div className="relative flex justify-center">
              <div className="absolute inset-0 bg-gradient-to-r from-[#5271FF]/20 to-[#7B8CFF]/20 rounded-full blur-3xl opacity-60 animate-pulse"></div>
              <div className="relative z-10 transform hover:scale-105 transition-transform duration-700">
                <Image
                  src="/images/veil-token-3d.png"
                  alt="VEIL Token 3D"
                  width={400}
                  height={400}
                  className="object-contain w-full max-w-[400px] drop-shadow-2xl"
                />
              </div>
            </div>

{/* Right side - Distribution Details */}
            <div className="space-y-6">
              <div className="bg-gradient-to-br from-white to-[#5271FF]/5 p-6 md:p-8 rounded-3xl border border-[#5271FF]/10 shadow-xl">
                <h3 className="text-2xl font-bold text-gray-900 mb-6">Token Allocation</h3>

<div className="space-y-4">
                  <div className="flex items-center justify-between p-4 bg-gradient-to-r from-green-50 to-green-100 rounded-2xl border border-green-200">
                    <div className="flex items-center space-x-3">
                      <div className="w-4 h-4 bg-green-500 rounded-full"></div>
                      <span className="font-semibold text-gray-900">Activity Rewards</span>
                    </div>
                    <span className="text-2xl font-bold text-green-600">50%</span>
                  </div>

<div className="flex items-center justify-between p-4 bg-gradient-to-r from-blue-50 to-blue-100 rounded-2xl border border-blue-200">
                    <div className="flex items-center space-x-3">
                      <div className="w-4 h-4 bg-[#5271FF] rounded-full"></div>
                      <span className="font-semibold text-gray-900">Ecosystem Development</span>
                    </div>
                    <span className="text-2xl font-bold text-[#5271FF]">30%</span>
                  </div>

<div className="flex items-center justify-between p-4 bg-gradient-to-r from-purple-50 to-purple-100 rounded-2xl border border-purple-200">
                    <div className="flex items-center space-x-3">
                      <div className="w-4 h-4 bg-purple-500 rounded-full"></div>
                      <span className="font-semibold text-gray-900">Team & Development</span>
                    </div>
                    <span className="text-2xl font-bold text-purple-600">10%</span>
                  </div>

<div className="flex items-center justify-between p-4 bg-gradient-to-r from-orange-50 to-orange-100 rounded-2xl border border-orange-200">
                    <div className="flex items-center space-x-3">
                      <div className="w-4 h-4 bg-orange-500 rounded-full"></div>
                      <span className="font-semibold text-gray-900">Public Sale</span>
                    </div>
                    <span className="text-2xl font-bold text-orange-600">10%</span>
                  </div>
                </div>

<div className="mt-6 p-4 bg-gradient-to-r from-gray-50 to-gray-100 rounded-2xl border border-gray-200">
                  <div className="text-center">
                    <h4 className="font-semibold text-gray-900 mb-2">Total Supply</h4>
                    <p className="text-gray-600 text-sm">To be announced soon</p>
                    <Badge className="mt-2 bg-yellow-100 text-yellow-700 border-yellow-200">Coming Soon</Badge>
                  </div>
                </div>
              </div>

{/* Burning Mechanics Coming Soon */}
              <div className="bg-gradient-to-br from-red-50 to-red-100 p-6 rounded-3xl border border-red-200">
                <div className="text-center">
                  <div className="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center mx-auto mb-4">
                    <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z"
                      />
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z"
                      />
                    </svg>
                  </div>
                  <h4 className="text-lg font-bold text-red-700 mb-2">VEIL Burning Mechanics</h4>
                  <p className="text-red-600 text-sm">
                    Revolutionary token burning system coming soon to increase scarcity and value.
                  </p>
                  <Badge className="mt-2 bg-red-200 text-red-700 border-red-300">Coming Soon</Badge>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Partner With Us Section */}
      <section id="partners" className="py-16 md:py-20 px-4 sm:px-6 lg:px-8">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-12 md:mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Partner With Us</h2>
            <p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto">
              Join our growing ecosystem of partners and unlock new opportunities for growth and collaboration.
            </p>
          </div>
          <div className="grid md:grid-cols-2 gap-8 md:gap-12 items-center">
            <div className="space-y-6 md:space-y-8">
              <div className="space-y-6">
                <div className="flex items-start space-x-4">
                  <div className="w-8 h-8 bg-gradient-to-r from-[#5271FF] to-[#7B8CFF] rounded-full flex items-center justify-center flex-shrink-0 mt-1">
                    <span className="text-white text-sm font-bold">1</span>
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold text-gray-900 mb-2">Brand Integration</h3>
                    <p className="text-gray-600">
                      Integrate your brand into our platform and reach thousands of engaged users daily.
                    </p>
                  </div>
                </div>
                <div className="flex items-start space-x-4">
                  <div className="w-8 h-8 bg-gradient-to-r from-[#5271FF] to-[#7B8CFF] rounded-full flex items-center justify-center flex-shrink-0 mt-1">
                    <span className="text-white text-sm font-bold">2</span>
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold text-gray-900 mb-2">Custom Campaigns</h3>
                    <p className="text-gray-600">
                      Create targeted campaigns and missions that align with your marketing goals.
                    </p>
                  </div>
                </div>
                <div className="flex items-start space-x-4">
                  <div className="w-8 h-8 bg-gradient-to-r from-[#5271FF] to-[#7B8CFF] rounded-full flex items-center justify-center flex-shrink-0 mt-1">
                    <span className="text-white text-sm font-bold">3</span>
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold text-gray-900 mb-2">Analytics & Insights</h3>
                    <p className="text-gray-600">Get detailed analytics on user engagement and campaign performance.</p>
                  </div>
                </div>
              </div>
              <Button
                size="lg"
                className="bg-gradient-to-r from-[#5271FF] to-[#7B8CFF] hover:from-[#4461EE] hover:to-[#6A7BFF]"
                asChild
              >
                <a href="mailto:admin@tradeveil.com">
                  Become a Partner
                  <ArrowRight className="ml-2 h-5 w-5" />
                </a>
              </Button>
            </div>
            <div className="bg-gradient-to-br from-[#5271FF]/5 to-[#7B8CFF]/5 p-6 md:p-8 rounded-3xl border border-[#5271FF]/10">
              <div className="text-center space-y-6">
                <div className="w-20 h-20 bg-gradient-to-r from-[#5271FF] to-[#7B8CFF] rounded-full flex items-center justify-center mx-auto">
                  <Users className="h-10 w-10 text-white" />
                </div>
                <div>
                  <h3 className="text-xl md:text-2xl font-bold text-gray-900 mb-2">Join Our Network</h3>
                  <p className="text-gray-600">
                    Partner with VEIL and tap into our growing community of crypto enthusiasts.
                  </p>
                </div>
                <div className="grid grid-cols-2 gap-4 pt-4">
                  <div className="text-center">
                    <div className="text-2xl font-bold text-[#5271FF]">50K+</div>
                    <div className="text-sm text-gray-600">Active Users</div>
                  </div>
                  <div className="text-center">
                    <div className="text-2xl font-bold text-[#5271FF]">95%</div>
                    <div className="text-sm text-gray-600">Engagement Rate</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Download Section */}
      <section className="py-16 md:py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-[#5271FF] to-[#7B8CFF]">
        <div className="max-w-4xl mx-auto text-center">
          <div className="space-y-6 md:space-y-8">
            <div className="space-y-4">
              <h2 className="text-3xl md:text-4xl font-bold text-white">Ready to Start Earning?</h2>
              <p className="text-lg md:text-xl text-white/80 max-w-2xl mx-auto">
                Download VEIL now and join thousands of users already earning crypto rewards daily.
              </p>
            </div>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button
                size="lg"
                className="bg-white text-[#5271FF] hover:bg-gray-100 text-base md:text-lg px-6 md:px-8 py-3 rounded-2xl shadow-2xl hover:shadow-[#5271FF]/25 transform hover:scale-105 transition-all duration-300"
              >
                <Download className="mr-2 h-5 w-5" />
                Download  Soon 
              </Button>
              <Button
                size="lg"
                variant="outline"
                className="border-2 border-white text-white hover:bg-white hover:text-[#5271FF] text-base md:text-lg px-6 md:px-8 py-3 md:py-6 bg-transparent rounded-2xl"
              >
                <Download className="mr-2 h-5 w-5" />
                Download App Soon
              </Button>
            </div>
            <div className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-8 pt-6 md:pt-8">
              <div className="text-center">
                <div className="text-2xl font-bold text-white">Free</div>
                <div className="text-sm text-white/80">Download</div>
              </div>
              <div className="text-center">
                <div className="text-2xl font-bold text-white">4.8★</div>
                <div className="text-sm text-white/80">App Store Rating</div>
              </div>
              <div className="text-center">
                <div className="text-2xl font-bold text-white">1M+</div>
                <div className="text-sm text-white/80">Downloads</div>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Footer */}
      <footer className="bg-gradient-to-br from-gray-50 via-white to-blue-50/30 text-gray-800 py-20 md:py-28 px-4 sm:px-6 lg:px-8 relative overflow-hidden border-t border-gray-200">
        {/* Light background elements */}
        <div className="absolute inset-0">
          <div className="absolute top-0 left-0 w-96 h-96 bg-gradient-to-r from-[#5271FF]/5 to-[#7B8CFF]/5 rounded-full blur-3xl"></div>
          <div className="absolute bottom-0 right-0 w-80 h-80 bg-gradient-to-r from-[#7B8CFF]/5 to-[#5271FF]/5 rounded-full blur-3xl"></div>
        </div>

{/* Subtle pattern */}
        <div className="absolute inset-0 opacity-5">
          <svg className="w-full h-full" fill="none" xmlns="http://www.w3.org/2000/svg">
            <pattern id="pattern-dots" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
              <circle cx="10" cy="10" r="1" fill="currentColor" className="text-gray-400" />
            </pattern>
            <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-dots)" />
          </svg>
        </div>

<div className="max-w-7xl mx-auto relative z-10">
          <div className="grid md:grid-cols-4 gap-12 md:gap-16">
            {/* Brand Section */}
            <div className="md:col-span-2 space-y-8">
              <div className="flex items-center space-x-4">
                <div className="relative">
                  <div className="absolute inset-0 bg-gradient-to-r from-[#5271FF]/20 to-[#7B8CFF]/20 rounded-2xl blur-lg"></div>
                  <Image
                    src="/images/design-mode/veil%20logo.png"
                    alt="VEIL Logo"
                    width={56}
                    height={56}
                    className="relative rounded-2xl object-contain shadow-lg"
                  />
                </div>
                <div>
                  <span className="text-4xl font-black bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent">
                    VEIL
                  </span>
                  <p className="text-sm text-gray-500 mt-1">Verified from the State of Pakistan</p>
                </div>
              </div>

<p className="text-gray-600 text-lg leading-relaxed max-w-2xl">
                The leading airdrop platform for earning crypto rewards through simple tasks and community engagement.
                Join thousands of users already earning daily rewards.
              </p>

{/* Enhanced Social Media Section */}
              <div>
                <h4 className="text-xl font-bold mb-6 text-gray-800">Connect With Us</h4>
                <div className="flex flex-wrap gap-4">
                  <a
                    href="https://www.facebook.com/profile.php?id=61577340760736"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="group relative w-14 h-14 bg-white rounded-2xl flex items-center justify-center hover:bg-[#1877F2] transition-all duration-300 transform hover:scale-110 shadow-lg hover:shadow-blue-500/25 border border-gray-200"
                  >
                    <svg
                      className="w-7 h-7 text-[#1877F2] group-hover:text-white transition-colors"
                      fill="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
                    </svg>
                  </a>

{/* Legal Pages Section */}
            <div className="space-y-6">
              <h4 className="text-xl font-bold text-gray-800">Legal</h4>
              <div className="space-y-4">
                <Link
                  href="/privacy-policy"
                  className="block text-gray-600 hover:text-[#5271FF] transition-colors duration-200 hover:translate-x-1 transform"
                >
                  Privacy Policy
                </Link>
                <Link
                  href="/terms-of-service"
                  className="block text-gray-600 hover:text-[#5271FF] transition-colors duration-200 hover:translate-x-1 transform"
                >
                  Terms of Service
                </Link>
                <Link
                  href="/disclaimer"
                  className="block text-gray-600 hover:text-[#5271FF] transition-colors duration-200 hover:translate-x-1 transform"
                >
                  Disclaimer
                </Link>
              </div>
            </div>

{/* Support Section */}
            <div className="space-y-6">
              <h4 className="text-xl font-bold text-gray-800">Support</h4>
              <div className="space-y-4">
                <Link
                  href="/help"
                  className="block text-gray-600 hover:text-[#5271FF] transition-colors duration-200 hover:translate-x-1 transform"
                >
                  Help
                </Link>
                <Link
                  href="/contact"
                  className="block text-gray-600 hover:text-[#5271FF] transition-colors duration-200 hover:translate-x-1 transform"
                >
                  Contact Us
                </Link>
                <a
                  href="mailto:support@tradeveil.com"
                  className="block text-gray-600 hover:text-[#5271FF] transition-colors duration-200 hover:translate-x-1 transform"
                >
                  Email Support
                </a>
                <div className="text-gray-600">
                  <p className="text-sm">Business Hours:</p>
                  <p className="text-sm">Mon-Fri 9AM-6PM EST</p>
                </div>
              </div>
            </div>
          </div>

{/* Bottom Section */}
          <div className="mt-16 pt-8 border-t border-gray-200 text-center">
            <Link href="/" className="inline-flex items-center space-x-2 mb-4">
              <Image
                src="/images/design-mode/veil%20logo.png"
                alt="VEIL Logo"
                width={32}
                height={32}
                className="rounded-lg object-contain"
              />
              <span className="text-xl font-bold">VEIL</span>
            </Link>
            <p className="text-gray-400 text-sm">
              © 2025 VEIL. All rights reserved. Verified from the State of Pakistan.
            </p>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]plaintext:file="undefined" isMerged="true"
© 2024 VEIL. All rights reserved. Verified from the State of Georgi.
[V0_FILE]png:file="public/images/design-mode/veil%20logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/veil%20logo-QS3jCIfWZkl4jkGNsr2bBj3pXvxwWm.png" isMerged="true"
[V0_FILE]png:file="public/images/design-mode/home%20veil.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/home%20veil-5ascx8YPIrjpbCK5OIYWEP065vTzcL.png" isMerged="true"
[V0_FILE]png:file="public/images/design-mode/Global%20chat%20%282%29.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/Global%20chat%20%282%29-NCiq6D6Z93PSlHxORnKxm8sUl6gxca.png" isMerged="true"
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint ."
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.1",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "geist": "^1.3.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "14.2.25",
    "next-themes": "^0.4.4",
    "react": "^19",
    "react-day-picker": "9.8.0",
    "react-dom": "^19",
    "react-hook-form": "^7.54.1",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.0",
    "sonner": "^1.7.1",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.6",
    "zod": "^3.24.1"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^3.4.17",
    "typescript": "5.9.3"
  }
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
import type { Metadata } from "next"
import { GeistSans } from "geist/font/sans"
import { GeistMono } from "geist/font/mono"
import { Analytics } from "@vercel/analytics/next"
import "./globals.css"
import { Preloader } from "@/components/preloader"
import React from "react"

export const metadata: Metadata = {
  title: "VEIL - Earn Crypto Daily | Verified Airdrop Platform",
  description:
    "Join 10,000+ users earning VEIL tokens daily. Complete simple tasks, engage with our community, and get rewarded instantly. Verified from the State of Pakistan.",
  keywords: "crypto airdrop, earn tokens, VEIL token, daily rewards, cryptocurrency",
  authors: [{ name: "VEIL Team" }],
  creator: "VEIL",
  publisher: "VEIL",
  robots: "index, follow",
  openGraph: {
    type: "website",
    locale: "en_US",
    url: "https://tradeveil.com",
    title: "VEIL - Earn Crypto Daily",
    description: "Join thousands earning VEIL tokens through simple tasks and community engagement.",
    images: [
      {
        url: "/images/veil-token-3d.png",
        width: 1200,
        height: 630,
        alt: "VEIL Token",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: "VEIL - Earn Crypto Daily",
    description: "Join 10,000+ users earning VEIL tokens daily",
    images: ["/images/veil-token-3d.png"],
  },
  alternates: {
    canonical: "https://tradeveil.com",
  },
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/images/design-mode/veil%20logo.png" />
        <style>{`
          :root {
            --font-sans: ${GeistSans.variable};
            --font-mono: ${GeistMono.variable};
          }
          
          body {
            font-family: var(--font-sans);
          }
        `}</style>
      </head>
      <body className="font-sans">
        <React.Suspense fallback={<Preloader />}>{children}</React.Suspense>
        <Analytics />
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="components/preloader.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"

export function Preloader() {
  const [isVisible, setIsVisible] = useState(true)

useEffect(() => {
    const timer = setTimeout(() => {
      setIsVisible(false)
    }, 3000)

return () => clearTimeout(timer)
  }, [])

if (!isVisible) {
    return null
  }

return (
    <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-gradient-to-br from-[#5271FF]/95 to-[#7B8CFF]/95 backdrop-blur-md">
      <div className="flex flex-col items-center gap-8">
        {/* Animated Logo Container */}
        <div className="relative w-40 h-40">
          {/* Outer rotating ring */}
          <div
            className="absolute inset-0 border-4 border-transparent border-t-white border-r-white/50 rounded-full"
            style={{
              animation: "spin 3s linear infinite",
            }}
          />

{/* Middle pulsing ring */}
          <div
            className="absolute inset-4 border-2 border-white/30 rounded-full"
            style={{
              animation: "pulse 2s ease-in-out infinite",
            }}
          />

{/* Center glowing orb */}
          <div className="absolute inset-0 flex items-center justify-center">
            <div
              className="w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-2xl"
              style={{
                animation: "pulse 1.5s ease-in-out infinite",
              }}
            >
              <div className="w-12 h-12 bg-gradient-to-br from-[#5271FF] to-[#7B8CFF] rounded-full flex items-center justify-center text-white font-bold text-xl">
                V
              </div>
            </div>
          </div>

{/* Orbiting particles */}
          <div className="absolute inset-0">
            {[0, 120, 240].map((angle, i) => (
              <div
                key={i}
                className="absolute w-3 h-3 bg-white rounded-full"
                style={{
                  animation: `orbit 4s linear infinite`,
                  animationDelay: `${-i * 1.33}s`,
                  top: "0",
                  left: "50%",
                  transformOrigin: "0 80px",
                }}
              />
            ))}
          </div>
        </div>

{/* Loading Text */}
        <div className="text-center space-y-3">
          <h2 className="text-3xl font-bold text-white tracking-wider">VEIL</h2>
          <p className="text-white/80 text-lg font-medium">Loading your experience...</p>

{/* Animated dots */}
          <div className="flex gap-2 justify-center pt-2">
            <div
              className="w-3 h-3 bg-white rounded-full"
              style={{
                animation: "bounce 1.4s infinite",
                animationDelay: "0s",
              }}
            />
            <div
              className="w-3 h-3 bg-white rounded-full"
              style={{
                animation: "bounce 1.4s infinite",
                animationDelay: "0.2s",
              }}
            />
            <div
              className="w-3 h-3 bg-white rounded-full"
              style={{
                animation: "bounce 1.4s infinite",
                animationDelay: "0.4s",
              }}
            />
          </div>
        </div>
      </div>

@keyframes pulse {
          0%, 100% {
            opacity: 1;
            transform: scale(1);
          }
          50% {
            opacity: 0.6;
            transform: scale(0.95);
          }
        }

@keyframes bounce {
          0%, 80%, 100% {
            opacity: 0.4;
            transform: translateY(0);
          }
          40% {
            opacity: 1;
            transform: translateY(-10px);
          }
        }

@keyframes orbit {
          from {
            transform: rotate(0deg) translateX(80px) rotate(0deg);
          }
          to {
            transform: rotate(360deg) translateX(80px) rotate(-360deg);
          }
        }
      `}</style>
    </div>
  )
}
[V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  :root {
    --font-sans: var(--font-geist-sans);
    --font-mono: var(--font-geist-mono);
    --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%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
  .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%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground font-sans;
  }
}

/* Global removal of v0 badge with multiple selectors for strict enforcement */
#v0-badge,
[id="v0-badge"],
[id*="badge"],
.v0-badge {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  opacity: 0 !important;
}

/* Hide any iframe or elements that might contain v0 branding */
iframe[src*="v0"],
div[class*="v0-"],
div[class*="vercel-"] {
  display: none !important;
}

/* Creative preloader animations */
@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(82, 113, 255, 0.7);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(82, 113, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(82, 113, 255, 0);
  }
}

@keyframes orbit {
  0% {
    transform: rotate(0deg) translateX(30px) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(30px) rotate(-360deg);
  }
}

@keyframes float-up {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.preloader-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.preloader-core {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preloader-center {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #5271ff 0%, #3d5ce8 100%);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(82, 113, 255, 0.15);
  animation: pulse-ring 2s ease-in-out infinite;
}

.preloader-orbit {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: orbit 3s linear infinite;
}

.preloader-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #5271ff;
  border-radius: 50%;
  top: 0;
  left: 50%;
  margin-left: -6px;
  box-shadow: 0 2px 8px rgba(82, 113, 255, 0.4);
}

.preloader-text {
  margin-top: 30px;
  text-align: center;
  animation: float-up 0.8s ease-out;
}

.preloader-text h2 {
  font-size: 20px;
  font-weight: 600;
  color: #1a202c;
  margin: 0 0 8px 0;
  letter-spacing: -0.5px;
}

.preloader-text p {
  font-size: 14px;
  color: #718096;
  margin: 0;
  animation: spin-slow 2s linear infinite;
}
[V0_FILE]typescriptreact:file="app/terms-of-service/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import Link from "next/link"
import Image from "next/image"

export default function TermsOfServicePage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-white">
      {/* Navigation */}
      <nav className="bg-white/90 backdrop-blur-lg border-b border-blue-100 shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <Link href="/" className="flex items-center space-x-3">
              <Image
                src="/images/design-mode/veil%20logo.png"
                alt="VEIL Logo"
                width={40}
                height={40}
                className="rounded-lg object-contain"
              />
              <span className="text-2xl font-bold text-gray-900">VEIL</span>
            </Link>
            <div className="hidden md:flex items-center space-x-8">
              <Link href="/contact" className="text-gray-700 hover:text-[#5271FF] transition-colors font-medium">
                Contact Us
              </Link>
              <Button className="bg-gradient-to-r from-[#5271FF] to-[#7B8CFF] hover:from-[#4461EE] hover:to-[#6A7BFF] shadow-lg">
                Download App
              </Button>
            </div>
          </div>
        </div>
      </nav>

{/* Terms of Service Content */}
      <section className="py-20 px-4 sm:px-6 lg:px-8">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-16">
            <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">Terms of Service</h1>
            <p className="text-xl text-gray-600">Please read these terms carefully before using our services.</p>
            <p className="text-sm text-gray-500 mt-4">Last updated: January 13, 2025</p>
          </div>

<Card className="shadow-xl border-0">
            <CardContent className="p-8 md:p-12">
              <div className="prose prose-lg max-w-none">
                <h2 className="text-2xl font-bold text-gray-900 mb-4">1. Acceptance of Terms</h2>
                <p className="text-gray-600 mb-6">
                  By accessing and using VEIL's services, you accept and agree to be bound by the terms and provision of
                  this agreement. If you do not agree to abide by the above, please do not use this service.
                </p>

<h2 className="text-2xl font-bold text-gray-900 mb-4">2. Description of Service</h2>
                <p className="text-gray-600 mb-6">
                  VEIL is a cryptocurrency airdrop platform that allows users to earn tokens through various activities
                  including daily check-ins, completing missions, and referring friends. Our services include:
                </p>
                <ul className="list-disc pl-6 text-gray-600 mb-6">
                  <li>Token earning opportunities through platform activities</li>
                  <li>Community features and global chat</li>
                  <li>Token swapping and withdrawal services</li>
                  <li>Referral and team building programs</li>
                  <li>Educational content and market insights</li>
                </ul>

<h2 className="text-2xl font-bold text-gray-900 mb-4">3. User Accounts</h2>
                <p className="text-gray-600 mb-6">
                  To access certain features of our service, you must create an account. You agree to:
                </p>
                <ul className="list-disc pl-6 text-gray-600 mb-6">
                  <li>Provide accurate, current, and complete information</li>
                  <li>Maintain and update your account information</li>
                  <li>Keep your account credentials secure and confidential</li>
                  <li>Accept responsibility for all activities under your account</li>
                  <li>Notify us immediately of any unauthorized use</li>
                </ul>

<h2 className="text-2xl font-bold text-gray-900 mb-4">4. Acceptable Use</h2>
                <p className="text-gray-600 mb-6">You agree not to use our services to:</p>
                <ul className="list-disc pl-6 text-gray-600 mb-6">
                  <li>Violate any applicable laws or regulations</li>
                  <li>Engage in fraudulent or deceptive practices</li>
                  <li>Create multiple accounts to exploit rewards</li>
                  <li>Use automated tools or bots</li>
                  <li>Interfere with the proper functioning of our services</li>
                  <li>Attempt to gain unauthorized access to our systems</li>
                  <li>Harass, abuse, or harm other users</li>
                </ul>

<h2 className="text-2xl font-bold text-gray-900 mb-4">5. Token Rewards and Withdrawals</h2>
                <p className="text-gray-600 mb-6">
                  VEIL tokens earned through our platform are subject to the following conditions:
                </p>
                <ul className="list-disc pl-6 text-gray-600 mb-6">
                  <li>Tokens are earned based on completed activities and verified actions</li>
                  <li>Minimum withdrawal thresholds may apply</li>
                  <li>Withdrawal processing times may vary</li>
                  <li>We reserve the right to verify activities before token distribution</li>
                  <li>Fraudulent activities may result in token forfeiture</li>
                </ul>

<h2 className="text-2xl font-bold text-gray-900 mb-4">6. Intellectual Property</h2>
                <p className="text-gray-600 mb-6">
                  All content, features, and functionality of our services are owned by VEIL and are protected by
                  international copyright, trademark, and other intellectual property laws.
                </p>

<h2 className="text-2xl font-bold text-gray-900 mb-4">7. Privacy and Data Protection</h2>
                <p className="text-gray-600 mb-6">
                  Your privacy is important to us. Please review our Privacy Policy, which also governs your use of our
                  services, to understand our practices.
                </p>

<h2 className="text-2xl font-bold text-gray-900 mb-4">8. Disclaimers and Limitations</h2>
                <p className="text-gray-600 mb-6">
                  Our services are provided "as is" without warranties of any kind. We do not guarantee:
                </p>
                <ul className="list-disc pl-6 text-gray-600 mb-6">
                  <li>Uninterrupted or error-free service</li>
                  <li>The accuracy or reliability of information</li>
                  <li>The value or future performance of tokens</li>
                  <li>Compatibility with all devices or systems</li>
                </ul>

<h2 className="text-2xl font-bold text-gray-900 mb-4">9. Risk Disclosure</h2>
                <p className="text-gray-600 mb-6">Cryptocurrency activities involve significant risks, including:</p>
                <ul className="list-disc pl-6 text-gray-600 mb-6">
                  <li>Price volatility and potential loss of value</li>
                  <li>Regulatory changes affecting token utility</li>
                  <li>Technical risks and potential system failures</li>
                  <li>Market risks and liquidity concerns</li>
                </ul>

<h2 className="text-2xl font-bold text-gray-900 mb-4">10. Termination</h2>
                <p className="text-gray-600 mb-6">
                  We may terminate or suspend your account and access to our services at our sole discretion, without
                  prior notice, for conduct that we believe violates these terms or is harmful to other users.
                </p>

<h2 className="text-2xl font-bold text-gray-900 mb-4">11. Governing Law</h2>
                <p className="text-gray-600 mb-6">
                  These terms are governed by and construed in accordance with the laws of the State of Pakistan,
                  without regard to conflict of law principles.
                </p>

<h2 className="text-2xl font-bold text-gray-900 mb-4">12. Changes to Terms</h2>
                <p className="text-gray-600 mb-6">
                  We reserve the right to modify these terms at any time. We will notify users of significant changes
                  through our platform or via email.
                </p>

<h2 className="text-2xl font-bold text-gray-900 mb-4">13. Contact Information</h2>
                <p className="text-gray-600 mb-6">If you have questions about these terms, please contact us at:</p>
                <div className="bg-gray-50 p-6 rounded-lg">
                  <p className="text-gray-600">
                    <strong>Email:</strong> support@tradeveil.com
                    <br />
                    <strong>Address:</strong> VEIL Legal Team
                    <br />
                    State of Pakistan
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

{/* Footer */}
      <footer className="bg-gray-900 text-white py-12 px-4 sm:px-6 lg:px-8">
        <div className="max-w-7xl mx-auto text-center">
          <Link href="/" className="inline-flex items-center space-x-2 mb-4">
            <Image
              src="/images/design-mode/veil%20logo.png"
              alt="VEIL Logo"
              width={32}
              height={32}
              className="rounded-lg object-contain"
            />
            <span className="text-xl font-bold">VEIL</span>
          </Link>
          <p className="text-gray-400 text-sm">
            © 2025 VEIL. All rights reserved. Verified from the State of Pakistan.
          </p>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/disclaimer/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import Link from "next/link"
import Image from "next/image"

export default function DisclaimerPage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-white">
      {/* Navigation */}
      <nav className="bg-white/90 backdrop-blur-lg border-b border-blue-100 shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <Link href="/" className="flex items-center space-x-3">
              <Image
                src="/images/design-mode/veil%20logo.png"
                alt="VEIL Logo"
                width={40}
                height={40}
                className="rounded-lg object-contain"
              />
              <span className="text-2xl font-bold text-gray-900">VEIL</span>
            </Link>
            <div className="hidden md:flex items-center space-x-8">
              <Link href="/contact" className="text-gray-700 hover:text-[#5271FF] transition-colors font-medium">
                Contact Us
              </Link>
              <Button className="bg-gradient-to-r from-[#5271FF] to-[#7B8CFF] hover:from-[#4461EE] hover:to-[#6A7BFF] shadow-lg">
                Download App
              </Button>
            </div>
          </div>
        </div>
      </nav>

{/* Disclaimer Content */}
      <section className="py-20 px-4 sm:px-6 lg:px-8">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-16">
            <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">Disclaimer</h1>
            <p className="text-xl text-gray-600">
              Important information about risks and limitations associated with using VEIL services.
            </p>
            <p className="text-sm text-gray-500 mt-4">Last updated: January 13, 2025</p>
          </div>

<Card className="shadow-xl border-0">
            <CardContent className="p-8 md:p-12">
              <div className="prose prose-lg max-w-none">
                <h2 className="text-2xl font-bold text-gray-900 mb-4">General Disclaimer</h2>
                <p className="text-gray-600 mb-6">
                  The information provided by VEIL ("we," "us," or "our") on our platform and mobile application is for
                  general informational purposes only. All information is provided in good faith, however we make no
                  representation or warranty of any kind, express or implied, regarding the accuracy, adequacy,
                  validity, reliability, availability, or completeness of any information.
                </p>

<h2 className="text-2xl font-bold text-gray-900 mb-4">Investment Risk Disclaimer</h2>
                <p className="text-gray-600 mb-6">
                  Cryptocurrency and digital assets involve substantial risk and are not suitable for all investors. The
                  value of digital assets can be extremely volatile and may result in significant losses. You should
                  carefully consider whether trading or holding digital assets is suitable for you in light of your
                  financial condition.
                </p>
                <ul className="list-disc pl-6 text-gray-600 mb-6">
                  <li>Past performance is not indicative of future results</li>
                  <li>Digital asset values can fluctuate dramatically</li>
                  <li>You may lose some or all of your investment</li>
                  <li>Regulatory changes may affect digital asset values</li>
                  <li>Technical risks may result in loss of access to assets</li>
                </ul>

<h2 className="text-2xl font-bold text-gray-900 mb-4">No Financial Advice</h2>
                <p className="text-gray-600 mb-6">
                  The information provided through our platform does not constitute financial, investment, trading, or
                  other types of advice. We do not recommend that any cryptocurrency should be bought, sold, or held by
                  you. You should conduct your own due diligence and consult your financial advisor before making any
                  investment decisions.
                </p>

<h2 className="text-2xl font-bold text-gray-900 mb-4">Platform Availability</h2>
                <p className="text-gray-600 mb-6">
                  We do not guarantee that our platform will be available at all times or that it will be free from
                  errors, viruses, or other harmful components. We reserve the right to:
                </p>
                <ul className="list-disc pl-6 text-gray-600 mb-6">
                  <li>Modify or discontinue services at any time</li>
                  <li>Suspend user accounts for violations of terms</li>
                  <li>Update platform features and functionality</li>
                  <li>Implement security measures that may affect access</li>
                </ul>

<h2 className="text-2xl font-bold text-gray-900 mb-4">Reward System Disclaimer</h2>
                <p className="text-gray-600 mb-6">
                  VEIL tokens earned through our platform are subject to our terms and conditions. We reserve the right
                  to modify reward structures, token values, and distribution mechanisms at any time. Rewards are not
                  guaranteed and may be subject to verification requirements.
                </p>

<h2 className="text-2xl font-bold text-gray-900 mb-4">Third-Party Services</h2>
                <p className="text-gray-600 mb-6">
                  Our platform may integrate with third-party services, wallets, or exchanges. We are not responsible
                  for the availability, accuracy, or reliability of these third-party services. Your use of third-party
                  services is subject to their respective terms and conditions.
                </p>

<h2 className="text-2xl font-bold text-gray-900 mb-4">Regulatory Compliance</h2>
                <p className="text-gray-600 mb-6">
                  Cryptocurrency regulations vary by jurisdiction and are subject to change. It is your responsibility
                  to ensure compliance with applicable laws and regulations in your jurisdiction. We do not provide
                  legal advice regarding regulatory compliance.
                </p>

<h2 className="text-2xl font-bold text-gray-900 mb-4">Security Risks</h2>
                <p className="text-gray-600 mb-6">
                  While we implement security measures to protect user data and assets, no system is completely secure.
                  Users are responsible for:
                </p>
                <ul className="list-disc pl-6 text-gray-600 mb-6">
                  <li>Maintaining the security of their account credentials</li>
                  <li>Using secure internet connections</li>
                  <li>Keeping their devices and software updated</li>
                  <li>Reporting suspicious activities immediately</li>
                </ul>

<h2 className="text-2xl font-bold text-gray-900 mb-4">Limitation of Liability</h2>
                <p className="text-gray-600 mb-6">
                  To the fullest extent permitted by law, VEIL shall not be liable for any indirect, incidental,
                  special, consequential, or punitive damages, including but not limited to loss of profits, data, use,
                  goodwill, or other intangible losses resulting from your use of our services.
                </p>

<h2 className="text-2xl font-bold text-gray-900 mb-4">Changes to Disclaimer</h2>
                <p className="text-gray-600 mb-6">
                  We reserve the right to modify this disclaimer at any time. Changes will be effective immediately upon
                  posting on our platform. Your continued use of our services after any changes constitutes acceptance
                  of the updated disclaimer.
                </p>

<h2 className="text-2xl font-bold text-gray-900 mb-4">Contact Information</h2>
                <p className="text-gray-600 mb-6">If you have questions about this disclaimer, please contact us at:</p>
                <div className="bg-gray-50 p-6 rounded-lg">
                  <p className="text-gray-600">
                    <strong>Email:</strong> support@tradeveil.com
                    <br />
                    <strong>Address:</strong> VEIL Legal Team
                    <br />
                    State of Pakistan
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

{/* Footer */}
      <footer className="bg-gray-900 text-white py-12 px-4 sm:px-6 lg:px-8">
        <div className="max-w-7xl mx-auto text-center">
          <Link href="/" className="inline-flex items-center space-x-2 mb-4">
            <Image
              src="/images/design-mode/veil%20logo.png"
              alt="VEIL Logo"
              width={32}
              height={32}
              className="rounded-lg object-contain"
            />
            <span className="text-xl font-bold">VEIL</span>
          </Link>
          <p className="text-gray-400 text-sm">
            © 2025 VEIL. All rights reserved. Verified from the State of Pakistan.
          </p>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/contact/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { Mail, Phone, Send } from "lucide-react"
import Link from "next/link"
import { useState } from "react"
import Image from "next/image"

export default function ContactPage() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    subject: "",
    message: "",
  })

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    console.log("Form submitted:", formData)
    setFormData({ name: "", email: "", subject: "", message: "" })
    alert("Thank you for your message! We'll get back to you soon.")
  }

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    })
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-white">
      {/* Navigation */}
      <nav className="bg-white/90 backdrop-blur-lg border-b border-blue-100 shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <Link href="/" className="flex items-center space-x-2">
              <div className="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center shadow-lg">
                <span className="text-white font-bold text-lg">V</span>
              </div>
              <span className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
                VEIL
              </span>
            </Link>
            <div className="hidden md:flex items-center space-x-8">
              <Link href="/contact" className="text-blue-600 font-bold">
                Contact Us
              </Link>
              <Button className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 shadow-lg">
                Download App
              </Button>
            </div>
          </div>
        </div>
      </nav>

{/* Contact Section */}
      <section className="py-20 px-4 sm:px-6 lg:px-8">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">Get in Touch with VEIL</h1>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Have questions about VEIL? Need support? Want to partner with us? We're here to help you succeed.
            </p>
          </div>

<div className="grid lg:grid-cols-3 gap-12">
            {/* Enhanced Contact Information */}
            <div className="space-y-8">
              <Card className="p-6 border-blue-100 bg-gradient-to-br from-blue-50 to-white">
                <CardContent className="p-0">
                  <div className="flex items-center space-x-4">
                    <div className="w-12 h-12 bg-gradient-to-r from-[#5271FF] to-[#7B8CFF] rounded-full flex items-center justify-center">
                      <Mail className="h-6 w-6 text-white" />
                    </div>
                    <div>
                      <h3 className="text-lg font-semibold text-gray-900">Email Support</h3>
                      <p className="text-gray-600">Admin@tradeveil.com</p>
                      <p className="text-sm text-gray-500">Response within 24 hours</p>
                    </div>
                  </div>
                </CardContent>
              </Card>

<Card className="p-6 border-blue-100 bg-gradient-to-br from-green-50 to-white">
                <CardContent className="p-0">
                  <div className="flex items-center space-x-4">
                    <div className="w-12 h-12 bg-gradient-to-r from-green-500 to-green-600 rounded-full flex items-center justify-center">
                      <Phone className="h-6 w-6 text-white" />
                    </div>
                    <div>
                      <h3 className="text-lg font-semibold text-gray-900">Phone Support</h3>
                      <p className="text-gray-600">+92 319 4831561</p>
                      <p className="text-sm text-gray-500">Mon-Fri 9AM-6PM EST</p>
                    </div>
                  </div>
                </CardContent>
              </Card>

<div className="bg-gradient-to-br from-[#5271FF]/10 to-[#7B8CFF]/10 p-6 rounded-xl border border-[#5271FF]/20">
                <h3 className="text-lg font-semibold text-gray-900 mb-4">Community Support</h3>
                <p className="text-gray-600 mb-4">Join our active community for instant help and updates:</p>
                <div className="space-y-3">
                  <Button variant="outline" className="w-full justify-start bg-white hover:bg-gray-50" asChild>
                    <a href="https://t.me/tradeveil" target="_blank" rel="noopener noreferrer">
                      <Image src="/images/telegram-icon.png" alt="Telegram" width={16} height={16} className="mr-2" />
                      Telegram Community
                    </a>
                  </Button>
                  <Button variant="outline" className="w-full justify-start bg-white hover:bg-gray-50" asChild>
                    <a href="https://x.com/TradeVeil" target="_blank" rel="noopener noreferrer">
                      <svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
                      </svg>
                      Twitter/X Support
                    </a>
                  </Button>
                </div>
              </div>
            </div>

{/* Enhanced Contact Form */}
            <div className="lg:col-span-2">
              <Card className="p-8 border-0 shadow-2xl bg-gradient-to-br from-white via-blue-50/30 to-purple-50/30">
                <CardHeader className="p-0 mb-8">
                  <CardTitle className="text-3xl font-bold text-gray-900 mb-2">Send us a Message</CardTitle>
                  <p className="text-gray-600">We'll get back to you within 24 hours</p>
                </CardHeader>
                <CardContent className="p-0">
                  <form onSubmit={handleSubmit} className="space-y-6">
                    <div className="grid md:grid-cols-2 gap-6">
                      <div className="space-y-2">
                        <Label htmlFor="name" className="text-gray-700 font-semibold">
                          Full Name *
                        </Label>
                        <Input
                          id="name"
                          name="name"
                          value={formData.name}
                          onChange={handleChange}
                          placeholder="Enter your full name"
                          required
                          className="border-2 border-blue-200 focus:border-[#5271FF] rounded-xl h-12 bg-white/80"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="email" className="text-gray-700 font-semibold">
                          Email Address *
                        </Label>
                        <Input
                          id="email"
                          name="email"
                          type="email"
                          value={formData.email}
                          onChange={handleChange}
                          placeholder="your.email@example.com"
                          required
                          className="border-2 border-blue-200 focus:border-[#5271FF] rounded-xl h-12 bg-white/80"
                        />
                      </div>
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="subject" className="text-gray-700 font-semibold">
                        Subject *
                      </Label>
                      <Input
                        id="subject"
                        name="subject"
                        value={formData.subject}
                        onChange={handleChange}
                        placeholder="What can we help you with?"
                        required
                        className="border-2 border-blue-200 focus:border-[#5271FF] rounded-xl h-12 bg-white/80"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="message" className="text-gray-700 font-semibold">
                        Message *
                      </Label>
                      <Textarea
                        id="message"
                        name="message"
                        value={formData.message}
                        onChange={handleChange}
                        placeholder="Please provide details about your inquiry..."
                        rows={6}
                        required
                        className="border-2 border-blue-200 focus:border-[#5271FF] rounded-xl bg-white/80"
                      />
                    </div>
                    <Button
                      type="submit"
                      size="lg"
                      className="w-full bg-gradient-to-r from-[#5271FF] to-[#7B8CFF] hover:from-[#4461EE] hover:to-[#6A7BFF] h-14 text-lg font-semibold shadow-xl hover:shadow-2xl transform hover:scale-105 transition-all duration-200"
                    >
                      <Send className="mr-3 h-6 w-6" />
                      Send Message
                    </Button>
                  </form>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>

{/* FAQ Section */}
      <section className="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Frequently Asked Questions</h2>
            <p className="text-xl text-gray-600">Quick answers to common questions about VEIL.</p>
          </div>
          <div className="grid md:grid-cols-2 gap-8">
            <Card className="p-6">
              <CardContent className="p-0">
                <h3 className="text-lg font-semibold text-gray-900 mb-2">How do I start earning?</h3>
                <p className="text-gray-600">
                  Simply download the app soon, create an account, and start with daily check-ins to earn your first
                  VEIL tokens.
                </p>
              </CardContent>
            </Card>
            <Card className="p-6">
              <CardContent className="p-0">
                <h3 className="text-lg font-semibold text-gray-900 mb-2">Is VEIL free to use?</h3>
                <p className="text-gray-600">
                  Yes! VEIL is completely free to download and use. You can start earning tokens immediately.
                </p>
              </CardContent>
            </Card>
            <Card className="p-6">
              <CardContent className="p-0">
                <h3 className="text-lg font-semibold text-gray-900 mb-2">How do I withdraw my tokens?</h3>
                <p className="text-gray-600">
                  You can withdraw your VEIL tokens to any compatible wallet once you reach the minimum withdrawal
                  threshold.
                </p>
              </CardContent>
            </Card>
            <Card className="p-6">
              <CardContent className="p-0">
                <h3 className="text-lg font-semibold text-gray-900 mb-2">Can I use VEIL on multiple devices?</h3>
                <p className="text-gray-600">
                  Yes, you can access your account from multiple devices, but daily rewards can only be claimed once per
                  day.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Footer */}
      <footer className="bg-gray-900 text-white py-12 px-4 sm:px-6 lg:px-8">
        <div className="max-w-7xl mx-auto text-center">
          <Link href="/" className="inline-flex items-center space-x-2 mb-4">
            <Image
              src="/images/design-mode/veil%20logo.png"
              alt="VEIL Logo"
              width={32}
              height={32}
              className="rounded-lg object-contain"
            />
            <span className="text-xl font-bold">VEIL</span>
          </Link>
          <p className="text-gray-400 text-sm">
            © 2025 VEIL. All rights reserved. Verified from the State of Pakistan.
          </p>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/help/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import Link from "next/link"
import Image from "next/image"
import { Trash2, Database, ArrowRight, HelpCircle } from "lucide-react"

export default function HelpPage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-white">
      {/* Navigation */}
      <nav className="bg-white/90 backdrop-blur-lg border-b border-blue-100 shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <Link href="/" className="flex items-center space-x-3">
              <Image
                src="/images/design-mode/veil%20logo.png"
                alt="VEIL Logo"
                width={40}
                height={40}
                className="rounded-lg object-contain"
              />
              <span className="text-2xl font-bold text-gray-900">VEIL</span>
            </Link>
            <div className="hidden md:flex items-center space-x-8">
              <Link href="/contact" className="text-gray-700 hover:text-[#5271FF] transition-colors font-medium">
                Contact Us
              </Link>
              <Button className="bg-gradient-to-r from-[#5271FF] to-[#7B8CFF] hover:from-[#4461EE] hover:to-[#6A7BFF] shadow-lg">
                Download App
              </Button>
            </div>
          </div>
        </div>
      </nav>

{/* Help Content */}
      <section className="py-20 px-4 sm:px-6 lg:px-8">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-16">
            <div className="w-16 h-16 bg-gradient-to-r from-[#5271FF] to-[#7B8CFF] rounded-full flex items-center justify-center mx-auto mb-6">
              <HelpCircle className="h-8 w-8 text-white" />
            </div>
            <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">Help Center</h1>
            <p className="text-xl text-gray-600">
              Need assistance with your VEIL account? We're here to help you with account management and data requests.
            </p>
          </div>

<div className="grid md:grid-cols-2 gap-8">
            {/* Delete My Account */}
            <Card className="shadow-xl border-0 hover:shadow-2xl transition-all duration-300 group">
              <CardHeader className="text-center pb-4">
                <div className="w-16 h-16 bg-gradient-to-r from-red-500 to-red-600 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
                  <Trash2 className="h-8 w-8 text-white" />
                </div>
                <CardTitle className="text-2xl font-bold text-gray-900">Delete My Account</CardTitle>
              </CardHeader>
              <CardContent className="text-center space-y-4">
                <p className="text-gray-600 leading-relaxed">
                  Want to permanently delete your VEIL account? We'll help you through the process and ensure all your
                  account data is removed.
                </p>
                <div className="bg-red-50 p-4 rounded-lg border border-red-200">
                  <p className="text-red-700 text-sm font-medium">
                    ⚠️ This action is permanent and cannot be undone. All your tokens and data will be lost.
                  </p>
                </div>
                <Button
                  asChild
                  className="w-full bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white shadow-lg"
                >
                  <Link href="/help/delete-account">
                    Delete My Account
                    <ArrowRight className="ml-2 h-5 w-5" />
                  </Link>
                </Button>
              </CardContent>
            </Card>

{/* Delete My Data */}
            <Card className="shadow-xl border-0 hover:shadow-2xl transition-all duration-300 group">
              <CardHeader className="text-center pb-4">
                <div className="w-16 h-16 bg-gradient-to-r from-orange-500 to-orange-600 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
                  <Database className="h-8 w-8 text-white" />
                </div>
                <CardTitle className="text-2xl font-bold text-gray-900">Delete My Data</CardTitle>
              </CardHeader>
              <CardContent className="text-center space-y-4">
                <p className="text-gray-600 leading-relaxed">
                  Request deletion of your personal data from our database while keeping your account active. We respect
                  your privacy rights.
                </p>
                <div className="bg-orange-50 p-4 rounded-lg border border-orange-200">
                  <p className="text-orange-700 text-sm font-medium">
                    📋 We'll review your request and delete the specified data within 30 days.
                  </p>
                </div>
                <Button
                  asChild
                  className="w-full bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white shadow-lg"
                >
                  <Link href="/help/delete-data">
                    Delete My Data
                    <ArrowRight className="ml-2 h-5 w-5" />
                  </Link>
                </Button>
              </CardContent>
            </Card>
          </div>

{/* Additional Help */}
          <div className="mt-16 text-center">
            <Card className="p-8 bg-gradient-to-br from-[#5271FF]/5 to-[#7B8CFF]/5 border border-[#5271FF]/20">
              <CardContent className="p-0">
                <h3 className="text-2xl font-bold text-gray-900 mb-4">Need More Help?</h3>
                <p className="text-gray-600 mb-6">
                  If you have other questions or need assistance with something else, our support team is here to help.
                </p>
                <div className="flex flex-col sm:flex-row gap-4 justify-center">
                  <Button
                    asChild
                    variant="outline"
                    className="border-[#5271FF] text-[#5271FF] hover:bg-[#5271FF] hover:text-white bg-transparent"
                  >
                    <Link href="/contact">Contact Support</Link>
                  </Button>
                  <Button
                    asChild
                    className="bg-gradient-to-r from-[#5271FF] to-[#7B8CFF] hover:from-[#4461EE] hover:to-[#6A7BFF]"
                  >
                    <a href="mailto:support@tradeveil.com">Email Us</a>
                  </Button>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Footer */}
      <footer className="bg-gray-900 text-white py-12 px-4 sm:px-6 lg:px-8">
        <div className="max-w-7xl mx-auto text-center">
          <Link href="/" className="inline-flex items-center space-x-2 mb-4">
            <Image
              src="/images/design-mode/veil%20logo.png"
              alt="VEIL Logo"
              width={32}
              height={32}
              className="rounded-lg object-contain"
            />
            <span className="text-xl font-bold">VEIL</span>
          </Link>
          <p className="text-gray-400 text-sm">
            © 2025 VEIL. All rights reserved. Verified from the State of Pakistan.
          </p>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]markdown:file="README.md"
# VEIL - Crypto Airdrop Platform

## Project Overview

VEIL is a modern cryptocurrency airdrop platform that enables users to earn VEIL tokens daily through simple tasks, community engagement, and referral programs. The platform features a beautiful, responsive design built with Next.js, React, and Tailwind CSS, with a focus on user experience and accessibility.

**Live URL**: https://tradeveil.com  
**Verification**: Verified from the State of Pakistan

---

## Design System

### Color Palette

The website uses a carefully curated color scheme consisting of 4 primary colors:

1. **Primary Blue**: `#5271FF` (RGB: 82, 113, 255)
   - Used for primary CTAs, badges, icons, and accent elements
   - Represents trust, innovation, and cryptocurrency
   - Gradient pair: `#5271FF → #7B8CFF`

2. **Secondary Blue**: `#7B8CFF` (RGB: 123, 140, 255)
   - Lighter blue used in gradients and secondary elements
   - Complements the primary blue for visual depth

3. **Neutral Grays**:
   - **Background**: `#FFFFFF` (White)
   - **Text Dark**: `#1A202C` (Dark Gray - Charcoal)
   - **Text Light**: `#718096` (Medium Gray)
   - **Card Background**: `#F5F7FA` (Off-white/Light Gray)
   - **Borders**: `#E2E8F0` (Light Gray)

4. **Accent Colors**:
   - **Green**: For success states and positive indicators
   - **Orange**: For warnings and secondary actions
   - **Red**: For destructive actions and alerts
   - **Yellow**: For ratings and highlights

### Typography

The website uses **2 primary font families**:

1. **Geist Sans** (Primary Font)
   - Used for all body text, paragraphs, and general content
   - Font weights: 400 (regular), 600 (semibold), 700 (bold), 900 (black)
   - Sizes: 12px, 14px, 16px, 18px, 20px, 24px, 32px, 48px, 64px, 72px

2. **Geist Mono** (Monospace Font)
   - Used for code blocks and technical content

**Typography Hierarchy**:
- **H1**: 48px - 72px, Font-weight: 900 (Black), Primary blue accent
- **H2**: 32px - 48px, Font-weight: 700 (Bold), Gray-900
- **H3**: 20px - 24px, Font-weight: 600 (Semibold), Gray-900
- **Body**: 14px - 18px, Font-weight: 400 (Regular), Gray-600
- **Small**: 12px - 14px, Font-weight: 400 (Regular), Gray-500
- **Line Height**: 1.6 (relaxed) for body text

---

## Layout & Structure

### Layout Methodology

The website uses **Flexbox as the primary layout method**, with CSS Grid for complex 2D layouts. Mobile-first design approach with responsive breakpoints:

- **Mobile**: < 640px
- **Tablet**: 640px - 1024px
- **Desktop**: 1024px+

### Sections & Components

#### 1. **Navigation Bar** (Sticky)
- White background with backdrop blur effect
- VEIL logo + brand name on the left
- Navigation links ("Contact Us") + "Download App" button on desktop
- Hamburger menu for mobile
- Height: 64px
- Shadow: sm (subtle drop shadow)

#### 2. **Hero Section**
- Full-width background with gradient: `from-[#5271FF]/5 to-white`
- Left side: Main headline "Earn Crypto Every Day"
- Right side: App preview image (350px width)
- Verification badge (State of Pakistan)
- Two CTAs: "Download App (Soon)" + "Watch Demo"
- Trust indicators: User avatars + 4.8★ rating
- Stats grid: 100K+ Tokens, 1500 Daily Points, 24/7 Support
- Background elements: Animated blur gradient orbs

#### 3. **App Preview Section**
- Background: Subtle gradient (gray-50 to blue tint)
- Three cards showcasing features (Daily Rewards, Global Community, Token Swap)
- Center app mockup image
- Cards have hover effects with shadow transitions

#### 4. **How You Earn Section**
- Title: "How You Earn VEIL Tokens"
- 3 cards layout (responsive):
  - Daily Check-ins (1500 points/day)
  - Complete Missions (Bonus Rewards)
  - Refer Friends (Team Rewards)
- Each card has icon, title, description, badge
- Global chat image below

#### 5. **App Features Section**
- Background: Gradient light (gray-50 to blue tint)
- 6 feature cards in grid (2 rows × 3 columns)
- Each card: Icon + title + description
- Features: Global Community, Secure Wallet, Instant Rewards, Level System, Daily Bonuses, Mobile First

#### 6. **Tokenomics Section**
- Title: "VEIL Token Distribution"
- Token allocation display (percentages & amounts)
- Burning mechanics coming soon section
- Left: Token distribution, Right: Coming soon info

#### 7. **Partnership Section**
- Title: "Partner With Us"
- Left: 3-step process with numbered badges
- Right: Partner stats box (50K+ users, 95% engagement)
- Email CTA button

#### 8. **Download Section**
- Full-width gradient background: `from-[#5271FF] to-[#7B8CFF]`
- Centered content
- Two download buttons (primary + secondary)
- Stats: Free, 4.8★ Rating, 1M+ Downloads

#### 9. **Footer**
- Background: Gradient (gray-50 → white → blue tint)
- 4-column grid layout
- Brand section with logo + description
- Social media links (Facebook, Instagram, Twitter/X, Telegram, YouTube, WhatsApp)
- Quick links section
- Legal links (Privacy Policy, Terms of Service, Disclaimer)
- Support section (Contact Us, Help, Delete Account, Delete Data)
- Contact information

---

## Component Styling

### Cards
- Background: White with optional gradient overlay
- Border: Subtle 1px border with primary blue tint at 10% opacity
- Border Radius: 16px - 24px
- Box Shadow: Subtle shadow with hover elevation effect
- Hover Effect: Scale up 105%, shadow increases

### Buttons
- **Primary Button**: Gradient blue background, white text, shadow
- **Secondary Button**: White background, blue text, outline style
- **Hover State**: Scale 105%, shadow intensity increases
- Border Radius: 12px - 16px
- Padding: 12px - 24px (varies by size)

### Badges
- Padding: 4px - 8px
- Border Radius: 999px (fully rounded)
- Font Size: 12px - 14px
- Background: Gradient or solid color with transparency
- Text: Semi-bold font weight

### Input Fields
- Border: 1px solid gray-300
- Border Radius: 8px
- Padding: 12px
- Focus State: Border color changes to primary blue
- Background: White

### Icons
- Sizes: 16px, 20px, 24px, 32px, 48px
- Color: Matches text color or primary blue
- Lucide React icons used throughout

---

## Animations & Effects

### Keyframe Animations
1. **pulse-ring**: Pulsing ring effect for the preloader center
2. **orbit**: Rotating orbit animation for preloader dots
3. **spin-slow**: Slow rotation for preloader text
4. **float-up**: Fade-in + slight upward movement
5. **accordion-down/up**: Smooth accordion transitions

### Interactive Effects
- Hover: Scale 105%, shadow increase
- Transitions: 200ms - 300ms ease-in-out
- Backdrop Blur: Used on nav and modals
- Gradient Overlays: Used for depth and visual interest

---

## Preloader Design

The creative preloader features:
- **Center Orb**: Gradient blue circle (40px) with pulsing ring animation
- **Orbiting Dots**: 3 small dots rotating around the center
- **Loading Text**: "Loading..." text with rotation animation
- **Background**: Subtle gradient (light gray to light blue)
- **Total Size**: 120px × 120px container

---

## CSS Features

### Global Utilities
- **Text Balance**: Applied to titles for optimal line breaks
- **Backdrop Blur**: Used on navigation and overlays
- **Mix Blend Modes**: Multiply blend for gradient orbs
- **Filter Blur**: 3xl blur for background elements

### v0-Badge Removal
Strict CSS rules to remove Vercel v0 badge:
\`\`\`css
#v0-badge, [id="v0-badge"], [id*="badge"], .v0-badge {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
\`\`\`

### Responsive Spacing
- Desktop: 64px - 80px padding/margins
- Tablet: 40px - 64px padding/margins
- Mobile: 16px - 32px padding/margins

---

## SEO & Metadata

### Meta Tags
- **Title**: "VEIL - Earn Crypto Daily | Verified Airdrop Platform"
- **Description**: "Join 10,000+ users earning VEIL tokens daily. Complete simple tasks and get rewarded instantly."
- **Keywords**: crypto airdrop, earn tokens, VEIL token, daily rewards
- **Author**: VEIL Team
- **Robots**: index, follow

### Open Graph (Social Sharing)
- **Image**: VEIL token 3D image (1200×630px)
- **Locale**: en_US
- **Type**: website

### Twitter Card
- **Card Type**: summary_large_image
- **Image**: VEIL token preview

---

## Page Structure

### Main Pages
1. **Home** (`/`) - Landing page with all sections
2. **Contact** (`/contact`) - Contact form and information
3. **Privacy Policy** (`/privacy-policy`) - Legal documentation
4. **Terms of Service** (`/terms-of-service`) - Legal terms
5. **Disclaimer** (`/disclaimer`) - Liability disclaimer
6. **Help** (`/help`) - Help & support center
   - Delete Account (`/help/delete-account`)
   - Delete Data (`/help/delete-data`)

---

## Technical Stack

- **Framework**: Next.js 14.2.25
- **UI Library**: React 19.2.0
- **Styling**: Tailwind CSS 3.4.18 + shadcn/ui
- **Form Handling**: React Hook Form 7.65.0
- **Icons**: Lucide React 0.454.0
- **Image Optimization**: Next.js Image component
- **Analytics**: Vercel Analytics
- **Fonts**: Geist Sans/Mono from Vercel

---

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile browsers (iOS Safari, Chrome Android)

---

## Performance Optimizations

- Image optimization with Next.js Image component
- Lazy loading for below-fold sections
- CSS animations using GPU acceleration
- Backdrop blur for modern browsers
- Responsive image sizing
- Code splitting with Next.js

---

## Accessibility Features

- Semantic HTML elements (`<nav>`, `<main>`, `<footer>`, `<section>`)
- ARIA labels on interactive elements
- Screen reader friendly text
- Keyboard navigation support
- High contrast ratios (WCAG AA compliance)
- Alt text on all images
- Form labels properly associated

---

## Future Enhancements

- Dark mode theme
- Internationalization (multi-language support)
- Mobile app download links (currently "Coming Soon")
- Token burning mechanics implementation
- Enhanced animations and micro-interactions
- Advanced user analytics dashboard

---

## Support & Contact

- **Email**: admin@tradeveil.com
- **Telegram**: https://t.me/tradeveil
- **Twitter/X**: https://x.com/TradeVeil
- **Instagram**: https://www.instagram.com/tradeveil/
- **WhatsApp**: https://whatsapp.com/channel/0029Vb6LlnEK5cDJn4d8p02S

---

## License

---

**Last Updated**: November 30, 2025</article></body></html>