changes: fix some typos and url name issues, cleaner UI on getting st…

…arted sections
axzilla · Oct 13, 2024 · 8ca218f · 8ca218f
1 parent 508a377
commit 8ca218f
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 37 deletions.
diff --git a/README.md b/README.md
@@ -45,13 +45,13 @@ There are two main ways to use Goilerplate in your projects:
 
 You can also mix and match these approaches based on your project needs.
 
-For a quick start, check out our [Goilerplate Quickstart](https://github.com/axzilla/goilerplate-quickstart) template, which provides a pre-configured setup using Goilerplate as a package library.
+For a quick start, check out our [Goilerplate quickstart](https://github.com/axzilla/goilerplate-quickstart) template, which provides a pre-configured setup using Goilerplate as a package library.
 
-For detailed setup instructions and examples, visit our [Getting Started guide](https://goilerplate.com/docs/getting-started).
+For detailed setup instructions and examples, visit our [how to use guide](https://goilerplate.com/docs/how-to-use).
 
 ## Components
 
-Explore our growing list of components in the [Components documentation](https://goilerplate.com/docs/components). Each component comes with usage examples and code snippets.
+Explore our growing list of components in the [components documentation](https://goilerplate.com/docs/components). Each component comes with usage examples and code snippets.
 
 ## Inspiration
 
@@ -72,11 +72,11 @@ We're exploring whether to make Goilerplate a strict port of shadcn/ui or to cre
 
 ## Changelog
 
-See [Releases](https://github.com/axzilla/goilerplate/releases) for a detailed list of changes in each version.
+See [releases](https://github.com/axzilla/goilerplate/releases) for a detailed list of changes in each version.
 
 ## Contributing
 
-We welcome contributions from the community! Whether it's adding new components, improving existing ones, or enhancing documentation, your input is valuable. Please check our [Contributing Guidelines](CONTRIBUTING.md) for more information on how to get involved.
+We welcome contributions from the community! Whether it's adding new components, improving existing ones, or enhancing documentation, your input is valuable. Please check our [contributing guidelines](CONTRIBUTING.md) for more information on how to get involved.
 
 ## Feedback
 

diff --git a/assets/css/output.css b/assets/css/output.css
@@ -666,10 +666,6 @@ body {
   bottom: 1rem;
 }
 
-.bottom-auto {
-  bottom: auto;
-}
-
 .bottom-full {
   bottom: 100%;
 }
@@ -939,10 +935,6 @@ body {
   width: 2rem;
 }
 
-.w-\[17rem\] {
-  width: 17rem;
-}
-
 .w-\[350px\] {
   width: 350px;
 }
@@ -959,10 +951,6 @@ body {
   max-width: 80rem;
 }
 
-.max-w-lg {
-  max-width: 32rem;
-}
-
 .max-w-md {
   max-width: 28rem;
 }

diff --git a/internals/ui/pages/howto.templ → internals/ui/pages/how_to_use.templ b/internals/ui/pages/howto.templ → internals/ui/pages/how_to_use.templ
@@ -4,8 +4,11 @@ import "github.com/axzilla/goilerplate/internals/ui/layouts"
 
 templ HowToUse() {
 	@layouts.DocsLayout() {
-		<div class="text-muted-foreground">
-			<h1 class="text-4xl font-bold mb-6 text-primary">Getting Started with Goilerplate</h1>
+		<div>
+			<div class="mb-16">
+				<h1 class="text-3xl font-bold mb-2">How To Use</h1>
+				<p class="mb-4 text-muted-foreground">Learn how to integrate Goilerplate into your projects.</p>
+			</div>
 			<section class="mb-12">
 				<h2 class="text-2xl font-semibold mb-4 text-primary">Two Ways to Use Goilerplate</h2>
 				<p class="mb-4">

diff --git a/internals/ui/pages/introduction.templ b/internals/ui/pages/introduction.templ
@@ -4,14 +4,16 @@ import "github.com/axzilla/goilerplate/internals/ui/layouts"
 
 templ Introduction() {
 	@layouts.DocsLayout() {
-		<div class="text-muted-foreground">
-			<h1 class="text-4xl font-bold mb-6 text-primary">🎉 Goilerplate</h1>
-			<p class="mb-4 text-muted-foreground">Modern UI Components for Go & Templ</p>
-			<p class="mb-8 text-muted-foreground">
-				Build sleek, interactive web applications with Go and Templ. Seamlessly integrate Alpine.js for enhanced client-side functionality and style effortlessly with Tailwind CSS. Where server-side simplicity meets client-side dynamism.
-			</p>
+		<div>
+			<div class="mb-16">
+				<h1 class="text-3xl font-bold mb-2">🎉 Goilerplate</h1>
+				<p class="mb-4 text-muted-foreground">Modern UI Components for Go & Templ.</p>
+			</div>
 			<section class="mb-12">
 				<h2 class="text-2xl font-semibold mb-4 text-primary">What's this madness?</h2>
+				<p class="mb-4">
+					Build sleek, interactive web applications with Go and Templ. Seamlessly integrate Alpine.js for enhanced client-side functionality and style effortlessly with Tailwind CSS. Where server-side simplicity meets client-side dynamism.
+				</p>
 				<p class="mb-4">
 					Goilerplate is a wild experiment in bringing the joy of modern UI components to the Go ecosystem. It's like a box of LEGO, but for web dev. And yes, we might have had too much coffee while coding this.
 				</p>

diff --git a/pkg/styles/goilerplate.css b/pkg/styles/goilerplate.css
@@ -658,10 +658,6 @@ body {
   bottom: 0px;
 }
 
-.bottom-auto {
-  bottom: auto;
-}
-
 .bottom-full {
   bottom: 100%;
 }
@@ -863,18 +859,10 @@ body {
   width: 2rem;
 }
 
-.w-\[17rem\] {
-  width: 17rem;
-}
-
 .w-full {
   width: 100%;
 }
 
-.max-w-lg {
-  max-width: 32rem;
-}
-
 .max-w-md {
   max-width: 28rem;
 }