Skip to content

Commit 5e04acd

Browse files
ayushshrivastvayushshrivastv
committed
Enhance landing page with Swift.org DocC-inspired design
1 parent 14218f1 commit 5e04acd

File tree

1 file changed

+274
-7
lines changed

1 file changed

+274
-7
lines changed

‎index.html‎

Lines changed: 274 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,282 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
56
<title>OpenAPI Integration with DocC</title>
6-
<meta http-equiv="refresh" content="0; url=docs/index.html">
7-
<link rel="canonical" href="docs/index.html">
7+
<link rel="icon" href="/OpenAPI-integration-with-DocC/favicon.ico">
8+
<style>
9+
:root {
10+
--swift-orange: #f05138;
11+
--text-color: #333;
12+
--bg-color: #fff;
13+
--secondary-bg: #f5f5f7;
14+
--border-color: #e6e6e6;
15+
--link-color: #0070c9;
16+
--heading-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
17+
--body-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
18+
}
19+
20+
body {
21+
font-family: var(--body-font);
22+
margin: 0;
23+
padding: 0;
24+
color: var(--text-color);
25+
background-color: var(--bg-color);
26+
line-height: 1.5;
27+
}
28+
29+
.container {
30+
max-width: 1200px;
31+
margin: 0 auto;
32+
padding: 0 20px;
33+
}
34+
35+
header {
36+
background-color: var(--bg-color);
37+
border-bottom: 1px solid var(--border-color);
38+
padding: 20px 0;
39+
}
40+
41+
.header-content {
42+
display: flex;
43+
justify-content: space-between;
44+
align-items: center;
45+
}
46+
47+
.logo {
48+
font-size: 24px;
49+
font-weight: 600;
50+
color: var(--text-color);
51+
text-decoration: none;
52+
display: flex;
53+
align-items: center;
54+
}
55+
56+
.logo img {
57+
height: 30px;
58+
margin-right: 10px;
59+
}
60+
61+
nav ul {
62+
list-style: none;
63+
display: flex;
64+
margin: 0;
65+
padding: 0;
66+
}
67+
68+
nav li {
69+
margin-left: 30px;
70+
}
71+
72+
nav a {
73+
color: var(--text-color);
74+
text-decoration: none;
75+
font-weight: 500;
76+
transition: color 0.2s ease;
77+
}
78+
79+
nav a:hover {
80+
color: var(--swift-orange);
81+
}
82+
83+
.hero {
84+
background-color: var(--secondary-bg);
85+
padding: 80px 0;
86+
text-align: center;
87+
}
88+
89+
h1 {
90+
font-family: var(--heading-font);
91+
font-size: 48px;
92+
font-weight: 700;
93+
margin-bottom: 20px;
94+
color: var(--text-color);
95+
}
96+
97+
.hero p {
98+
font-size: 20px;
99+
max-width: 800px;
100+
margin: 0 auto 30px;
101+
color: #666;
102+
}
103+
104+
.btn {
105+
display: inline-block;
106+
background-color: var(--swift-orange);
107+
color: white;
108+
padding: 12px 30px;
109+
border-radius: 6px;
110+
text-decoration: none;
111+
font-weight: 600;
112+
transition: background-color 0.2s ease;
113+
margin: 0 10px;
114+
}
115+
116+
.btn:hover {
117+
background-color: #d83a20;
118+
}
119+
120+
.btn-secondary {
121+
background-color: #007aff;
122+
}
123+
124+
.btn-secondary:hover {
125+
background-color: #0062cc;
126+
}
127+
128+
.features {
129+
padding: 80px 0;
130+
background-color: var(--bg-color);
131+
}
132+
133+
.features-grid {
134+
display: grid;
135+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
136+
gap: 40px;
137+
margin-top: 50px;
138+
}
139+
140+
.feature {
141+
text-align: center;
142+
padding: 30px;
143+
border-radius: 8px;
144+
background-color: var(--secondary-bg);
145+
transition: transform 0.3s ease;
146+
}
147+
148+
.feature:hover {
149+
transform: translateY(-5px);
150+
}
151+
152+
.feature h3 {
153+
font-family: var(--heading-font);
154+
font-size: 24px;
155+
margin: 20px 0 15px;
156+
}
157+
158+
.feature p {
159+
font-size: 16px;
160+
color: #666;
161+
}
162+
163+
.feature-icon {
164+
font-size: 40px;
165+
color: var(--swift-orange);
166+
}
167+
168+
footer {
169+
background-color: var(--secondary-bg);
170+
padding: 40px 0;
171+
text-align: center;
172+
color: #666;
173+
font-size: 14px;
174+
}
175+
176+
footer a {
177+
color: var(--link-color);
178+
text-decoration: none;
179+
}
180+
181+
footer a:hover {
182+
text-decoration: underline;
183+
}
184+
185+
.footer-links {
186+
margin-bottom: 20px;
187+
}
188+
189+
.footer-links a {
190+
margin: 0 15px;
191+
}
192+
193+
@media (max-width: 768px) {
194+
.header-content {
195+
flex-direction: column;
196+
}
197+
198+
nav ul {
199+
margin-top: 20px;
200+
}
201+
202+
nav li {
203+
margin-left: 15px;
204+
margin-right: 15px;
205+
}
206+
207+
h1 {
208+
font-size: 36px;
209+
}
210+
211+
.hero p {
212+
font-size: 18px;
213+
}
214+
215+
.btn {
216+
display: block;
217+
margin: 10px auto;
218+
max-width: 250px;
219+
}
220+
}
221+
</style>
8222
</head>
9223
<body>
10-
<p>Redirecting to documentation...</p>
11-
<script>
12-
window.location.href = "docs/index.html";
13-
</script>
224+
<header>
225+
<div class="container header-content">
226+
<a href="#" class="logo">
227+
<img src="docs/favicon.svg" alt="Logo">
228+
<span>OpenAPI-DocC</span>
229+
</a>
230+
<nav>
231+
<ul>
232+
<li><a href="https://github.com/ayushshrivastv/OpenAPI-integration-with-DocC">GitHub</a></li>
233+
<li><a href="docs/index.html">Documentation</a></li>
234+
<li><a href="https://swift.org/documentation/docc/">DocC Resources</a></li>
235+
</ul>
236+
</nav>
237+
</div>
238+
</header>
239+
240+
<section class="hero">
241+
<div class="container">
242+
<h1>OpenAPI Integration with DocC</h1>
243+
<p>Generate beautiful documentation for your API using Swift's DocC documentation compiler. Transform OpenAPI specifications into comprehensive, interactive documentation.</p>
244+
<a href="docs/index.html" class="btn">View Documentation</a>
245+
<a href="https://github.com/ayushshrivastv/OpenAPI-integration-with-DocC" class="btn btn-secondary">View on GitHub</a>
246+
</div>
247+
</section>
248+
249+
<section class="features">
250+
<div class="container">
251+
<div class="features-grid">
252+
<div class="feature">
253+
<div class="feature-icon">📄</div>
254+
<h3>OpenAPI Integration</h3>
255+
<p>Seamlessly convert OpenAPI specifications into interactive documentation using DocC's powerful rendering engine.</p>
256+
</div>
257+
<div class="feature">
258+
<div class="feature-icon">🔍</div>
259+
<h3>Searchable Content</h3>
260+
<p>Full-text search capabilities for all your API endpoints, parameters, and schemas.</p>
261+
</div>
262+
<div class="feature">
263+
<div class="feature-icon">📱</div>
264+
<h3>Responsive Design</h3>
265+
<p>Documentation looks great on all devices, from desktop to mobile.</p>
266+
</div>
267+
</div>
268+
</div>
269+
</section>
270+
271+
<footer>
272+
<div class="container">
273+
<div class="footer-links">
274+
<a href="https://github.com/ayushshrivastv/OpenAPI-integration-with-DocC">GitHub</a>
275+
<a href="docs/index.html">Documentation</a>
276+
<a href="https://swift.org/documentation/docc/">DocC Resources</a>
277+
</div>
278+
<p>&copy; 2024 OpenAPI Integration with DocC. Built using Swift DocC.</p>
279+
</div>
280+
</footer>
14281
</body>
15282
</html>

0 commit comments

Comments
 (0)