Shibaccus Web

An innovative, modern website delivering tech solutions. Built with Next.js and TypeScript.

Live Demo: Checkout the deployed version at shibaccus-web.vercel.app

---

Badges

---

Table of Contents

• Features
• Screenshots
• Getting Started
• Usage
• Customization
• Project Structure
• Built With
• Dependencies
• Key Features Explained
• License
• Acknowledgments
• Contributing
• Contact

---

Features

• Modern UI/UX: Rose gold-themed design with glass morphism effects.
• Responsive Layout: Optimized for mobile, tablet, and desktop devices.
• Interactive Animations: Smooth transitions powered by Framer Motion.
• Dark/Light Mode: Seamless theme switching with local storage support.
• Comprehensive Pages: Includes Home, Services, Portfolio, Blog, Pricing, About, Contact, and FAQ.
• Accessibility: ARIA-compliant and keyboard-navigable.
• Performance Optimized: Fast load times with optimized assets and Next.js features.
• Blog Functionality: Articles with search capabilities.
• Contact Form: Validated form for user inquiries.

---

Screenshots

Feature	Light Mode	Dark Mode
Home Page
Services Section
Portfolio Section

---

Getting Started

Set up Shibaccus Web locally with these steps.

Prerequisites

• Node.js: Version 18.0 or higher
• Package Manager: npm

Installation

1. Clone the Repository

   git clone https://github.com/VoxDroid/Shibaccus-Web.git

2. Navigate to the Project Directory

   cd Shibaccus-Web

3. Install Dependencies

   npm install

4. Start the Development Server

   npm run dev

5. Open http://localhost:3000 in your browser to view the site.

---

Usage

Environment Variables

Create a .env.local file in the root directory:

NEXT_PUBLIC_SITE_URL=http://localhost:3000

Commands

• Development: npm run dev
• Build: npm run build
• Production: npm run start
• Lint: npm run lint
• Format: npm run format

Key Sections

• Home: Edit app/page.tsx for hero, services, and testimonials.
• Services: Update app/services/ for offerings and details.
• Portfolio: Modify app/portfolio/ to showcase projects.
• Blog: Adjust app/blog/ for articles and search.

---

Customization

Changing Colors

Modify the theme in tailwind.config.ts:

theme: {
  extend: {
    colors: {
      primary: "#e15e66", // Rose gold
    },
  },
};

Update CSS variables in app/globals.css:

:root {
  --primary: #e15e66; /* Light mode */
}
.dark {
  --primary: #e15e66; /* Dark mode */
}

Updating Content

Edit key components:

• Home: app/page.tsx
• Services: app/services/
• Portfolio: app/portfolio/
• Blog: app/blog/
• Contact: app/contact/

Adding Animations

Tweak Framer Motion settings in components like components/animate-in-view.tsx.

---

Project Structure

shibaccus-web/
├── app/                    # Next.js app directory
│   ├── about/              # About page
│   ├── blog/               # Blog pages
│   ├── contact/            # Contact page
│   ├── faq/                # FAQ page
│   ├── portfolio/          # Portfolio pages
│   ├── pricing/            # Pricing page
│   ├── services/           # Services pages
│   ├── api/                # API routes
│   ├── globals.css         # Global styles
│   ├── layout.tsx          # Root layout
│   └── page.tsx            # Home page
├── components/             # Reusable components
│   ├── ui/                 # Shadcn UI components
│   ├── animate-in-view.tsx # Animation component
│   ├── hero.tsx            # Hero section
├── hooks/                  # Custom hooks
├── lib/                    # Utility functions
├── public/                 # Static assets
│   ├── logo/               # Logo images
├── styles/                 # Additional styles
├── tailwind.config.ts      # Tailwind configuration
├── next.config.js          # Next.js configuration
├── tsconfig.json           # TypeScript configuration
└── package.json            # Dependencies and scripts

---

Built With

• Next.js - React framework with App Router
• TypeScript - Type safety
• Tailwind CSS - Utility-first styling
• Framer Motion - Animations
• Shadcn UI - Customizable components
• Vercel - Deployment platform
• React Hook Form - Form handling
• Lucide React - Icon library

---

Dependencies

Key packages (from package.json):

• next
• react, react-dom
• typescript
• tailwindcss
• framer-motion
• lucide-react
• react-hook-form

Install with:

npm install

---

Key Features Explained

Glass Morphism Design

A modern UI effect applied via Tailwind CSS and custom styles in app/globals.css.

Theme Switching

Toggle between dark/light modes with ThemeToggle component, persisting via local storage.

Responsive Design

Mobile-first approach with Tailwind breakpoints for all screen sizes.

Performance Optimization

Leverages Next.js server components, image optimization, and lazy loading.

---

License

Licensed under the MIT License. See the license file for details.

---

Acknowledgments

• Next.js
• Tailwind CSS
• Framer Motion
• Shadcn UI
• Lucide Icons
• Vercel

---

Contributing

Contributions are welcome! Please read our Contributing Guide for details on how to contribute, and review our Code of Conduct to ensure a positive and inclusive community.

To contribute:

1. Fork the repository: https://github.com/VoxDroid/Shibaccus-Web
2. Create a feature branch (git checkout -b feature-name)
3. Commit your changes (git commit -m "Add feature")
4. Push to the branch (git push origin feature-name)
5. Open a pull request

---

Contact

Questions or feedback? Reach out:

• GitHub: @VoxDroid

Support

For support, please refer to our Support Guide. If you encounter security issues, please review our Security Policy.

If you find this project useful, consider supporting its development:

• Ko-fi: Buy me a coffee
  
• Star the Repository: Give it a star on GitHub
• Report Issues: Submit bugs or suggestions on the Issues page

---

Developed by VoxDroid
GitHub | Ko-fi