Spaces:

ahmadnajm
/

codecraft-digital-forge

Running

App Files Files Community

ahmadnajm commited on Oct 7, 2025

Commit

bc7f4a3

verified ·

1 Parent(s): 05277a5

GoSoftware One-Page Landing Website – Modern Framer-Style Design

Browse files

Overview:
GoSoftware empowers startups and small businesses with smart, scalable software solutions: custom software, web development, POS/accounting systems, hosting & domain management.

Design & Branding:

Style: Clean, minimal, Framer-like modern aesthetics

Primary color: #3db4aewith vibrant gradients and soft background patterns with dark theme (abstract tech shapes, subtle waves, or geometric overlays)

Typography: Inter or Poppins, bold headings, readable body text

Layout: Single-page, smooth scroll, subtle section animations, fully responsive

Sections:

1️⃣ Hero

Headline: “We Build Software that Builds Businesses”

Subtext: Helping startups and businesses grow through innovative technology

CTA: “Get Started”

Background: Gradient overlay with abstract tech patterns

2️⃣ About

Mission: Innovation, reliability, partnership

Approach: “We build solutions that help businesses grow faster.”

Optional mini-list: Affordable • Fast Delivery • Scalable • Dedicated Support

3️⃣ Services

Web Development – Custom websites reflecting your brand

Software Systems – Tailored business tools

POS & Accounting Software – Simplified management

Hosting & Maintenance – Fast, secure, reliable

Each with a short description + icon/visual + optional “Learn More”

4️⃣ Portfolio

Projects with thumbnails: Didam Software, Climax Company Website, Folivya Academy

Include project name + one-line description

5️⃣ Contact

Headline: “Let’s Talk About Your Project”

Short paragraph inviting collaboration

Contact form: Name, Email, Message

Optional email: hello@gosoftware.co

Footer: © GoSoftware + social links

Visual Notes:

Gradients blending primary #2596be with complementary blues and soft pastels

Background patterns: abstract waves, dots, or polygon shapes

Smooth hover effects, modern button styles, subtle drop shadows

Goal:
A visually stunning, Framer-style landing page that communicates GoSoftware’s services, portfolio, and expertise, optimized for mobile and conversions.

Files changed (2) hide show

README.md +7 -4
index.html +387 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Codecraft Digital Forge
-emoji: 🦀
-colorFrom: indigo
 colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: CodeCraft Digital Forge 🚀
+colorFrom: blue
 colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,388 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GoSoftware - Software Solutions for Businesses</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#3db4ae',
+                        secondary: '#2596be',
+                        dark: '#0f172a',
+                        'dark-light': '#1e293b'
+                    },
+                    fontFamily: {
+                        'inter': ['Inter', 'sans-serif']
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        html {
+            scroll-behavior: smooth;
+        }
+        body {
+            font-family: 'Inter', sans-serif;
+        }
+        .gradient-bg {
+            background: linear-gradient(135deg, #3db4ae 0%, #2596be 50%, #667eea 100%);
+        }
+        .section-pattern {
+            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%233db4ae' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
+        }
+        .fade-in {
+            opacity: 0;
+            transform: translateY(30px);
+            transition: all 0.6s ease-out;
+        }
+        .fade-in.visible {
+            opacity: 1;
+            transform: translateY(0);
+        }
+        .card-hover {
+            transition: all 0.3s ease;
+        }
+        .card-hover:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+    </style>
+</head>
+<body class="bg-dark text-white font-inter">
+    <!-- Navigation -->
+    <nav class="fixed w-full z-50 bg-dark/90 backdrop-blur-sm border-b border-gray-800">
+        <div class="container mx-auto px-6 py-4">
+            <div class="flex justify-between items-center">
+                <div class="flex items-center space-x-2">
+                    <div class="w-8 h-8 rounded-full gradient-bg"></div>
+                    <span class="text-xl font-bold">GoSoftware</span>
+                </div>
+                <div class="hidden md:flex space-x-8">
+                    <a href="#home" class="text-gray-300 hover:text-primary transition-colors">Home</a>
+                    <a href="#about" class="text-gray-300 hover:text-primary transition-colors">About</a>
+                    <a href="#services" class="text-gray-300 hover:text-primary transition-colors">Services</a>
+                    <a href="#portfolio" class="text-gray-300 hover:text-primary transition-colors">Portfolio</a>
+                    <a href="#contact" class="text-gray-300 hover:text-primary transition-colors">Contact</a>
+                </div>
+                <button class="bg-primary hover:bg-secondary text-white px-6 py-2 rounded-lg font-medium transition-colors">
+                    Get Started
+                </button>
+            </div>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <section id="home" class="min-h-screen flex items-center justify-center relative overflow-hidden pt-20">
+        <div class="absolute inset-0 section-pattern opacity-20"></div>
+        <div class="container mx-auto px-6 text-center z-10">
+            <h1 class="text-5xl md:text-7xl font-bold mb-6 fade-in">
+                We Build Software <br>
+                <span class="gradient-text bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+                    that Builds Businesses
+                </span>
+            </h1>
+            <p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl mx-auto fade-in" style="animation-delay: 0.2s">
+                Helping startups and businesses grow through innovative technology solutions
+            </p>
+            <div class="fade-in" style="animation-delay: 0.4s">
+                <button class="bg-primary hover:bg-secondary text-white px-8 py-4 rounded-lg font-semibold text-lg transition-all transform hover:scale-105">
+                    Get Started
+                </button>
+            </div>
+        </div>
+        <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
+            <i data-feather="chevron-down" class="text-gray-400"></i>
+        </div>
+    </section>
+    <!-- About Section -->
+    <section id="about" class="py-20 bg-dark-light">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-16 fade-in">
+                <h2 class="text-4xl md:text-5xl font-bold mb-6">Driving Innovation Forward</h2>
+                <p class="text-xl text-gray-300 max-w-3xl mx-auto">
+                    We believe in creating software solutions that not only meet today's needs but also scale for tomorrow's challenges.
+                </p>
+            </div>
+            <div class="grid md:grid-cols-2 gap-12 items-center fade-in">
+                <div>
+                    <h3 class="text-3xl font-bold mb-6">Our Mission</h3>
+                    <p class="text-gray-300 mb-8 text-lg">
+                        At GoSoftware, we're committed to delivering innovative, reliable solutions that form lasting partnerships with our clients. We build technology that helps businesses grow faster and smarter.
+                    </p>
+                    <div class="grid grid-cols-2 gap-4">
+                        <div class="flex items-center space-x-3">
+                            <div class="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center">
+                                <i data-feather="check" class="text-primary w-4 h-4"></i>
+                            </div>
+                            <span class="text-gray-300">Affordable</span>
+                        </div>
+                        <div class="flex items-center space-x-3">
+                            <div class="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center">
+                                <i data-feather="check" class="text-primary w-4 h-4"></i>
+                            </div>
+                            <span class="text-gray-300">Fast Delivery</span>
+                        </div>
+                        <div class="flex items-center space-x-3">
+                            <div class="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center">
+                                <i data-feather="check" class="text-primary w-4 h-4"></i>
+                            </div>
+                            <span class="text-gray-300">Scalable</span>
+                        </div>
+                        <div class="flex items-center space-x-3">
+                            <div class="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center">
+                                <i data-feather="check" class="text-primary w-4 h-4"></i>
+                            </div>
+                            <span class="text-gray-300">Dedicated Support</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="relative">
+                    <div class="bg-gradient-to-br from-primary/20 to-secondary/20 rounded-2xl p-8 h-80 flex items-center justify-center">
+                        <div class="text-center">
+                            <i data-feather="target" class="w-16 h-16 text-primary mx-auto mb-4"></i>
+                            <h4 class="text-2xl font-bold mb-2">Growth-Focused</h4>
+                            <p class="text-gray-300">Building solutions that drive real business growth</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Services Section -->
+    <section id="services" class="py-20 bg-dark">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-16 fade-in">
+                <h2 class="text-4xl md:text-5xl font-bold mb-6">Our Services</h2>
+                <p class="text-xl text-gray-300 max-w-3xl mx-auto">
+                    Comprehensive software solutions designed to meet your business needs
+                </p>
+            </div>
+            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+                <!-- Service 1 -->
+                <div class="bg-dark-light rounded-2xl p-8 card-hover fade-in">
+                    <div class="w-12 h-12 rounded-lg gradient-bg flex items-center justify-center mb-6">
+                        <i data-feather="globe" class="text-white w-6 h-6"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-4">Web Development</h3>
+                    <p class="text-gray-300 mb-6">
+                        Custom websites that perfectly reflect your brand identity and business goals
+                    </p>
+                    <button class="text-primary hover:text-secondary font-medium flex items-center space-x-2">
+                        <span>Learn More</span>
+                        <i data-feather="arrow-right" class="w-4 h-4"></i>
+                    </button>
+                </div>
+                <!-- Service 2 -->
+                <div class="bg-dark-light rounded-2xl p-8 card-hover fade-in" style="animation-delay: 0.1s">
+                    <div class="w-12 h-12 rounded-lg gradient-bg flex items-center justify-center mb-6">
+                        <i data-feather="code" class="text-white w-6 h-6"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-4">Software Systems</h3>
+                    <p class="text-gray-300 mb-6">
+                        Tailored business tools and applications designed for your specific workflow
+                    </p>
+                    <button class="text-primary hover:text-secondary font-medium flex items-center space-x-2">
+                        <span>Learn More</span>
+                        <i data-feather="arrow-right" class="w-4 h-4"></i>
+                    </button>
+                </div>
+                <!-- Service 3 -->
+                <div class="bg-dark-light rounded-2xl p-8 card-hover fade-in" style="animation-delay: 0.2s">
+                    <div class="w-12 h-12 rounded-lg gradient-bg flex items-center justify-center mb-6">
+                        <i data-feather="shopping-cart" class="text-white w-6 h-6"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-4">POS & Accounting</h3>
+                    <p class="text-gray-300 mb-6">
+                        Simplified management systems for retail, inventory, and financial operations
+                    </p>
+                    <button class="text-primary hover:text-secondary font-medium flex items-center space-x-2">
+                        <span>Learn More</span>
+                        <i data-feather="arrow-right" class="w-4 h-4"></i>
+                    </button>
+                </div>
+                <!-- Service 4 -->
+                <div class="bg-dark-light rounded-2xl p-8 card-hover fade-in" style="animation-delay: 0.3s">
+                    <div class="w-12 h-12 rounded-lg gradient-bg flex items-center justify-center mb-6">
+                        <i data-feather="server" class="text-white w-6 h-6"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-4">Hosting & Maintenance</h3>
+                    <p class="text-gray-300 mb-6">
+                        Fast, secure, and reliable hosting solutions with ongoing maintenance support
+                    </p>
+                    <button class="text-primary hover:text-secondary font-medium flex items-center space-x-2">
+                        <span>Learn More</span>
+                        <i data-feather="arrow-right" class="w-4 h-4"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Portfolio Section -->
+    <section id="portfolio" class="py-20 bg-dark-light">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-16 fade-in">
+                <h2 class="text-4xl md:text-5xl font-bold mb-6">Our Work</h2>
+                <p class="text-xl text-gray-300 max-w-3xl mx-auto">
+                    See how we've helped businesses transform with our software solutions
+                </p>
+            </div>
+            <div class="grid md:grid-cols-3 gap-8">
+                <!-- Project 1 -->
+                <div class="bg-dark rounded-2xl overflow-hidden card-hover fade-in">
+                    <div class="h-48 bg-gradient-to-br from-primary/30 to-secondary/30 flex items-center justify-center">
+                        <i data-feather="briefcase" class="w-12 h-12 text-white"></i>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2">Didam Software</h3>
+                        <p class="text-gray-300 mb-4">Custom business management platform</p>
+                        <button class="text-primary hover:text-secondary font-medium">View Project →</button>
+                    </div>
+                </div>
+                <!-- Project 2 -->
+                <div class="bg-dark rounded-2xl overflow-hidden card-hover fade-in" style="animation-delay: 0.1s">
+                    <div class="h-48 bg-gradient-to-br from-secondary/30 to-primary/30 flex items-center justify-center">
+                        <i data-feather="globe" class="w-12 h-12 text-white"></i>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2">Climax Company Website</h3>
+                        <p class="text-gray-300 mb-4">Modern corporate website with e-commerce</p>
+                        <button class="text-primary hover:text-secondary font-medium">View Project →</button>
+                    </div>
+                </div>
+                <!-- Project 3 -->
+                <div class="bg-dark rounded-2xl overflow-hidden card-hover fade-in" style="animation-delay: 0.2s">
+                    <div class="h-48 bg-gradient-to-br from-primary/30 to-secondary/30 flex items-center justify-center">
+                        <i data-feather="book-open" class="w-12 h-12 text-white"></i>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2">Folivya Academy</h3>
+                        <p class="text-gray-300 mb-4">Learning management system for education</p>
+                        <button class="text-primary hover:text-secondary font-medium">View Project →</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Contact Section -->
+    <section id="contact" class="py-20 bg-dark">
+        <div class="container mx-auto px-6">
+            <div class="max-w-4xl mx-auto">
+                <div class="text-center mb-16 fade-in">
+                    <h2 class="text-4xl md:text-5xl font-bold mb-6">Let's Talk About Your Project</h2>
+                    <p class="text-xl text-gray-300 max-w-2xl mx-auto">
+                        Ready to bring your ideas to life? We'd love to hear about your project and discuss how we can help you achieve your goals.
+                    </p>
+                </div>
+                <div class="bg-dark-light rounded-2xl p-8 md:p-12 fade-in">
+                    <form class="space-y-6">
+                        <div class="grid md:grid-cols-2 gap-6">
+                            <div>
+                                <label for="name" class="block text-sm font-medium text-gray-300 mb-2">Name</label>
+                                <input type="text" id="name" class="w-full bg-dark border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-primary transition-colors" placeholder="Your name">
+                            </div>
+                            <div>
+                                <label for="email" class="block text-sm font-medium text-gray-300 mb-2">Email</label>
+                                <input type="email" id="email" class="w-full bg-dark border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-primary transition-colors" placeholder="your.email@example.com">
+                            </div>
+                        </div>
+                        <div>
+                            <label for="message" class="block text-sm font-medium text-gray-300 mb-2">Message</label>
+                            <textarea id="message" rows="6" class="w-full bg-dark border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-primary transition-colors" placeholder="Tell us about your project..."></textarea>
+                        </div>
+                        <button type="submit" class="w-full bg-primary hover:bg-secondary text-white py-4 rounded-lg font-semibold text-lg transition-colors">
+                            Send Message
+                        </button>
+                    </form>
+                    <div class="mt-8 text-center">
+                        <p class="text-gray-400">Or email us directly at</p>
+                        <a href="mailto:hello@gosoftware.co" class="text-primary hover:text-secondary font-medium">hello@gosoftware.co</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-dark-light py-12 border-t border-gray-800">
+        <div class="container mx-auto px-6">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="flex items-center space-x-2 mb-4 md:mb-0">
+                    <div class="w-8 h-8 rounded-full gradient-bg"></div>
+                    <span class="text-xl font-bold">GoSoftware</span>
+                </div>
+                <div class="flex space-x-6 mb-4 md:mb-0">
+                    <a href="#" class="text-gray-400 hover:text-primary transition-colors">
+                        <i data-feather="twitter"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-primary transition-colors">
+                        <i data-feather="linkedin"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-primary transition-colors">
+                        <i data-feather="github"></i>
+                    </a>
+                </div>
+                <div class="text-gray-400">
+                    © 2024 GoSoftware. All rights reserved.
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Scroll animation
+        document.addEventListener('DOMContentLoaded', function() {
+            feather.replace();
+            const observerOptions = {
+                threshold: 0.1,
+                rootMargin: '0px 0px -50px 0px'
+            };
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.classList.add('visible');
+                    }
+                });
+            }, observerOptions);
+            document.querySelectorAll('.fade-in').forEach((el) => {
+                observer.observe(el);
+            });
+            // Smooth scroll for navigation links
+            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+                anchor.addEventListener('click', function (e) {
+                    e.preventDefault();
+                    const target = document.querySelector(this.getAttribute('href'));
+                    if (target) {
+                        target.scrollIntoView({
+                            behavior: 'smooth',
+                            block: 'start'
+                        });
+                    }
+                });
+            });
+        });
+    </script>
+</body>
 </html>