CtrlAltAssist/Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: CtrlAltAssist:cd7c58c28e9f5f5308e28f14017b603f6a58bdce
Branches Tags
CtrlAltAssist:master
..
compare: CtrlAltAssist:45f55106c32658fd78d7b123d76b0fb9bde095b7
Branches Tags
CtrlAltAssist:master

No commits in common. "cd7c58c28e9f5f5308e28f14017b603f6a58bdce" and "45f55106c32658fd78d7b123d76b0fb9bde095b7" have entirely different histories.
cd7c58c28e ... 45f55106c3

16 changed files with 204 additions and 259 deletions
Show Stats Expand all files Collapse all files

3
CtrlAltAssist/Components/Layout/Navbar.razor
View File

@ -18,9 +18,6 @@
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#founder">Founder</a>
</li>

116
CtrlAltAssist/Components/Pages/Home.razor Normal file
View File

@ -0,0 +1,116 @@
@page "/"
<PageTitle>Ctrl Alt Assist - Home</PageTitle>
<!-- Hero Section -->
<header id="home" class="hero-section">
<div class="container">
<h1>Ctrl Alt Assist, Reboot Your Business Efficiency</h1>
<p>Professional Executive & Financial Virtual Assistance tailored for the modern entrepreneur. </p>
<p>We streamline your back office, ensure SARS compliance, and organise your administration so you can focus on what you do best - growing your business.</p>
<a href="#services" class="btn btn-lg btn-pastel">Discover Our Services</a>
</div>
</header>
<!-- About Us Section -->
<section id="about" class="section-padding">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 mb-4 mb-lg-0">
<img src="Images/about-us.png" class="img-fluid rounded shadow" alt="About Ctrl Alt Assist">
</div>
<div class="col-lg-6">
<h2>Who We Are</h2>
<p>Since 2004, Ctrl Alt Assist has been providing exceptional virtual office assistance, empowering businesses to thrive by handling the administrative burden. We understand that your time is valuable, and our goal is to streamline your operations, allowing you to focus on growth and core competencies.</p>
<p>Our team is dedicated to offering personalized, efficient, and reliable support, tailored to the unique needs of each client. We pride ourselves on our proactive approach and commitment to delivering peace of mind.</p>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="section-padding bg-light-green">
<div class="container">
<h2 class="text-center mb-5 text-light">Our Comprehensive Services</h2>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 service-list">
<div class="col">
<div class="card h-100 bg-light-blue text-light">
<div class="card-body">
<h5 class="card-title text-light">Financial & Accounting Support</h5>
<ul>
<li>Bookkeeping, Budgets, Management Accounts</li>
<li>SAGE, SAGE ONE, SAGE Online Tools, SAGE Payroll</li>
<li>Reseller, Training & Support for SAGE products</li>
<li>Monthly SARS Returns</li>
<li>Bank, Debtors & Creditors Reconciliations</li>
<li>Sorting & Capturing Invoices & Receipts</li>
<li>Sending Statements & Payment Reminders</li>
</ul>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 bg-light-purple text-light">
<div class="card-body">
<h5 class="card-title text-light">Office & Administrative Management</h5>
<ul>
<li>Complete office management – full admin service</li>
<li>Creation and organizing of Business Systems & Procedures</li>
<li>Product & Business Manuals</li>
<li>Accounting System Setup, Training & Support</li>
<li>Company Registrations</li>
<li>Creating & Maintaining databases</li>
<li>Payroll, Staff Hiring Assistance and process streamlining</li>
</ul>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 bg-light-blue text-light">
<div class="card-body">
<h5 class="card-title text-light">Digital & Project Support</h5>
<ul>
<li>Report Writing, PowerPoint Presentations</li>
<li>Customer Relations Management</li>
<li>Project Management</li>
<li>Typing & Transcribing Services</li>
<li>Research</li>
<li>Event Planning & Coordination</li>
<li>Basic Websites, Domain Name Registrations</li>
<li>Website, Email Hosting & Setup</li>
<li>Cloud Backup Servers & Offsite Servers</li>
<li>Computer Support, Training & Maintenance</li>
</ul>
</div>
</div>
</div>
</div>
<div class="text-center mt-5">
<p class="lead text-light">We offer both package, hourly or group rates customised to your personal needs.</p>
<a href="#contact" class="btn btn-lg btn-pastel">Get a Custom Quote</a>
</div>
</div>
</section>
<!-- Founder Section -->
<section id="founder" class="section-padding text-center">
<div class="container">
<h2>Meet Our Founder</h2>
<img src="Images/Olivia.png" alt="Olivia, Founder of Ctrl Alt Assist" class="founder-img">
<h3>Olivia</h3>
<p class="lead">Loving wife, involved mom, and devoted pet parent.</p>
<p>Olivia brings over 20 years of robust experience in both the Corporate and Private sector, working with JSE listed companies and privately owned businesses across diverse industries from transport to the arts. Her extensive knowledge is backed by a Bcompt, Business Studies Diploma, various Computer & Accounting software diplomas, and a Mini-MBA with Action Coach Ignite.</p>
<p>A firm believer in continuous learning and growth, Olivia is a motivated and organized professional. She provides all necessary software, hardware, and office requirements, ensuring a seamless and efficient service. Clients also benefit from a personal login to our website, allowing them to view timesheets, track hours remaining, and more.</p>
</div>
</section>
<!-- Call to Action for Login -->
<section id="login-cta" class="call-to-action">
<div class="container">
<h2>Already a Client?</h2>
<p class="lead">Access your personalized portal to manage your services and track progress.</p>
<a href="/login" class="btn btn-lg btn-pastel">Client Login</a>
</div>
</section>
<CtrlAltAssist.Components.UI.ContactUsForm />

88
CtrlAltAssist/Components/Pages/Home.razor.css Normal file
View File

@ -0,0 +1,88 @@
.section-padding {
padding: 80px 0;
}
.hero-section {
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/images/hero.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
color: var(--text-light);
padding: 100px 0;
text-align: center;
min-height: 100vh;
display: flex;
align-items: center;
}
.hero-section h1 {
color: var(--text-light);
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 20px;
}
.hero-section p {
font-size: 1.5rem;
max-width: 800px;
margin: 0 auto 30px;
}
.testimonial-carousel .carousel-item {
padding: 40px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
margin: 20px auto;
max-width: 800px;
}
.testimonial-carousel .carousel-control-prev-icon,
.testimonial-carousel .carousel-control-next-icon {
filter: invert(100%);
}
.founder-img {
max-width: 250px;
border-radius: 50%;
border: 5px solid var(--secondary-pastel-green);
margin-bottom: 20px;
}
.service-list ul {
list-style: none;
padding: 0;
}
.service-list ul li {
padding: 8px 0;
border-bottom: 1px dashed rgba(255,255,255,0.3);
display: flex;
align-items: center;
}
.service-list ul li:last-child {
border-bottom: none;
}
.service-list ul li::before {
content: '?';
color: var(--quaternary-pastel-pink);
font-weight: bold;
margin-right: 10px;
}
.call-to-action {
background-color: var(--quaternary-pastel-pink);
color: var(--text-dark);
padding: 60px 0;
text-align: center;
}
.call-to-action h2 {
color: var(--text-dark);
margin-bottom: 30px;
}

8
CtrlAltAssist/Components/Pages/Home/A_HeroSection.razor
View File

@ -1,8 +0,0 @@
<header id="home" class="hero-section">
<div class="container">
<h1>Ctrl Alt Assist, Reboot Your Business Efficiency</h1>
<p>Professional Executive & Financial Virtual Assistance tailored for the modern entrepreneur.</p>
<p>We streamline your back office, ensure SARS compliance, and organise your administration so you can focus on what you do best - growing your business.</p>
<a href="#services" class="btn btn-lg btn-pastel">Discover Our Services</a>
</div>
</header>

26
CtrlAltAssist/Components/Pages/Home/A_HeroSection.razor.css
View File

@ -1,26 +0,0 @@
.hero-section {
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/images/hero.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
color: var(--text-light);
padding: 100px 0;
text-align: center;
min-height: 100vh;
display: flex;
align-items: center;
}
.hero-section h1 {
color: var(--text-light);
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 20px;
}
.hero-section p {
font-size: 1.5rem;
max-width: 800px;
margin: 0 auto 30px;
}

14
CtrlAltAssist/Components/Pages/Home/B_AboutSection.razor
View File

@ -1,14 +0,0 @@
<section id="about" class="section-padding">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 mb-4 mb-lg-0">
<img src="Images/about-us.png" class="img-fluid rounded shadow" alt="About Ctrl Alt Assist">
</div>
<div class="col-lg-6">
<h2>Who We Are</h2>
<p>Since 2004, Ctrl Alt Assist has been providing exceptional virtual office assistance, empowering businesses to thrive by handling the administrative burden. We understand that your time is valuable, and our goal is to streamline your operations, allowing you to focus on growth and core competencies.</p>
<p>Our team is dedicated to offering personalized, efficient, and reliable support, tailored to the unique needs of each client. We pride ourselves on our proactive approach and commitment to delivering peace of mind.</p>
</div>
</div>
</div>
</section>

62
CtrlAltAssist/Components/Pages/Home/C_ServicesSection.razor
View File

@ -1,62 +0,0 @@
<section id="services" class="section-padding bg-light-green">
<div class="container">
<h2 class="text-center mb-5 text-dark">Our Comprehensive Services</h2>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 service-list">
<div class="col">
<div class="card h-100 bg-light-blue text-dark">
<div class="card-body">
<h5 class="card-title text-dark">Financial & Accounting Support</h5>
<ul>
<li>Bookkeeping, Budgets, Management Accounts</li>
<li>SAGE, SAGE ONE, SAGE Online Tools, SAGE Payroll</li>
<li>Reseller, Training & Support for SAGE products</li>
<li>Monthly SARS Returns</li>
<li>Bank, Debtors & Creditors Reconciliations</li>
<li>Sorting & Capturing Invoices & Receipts</li>
<li>Sending Statements & Payment Reminders</li>
</ul>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 bg-light-purple text-dark">
<div class="card-body">
<h5 class="card-title text-dark">Office & Administrative Management</h5>
<ul>
<li>Complete office management – full admin service</li>
<li>Creation and organizing of Business Systems & Procedures</li>
<li>Product & Business Manuals</li>
<li>Accounting System Setup, Training & Support</li>
<li>Company Registrations</li>
<li>Creating & Maintaining databases</li>
<li>Payroll, Staff Hiring Assistance and process streamlining</li>
</ul>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 bg-light-blue text-dark">
<div class="card-body">
<h5 class="card-title text-dark">Digital & Project Support</h5>
<ul>
<li>Report Writing, PowerPoint Presentations</li>
<li>Customer Relations Management</li>
<li>Project Management</li>
<li>Typing & Transcribing Services</li>
<li>Research</li>
<li>Event Planning & Coordination</li>
<li>Basic Websites, Domain Name Registrations</li>
<li>Website, Email Hosting & Setup</li>
<li>Cloud Backup Servers & Offsite Servers</li>
<li>Computer Support, Training & Maintenance</li>
</ul>
</div>
</div>
</div>
</div>
<div class="text-center mt-5">
<p class="lead text-dark">We offer both package, hourly or group rates customised to your personal needs.</p>
<a href="#contact" class="btn btn-lg btn-pastel">Get a Custom Quote</a>
</div>
</div>
</section>

22
CtrlAltAssist/Components/Pages/Home/C_ServicesSection.razor.css
View File

@ -1,22 +0,0 @@
.service-list ul {
list-style: none;
padding: 0;
}
.service-list ul li {
padding: 8px 0;
border-bottom: 1px dashed rgba(255,255,255,0.3);
display: flex;
align-items: center;
}
.service-list ul li:last-child {
border-bottom: none;
}
.service-list ul li::before {
content: '?';
color: var(--text-dark); /*var(--quaternary-pastel-pink);*/
font-weight: bold;
margin-right: 10px;
}

73
CtrlAltAssist/Components/Pages/Home/D_PricingSection.razor
View File

@ -1,73 +0,0 @@
<section id="pricing" class="section-padding">
<div class="container">
<p class="text-uppercase text-muted small fw-semibold mb-1">Transparent pricing</p>
<h2 class="fw-bold mb-2">Choose the package that fits where you are right now</h2>
<p class="text-muted mb-5">All packages are month-to-month with no lock-in contracts. Prices are quoted exclusive of tax.</p>
<div class="row g-4 align-items-stretch">
<!-- Basic -->
<div class="col-lg-4">
<div class="card h-100 p-4 shadow-sm price-card">
<p class="text-muted small mb-1">Starter</p>
<h3 class="fw-bold mb-2">Basic</h3>
<p class="text-muted small">For sole proprietors and early-stage startups with straightforward finances.</p>
<div class="price-amount">From R2000 pm</div>
<p class="price-note">Price to be confirmed</p>
<ul class="price-features flex-grow-1 mb-4">
<li><span class="check">✓</span>Xero setup and onboarding</li>
<li><span class="check">✓</span>Monthly bank reconciliation</li>
<li><span class="check">✓</span>Income statement and balance sheet</li>
<li><span class="check">✓</span>Up to 50 transactions per month</li>
<li><span class="check">✓</span>Email support</li>
</ul>
<a href="#contact" class="btn btn-outline-primary w-100">Get a quote</a>
</div>
</div>
<!-- Premium (featured) -->
<div class="col-lg-4">
<div class="card h-100 p-4 shadow-sm price-card featured">
<div><span class="featured-tag">Most popular</span></div>
<p class="text-muted small mb-1">Full service</p>
<h3 class="fw-bold mb-2">Premium</h3>
<p class="text-muted small">For growing SMEs and non-profits that need complete monthly financial management.</p>
<div class="price-amount">From R3500 pm</div>
<p class="price-note">Price to be confirmed</p>
<ul class="price-features flex-grow-1 mb-4">
<li><span class="check">✓</span>Everything in Basic</li>
<li><span class="check">✓</span>Full monthly bookkeeping service (Including VAT)</li>
<li><span class="check">✓</span>Up to 200 transactions per month</li>
<li><span class="check">✓</span>Monthly management accounts</li>
<li><span class="check">✓</span>Priority email and phone support</li>
<li><span class="check">✓</span>Quarterly financial review call</li>
</ul>
<a href="#contact" class="btn btn-primary w-100">Get a quote</a>
</div>
</div>
<!-- Custom -->
<div class="col-lg-4">
<div class="card h-100 p-4 shadow-sm price-card">
<p class="text-muted small mb-1">Enterprise</p>
<h3 class="fw-bold mb-2">Custom</h3>
<p class="text-muted small">For businesses with complex structures, high transaction volumes or multiple entities.</p>
<div class="price-amount">Bespoke</div>
<p class="price-note">Tailored to your exact requirements</p>
<ul class="price-features flex-grow-1 mb-4">
<li><span class="check">✓</span>Everything in Premium</li>
<li><span class="check">✓</span>Unlimited transactions</li>
<li><span class="check">✓</span>Multi-entity reporting</li>
<li><span class="check">✓</span>Custom Xero integrations</li>
<li><span class="check">✓</span>Dedicated monthly strategy session</li>
<li><span class="check">✓</span>Direct adviser access</li>
</ul>
<a href="#contact" class="btn btn-outline-primary w-100">Let's talk</a>
</div>
</div>
</div>
<p class="text-center text-muted small mt-4">Your monthly Xero subscription is billed separately and directly by Xero. No lock-in contracts.</p>
</div>
</section>

10
CtrlAltAssist/Components/Pages/Home/E_FounderSection.razor
View File

@ -1,10 +0,0 @@
<section id="founder" class="section-padding text-center bg-light-green">
<div class="container">
<h2>Meet Our Founder</h2>
<img src="Images/Olivia.png" alt="Olivia, Founder of Ctrl Alt Assist" class="founder-img">
<h3>Olivia</h3>
<p class="lead text-dark">Loving wife, involved mom, and devoted pet parent.</p>
<p class="text-dark">Olivia brings over 20 years of robust experience in both the Corporate and Private sector, working with JSE listed companies and privately owned businesses across diverse industries from transport to the arts. Her extensive knowledge is backed by a Bcompt, Business Studies Diploma, various Computer & Accounting software diplomas, and a Mini-MBA with Action Coach Ignite.</p>
<p class="text-dark">A firm believer in continuous learning and growth, Olivia is a motivated and organized professional. She provides all necessary software, hardware, and office requirements, ensuring a seamless and efficient service. Clients also benefit from a personal login to our website, allowing them to view timesheets, track hours remaining, and more.</p>
</div>
</section>

6
CtrlAltAssist/Components/Pages/Home/E_FounderSection.razor.css
View File

@ -1,6 +0,0 @@
.founder-img {
max-width: 250px;
border-radius: 50%;
border: 5px solid var(--secondary-pastel-green);
margin-bottom: 20px;
}

7
CtrlAltAssist/Components/Pages/Home/F_LoginCtaSection.razor
View File

@ -1,7 +0,0 @@
<section id="login-cta" class="call-to-action-section">
<div class="container">
<h2>Already a Client?</h2>
<p class="lead">Access your personalized portal to manage your services and track progress.</p>
<a href="/login" class="btn btn-lg btn-pastel">Client Login</a>
</div>
</section>

11
CtrlAltAssist/Components/Pages/Home/F_LoginCtaSection.razor.css
View File

@ -1,11 +0,0 @@
.call-to-action-section {
background-color: var(--quaternary-pastel-pink);
color: var(--text-dark);
padding: 60px 0;
text-align: center;
}
.call-to-action h2 {
color: var(--text-dark);
margin-bottom: 30px;
}

12
CtrlAltAssist/Components/Pages/Home/Index.razor
View File

@ -1,12 +0,0 @@
@page "/"
<PageTitle>Ctrl Alt Assist - Home</PageTitle>
<A_HeroSection />
<B_AboutSection />
<C_ServicesSection />
<D_PricingSection />
<E_FounderSection />
<F_LoginCtaSection />
<CtrlAltAssist.Components.UI.ContactUsForm />

1
CtrlAltAssist/Components/Pages/Home/Index.razor.css
View File

@ -1 +0,0 @@


4
CtrlAltAssist/wwwroot/app.css
View File

@ -1,7 +1,3 @@
.section-padding {
padding: 80px 0;
}
:root {
--primary-pastel-blue: #AEC6CF; /* Light Blue */
--secondary-pastel-green: #B2D8D8; /* Mint Green */