From b7f4c6b9fa27f017bb2df3a6c4fd0c4d3e78142f Mon Sep 17 00:00:00 2001
From: Flatlogic Bot <support@flatlogic.com>
Date: Sun, 2 Nov 2025 16:46:22 +0000
Subject: [PATCH] 1.1

---
 core/__pycache__/admin.cpython-311.pyc  | Bin 212 -> 361 bytes
 core/__pycache__/models.cpython-311.pyc | Bin 209 -> 1307 bytes
 core/__pycache__/urls.cpython-311.pyc   | Bin 347 -> 449 bytes
 core/__pycache__/views.cpython-311.pyc  | Bin 1364 -> 925 bytes
 core/admin.py                           |   2 +
 core/models.py                          |  12 +-
 core/templates/base.html                |  64 +++++++-
 core/templates/core/index.html          | 191 ++++++------------------
 core/urls.py                            |   6 +-
 core/views.py                           |  31 ++--
 static/css/custom.css                   | 144 ++++++++++++++++++
 11 files changed, 268 insertions(+), 182 deletions(-)
 create mode 100644 static/css/custom.css

diff --git a/core/__pycache__/admin.cpython-311.pyc b/core/__pycache__/admin.cpython-311.pyc
index cd6f855b12f4883b1ba9de01c54245c53aacd714..470043bc3680df424fa642596f891805ea6a3deb 100644
GIT binary patch
delta 267
zcmcb@_>!r9IWI340}!n0V$UoA(vLwL7+{7nJ_i9A(-~42QW$d>av7r-85vTTQkZj?
za+#x;85vR;vshqS7O=ut$aE_6GDZf5)j$jZK>aMi44SMj<v@H*##^k3DY=<>FF^`G
zyx{E2oE$$*wu%0tvbWfB^HWlDii<!d-(o4wEJ?k^QIwjVSzMA@G%>}Iix(&k(pc<1
qalMr34F<^zsOSS510!1t*L4QrOANvjTrV<6U15;A07FIGK&=2Ri8itT

delta 135
zcmaFKbcHcxIWI340}y=Q^((_3NIwQ~V1NnA_$&luOlL@8NMX!j$YqRTWMoKT3TDt`
zehE^b$#{!3F(o%M&rg%-7GFwMVqSW_UUGh3Nl|7}5i?N1#Pg0^96*{8h>K+>OEF4u
NUtmxGq9Qh+2mphD9C-i$

diff --git a/core/__pycache__/models.cpython-311.pyc b/core/__pycache__/models.cpython-311.pyc
index 9aa598b9d5171b2bb0d207f045e07f9fbbb95a64..54eb752d312a662e840b47bb6ed49ffda698ffe6 100644
GIT binary patch
literal 1307
zcmZuxy-(Xf6hFstzHkgqQNM&lg`iagN~DT`p{i6tL4r056jfPH#&;wJ$4<|V_)v!o
z9Z=Pw8*3*@3j;%k{t1kU<RQAX6H7%!r>aBW**I097yJ4B?%uuo-S0i+V?LilFh0Lc
zTfZfQz6lTy<<hyB17{x*L?jzEq^cwdKVc^ta#fa40xcjSzd<BPrHy2~`9MbK2;OK^
z6{0MoV(Lu5qQp}Tmr&aSFZsfw%)AT>KmB9B1KdXxRV9L|i3FnZ-}FQ}P8<N?BY2}x
zRl<l=j1Ry$iUF#o!_`bYL9>u8yt<en@^SJC;ejw-jpK<zQY3wxxe}ERqqKfh_BeNi
z)!?;=fh!S1M16y*I?01T8dsJ#E!#djg_NL9u3>Crn>sbW&QqRP@rntabsY@yQJ->^
zQQPn-!H&_OXW~L<2{5&oQBjU^5UXbS9@hvpt%hOarfrzi<7q<Ijh5}Nz*(x%@?Gq>
zTi753a3;oPUt`EBd{NemAu#*sHQIo0G=RTUfsKl9`8EY7=}~*#6FctxDwXSQgO*!s
zEyr(_={7atG*;en*{0V7E@jhYv>dfXsky_`7<)d$csCykQo4kqAfC8p8}$ZnyxZ+$
z?p%n|E5!oO;7|pOc@AU9)Uqk~D#ou`hAs5Lm<j4UJ6ku{yhUxohC{qUxBU?F0YW{K
zSxw(^9iE#9PFBrXqB~49Hc!t!S)P3|_mrniMh)Q4)wxK}Xt&a2mPvVj4ob3OHE1-O
z3xlCXhR<`YCJF0h`0N&>{DjzT_^_M8h~5p2ILs3b-0uH+>d4-FppG2M9d)X!P6g^z
z`)RK*_WpiQ80!|sgTi=wsi%$Ztq0oZhvZ4>i+1|5qpfze)j(TqFZ9$=v48aN;aB5y
zxT99OY9&xBkVBt%e>2c0PNqBhOjn-?^qKZzJbCDM^y#iX9q7~T#q*@3+&xFvO>_mp
zzEVu_EZH!enp+}kk=l1JvFSQKv(`$`R`pU;=tx!Nx%e}PZvQ|?&{yPF=229~$7~W7
rL??L|%(*N{QV)%E{(X9Avh(kAp3F)>`MTMgfA{Q%nE&~o#gM=sSz}3O

literal 209
zcmZ3^%ge<81S>LrWmp2~#~=<2FhLogg@BCd3@HpLj5!Rsj8Tk?3@J>(44TX@K?*b(
zZ?Wa(r=;c-`)M-W;!Md(%uCPLOGzqX21>4E_zY6>OHV%|KQ~psG^sSNq*On(A~m_R
zB)>?%JijQrxF9h(RX;huC{-U~j9x+IFAf_ZyEG@&u80Guoe_wOWr4&8W=2NF8w@fR
Ku%RM0pb7xTsWln^

diff --git a/core/__pycache__/urls.cpython-311.pyc b/core/__pycache__/urls.cpython-311.pyc
index 1f807fae1897c89361c99c5e868a26d00799b73f..e637f39beadbafb89ab68cadb8345bd1638cca3c 100644
GIT binary patch
literal 449
zcmZurJxc>Y5S_i-yL=G?HiFosGaxx^B?Jtq(}>MAa^9}VnY|D8_Dr-&8S)3rFHl5(
zgnvM|K#H)fRk}dBRPM!CD88N9o#DONdC%o?5fnZqIqzM)pIP$*b62cwRXhR#f*AP7
zMhJ*Tbf)>bt^3%<2sEIGV5$@2&3w`UUR8c$%j75~`M*q8vkg+XfLd{xNoz>r$Pv9I
z${I}?UO?zj?m1j|E~8h33dds-xUmxlj!z#dao=OiYIuP-i~3EAXQn$fQ<liB6LiCR
z!dc8SH`2KC=pf#XZ&k9SIJHqw9>g!ORvOrxSiR7vR&t#LBC+U@x`_z6H3)e>jvSX-
zZpam_KCMUhn|#9$Ny2E8SJZH3JibxaN=FDS;3)ka3ph^yi<JpRVbmV)k1wYODXz|N
kb&jhGoFBE*!r`=&o}Q<;HN&krZmkTxqK!(~;bpbz3wJGcCIA2c

delta 253
zcmX@ee4D9$IWI340}vcY|CNyiq#uJgFu)3Be6|5HrZc24q%h_%<T6GvGBTtvr7-6(
z<uXSxGcqtSq%x+kq%x<lu3=lo%)qc3h#?@IF^VOHJ(xk0<0VKylkpZyL1Ib9OGYRs
zLo`1(^%g@B$RdzrUSe*lpC;?Xn{pHX_{Q)7ML{Zyy@13AW=2NF8w@fRP|*Vh@e8Qv
n0~-S?XM;<JP)EoNwhJus7g^-5u*iR4X5wdR;0D1W9-wgmNmMu?

diff --git a/core/__pycache__/views.cpython-311.pyc b/core/__pycache__/views.cpython-311.pyc
index 6867ddf286a519cf1754ac97038f9f1e4605fbf2..07f10f819944b800d65076dfdf970035d9530283 100644
GIT binary patch
literal 925
zcmZWmL2DC16rR~lHqmt3SPv>f85EQ)Ch=nIK|G1x3ffyi%64aLww>(8nTc&f3ORTZ
zk=}akDYoQaco&iqXxWn>9(oG|FFpBYG;2d2yKmlm^WOK~`{t|bUPmC`Kjp%27@?oq
znTYkz7%zfxfGDDvqdH#27*UJb+^XBFHrSbuXf;E#ptICjL0;}$7arrp5iFuioC7fO
zaFSiw3ONt7H<2tDHvHo+pbn6l#Npgb^A0D2T)IW53tlgc9BPy+LU9*RdMVN#rdAt=
zc+XPT{wKE)wcAz~5PB&JtdVIweq-h*s>TTSBN|2<L<WMfh-`<dMts6UsYv{eNWGaX
zw+bb=_7$URzDk_G(bilL3swn%ik)&z)w!1y4s=g)@%knUluT@&^CTY&;A(AsS7hMQ
zvy+@)@0(02kvGXf94WS=q#ltFa#5<(;ySA|*PD@QR@e>;nkp8R?O1Hdh99ts>G~mL
z+p^r)O|quHn1gDKFJFM_pkMC%=eMWs!il>uaLLdmr>=M6dPk*!yEJr{Ixm0Zi~A2o
zwl(K;Uj25^%>4et{@q7M8-qf1Sg7_h)iL0p;PMM;cs=C!9w>OzlzoJNY21a}UYZX)
zTg$E6W>#OQFyL&BGUbQdP$e{wXNeg&605N#bs-^QR{OKl1>z<Ib)wV;>{hs;hkcTc
zDvA(a_MD_hH~nZMF3Vah6woFO<%v^|DdW;Sjv>k*9wSp{T3+OzK~9si=i(M%>CNP8
hP$L^-e1`7#r@u3Fr$7CTG7f$^La8cR+P$hw%RiJ#)W-k-

literal 1364
zcmZ`(&1)M+6ra_{dS%J>I!@|TuH%hUh$T{~CE!96oTjQ1oHkCdQ%ZHHP<AKMD!V(|
z*^y-l8Fc8Skb`fz_>f-Q6#oP5Eq{V!1Q7#*Ku^61OfEk4%~~s}guETzy!YnKoA>c!
z|CpMZL_mL+PRlpL2>m0JfI>sz<ZBR~BLf+dh4N>+l$SscSs^=|k4VB6wxYJ2mwh>6
zP1s6a0Xh0B%Et_88>QrbMYzqB#N#E*3Oks3CUHQODRvA@K~k7$;|6iCE(zZu#bJlk
z(8(RJK1WUTVt6pV9fEo^GQIeJgpqaJXHRNMhV;}glZK3tBN^en5Q~o7QAND#(>piA
zMx+^HvEUS;@pC3}9#TaPq;a2SxGAxj;0&RP639l>kPjiNqhJ8&1AY_l`WecBvKL`<
zK_mp-GGfihA=Gg+ss)BI*;w21yRNY^)~upqm`+Labc(T~)l62_EK-D_XmFxoXUC+(
zv9ZH61GA!Od6`C{=(;tt(Wqy1VsquT>;5P-9=l@|nMF#b-iU4DnzqgA7Upvgw;tSE
z&pj%9yS|;<+IaYA<H06Jd^Rv|+`oNyz3{`<_bG)ZTuLffX9cHdV;(P-;N8Mw3YqX}
zqf&HABmfVecI&K6oROZ;s}#`03Ia$xRwmvs%3KiBz)+;=GJqbR4UDD@j})rZYRu?_
z;;adH+|87kZKWo;BG4)#@u)>=m{Nfc9(G8LP76tKq2MQk+Efgahls~zxB^Y15iq2p
ze1hU%s@P+67IZo#*hj*3LMINxyUY_2H9@DJWy{3I+3Mq}!>U=li}flaG+QI|spl4T
zob~hDF>%eyxOE;8-gFVJ3n+TO18bo->ila}J65%hy4+QlU#ly}>PkmVchz)jqo<`_
z{(P+6Xlpn2)BEXH3$5?^ljojY`z`Y<)5;BG^zo;?`Q?6crISo|lj(kPxtsi=lf2$d
zUhiF8=v}zfU%GryZ>QE?g*r>Q?ozJ5xODJS`|4MJebZUI)m^+bn2pWI0|cyf_w9L<
zIJbYby>RVisS{uA##h^s)e}e(07x&wM(2TX`E06G0Q9V<>X{|ul?i3g0?%(HPYlgf
z1`zb;;Me{qqL;+gPk@~&H*I26ExbmrfGYk1-V<Phup~)66l?ik56!gv?+yCAJ-&MA
XN_%|u(B<~{8px{j<p90U{5<{xZlYYS

diff --git a/core/admin.py b/core/admin.py
index 8c38f3f..8c916c8 100644
--- a/core/admin.py
+++ b/core/admin.py
@@ -1,3 +1,5 @@
 from django.contrib import admin
+from .models import Skill
 
 # Register your models here.
+admin.site.register(Skill)
diff --git a/core/models.py b/core/models.py
index 71a8362..d9fb7aa 100644
--- a/core/models.py
+++ b/core/models.py
@@ -1,3 +1,13 @@
 from django.db import models
+from django.contrib.auth.models import User
 
-# Create your models here.
+class Skill(models.Model):
+    title = models.CharField(max_length=200)
+    description = models.TextField()
+    creator = models.ForeignKey(User, on_delete=models.CASCADE, related_name='skills')
+    price = models.DecimalField(max_digits=10, decimal_places=2, default=0.00)
+    created_at = models.DateTimeField(auto_now_add=True)
+    updated_at = models.DateTimeField(auto_now=True)
+
+    def __str__(self):
+        return self.title
\ No newline at end of file
diff --git a/core/templates/base.html b/core/templates/base.html
index 788576e..9c5aa0c 100644
--- a/core/templates/base.html
+++ b/core/templates/base.html
@@ -1,11 +1,59 @@
+{% load static %}
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
     <meta charset="UTF-8">
-    <title>{% block title %}Knowledge Base{% endblock %}</title>
-    {% block head %}{% endblock %}
-  </head>
-  <body>
-    {% block content %}{% endblock %}
-  </body>
-</html>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SkillXchange - Share Your Skills</title>
+    <meta name="description" content="A platform for creators to share their skills through videos and PDFs.">
+    
+    <!-- Google Fonts -->
+    <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=Poppins:wght@400;600;700&family=Roboto:wght@400;500&display=swap" rel="stylesheet">
+
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="{% static 'css/custom.css' %}">
+</head>
+<body>
+
+    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+        <div class="container">
+            <a class="navbar-brand" href="{% url 'index' %}">SkillXchange</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item">
+                        <a class="nav-link" href="#skills-section">Browse Skills</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="{% url 'admin:index' %}">Login</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="btn btn-primary ms-2" href="{% url 'admin:index' %}">Become a Creator</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <main>
+        {% block content %}
+        {% endblock %}
+    </main>
+
+    <footer class="py-4 mt-5 bg-light">
+        <div class="container text-center">
+            <p class="mb-0">&copy; {% now "Y" %} SkillXchange. All Rights Reserved.</p>
+        </div>
+    </footer>
+
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/core/templates/core/index.html b/core/templates/core/index.html
index 0a3f404..2d8f2cc 100644
--- a/core/templates/core/index.html
+++ b/core/templates/core/index.html
@@ -1,154 +1,47 @@
 {% extends "base.html" %}
-
-{% block title %}{{ project_name }}{% endblock %}
-
-{% block head %}
-{% if project_description %}
-<meta name="description" content="{{ project_description }}">
-<meta property="og:description" content="{{ project_description }}">
-<meta property="twitter:description" content="{{ project_description }}">
-{% endif %}
-{% if project_image_url %}
-<meta property="og:image" content="{{ project_image_url }}">
-<meta property="twitter:image" content="{{ project_image_url }}">
-{% endif %}
-<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@400;700&display=swap" rel="stylesheet">
-<style>
-  :root {
-    --bg-color-start: #6a11cb;
-    --bg-color-end: #2575fc;
-    --text-color: #ffffff;
-    --card-bg-color: rgba(255, 255, 255, 0.01);
-    --card-border-color: rgba(255, 255, 255, 0.1);
-  }
-
-  * {
-    box-sizing: border-box;
-  }
-
-  body {
-    margin: 0;
-    font-family: 'Inter', sans-serif;
-    background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
-    color: var(--text-color);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
-    text-align: center;
-    overflow: hidden;
-    position: relative;
-  }
-
-  body::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><path d='M-10 10L110 10M10 -10L10 110' stroke-width='1' stroke='rgba(255,255,255,0.05)'/></svg>");
-    animation: bg-pan 20s linear infinite;
-    z-index: -1;
-  }
-
-  @keyframes bg-pan {
-    0% {
-      background-position: 0% 0%;
-    }
-
-    100% {
-      background-position: 100% 100%;
-    }
-  }
-
-  main {
-    padding: 2rem;
-  }
-
-  .card {
-    background: var(--card-bg-color);
-    border: 1px solid var(--card-border-color);
-    border-radius: 16px;
-    padding: 2.5rem 2rem;
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
-  }
-
-  h1 {
-    font-size: clamp(2.2rem, 3vw + 1.2rem, 3.2rem);
-    font-weight: 700;
-    margin: 0 0 1.2rem;
-    letter-spacing: -0.02em;
-  }
-
-  p {
-    margin: 0.5rem 0;
-    font-size: 1.1rem;
-    opacity: 0.92;
-  }
-
-  .loader {
-    margin: 1.5rem auto;
-    width: 56px;
-    height: 56px;
-    border: 4px solid rgba(255, 255, 255, 0.25);
-    border-top-color: #fff;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-  }
-
-  @keyframes spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  .runtime code {
-    background: rgba(0, 0, 0, 0.25);
-    padding: 0.15rem 0.45rem;
-    border-radius: 4px;
-    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  }
-
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    border: 0;
-  }
-
-  footer {
-    position: absolute;
-    bottom: 1rem;
-    width: 100%;
-    text-align: center;
-    font-size: 0.85rem;
-    opacity: 0.75;
-  }
-</style>
-{% endblock %}
+{% load static %}
 
 {% block content %}
-<main>
-  <div class="card">
-    <h1>Analyzing your requirements and generating your app…</h1>
-    <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
-      <span class="sr-only">Loading…</span>
+<div class="hero-section">
+    <div class="container">
+        <div class="row align-items-center text-center text-md-start">
+            <div class="col-md-8 mx-auto">
+                <h1 class="hero-title">Share Your Passion. Shape the Future.</h1>
+                <p class="hero-subtitle">Join a community of creators and learners. Upload your skills, share your knowledge, and start earning today.</p>
+                <a href="#skills-section" class="btn btn-lg btn-accent">Explore Skills</a>
+            </div>
+        </div>
     </div>
-    <p class="hint">AppWizzy AI is collecting your requirements and applying the first changes.</p>
-    <p class="hint">This page will refresh automatically as the plan is implemented.</p>
-    <p class="runtime">
-      Runtime: Django <code>{{ django_version }}</code> · Python <code>{{ python_version }}</code>
-      — UTC <code>{{ current_time|date:"Y-m-d H:i:s" }}</code>
-    </p>
-  </div>
-</main>
-<footer>
-  Page updated: {{ current_time|date:"Y-m-d H:i:s" }} (UTC)
-</footer>
+</div>
+
+<section id="skills-section" class="py-5">
+    <div class="container">
+        <h2 class="section-title text-center mb-5">Latest Skills</h2>
+        {% if skills %}
+        <div class="row">
+            {% for skill in skills %}
+            <div class="col-md-4 mb-4">
+                <div class="card skill-card h-100">
+                    <div class="card-body">
+                        <h5 class="card-title">{{ skill.title }}</h5>
+                        <p class="card-text">{{ skill.description|truncatewords:20 }}</p>
+                        <p class="card-creator">By {{ skill.creator.get_full_name|default:skill.creator.username }}</p>
+                    </div>
+                    <div class="card-footer">
+                        <span class="skill-price">${{ skill.price }}</span>
+                        <a href="{% url 'article_detail' skill.pk %}" class="btn btn-sm btn-primary-outline float-end">View Details</a>
+                    </div>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+        {% else %}
+        <div class="text-center p-5 bg-light rounded">
+            <h3 class="mb-3">The Stage is Set!</h3>
+            <p class="lead">No skills have been shared yet. Be the first to inspire others.</p>
+            <a href="{% url 'admin:index' %}" class="btn btn-primary mt-3">Become a Creator</a>
+        </div>
+        {% endif %}
+    </div>
+</section>
 {% endblock %}
\ No newline at end of file
diff --git a/core/urls.py b/core/urls.py
index 6299e3d..492129b 100644
--- a/core/urls.py
+++ b/core/urls.py
@@ -1,7 +1,7 @@
 from django.urls import path
-
-from .views import home
+from .views import index, article_detail
 
 urlpatterns = [
-    path("", home, name="home"),
+    path("", index, name="index"),
+    path("skill/<int:pk>/", article_detail, name="article_detail"),
 ]
diff --git a/core/views.py b/core/views.py
index c9aed12..a03c6d0 100644
--- a/core/views.py
+++ b/core/views.py
@@ -1,25 +1,14 @@
-import os
-import platform
-
-from django import get_version as django_version
 from django.shortcuts import render
-from django.utils import timezone
-
-
-def home(request):
-    """Render the landing screen with loader and environment details."""
-    host_name = request.get_host().lower()
-    agent_brand = "AppWizzy" if host_name == "appwizzy.com" else "Flatlogic"
-    now = timezone.now()
+from .models import Skill
 
+def index(request):
+    """Render the landing screen with a list of skills."""
+    skills = Skill.objects.all().order_by('-created_at')
     context = {
-        "project_name": "New Style",
-        "agent_brand": agent_brand,
-        "django_version": django_version(),
-        "python_version": platform.python_version(),
-        "current_time": now,
-        "host_name": host_name,
-        "project_description": os.getenv("PROJECT_DESCRIPTION", ""),
-        "project_image_url": os.getenv("PROJECT_IMAGE_URL", ""),
+        'skills': skills,
     }
-    return render(request, "core/index.html", context)
+    return render(request, 'core/index.html', context)
+
+def article_detail(request, pk):
+    # This is a placeholder for a future skill detail page
+    return render(request, 'core/article_detail.html')
diff --git a/static/css/custom.css b/static/css/custom.css
new file mode 100644
index 0000000..66fe762
--- /dev/null
+++ b/static/css/custom.css
@@ -0,0 +1,144 @@
+/*
+SkillXchange Custom Stylesheet
+------------------------------
+Palette:
+- Primary: #1A2E4C (Deep Blue)
+- Secondary: #FFFFFF (White)
+- Accent: #FFC107 (Vibrant Yellow)
+- Background/Neutral: #F8F9FA (Light Gray)
+- Text: #212529
+
+Typography:
+- Headings: 'Poppins', sans-serif
+- Body: 'Roboto', sans-serif
+*/
+
+body {
+    font-family: 'Roboto', sans-serif;
+    color: #212529;
+    background-color: #FFFFFF;
+}
+
+h1, h2, h3, h4, h5, h6, .navbar-brand, .hero-title, .section-title, .card-title {
+    font-family: 'Poppins', sans-serif;
+    font-weight: 600;
+}
+
+/* Navbar */
+.navbar {
+    border-bottom: 1px solid #eee;
+}
+
+.navbar-brand {
+    font-weight: 700;
+    font-size: 1.5rem;
+    color: #1A2E4C !important;
+}
+
+.btn-primary {
+    background-color: #1A2E4C;
+    border-color: #1A2E4C;
+}
+
+.btn-primary:hover {
+    background-color: #2E4A6E;
+    border-color: #2E4A6E;
+}
+
+.btn-accent {
+    background-color: #FFC107;
+    border-color: #FFC107;
+    color: #1A2E4C;
+    font-weight: 500;
+}
+
+.btn-accent:hover {
+    background-color: #ffca2c;
+    border-color: #ffca2c;
+    color: #1A2E4C;
+}
+
+
+/* Hero Section */
+.hero-section {
+    background: linear-gradient(to right, #1A2E4C, #2E4A6E);
+    color: white;
+    padding: 6rem 0;
+    text-align: center;
+}
+
+.hero-title {
+    font-size: 3.5rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+}
+
+.hero-subtitle {
+    font-size: 1.25rem;
+    font-weight: 400;
+    color: rgba(255, 255, 255, 0.8);
+    margin-bottom: 2rem;
+}
+
+/* Skills Section */
+.section-title {
+    color: #1A2E4C;
+    font-weight: 700;
+}
+
+.skill-card {
+    border: 1px solid #e9ecef;
+    border-radius: 0.5rem;
+    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+}
+
+.skill-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 12px 20px rgba(0,0,0,0.08);
+}
+
+.skill-card .card-body {
+    padding: 1.5rem;
+}
+
+.skill-card .card-title {
+    color: #1A2E4C;
+    margin-bottom: 0.75rem;
+}
+
+.skill-card .card-creator {
+    font-size: 0.9rem;
+    color: #6c757d;
+    margin-bottom: 1rem;
+}
+
+.skill-card .card-footer {
+    background-color: #f8f9fa;
+    border-top: 1px solid #e9ecef;
+    padding: 0.75rem 1.5rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.skill-price {
+    font-weight: 700;
+    font-size: 1.1rem;
+    color: #1A2E4C;
+}
+
+.btn-primary-outline {
+    border: 1px solid #1A2E4C;
+    color: #1A2E4C;
+}
+
+.btn-primary-outline:hover {
+    background-color: #1A2E4C;
+    color: white;
+}
+
+/* Footer */
+footer {
+    background-color: #f8f9fa !important;
+}