[V0_FILE]png:file="public/jeremiah-portrait.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/jeremiah%20etiang-2yQvo4prOtG0hhiPiBzwBeOIjBOh29.png" isMerged="true" [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Button } from "@/components/ui/button" import { Facebook, Instagram, Twitter, QrCode } from "lucide-react" import Link from "next/link" export default function Home() { return (

{/* Main Content Grid */}

{/* Left Column - Profile */}

JEREMIAH ETIANG

Architect

Software | Sound | Systems

Since 1996

{/* Portrait */}

{/* Action Buttons */}

{/* Center Column - Message & Contact */}

{/* Message Box */}

Dearest friend,

{"it is such an honour to have you here. Connect with me and let's have a deep conversation, or exchange wisdom over a business idea, and if it is thy faith that hath drawn thee here, follow and stay ahead with the truth. \nFeel at home"}

{/* Contact Section */}

Contact

Www: jeremiahettang.com

Email: info@jeremiahettang.com

Tel: (256) 7550-95-568

Pay

Pay me with LightPay

LightPay

{/* Right Column - Business Info */}

{/* BlackSquare Enterprises */}

BLACKSQUARE

ENTERPRISES

{/* Channel 8 News */}

≡ ≡ 1 ≡ ≡

MIND

CHANNEL

NEWS

{/* Description */}

BlackSquare Enterprises is the heart of my business. We have created some amazing products over the years such as OneFund and Channel 8 News. The latter is a stage for the future, giving you ethereal insights into the things shaping the world today. The former is a security protocol that has led to the formation of LightPay; An inclusive payment system.

{/* Bottom Dashed Box */}

{/* Empty dashed box as shown in original */}

{/* Footer */}

) } [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": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@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.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]png:file="public/blacksquare-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-XaKAcJEdkd8Ms9oYsbXCHq4s6J1TDN.png" isMerged="true" [V0_FILE]png:file="public/onemind-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-YR9qj5mObKBFvBsqbe4ySe3vFSwqz1.png" isMerged="true" [V0_FILE]png:file="public/channel8-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-a4ctxHylFHzqszMfeZexOTZftbAbmY.png" isMerged="true" [V0_FILE]typescriptreact:file="app/business/page.tsx" isMerged="true" "use client" import type React from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { ArrowLeft, ExternalLink } from "lucide-react" import Link from "next/link" import { useState } from "react" const services = [ { id: 1, title: "Software Architecture", price: "$2,500 - $15,000", description: "Complete system design and architecture planning for enterprise applications.", details: "Comprehensive software architecture services including system design, technology stack selection, scalability planning, and technical documentation. Perfect for startups and enterprises looking to build robust, maintainable systems.", deliverables: [ "System Architecture Document", "Technology Stack Recommendations", "Scalability Plan", "Security Assessment", "Implementation Roadmap", ], }, { id: 2, title: "Sound System Design", price: "$1,200 - $8,000", description: "Professional audio system design for venues, studios, and events.", details: "Custom sound system design and installation for various environments. From small venues to large concert halls, we provide acoustic analysis, equipment selection, and installation supervision.", deliverables: [ "Acoustic Analysis Report", "Equipment Specifications", "Installation Plan", "Calibration Service", "Training Documentation", ], }, { id: 3, title: "Systems Integration", price: "$3,000 - $25,000", description: "Integration of complex systems across multiple platforms and technologies.", details: "Seamless integration of disparate systems, APIs, databases, and third-party services. Specializing in enterprise-level integrations that require high reliability and performance.", deliverables: [ "Integration Architecture", "API Documentation", "Testing Framework", "Monitoring Setup", "Maintenance Plan", ], }, { id: 4, title: "Technical Consulting", price: "$150 - $300/hour", description: "Expert technical consultation for complex technology challenges.", details: "One-on-one technical consulting sessions to solve specific challenges, review existing systems, or provide strategic technology guidance for your business.", deliverables: [ "Consultation Report", "Recommendations Document", "Action Plan", "Follow-up Support", "Resource List", ], }, { id: 5, title: "LightPay Integration", price: "$500 - $2,000", description: "Integration of LightPay payment system into your applications.", details: "Complete integration of our proprietary LightPay payment system, providing secure, fast, and reliable payment processing for your business applications.", deliverables: [ "Payment Gateway Setup", "Security Configuration", "Testing Suite", "Documentation", "Support Package", ], }, { id: 6, title: "Custom Development", price: "Quote on Request", description: "Bespoke software development tailored to your specific needs.", details: "Full-stack custom development services for unique business requirements. From web applications to mobile apps and enterprise systems.", deliverables: ["Custom Application", "Source Code", "Documentation", "Testing Suite", "Deployment Guide"], }, ] export default function BusinessPage() { const [selectedService, setSelectedService] = useState<(typeof services)[0] | null>(null) const [formData, setFormData] = useState({ name: "", email: "", company: "", service: "", budget: "", timeline: "", description: "", }) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Handle form submission console.log("Service request submitted:", formData) alert("Thank you for your service request. We'll get back to you within 24 hours.") setFormData({ name: "", email: "", company: "", service: "", budget: "", timeline: "", description: "", }) } return (

{/* Header */}

JEREMIAH ETIANG

BUSINESS SERVICES

{/* Services Grid */}

{services.map((service) => ( {service.title} {service.price}

{service.description}

))}

{/* Service Request Form */}

REQUEST A SERVICE

Full Name * setFormData({ ...formData, name: e.target.value })} className="bg-black border-white text-white" required />

Email * setFormData({ ...formData, email: e.target.value })} className="bg-black border-white text-white" required />

Company setFormData({ ...formData, company: e.target.value })} className="bg-black border-white text-white" />

Service Interested In * setFormData({ ...formData, service: e.target.value })} className="bg-black border-white text-white" required />

Budget Range setFormData({ ...formData, budget: e.target.value })} className="bg-black border-white text-white" placeholder="e.g., $5,000 - $10,000" />

Timeline setFormData({ ...formData, timeline: e.target.value })} className="bg-black border-white text-white" placeholder="e.g., 2-3 months" />

Project Description *

setFormData({ ...formData, description: e.target.value })}
                className="bg-black border-white text-white min-h-32"
                placeholder="Please describe your project requirements, goals, and any specific needs..."
                required
              />
            </div>

<Button type="submit" className="w-full bg-white text-black hover:bg-gray-100 font-bold py-3">
              SUBMIT REQUEST
            </Button>
          </form>
        </div>

{/* Company Links */}
        <div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
          <Link
            href="/blacksquare"
            className="border-2 border-dashed border-white p-6 hover:bg-white hover:text-black transition-colors group"
          >
            <div className="text-center">
              <img src="/blacksquare-logo.png" alt="BlackSquare Enterprises" className="w-32 h-auto mx-auto mb-4" />
              <p className="text-sm group-hover:text-black">Visit BlackSquare Enterprises</p>
              <ExternalLink className="w-4 h-4 mx-auto mt-2" />
            </div>
          </Link>

<Link
            href="/onemind"
            className="border-2 border-dashed border-white p-6 hover:bg-white hover:text-black transition-colors group"
          >
            <div className="text-center">
              <img src="/onemind-logo.png" alt="One Mind" className="w-32 h-auto mx-auto mb-4" />
              <p className="text-sm group-hover:text-black">Explore One Mind</p>
              <ExternalLink className="w-4 h-4 mx-auto mt-2" />
            </div>
          </Link>

<Link
            href="/channel8"
            className="border-2 border-dashed border-white p-6 hover:bg-white hover:text-black transition-colors group"
          >
            <div className="text-center">
              <img src="/channel8-logo.png" alt="Channel 8 News" className="w-32 h-auto mx-auto mb-4" />
              <p className="text-sm group-hover:text-black">Watch Channel 8 News</p>
              <ExternalLink className="w-4 h-4 mx-auto mt-2" />
            </div>
          </Link>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/faith/page.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { ArrowLeft, Calendar, Heart, Book } from "lucide-react"
import Link from "next/link"

const blogPosts = [
  {
    id: 1,
    title: "Walking in Faith: The Foundation of All Things",
    date: "December 15, 2024",
    excerpt:
      "Faith is the substance of things hoped for, the evidence of things not seen. In our daily walk, we must remember that faith is not merely belief, but active trust in the Lord's perfect plan.",
    content: `Faith is the cornerstone of our relationship with the Almighty. When we examine the scriptures, we find that faith is not passive but requires action, trust, and unwavering commitment to God's word.

The writer of Hebrews reminds us: "Now faith is the substance of things hoped for, the evidence of things not seen." (Hebrews 11:1 KJV)

This verse teaches us that faith gives substance to our hopes and provides evidence for what we cannot yet see. In our modern world, filled with uncertainty and challenges, this truth becomes even more precious.

Consider Abraham, who "went out, not knowing whither he went" (Hebrews 11:8 KJV). His faith was demonstrated through obedience, even when the path was unclear. This is the kind of faith we are called to - one that trusts God's guidance even in uncertainty.

Let us pray for strengthened faith, that we may walk boldly in the path the Lord has set before us.`,
    scripture: "Now faith is the substance of things hoped for, the evidence of things not seen. - Hebrews 11:1 KJV",
  },
  {
    id: 2,
    title: "The Power of Prayer in Daily Life",
    date: "December 10, 2024",
    excerpt:
      "Prayer is our direct line to the Father, a privilege beyond measure. Through prayer, we find strength, guidance, and peace that surpasses all understanding.",
    content: `Prayer is one of the greatest gifts the Lord has given us. It is through prayer that we commune with our Creator, present our requests, and find the peace that surpasses all understanding.

The apostle Paul instructs us: "Be careful for nothing; but in every thing by prayer and supplication with thanksgiving let your requests be made known unto God." (Philippians 4:6 KJV)

This verse teaches us several important principles:
    1. We should not be anxious about anything
    2. We should pray about everything
    3. Our prayers should include thanksgiving
    4. We can make our requests known to God

When we follow these principles, the promise follows: "And the peace of God, which passeth all understanding, shall keep your hearts and minds through Christ Jesus." (Philippians 4:7 KJV)

In our busy lives, it's easy to forget the power of prayer. But when we make prayer a priority, we discover that it transforms not only our circumstances but our hearts as well.`,
    scripture:
      "Be careful for nothing; but in every thing by prayer and supplication with thanksgiving let your requests be made known unto God. - Philippians 4:6 KJV",
  },
  {
    id: 3,
    title: "Love: The Greatest Commandment",
    date: "December 5, 2024",
    excerpt:
      "Love is the foundation of our faith and the mark of true discipleship. When we love God with all our heart and our neighbor as ourselves, we fulfill the greatest commandments.",
    content: `Love is the central theme of the Christian faith. When asked about the greatest commandment, Jesus replied with clarity and authority that still guides us today.

"Jesus said unto him, Thou shalt love the Lord thy God with all thy heart, and with all thy soul, and with all thy mind. This is the first and great commandment. And the second is like unto it, Thou shalt love thy neighbour as thyself." (Matthew 22:37-39 KJV)

This commandment is both simple and profound. To love God with all our heart, soul, and mind means:
    - Heart: Our emotions and affections belong to God
    - Soul: Our very essence and life are devoted to Him
    - Mind: Our thoughts and intellect are surrendered to His will

The second commandment flows naturally from the first. When we truly love God, we cannot help but love others, for they too are created in His image.

John reminds us: "If a man say, I love God, and hateth his brother, he is a liar: for he that loveth not his brother whom he hath seen, how can he love God whom he hath not seen?" (1 John 4:20 KJV)

Let us examine our hearts and ensure that love - genuine, sacrificial love - is the driving force of our lives.`,
    scripture:
      "Thou shalt love the Lord thy God with all thy heart, and with all thy soul, and with all thy mind. - Matthew 22:37 KJV",
  },
  {
    id: 4,
    title: "Wisdom from Above: Seeking God's Guidance",
    date: "November 28, 2024",
    excerpt:
      "In a world full of confusion and conflicting voices, we need wisdom from above. God promises to give wisdom generously to those who ask in faith.",
    content: `In our complex world, we desperately need wisdom - not the wisdom of this world, which is foolishness to God, but the wisdom that comes from above.

James writes: "If any of you lack wisdom, let him ask of God, that giveth to all men liberally, and upbraideth not; and it shall be given him." (James 1:5 KJV)

This is a remarkable promise. God offers to give wisdom liberally - generously, without reservation - to anyone who asks. He doesn't scold us for our lack of wisdom; instead, He graciously provides what we need.

But notice the condition: "But let him ask in faith, nothing wavering. For he that wavereth is like a wave of the sea driven with the wind and tossed." (James 1:6 KJV)

True wisdom from God requires:
    1. Recognizing our need for it
    2. Asking God in prayer
    3. Believing that He will provide
    4. Acting on the wisdom He gives

The wisdom from above is "first pure, then peaceable, gentle, and easy to be intreated, full of mercy and good fruits, without partiality, and without hypocrisy." (James 3:17 KJV)

Let us seek this heavenly wisdom in all our decisions, trusting that our loving Father will guide us in the way we should go.`,
    scripture:
      "If any of you lack wisdom, let him ask of God, that giveth to all men liberally, and upbraideth not; and it shall be given him. - James 1:5 KJV",
  },
]

export default function FaithPage() {
  return (
    <div className="min-h-screen bg-black text-white font-mono">
      {/* Header */}
      <div className="border-b-2 border-dashed border-white p-6">
        <div className="max-w-7xl mx-auto flex items-center justify-between">
          <Link href="/" className="flex items-center gap-4 hover:text-gray-300">
            <ArrowLeft className="w-6 h-6" />
            <span className="text-xl font-bold">JEREMIAH ETIANG</span>
          </Link>
          <div className="text-center">
            <h1 className="text-3xl font-bold tracking-wider">FAITH & DEVOTION</h1>
            <p className="text-sm text-gray-300 mt-2">Meditations on the Word of God</p>
          </div>
        </div>
      </div>

<div className="max-w-6xl mx-auto p-8">
        {/* Welcome Message */}
        <div className="border-2 border-dashed border-white p-8 mb-12 text-center">
          <Heart className="w-12 h-12 mx-auto mb-4" />
          <h2 className="text-2xl font-bold mb-4">Welcome, Beloved in Christ</h2>
          <p className="text-gray-300 leading-relaxed max-w-3xl mx-auto">
            "But grow in grace, and in the knowledge of our Lord and Saviour Jesus Christ. To him be glory both now and
            for ever. Amen."
            <span className="block mt-2 text-sm">- 2 Peter 3:18 KJV</span>
          </p>
          <p className="text-sm text-gray-400 mt-4">
            Here you will find reflections on God's Word, encouragement for your spiritual journey, and reminders of His
            unfailing love.
          </p>
        </div>

{/* Blog Posts */}
        <div className="space-y-8">
          {blogPosts.map((post) => (
            <Card key={post.id} className="bg-black border-2 border-dashed border-white text-white">
              <CardHeader>
                <div className="flex items-center gap-4 mb-2">
                  <Calendar className="w-5 h-5 text-gray-400" />
                  <span className="text-sm text-gray-400">{post.date}</span>
                </div>
                <CardTitle className="text-2xl font-bold mb-2">{post.title}</CardTitle>
                <CardDescription className="text-gray-300 text-base leading-relaxed">{post.excerpt}</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="prose prose-invert max-w-none">
                  <div className="text-sm text-gray-300 leading-relaxed whitespace-pre-line mb-6">{post.content}</div>

{/* Featured Scripture */}
                  <div className="border-l-4 border-yellow-500 pl-6 py-4 bg-gray-900/50 rounded-r">
                    <Book className="w-5 h-5 text-yellow-500 mb-2" />
                    <p className="text-yellow-200 font-medium italic">"{post.scripture}"</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

{/* Scripture of the Day */}
        <div className="border-2 border-dashed border-white p-8 mt-12">
          <h3 className="text-2xl font-bold mb-6 text-center">Scripture Meditation</h3>
          <div className="text-center space-y-4">
            <div className="border-2 border-yellow-500 p-6 bg-yellow-500/10">
              <Book className="w-8 h-8 mx-auto mb-4 text-yellow-500" />
              <p className="text-xl text-yellow-200 font-medium italic mb-4">
                "Trust in the LORD with all thine heart; and lean not unto thine own understanding. In all thy ways
                acknowledge him, and he shall direct thy paths."
              </p>
              <p className="text-sm text-yellow-300">- Proverbs 3:5-6 KJV</p>
            </div>
            <p className="text-gray-300 text-sm max-w-2xl mx-auto">
              Let this verse guide your heart today. When we trust completely in the Lord and acknowledge Him in all our
              ways, He promises to direct our paths. What a beautiful assurance for every believer!
            </p>
          </div>
        </div>

{/* Prayer Request */}
        <div className="border-2 border-dashed border-white p-8 mt-8 text-center">
          <h3 className="text-xl font-bold mb-4">Prayer & Fellowship</h3>
          <p className="text-gray-300 mb-4">
            "Again I say unto you, That if two of you shall agree on earth as touching any thing that they shall ask, it
            shall be done for them of my Father which is in heaven." - Matthew 18:19 KJV
          </p>
          <p className="text-sm text-gray-400 mb-6">
            If you have a prayer request or would like to fellowship in the Word, please reach out. It is a privilege to
            pray with and for fellow believers.
          </p>
          <Button className="bg-white text-black hover:bg-gray-100 font-bold">Contact for Prayer</Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/family/page.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { ArrowLeft, Camera, Heart, Users, Calendar, ImageIcon } from "lucide-react"
import Link from "next/link"

const familyMoments = [
  {
    id: 1,
    title: "Family Gathering 2024",
    description: "Our annual family reunion filled with laughter, stories, and precious memories.",
    date: "Coming Soon",
    placeholder: true,
  },
  {
    id: 2,
    title: "Sunday Service Together",
    description: "Worshipping together as a family, strengthening our faith and bonds.",
    date: "Coming Soon",
    placeholder: true,
  },
  {
    id: 3,
    title: "Holiday Celebrations",
    description: "Celebrating God's blessings during the holiday season with loved ones.",
    date: "Coming Soon",
    placeholder: true,
  },
  {
    id: 4,
    title: "Everyday Moments",
    description: "The simple, beautiful moments that make up our daily family life.",
    date: "Coming Soon",
    placeholder: true,
  },
  {
    id: 5,
    title: "Special Occasions",
    description: "Birthdays, anniversaries, and milestones celebrated together.",
    date: "Coming Soon",
    placeholder: true,
  },
  {
    id: 6,
    title: "Family Adventures",
    description: "Exploring God's creation together and making memories along the way.",
    date: "Coming Soon",
    placeholder: true,
  },
]

export default function FamilyPage() {
  return (
    <div className="min-h-screen bg-black text-white font-mono">
      {/* Header */}
      <div className="border-b-2 border-dashed border-white p-6">
        <div className="max-w-7xl mx-auto flex items-center justify-between">
          <Link href="/" className="flex items-center gap-4 hover:text-gray-300">
            <ArrowLeft className="w-6 h-6" />
            <span className="text-xl font-bold">JEREMIAH ETIANG</span>
          </Link>
          <div className="text-center">
            <h1 className="text-3xl font-bold tracking-wider">FAMILY</h1>
            <p className="text-sm text-gray-300 mt-2">Blessed by God's Love</p>
          </div>
        </div>
      </div>

<div className="max-w-6xl mx-auto p-8">
        {/* Welcome Message */}
        <div className="border-2 border-dashed border-white p-8 mb-12 text-center">
          <Heart className="w-12 h-12 mx-auto mb-4" />
          <h2 className="text-2xl font-bold mb-4">Family: God's Greatest Gift</h2>
          <p className="text-gray-300 leading-relaxed max-w-3xl mx-auto">
            "As for me and my house, we will serve the LORD."
            <span className="block mt-2 text-sm">- Joshua 24:15 KJV</span>
          </p>
          <p className="text-sm text-gray-400 mt-4">
            Family is one of God's most precious gifts. Here you'll find glimpses into our family life, the moments that
            matter, and the love that binds us together in Christ.
          </p>
        </div>

{/* Artist Work in Progress Notice */}
        <div className="border-2 border-dashed border-yellow-500 bg-yellow-500/10 p-8 mb-12 text-center">
          <Camera className="w-16 h-16 mx-auto mb-4 text-yellow-500" />
          <h3 className="text-2xl font-bold mb-4 text-yellow-200">Gallery Coming Soon</h3>
          <p className="text-gray-300 leading-relaxed max-w-2xl mx-auto mb-4">
            Our talented artist is currently working on beautiful family portraits and illustrations that will bring
            this gallery to life. Each piece is being crafted with care and attention to detail.
          </p>
          <p className="text-sm text-yellow-300">
            "Wait on the LORD: be of good courage, and he shall strengthen thine heart: wait, I say, on the LORD." -
            Psalm 27:14 KJV
          </p>
        </div>

{/* Placeholder Gallery Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
          {familyMoments.map((moment) => (
            <Card key={moment.id} className="bg-black border-2 border-dashed border-white text-white">
              <CardHeader>
                <div className="flex items-center justify-center h-48 border-2 border-dashed border-gray-600 bg-gray-900/30">
                  <div className="text-center">
                    <ImageIcon className="w-12 h-12 mx-auto mb-2 text-gray-500" />
                    <p className="text-sm text-gray-500">Artwork in Progress</p>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <CardTitle className="text-lg font-bold mb-2">{moment.title}</CardTitle>
                <CardDescription className="text-gray-300 text-sm mb-3">{moment.description}</CardDescription>
                <div className="flex items-center gap-2 text-xs text-gray-400">
                  <Calendar className="w-4 h-4" />
                  <span>{moment.date}</span>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

{/* Family Values Section */}
        <div className="border-2 border-dashed border-white p-8 mb-8">
          <h3 className="text-2xl font-bold mb-6 text-center">Our Family Values</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div className="text-center p-4">
              <Heart className="w-8 h-8 mx-auto mb-3 text-red-400" />
              <h4 className="font-bold mb-2">Love</h4>
              <p className="text-sm text-gray-300">
                "And above all these things put on charity, which is the bond of perfectness." - Colossians 3:14 KJV
              </p>
            </div>
            <div className="text-center p-4">
              <Users className="w-8 h-8 mx-auto mb-3 text-blue-400" />
              <h4 className="font-bold mb-2">Unity</h4>
              <p className="text-sm text-gray-300">
                "Behold, how good and how pleasant it is for brethren to dwell together in unity!" - Psalm 133:1 KJV
              </p>
            </div>
            <div className="text-center p-4">
              <Camera className="w-8 h-8 mx-auto mb-3 text-green-400" />
              <h4 className="font-bold mb-2">Faith</h4>
              <p className="text-sm text-gray-300">
                "Train up a child in the way he should go: and when he is old, he will not depart from it." - Proverbs
                22:6 KJV
              </p>
            </div>
          </div>
        </div>

{/* Family Scripture */}
        <div className="border-2 border-dashed border-white p-8 text-center">
          <h3 className="text-xl font-bold mb-4">Our Family Scripture</h3>
          <div className="border-2 border-blue-500 p-6 bg-blue-500/10">
            <p className="text-xl text-blue-200 font-medium italic mb-4">
              "But as for me and my house, we will serve the LORD."
            </p>
            <p className="text-sm text-blue-300">- Joshua 24:15 KJV</p>
          </div>
          <p className="text-gray-300 text-sm mt-4 max-w-2xl mx-auto">
            This verse serves as the foundation of our family. No matter what challenges we face or what the world may
            offer, our commitment remains the same - we will serve the Lord together.
          </p>
        </div>

{/* Contact for Family Updates */}
        <div className="border-2 border-dashed border-white p-8 mt-8 text-center">
          <h3 className="text-xl font-bold mb-4">Stay Connected</h3>
          <p className="text-gray-300 mb-4">
            We'd love to share more about our family journey and hear about yours too. Family is a blessing meant to be
            celebrated together.
          </p>
          <Button className="bg-white text-black hover:bg-gray-100 font-bold">Connect with Our Family</Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/blacksquare/page.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { ArrowLeft, Building2, Shield, CreditCard, Users, Zap, Globe } from "lucide-react"
import Link from "next/link"

const products = [
  {
    id: 1,
    name: "OneFund",
    description: "Revolutionary security protocol for financial transactions",
    icon: Shield,
    features: ["Advanced Encryption", "Multi-layer Security", "Real-time Monitoring", "Fraud Prevention"],
    status: "Active",
  },
  {
    id: 2,
    name: "LightPay",
    description: "Inclusive payment system built on OneFund technology",
    icon: CreditCard,
    features: ["Instant Payments", "Low Fees", "Global Reach", "Mobile First"],
    status: "Active",
  },
  {
    id: 3,
    name: "Channel 8 News Platform",
    description: "Next-generation news delivery and content management system",
    icon: Globe,
    features: ["Real-time Updates", "AI-powered Curation", "Multi-platform Distribution", "Analytics Dashboard"],
    status: "Active",
  },
]

export default function BlackSquarePage() {
  return (
    <div className="min-h-screen bg-black text-white font-mono">
      {/* Header */}
      <div className="border-b-2 border-dashed border-white p-6">
        <div className="max-w-7xl mx-auto flex items-center justify-between">
          <Link href="/" className="flex items-center gap-4 hover:text-gray-300">
            <ArrowLeft className="w-6 h-6" />
            <span className="text-xl font-bold">JEREMIAH ETIANG</span>
          </Link>
          <div className="text-center">
            <img src="/blacksquare-logo.png" alt="BlackSquare Enterprises" className="h-16 mx-auto mb-2" />
            <h1 className="text-3xl font-bold tracking-wider">BLACKSQUARE ENTERPRISES</h1>
            <p className="text-sm text-gray-300 mt-2">Innovation at the Core</p>
          </div>
        </div>
      </div>

<div className="max-w-6xl mx-auto p-8">
        {/* Company Overview */}
        <div className="border-2 border-dashed border-white p-8 mb-12">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
            <div>
              <h2 className="text-3xl font-bold mb-4">The Heart of Innovation</h2>
              <p className="text-gray-300 leading-relaxed mb-6">
                BlackSquare Enterprises stands at the forefront of technological innovation, creating solutions that
                bridge the gap between complex systems and human needs. Since our inception, we have been dedicated to
                building products that not only solve problems but anticipate future challenges.
              </p>
              <p className="text-gray-300 leading-relaxed">
                Our mission is simple: to create technology that empowers people and businesses to achieve more while
                maintaining the highest standards of security, reliability, and user experience.
              </p>
            </div>
            <div className="border-2 border-dashed border-white p-6">
              <div className="text-center">
                <Building2 className="w-16 h-16 mx-auto mb-4" />
                <h3 className="text-xl font-bold mb-2">Founded</h3>
                <p className="text-2xl font-bold text-green-400">1996</p>
                <p className="text-sm text-gray-400 mt-2">Nearly 30 years of innovation</p>
              </div>
            </div>
          </div>
        </div>

{/* Products & Services */}
        <div className="mb-12">
          <h2 className="text-2xl font-bold mb-8 text-center">Our Products</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {products.map((product) => {
              const IconComponent = product.icon
              return (
                <Card key={product.id} className="bg-black border-2 border-dashed border-white text-white">
                  <CardHeader>
                    <div className="flex items-center gap-3 mb-2">
                      <IconComponent className="w-8 h-8 text-green-400" />
                      <div className="flex-1">
                        <CardTitle className="text-lg font-bold">{product.name}</CardTitle>
                        <span className="text-xs bg-green-600 text-white px-2 py-1 rounded">{product.status}</span>
                      </div>
                    </div>
                    <CardDescription className="text-gray-300">{product.description}</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <h4 className="font-bold mb-2 text-sm">Key Features:</h4>
                    <ul className="space-y-1">
                      {product.features.map((feature, index) => (
                        <li key={index} className="text-sm text-gray-300 flex items-center gap-2">
                          <Zap className="w-3 h-3 text-yellow-400" />
                          {feature}
                        </li>
                      ))}
                    </ul>
                  </CardContent>
                </Card>
              )
            })}
          </div>
        </div>

{/* Company Values */}
        <div className="border-2 border-dashed border-white p-8 mb-8">
          <h3 className="text-2xl font-bold mb-6 text-center">Our Core Values</h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="text-center p-4">
              <Shield className="w-12 h-12 mx-auto mb-3 text-blue-400" />
              <h4 className="font-bold mb-2">Security First</h4>
              <p className="text-sm text-gray-300">
                Every product we build prioritizes security and privacy, ensuring our users can trust our solutions
                completely.
              </p>
            </div>
            <div className="text-center p-4">
              <Users className="w-12 h-12 mx-auto mb-3 text-green-400" />
              <h4 className="font-bold mb-2">User-Centric</h4>
              <p className="text-sm text-gray-300">
                We design with the end user in mind, creating intuitive experiences that solve real-world problems.
              </p>
            </div>
            <div className="text-center p-4">
              <Zap className="w-12 h-12 mx-auto mb-3 text-yellow-400" />
              <h4 className="font-bold mb-2">Innovation</h4>
              <p className="text-sm text-gray-300">
                We constantly push boundaries, exploring new technologies and methodologies to stay ahead of the curve.
              </p>
            </div>
          </div>
        </div>

{/* Contact Section */}
        <div className="border-2 border-dashed border-white p-8 text-center">
          <h3 className="text-xl font-bold mb-4">Partner with BlackSquare</h3>
          <p className="text-gray-300 mb-6 max-w-2xl mx-auto">
            Ready to transform your business with cutting-edge technology? Let's discuss how BlackSquare Enterprises can
            help you achieve your goals.
          </p>
          <div className="flex justify-center gap-4">
            <Link href="/business">
              <Button className="bg-white text-black hover:bg-gray-100 font-bold">View Services</Button>
            </Link>
            <Button
              variant="outline"
              className="border-white text-white hover:bg-white hover:text-black bg-transparent"
            >
              Contact Us
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/onemind/page.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { ArrowLeft, Brain, Lightbulb, Target, Users, Zap, Eye } from "lucide-react"
import Link from "next/link"

const initiatives = [
  {
    id: 1,
    title: "Unified Vision",
    description: "Bringing together diverse perspectives to create singular, powerful solutions",
    icon: Eye,
    impact: "Cross-industry collaboration",
  },
  {
    id: 2,
    title: "Collective Intelligence",
    description: "Harnessing the power of shared knowledge and collaborative thinking",
    icon: Brain,
    impact: "Enhanced decision making",
  },
  {
    id: 3,
    title: "Innovation Catalyst",
    description: "Accelerating breakthrough ideas through focused collaboration",
    icon: Lightbulb,
    impact: "Faster time to market",
  },
]

export default function OneMindPage() {
  return (
    <div className="min-h-screen bg-black text-white font-mono">
      {/* Header */}
      <div className="border-b-2 border-dashed border-white p-6">
        <div className="max-w-7xl mx-auto flex items-center justify-between">
          <Link href="/" className="flex items-center gap-4 hover:text-gray-300">
            <ArrowLeft className="w-6 h-6" />
            <span className="text-xl font-bold">JEREMIAH ETIANG</span>
          </Link>
          <div className="text-center">
            <img src="/onemind-logo.png" alt="One Mind" className="h-16 mx-auto mb-2" />
            <h1 className="text-3xl font-bold tracking-wider">ONE MIND</h1>
            <p className="text-sm text-gray-300 mt-2">Unity in Purpose, Power in Collaboration</p>
          </div>
        </div>
      </div>

<div className="max-w-6xl mx-auto p-8">
        {/* Vision Statement */}
        <div className="border-2 border-dashed border-white p-8 mb-12 text-center">
          <Brain className="w-16 h-16 mx-auto mb-4 text-purple-400" />
          <h2 className="text-3xl font-bold mb-4">One Mind, Infinite Possibilities</h2>
          <p className="text-gray-300 leading-relaxed max-w-3xl mx-auto text-lg">
            One Mind represents the convergence of brilliant ideas, unified purpose, and collaborative innovation. We
            believe that when great minds come together with a shared vision, extraordinary things happen.
          </p>
        </div>

{/* Philosophy */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
          <div className="border-2 border-dashed border-white p-6">
            <h3 className="text-2xl font-bold mb-4">Our Philosophy</h3>
            <p className="text-gray-300 leading-relaxed mb-4">
              In a world of fragmented thinking and isolated solutions, One Mind stands as a beacon of unified
              intelligence. We bring together the best minds from various disciplines to tackle complex challenges with
              singular focus and purpose.
            </p>
            <p className="text-gray-300 leading-relaxed">
              Our approach transcends traditional boundaries, creating synergies that amplify individual brilliance into
              collective genius.
            </p>
          </div>
          <div className="border-2 border-dashed border-white p-6">
            <h3 className="text-2xl font-bold mb-4">The Power of Unity</h3>
            <div className="space-y-4">
              <div className="flex items-center gap-3">
                <Target className="w-6 h-6 text-green-400" />
                <span className="text-sm">Focused Problem Solving</span>
              </div>
              <div className="flex items-center gap-3">
                <Users className="w-6 h-6 text-blue-400" />
                <span className="text-sm">Collaborative Excellence</span>
              </div>
              <div className="flex items-center gap-3">
                <Zap className="w-6 h-6 text-yellow-400" />
                <span className="text-sm">Accelerated Innovation</span>
              </div>
              <div className="flex items-center gap-3">
                <Eye className="w-6 h-6 text-purple-400" />
                <span className="text-sm">Unified Vision</span>
              </div>
            </div>
          </div>
        </div>

{/* Key Initiatives */}
        <div className="mb-12">
          <h2 className="text-2xl font-bold mb-8 text-center">Key Initiatives</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {initiatives.map((initiative) => {
              const IconComponent = initiative.icon
              return (
                <Card key={initiative.id} className="bg-black border-2 border-dashed border-white text-white">
                  <CardHeader>
                    <div className="text-center mb-4">
                      <IconComponent className="w-12 h-12 mx-auto mb-3 text-purple-400" />
                      <CardTitle className="text-xl font-bold">{initiative.title}</CardTitle>
                    </div>
                    <CardDescription className="text-gray-300 text-center">{initiative.description}</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="text-center">
                      <span className="text-xs bg-purple-600 text-white px-3 py-1 rounded-full">
                        {initiative.impact}
                      </span>
                    </div>
                  </CardContent>
                </Card>
              )
            })}
          </div>
        </div>

{/* The One Mind Approach */}
        <div className="border-2 border-dashed border-white p-8 mb-8">
          <h3 className="text-2xl font-bold mb-6 text-center">The One Mind Approach</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div>
              <h4 className="text-lg font-bold mb-3 text-purple-400">Convergence</h4>
              <p className="text-sm text-gray-300 mb-4">
                We bring together diverse expertise, perspectives, and methodologies to create comprehensive solutions
                that address challenges from multiple angles.
              </p>
              <h4 className="text-lg font-bold mb-3 text-blue-400">Synthesis</h4>
              <p className="text-sm text-gray-300">
                Through careful synthesis of ideas and approaches, we create innovative solutions that are greater than
                the sum of their parts.
              </p>
            </div>
            <div>
              <h4 className="text-lg font-bold mb-3 text-green-400">Implementation</h4>
              <p className="text-sm text-gray-300 mb-4">
                Our unified approach ensures seamless implementation, with all stakeholders aligned on vision, goals,
                and execution strategies.
              </p>
              <h4 className="text-lg font-bold mb-3 text-yellow-400">Evolution</h4>
              <p className="text-sm text-gray-300">
                We continuously evolve our methods and solutions, learning from each collaboration to improve our
                collective intelligence.
              </p>
            </div>
          </div>
        </div>

{/* Join the Movement */}
        <div className="border-2 border-dashed border-white p-8 text-center">
          <h3 className="text-xl font-bold mb-4">Join the One Mind Movement</h3>
          <p className="text-gray-300 mb-6 max-w-2xl mx-auto">
            Are you ready to be part of something bigger? Join us in creating solutions that matter, innovations that
            last, and collaborations that change the world.
          </p>
          <div className="flex justify-center gap-4">
            <Button className="bg-purple-600 text-white hover:bg-purple-700 font-bold">Collaborate with Us</Button>
            <Button
              variant="outline"
              className="border-white text-white hover:bg-white hover:text-black bg-transparent"
            >
              Learn More
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/channel8/page.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { ArrowLeft, Tv, Globe, Zap, Eye, Clock, Users, TrendingUp } from "lucide-react"
import Link from "next/link"

const newsCategories = [
  {
    id: 1,
    title: "Technology & Innovation",
    description: "Cutting-edge developments shaping our digital future",
    icon: Zap,
    color: "text-blue-400",
  },
  {
    id: 2,
    title: "Global Perspectives",
    description: "International news and cross-cultural insights",
    icon: Globe,
    color: "text-green-400",
  },
  {
    id: 3,
    title: "Future Trends",
    description: "Emerging patterns and their implications for tomorrow",
    icon: TrendingUp,
    color: "text-purple-400",
  },
  {
    id: 4,
    title: "Human Stories",
    description: "Personal narratives that inspire and connect us all",
    icon: Users,
    color: "text-yellow-400",
  },
]

const features = [
  {
    title: "Real-Time Updates",
    description: "Stay informed with instant news delivery as events unfold",
    icon: Clock,
  },
  {
    title: "Ethereal Insights",
    description: "Deep analysis that goes beyond surface-level reporting",
    icon: Eye,
  },
  {
    title: "Global Reach",
    description: "News and perspectives from every corner of the world",
    icon: Globe,
  },
  {
    title: "Future Focus",
    description: "Understanding today's events in the context of tomorrow's world",
    icon: TrendingUp,
  },
]

export default function Channel8Page() {
  return (
    <div className="min-h-screen bg-black text-white font-mono">
      {/* Header */}
      <div className="border-b-2 border-dashed border-white p-6">
        <div className="max-w-7xl mx-auto flex items-center justify-between">
          <Link href="/" className="flex items-center gap-4 hover:text-gray-300">
            <ArrowLeft className="w-6 h-6" />
            <span className="text-xl font-bold">JEREMIAH ETIANG</span>
          </Link>
          <div className="text-center">
            <img src="/channel8-logo.png" alt="Channel 8 News" className="h-16 mx-auto mb-2" />
            <h1 className="text-3xl font-bold tracking-wider">CHANNEL 8 NEWS</h1>
            <p className="text-sm text-gray-300 mt-2">A Stage for the Future</p>
          </div>
        </div>
      </div>

<div className="max-w-6xl mx-auto p-8">
        {/* Mission Statement */}
        <div className="border-2 border-dashed border-white p-8 mb-12 text-center">
          <Tv className="w-16 h-16 mx-auto mb-4 text-red-400" />
          <h2 className="text-3xl font-bold mb-4">Ethereal Insights into Tomorrow</h2>
          <p className="text-gray-300 leading-relaxed max-w-3xl mx-auto text-lg">
            Channel 8 News is more than a news platform - it's a stage for the future. We provide ethereal insights into
            the things shaping the world today, helping you understand not just what's happening, but what it means for
            tomorrow.
          </p>
        </div>

{/* What Makes Us Different */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
          <div className="border-2 border-dashed border-white p-6">
            <h3 className="text-2xl font-bold mb-4">Beyond Traditional News</h3>
            <p className="text-gray-300 leading-relaxed mb-4">
              While others report what happened, we explore what it means. Our approach combines traditional journalism
              with forward-thinking analysis, providing context that helps you navigate an increasingly complex world.
            </p>
            <p className="text-gray-300 leading-relaxed">
              We don't just inform - we illuminate the connections between today's events and tomorrow's possibilities.
            </p>
          </div>
          <div className="border-2 border-dashed border-white p-6">
            <h3 className="text-2xl font-bold mb-4">Our Promise</h3>
            <div className="space-y-3">
              <div className="flex items-center gap-3">
                <Eye className="w-5 h-5 text-blue-400" />
                <span className="text-sm">Deeper understanding beyond headlines</span>
              </div>
              <div className="flex items-center gap-3">
                <Globe className="w-5 h-5 text-green-400" />
                <span className="text-sm">Global perspective on local events</span>
              </div>
              <div className="flex items-center gap-3">
                <TrendingUp className="w-5 h-5 text-purple-400" />
                <span className="text-sm">Future-focused analysis</span>
              </div>
              <div className="flex items-center gap-3">
                <Zap className="w-5 h-5 text-yellow-400" />
                <span className="text-sm">Real-time insights as events unfold</span>
              </div>
            </div>
          </div>
        </div>

{/* News Categories */}
        <div className="mb-12">
          <h2 className="text-2xl font-bold mb-8 text-center">Our Coverage Areas</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {newsCategories.map((category) => {
              const IconComponent = category.icon
              return (
                <Card key={category.id} className="bg-black border-2 border-dashed border-white text-white">
                  <CardHeader>
                    <div className="flex items-center gap-3 mb-2">
                      <IconComponent className={`w-8 h-8 ${category.color}`} />
                      <CardTitle className="text-lg font-bold">{category.title}</CardTitle>
                    </div>
                    <CardDescription className="text-gray-300">{category.description}</CardDescription>
                  </CardHeader>
                </Card>
              )
            })}
          </div>
        </div>

{/* Platform Features */}
        <div className="border-2 border-dashed border-white p-8 mb-8">
          <h3 className="text-2xl font-bold mb-6 text-center">Platform Features</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {features.map((feature, index) => {
              const IconComponent = feature.icon
              return (
                <div key={index} className="text-center p-4">
                  <IconComponent className="w-10 h-10 mx-auto mb-3 text-red-400" />
                  <h4 className="font-bold mb-2">{feature.title}</h4>
                  <p className="text-sm text-gray-300">{feature.description}</p>
                </div>
              )
            })}
          </div>
        </div>

{/* Coming Soon */}
        <div className="border-2 border-dashed border-red-500 bg-red-500/10 p-8 mb-8 text-center">
          <Tv className="w-16 h-16 mx-auto mb-4 text-red-400" />
          <h3 className="text-2xl font-bold mb-4 text-red-200">Launch Coming Soon</h3>
          <p className="text-gray-300 leading-relaxed max-w-2xl mx-auto mb-4">
            Channel 8 News is currently in development, with our team working to create the most advanced news platform
            ever built. We're not just building another news site - we're crafting the future of information delivery.
          </p>
          <p className="text-sm text-red-300">"The future belongs to those who prepare for it today."</p>
        </div>

{/* Stay Updated */}
        <div className="border-2 border-dashed border-white p-8 text-center">
          <h3 className="text-xl font-bold mb-4">Be the First to Know</h3>
          <p className="text-gray-300 mb-6 max-w-2xl mx-auto">
            Want to be notified when Channel 8 News launches? Join our early access list and be among the first to
            experience the future of news.
          </p>
          <div className="flex justify-center gap-4">
            <Button className="bg-red-600 text-white hover:bg-red-700 font-bold">Join Early Access</Button>
            <Button
              variant="outline"
              className="border-white text-white hover:bg-white hover:text-black bg-transparent"
            >
              Learn More
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/navigation.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
import { Menu, Home, Briefcase, Heart, Users, Building2, Brain, Tv } from "lucide-react"
import Link from "next/link"
import { usePathname } from "next/navigation"

const mainNavItems = [
  { href: "/", label: "Home", icon: Home },
  { href: "/business", label: "Business", icon: Briefcase },
  { href: "/faith", label: "Faith", icon: Heart },
  { href: "/family", label: "Family", icon: Users },
]

const companyNavItems = [
  { href: "/blacksquare", label: "BlackSquare", icon: Building2 },
  { href: "/onemind", label: "One Mind", icon: Brain },
  { href: "/channel8", label: "Channel 8", icon: Tv },
]

export function Navigation() {
  const pathname = usePathname()

return (
    <div className="fixed top-4 right-4 z-50">
      <Sheet>
        <SheetTrigger asChild>
          <Button
            variant="outline"
            size="icon"
            className="bg-black border-2 border-dashed border-white text-white hover:bg-white hover:text-black"
          >
            <Menu className="h-4 w-4" />
          </Button>
        </SheetTrigger>
        <SheetContent className="bg-black border-l-2 border-dashed border-white text-white font-mono px-4">
          <SheetHeader>
            <SheetTitle className="text-white font-bold text-xl">JEREMIAH ETIANG</SheetTitle>
            <SheetDescription className="text-gray-300">Architect | Software | Sound | Systems</SheetDescription>
          </SheetHeader>

<div className="mt-8 space-y-6">
            {/* Main Navigation */}
            <div>
              <h3 className="text-sm font-bold text-gray-400 mb-3 uppercase tracking-wider">Main</h3>
              <nav className="space-y-2">
                {mainNavItems.map((item) => {
                  const IconComponent = item.icon
                  const isActive = pathname === item.href
                  return (
                    <Link
                      key={item.href}
                      href={item.href}
                      className={`flex items-center gap-3 p-2 rounded border-2 border-dashed transition-colors ${
                        isActive
                          ? "border-white bg-white text-black"
                          : "border-gray-600 text-gray-300 hover:border-white hover:text-white"
                      }`}
                    >
                      <IconComponent className="w-4 h-4" />
                      <span className="text-sm font-medium">{item.label}</span>
                    </Link>
                  )
                })}
              </nav>
            </div>

{/* Company Navigation */}
            <div>
              <h3 className="text-sm font-bold text-gray-400 mb-3 uppercase tracking-wider">Companies</h3>
              <nav className="space-y-2">
                {companyNavItems.map((item) => {
                  const IconComponent = item.icon
                  const isActive = pathname === item.href
                  return (
                    <Link
                      key={item.href}
                      href={item.href}
                      className={`flex items-center gap-3 p-2 rounded border-2 border-dashed transition-colors ${
                        isActive
                          ? "border-white bg-white text-black"
                          : "border-gray-600 text-gray-300 hover:border-white hover:text-white"
                      }`}
                    >
                      <IconComponent className="w-4 h-4" />
                      <span className="text-sm font-medium">{item.label}</span>
                    </Link>
                  )
                })}
              </nav>
            </div>

{/* Contact Info */}
            <div className="border-t-2 border-dashed border-gray-600 pt-6">
              <h3 className="text-sm font-bold text-gray-400 mb-3 uppercase tracking-wider">Contact</h3>
              <div className="space-y-2 text-xs text-gray-300">
                <p>jeremiahettang.com</p>
                <p>info@jeremiahettang.com</p>
                <p>(256) 7550-95-568</p>
              </div>
            </div>
          </div>
        </SheetContent>
      </Sheet>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true"
import type React from "react"
import type { Metadata } from "next"
import { GeistSans } from "geist/font/sans"
import { GeistMono } from "geist/font/mono"
import { Analytics } from "@vercel/analytics/next"
import { Navigation } from "@/components/navigation"
import { Suspense } from "react"
import "./globals.css"

export const metadata: Metadata = {
  title: "Jeremiah Etiang - Architect | Software | Sound | Systems",
  description:
    "Professional architect specializing in software, sound, and systems. Founder of BlackSquare Enterprises, One Mind, and Channel 8 News.",
  generator: "v0.app",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className={`font-sans ${GeistSans.variable} ${GeistMono.variable}`}>
        <Suspense fallback={null}>
          {children}
          <Navigation />
        </Suspense>
        <Analytics />
      </body>
    </html>
  )
}</article></body></html>

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This