Skip to content

Update README.md #282

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
hirapuka08-dev wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update README.md #282

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
163 changes: 89 additions & 74 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,74 +1,89 @@
# Content Ops Starter

![Content Ops Starter](https://assets.stackbit.com/docs/content-ops-starter-thumb.png)

Netlify starter that's made for customization with a flexible content model, component library, [visual editing](https://docs.netlify.com/visual-editor/overview/) and [Git Content Source](https://docs.netlify.com/create/content-sources/git/).

**⚡ View demo:** [https://content-ops-starter.netlify.app/](https://content-ops-starter.netlify.app/)

## Table of Contents

- [Deploying to Netlify](#deploying-to-netlify)
- [Develop with Netlify Visual Editor Locally](#develop-with-netlify-visual-editor-locally)
- [Building for production](#building-for-production)
- [Setting Up Algolia Search](#setting-up-algolia-search)
- [Next Steps](#next-steps)
- [Support](#support)

## Deploying to Netlify

If you click "Deploy to Netlify" button, it will create a new repo for you that looks exactly like this one, and sets that repo up immediately for deployment on Netlify.

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/netlify-templates/content-ops-starter)

## Develop with Netlify Visual Editor Locally

The typical development process is to begin by working locally. Clone this repository, then run `npm install` in its root directory.

Run the Next.js development server:

```txt
cd content-ops-starter
npm run dev
```

Install the [Netlify Visual Editor CLI](https://www.npmjs.com/package/@stackbit/cli). Then open a new terminal window in the same project directory and run the Netlify visual editor dev server:

```txt
npm install -g @stackbit/cli
stackbit dev
```

This outputs your own Netlify visual editor URL. Open this, register, or sign in, and you will be directed to Netlify's visual editor for your new project.

![Next.js Dev + Visual Editor Dev](https://assets.stackbit.com/docs/next-dev-stackbit-dev.png)

## Building for production

To build a static site for production, run the following command

```shell
npm run build
```

## Setting Up Algolia Search

This starter includes Algolia search integration. To set it up:

1. Create an [Algolia](https://www.algolia.com/) account
2. Create a new application and index
3. Set the following environment variables:
- `NEXT_PUBLIC_ALGOLIA_APP_ID` - Your Algolia application ID
- `NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY` - Your Algolia search-only API key
- `NEXT_PUBLIC_ALGOLIA_INDEX_NAME` - Your index name

## Next Steps

Here are a few suggestions on what to do next if you're new to Netlify visual editor:

- Learn [Netlify visual editor overview](https://docs.netlify.com/visual-editor/visual-editing/)
- Check [Netlify visual editor reference documentation](https://visual-editor-reference.netlify.com/)

## Support

If you get stuck along the way, get help in our [support forums](https://answers.netlify.com/).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Spicy Salon Dallas – Men & Women Salon</title>
<meta name="description" content="Spicy Salon in Dallas offers professional salon services for men and women. Haircuts, styling, grooming, and beauty services." />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="font-sans text-gray-800">

<!-- Header -->
<header class="bg-pink-600 text-white">
<div class="max-w-6xl mx-auto px-6 py-5 flex justify-between items-center">
<h1 class="text-2xl font-bold">Spicy Salon</h1>
<a href="tel:111222333" class="bg-white text-pink-600 px-4 py-2 rounded-lg font-semibold">Call Now</a>
</div>
</header>

<!-- Hero Section -->
<section class="bg-pink-50">
<div class="max-w-6xl mx-auto px-6 py-20 grid md:grid-cols-2 gap-10 items-center">
<div>
<h2 class="text-4xl font-bold mb-4">Style That Speaks Confidence</h2>
<p class="text-lg mb-6">Spicy Salon in Dallas offers premium salon services for both men and women. Walk in feeling good — walk out looking amazing.</p>
<div class="flex gap-4">
<a href="#contact" class="bg-pink-600 text-white px-6 py-3 rounded-lg">Book Appointment</a>
<a href="tel:111222333" class="border border-pink-600 text-pink-600 px-6 py-3 rounded-lg">Call Now</a>
</div>
</div>
<div class="bg-white rounded-2xl shadow-lg p-10 text-center">
<p class="text-xl font-semibold">⭐ Trusted Local Salon</p>
<p class="mt-2">Professional Stylists • Clean & Friendly</p>
</div>
</div>
</section>

<!-- Services -->
<section class="max-w-6xl mx-auto px-6 py-16">
<h3 class="text-3xl font-bold text-center mb-12">Our Services</h3>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white shadow-md rounded-2xl p-6">
<h4 class="text-xl font-semibold mb-2">Haircuts & Styling</h4>
<p>Trendy and classic haircuts for men and women by expert stylists.</p>
</div>
<div class="bg-white shadow-md rounded-2xl p-6">
<h4 class="text-xl font-semibold mb-2">Color & Treatments</h4>
<p>Hair coloring, highlights, smoothening, and nourishing treatments.</p>
</div>
<div class="bg-white shadow-md rounded-2xl p-6">
<h4 class="text-xl font-semibold mb-2">Grooming & Beauty</h4>
<p>Beard grooming, facials, waxing, and beauty services for all.</p>
</div>
</div>
</section>

<!-- About -->
<section class="bg-gray-50 py-16">
<div class="max-w-4xl mx-auto px-6 text-center">
<h3 class="text-3xl font-bold mb-4">About Spicy Salon</h3>
<p>Located in Dallas, Spicy Salon is your neighborhood salon for men and women. We focus on quality service, hygiene, and customer satisfaction. Our friendly team makes sure you leave with confidence and style.</p>
</div>
</section>

<!-- Contact -->
<section id="contact" class="max-w-4xl mx-auto px-6 py-16">
<h3 class="text-3xl font-bold text-center mb-8">Contact Us</h3>
<div class="text-center mb-6">
<p class="font-semibold">📞 Phone: <a href="tel:111222333" class="text-pink-600">111-222-333</a></p>
<p class="font-semibold">✉️ Email: <a href="mailto:spicysalon4675@gmail.com" class="text-pink-600">spicysalon4675@gmail.com</a></p>
<p class="font-semibold">📍 Location: Dallas, Texas</p>
</div>
<form class="grid gap-4">
<input type="text" placeholder="Your Name" class="border p-3 rounded-lg" />
<input type="tel" placeholder="Phone Number" class="border p-3 rounded-lg" />
<textarea placeholder="Message / Appointment Request" class="border p-3 rounded-lg"></textarea>
<button class="bg-pink-600 text-white py-3 rounded-lg">Send Request</button>
</form>
</section>

<!-- Footer -->
<footer class="bg-gray-800 text-white">
<div class="max-w-6xl mx-auto px-6 py-6 text-center">
<p>© 2026 Spicy Salon, Dallas. All rights reserved.</p>
</div>
</footer>

</body>
</html>