Uses tailwind for most of the homepage styling and adds prettier
This commit is contained in:
12
src/components/ButtonLink.astro
Normal file
12
src/components/ButtonLink.astro
Normal file
@@ -0,0 +1,12 @@
|
||||
---
|
||||
interface Props {
|
||||
href: string;
|
||||
}
|
||||
|
||||
const { href } = Astro.props;
|
||||
---
|
||||
|
||||
<a href={href} class="text-dark bg-primary rounded-md px-8 py-4 font-bold hover:bg-primary-dark">
|
||||
<slot />
|
||||
</a>
|
||||
|
||||
@@ -1,211 +1,128 @@
|
||||
---
|
||||
import BaseHead from '../components/BaseHead.astro';
|
||||
import Header from '../components/Header.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
|
||||
import BaseHead from "../components/BaseHead.astro";
|
||||
import Header from "../components/Header.astro";
|
||||
import Footer from "../components/Footer.astro";
|
||||
import ButtonLink from "../components/ButtonLink.astro";
|
||||
import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
||||
</head>
|
||||
<body>
|
||||
<Header />
|
||||
<main>
|
||||
<div class="hero">
|
||||
<div class="hero-content">
|
||||
<img src="HeaderLogo.png" alt="Terakoda Software Systems Logo" class="logo">
|
||||
<p>Solving Your Unique Software Challenges with Precision and Quality</p>
|
||||
<a href="#contact" class="cta-button">Get a Consultation</a>
|
||||
</div>
|
||||
<head>
|
||||
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
||||
</head>
|
||||
<body>
|
||||
<Header />
|
||||
<div class="bg-dark text-light py-16">
|
||||
<div class="flex flex-col items-center gap-8 w-200 m-auto">
|
||||
<img
|
||||
src="HeaderLogo.png"
|
||||
alt="Terakoda Software Systems Logo"
|
||||
class="h-32"
|
||||
/>
|
||||
<p>
|
||||
Solving Your Unique Software Challenges with Precision and Quality
|
||||
</p>
|
||||
<ButtonLink href="#contact">Get a Consultation</ButtonLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="services">
|
||||
<h2>Our Expertise</h2>
|
||||
<div class="services-content">
|
||||
<main>
|
||||
<div class="bg-light-accent py-16 text-dark">
|
||||
<div class="w-200 m-auto">
|
||||
<h2 class="text-4xl mb-8 text-center">Our Expertise</h2>
|
||||
<div class="grid grid-cols-2 gap-8">
|
||||
<div class="service-item">
|
||||
<h3>Custom Software Solutions</h3>
|
||||
<p>We specialize in providing bespoke software solutions for those critical, isolated challenges that can impact your operations and growth.</p>
|
||||
<h3>Custom Software Solutions</h3>
|
||||
<p>
|
||||
We specialize in providing bespoke software solutions for those
|
||||
critical, isolated challenges that can impact your operations
|
||||
and growth.
|
||||
</p>
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<h3>Engineering Challenges</h3>
|
||||
<p>Our experienced developers can tackle complex engineering hurdles that fall outside your team's immediate expertise.</p>
|
||||
<h3>Engineering Challenges</h3>
|
||||
<p>
|
||||
Our experienced developers can tackle complex engineering
|
||||
hurdles that fall outside your team's immediate expertise.
|
||||
</p>
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<h3>Organizational Challenges</h3>
|
||||
<p>We offer solutions to organizational challenges that can be addressed through tailored software applications.</p>
|
||||
<h3>Organizational Challenges</h3>
|
||||
<p>
|
||||
We offer solutions to organizational challenges that can be
|
||||
addressed through tailored software applications.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="quality">
|
||||
<h2>Our Commitment to Quality</h2>
|
||||
<div class="py-16 w-200 m-auto">
|
||||
<h2 class="text-4xl mb-8 text-center">Our Commitment to Quality</h2>
|
||||
<div class="quality-content">
|
||||
<p>At Terakoda Software Systems, we are dedicated to delivering solutions that meet the highest standards of quality and reliability.</p>
|
||||
<ul class="quality-list">
|
||||
<li>Expert Analysis to understand your specific needs.</li>
|
||||
<li>Custom-Crafted Solutions designed for optimal performance.</li>
|
||||
<li>Uncompromising Quality through rigorous development standards.</li>
|
||||
<li>Clear Communication throughout the entire process.</li>
|
||||
<li>Long-Term Value ensuring lasting solutions.</li>
|
||||
</ul>
|
||||
<p>
|
||||
At Terakoda Software Systems, we are dedicated to delivering
|
||||
solutions that meet the highest standards of quality and
|
||||
reliability.
|
||||
</p>
|
||||
<ul class="quality-list">
|
||||
<li>Expert Analysis to understand your specific needs.</li>
|
||||
<li>Custom-Crafted Solutions designed for optimal performance.</li>
|
||||
<li>
|
||||
Uncompromising Quality through rigorous development standards.
|
||||
</li>
|
||||
<li>Clear Communication throughout the entire process.</li>
|
||||
<li>Long-Term Value ensuring lasting solutions.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contact" id="contact">
|
||||
<h2>Ready to Solve Your Software Puzzle?</h2>
|
||||
<p>Contact us today for a consultation and let Terakoda Software Systems help you overcome your unique software challenges with precision and excellence.</p>
|
||||
<a href="mailto:contact@terakoda.com" class="contact-button">Contact Us</a>
|
||||
</div>
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
<style>
|
||||
.logo {
|
||||
max-width: 400px; /* Adjust as needed */
|
||||
height: auto;
|
||||
}
|
||||
<div class="py-16 bg-dark text-light">
|
||||
<div class="w-200 m-auto flex flex-col items-center gap-8 text-center">
|
||||
<h2 class="text-4xl text-center">
|
||||
Ready to Solve Your Software Puzzle?
|
||||
</h2>
|
||||
<p class="text-lg">
|
||||
Contact us today for a consultation and let Terakoda Software
|
||||
Systems help you overcome your unique software challenges with
|
||||
precision and excellence.
|
||||
</p>
|
||||
<ButtonLink href="mailto:contact@terakoda.com">Contact Us</ButtonLink>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<Footer />
|
||||
</body><style>
|
||||
.service-item {
|
||||
background-color: white;
|
||||
padding: 25px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.hero {
|
||||
background-color: #1f2932; /* Dark Background */
|
||||
color: #fdfafc; /* Light Text */
|
||||
padding: 80px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.service-item h3 {
|
||||
color: #2eb670; /* Accent Color */
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.quality-list {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 2.5em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.quality-list li {
|
||||
margin-bottom: 15px;
|
||||
padding-left: 25px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
display: inline-block;
|
||||
background-color: #2EB670; /* Accent Color */
|
||||
color: #1f2932; /* Dark Text */
|
||||
padding: 15px 30px;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
font-weight: bold;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
background-color: #269e61;
|
||||
}
|
||||
|
||||
.services {
|
||||
padding: 60px 20px;
|
||||
text-align: center;
|
||||
background-color: #f9f7f7; /* Slightly darker light background for contrast */
|
||||
}
|
||||
|
||||
.services h2 {
|
||||
font-size: 2em;
|
||||
color: #1f2932; /* Dark Text */
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.services-content {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 30px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.service-item {
|
||||
background-color: white;
|
||||
padding: 25px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.service-item h3 {
|
||||
color: #2EB670; /* Accent Color */
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.quality {
|
||||
background-color: #fdfafc; /* Light Background */
|
||||
padding: 60px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.quality h2 {
|
||||
font-size: 2em;
|
||||
color: #1f2932; /* Dark Text */
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.quality-content {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.quality-list {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.quality-list li {
|
||||
margin-bottom: 15px;
|
||||
padding-left: 25px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.quality-list li::before {
|
||||
content: "\2713"; /* Checkmark */
|
||||
color: #2EB670; /* Accent Color */
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.contact {
|
||||
background-color: #1f2932; /* Dark Background */
|
||||
color: #fdfafc; /* Light Text */
|
||||
padding: 60px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.contact h2 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.contact p {
|
||||
font-size: 1.1em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.contact-button {
|
||||
display: inline-block;
|
||||
background-color: #2EB670; /* Accent Color */
|
||||
color: #1f2932; /* Dark Text */
|
||||
padding: 15px 30px;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
font-weight: bold;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.contact-button:hover {
|
||||
background-color: #269e61;
|
||||
}
|
||||
|
||||
|
||||
.quality-list li::before {
|
||||
content: "\2713"; /* Checkmark */
|
||||
color: #2eb670; /* Accent Color */
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
|
||||
@@ -1,12 +1,8 @@
|
||||
/*
|
||||
The CSS in this style tag is based off of Bear Blog's default CSS.
|
||||
https://github.com/HermanMartinus/bearblog/blob/297026a877bc2ab2b3bdfbd6b9f7961c350917dd/templates/styles/blog/default.css
|
||||
License MIT: https://github.com/HermanMartinus/bearblog/blob/master/LICENSE.md
|
||||
*/
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--accent: #2337ff;
|
||||
--accent-dark: #000d8a;
|
||||
--accent: rgb(46, 182, 112);
|
||||
--accent-dark: rgb(23, 91, 56);
|
||||
--black: 15, 18, 25;
|
||||
--gray: 96, 115, 159;
|
||||
--gray-light: 229, 233, 240;
|
||||
@@ -16,140 +12,11 @@
|
||||
0 2px 6px rgba(var(--gray), 25%), 0 8px 24px rgba(var(--gray), 33%),
|
||||
0 16px 32px rgba(var(--gray), 33%);
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Atkinson";
|
||||
src: url("/fonts/atkinson-regular.woff") format("woff");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Atkinson";
|
||||
src: url("/fonts/atkinson-bold.woff") format("woff");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
body {
|
||||
font-family: "Atkinson", sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
background: linear-gradient(var(--gray-gradient)) no-repeat;
|
||||
background-size: 100% 600px;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
color: rgb(var(--gray-dark));
|
||||
font-size: 20px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
main {
|
||||
width: 720px;
|
||||
max-width: calc(100% - 2em);
|
||||
margin: auto;
|
||||
padding: 3em 1em;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: rgb(var(--black));
|
||||
line-height: 1.2;
|
||||
}
|
||||
h1 {
|
||||
font-size: 3.052em;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2.441em;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.953em;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.563em;
|
||||
}
|
||||
h5 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
strong,
|
||||
b {
|
||||
font-weight: 700;
|
||||
}
|
||||
a {
|
||||
color: var(--accent);
|
||||
}
|
||||
a:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
p {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.prose p {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
textarea {
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
input {
|
||||
font-size: 16px;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
}
|
||||
code {
|
||||
padding: 2px 5px;
|
||||
background-color: rgb(var(--gray-light));
|
||||
border-radius: 2px;
|
||||
}
|
||||
pre {
|
||||
padding: 1.5em;
|
||||
border-radius: 8px;
|
||||
}
|
||||
pre > code {
|
||||
all: unset;
|
||||
}
|
||||
blockquote {
|
||||
border-left: 4px solid var(--accent);
|
||||
padding: 0 0 0 20px;
|
||||
margin: 0px;
|
||||
font-size: 1.333em;
|
||||
}
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid rgb(var(--gray-light));
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
body {
|
||||
font-size: 18px;
|
||||
}
|
||||
main {
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: absolute !important;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
overflow: hidden;
|
||||
/* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
|
||||
clip: rect(1px 1px 1px 1px);
|
||||
/* maybe deprecated but we need to support legacy browsers */
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
/* modern browsers, clip-path works inwards from each corner */
|
||||
clip-path: inset(50%);
|
||||
/* added line to stop words getting smushed together (as they go onto separate lines and some screen readers do not understand line feeds as a space */
|
||||
white-space: nowrap;
|
||||
@theme {
|
||||
--color-primary: rgb(46, 182, 112);
|
||||
--color-primary-dark: #269e61;
|
||||
--color-light: #fdfafc;
|
||||
--color-dark: #1f2932;
|
||||
--color-light-accent: #f9f7f7; /* Slightly darker light background for contrast */
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user