From d3dc04d75c9cadca2262372d3e1f0da341ff87ba Mon Sep 17 00:00:00 2001
From: "Yann Esposito (Yogsototh)" <Yann.Esposito@gmail.com>
Date: Sat, 16 Jul 2011 11:05:59 +0200
Subject: [PATCH] New intro, more informations

---
 content/html/en/index.md   |  21 +++-
 content/html/fr/index.md   |  21 +++-
 multi/index.md             |  21 +++-
 site/Scratch/en/index.html |  16 ++-
 site/Scratch/fr/index.html |  16 ++-
 site/css/main.css          | 226 ++++++++++++++++++++++---------------
 site/index.html            |  16 ++-
 site/src/main.sass         |  18 +++
 8 files changed, 257 insertions(+), 98 deletions(-)

diff --git a/content/html/en/index.md b/content/html/en/index.md
index 6333840..2397368 100644
--- a/content/html/en/index.md
+++ b/content/html/en/index.md
@@ -3,11 +3,30 @@ title: YPassword
 noSubMenu: true
 menupriority: 1
 -----
+<% 
+def itunesurl
+    "http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=436268354&mt=8" 
+end
+%>
 <% content_for :title do %>
-    <a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=436268354&mt=8">Get it! &raquo;</a>
+    <a href="<%=itunesurl%>">Get it! &raquo;</a>
 <% end %>
 <% content_for :bodyclass do %>clear<% end %>
 
+<div id="helloblock">
+    <div id="logo">
+        <img src="/img/main/Logo.png"/></div>
+    <div id="blocktitle">Easy, Secure &amp; Portable Password Manager</div>
+    <div id="blocktext">
+        <p> One different password for each website.  <br/>
+            If some are compromised, there is not way to find another one.<br/>
+            You only have to remember one password.</p></div>
+     <div id="getit">
+        <a href="<%=itunesurl%>">
+            <img src="/img/main/GetIt.png"/></a></div>
+     <div class="flush"></div>
+</div>
+
 <div id="easy" class="slideshow">
     <img src="/img/main/iPhone_Easy.png" alt="main view" class="rightimage" />
     <h3>Easy</h3>
diff --git a/content/html/fr/index.md b/content/html/fr/index.md
index 6333840..2397368 100644
--- a/content/html/fr/index.md
+++ b/content/html/fr/index.md
@@ -3,11 +3,30 @@ title: YPassword
 noSubMenu: true
 menupriority: 1
 -----
+<% 
+def itunesurl
+    "http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=436268354&mt=8" 
+end
+%>
 <% content_for :title do %>
-    <a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=436268354&mt=8">Get it! &raquo;</a>
+    <a href="<%=itunesurl%>">Get it! &raquo;</a>
 <% end %>
 <% content_for :bodyclass do %>clear<% end %>
 
+<div id="helloblock">
+    <div id="logo">
+        <img src="/img/main/Logo.png"/></div>
+    <div id="blocktitle">Easy, Secure &amp; Portable Password Manager</div>
+    <div id="blocktext">
+        <p> One different password for each website.  <br/>
+            If some are compromised, there is not way to find another one.<br/>
+            You only have to remember one password.</p></div>
+     <div id="getit">
+        <a href="<%=itunesurl%>">
+            <img src="/img/main/GetIt.png"/></a></div>
+     <div class="flush"></div>
+</div>
+
 <div id="easy" class="slideshow">
     <img src="/img/main/iPhone_Easy.png" alt="main view" class="rightimage" />
     <h3>Easy</h3>
diff --git a/multi/index.md b/multi/index.md
index 6333840..2397368 100644
--- a/multi/index.md
+++ b/multi/index.md
@@ -3,11 +3,30 @@ title: YPassword
 noSubMenu: true
 menupriority: 1
 -----
+<% 
+def itunesurl
+    "http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=436268354&mt=8" 
+end
+%>
 <% content_for :title do %>
-    <a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=436268354&mt=8">Get it! &raquo;</a>
+    <a href="<%=itunesurl%>">Get it! &raquo;</a>
 <% end %>
 <% content_for :bodyclass do %>clear<% end %>
 
+<div id="helloblock">
+    <div id="logo">
+        <img src="/img/main/Logo.png"/></div>
+    <div id="blocktitle">Easy, Secure &amp; Portable Password Manager</div>
+    <div id="blocktext">
+        <p> One different password for each website.  <br/>
+            If some are compromised, there is not way to find another one.<br/>
+            You only have to remember one password.</p></div>
+     <div id="getit">
+        <a href="<%=itunesurl%>">
+            <img src="/img/main/GetIt.png"/></a></div>
+     <div class="flush"></div>
+</div>
+
 <div id="easy" class="slideshow">
     <img src="/img/main/iPhone_Easy.png" alt="main view" class="rightimage" />
     <h3>Easy</h3>
diff --git a/site/Scratch/en/index.html b/site/Scratch/en/index.html
index af17f86..b6f1cba 100644
--- a/site/Scratch/en/index.html
+++ b/site/Scratch/en/index.html
@@ -61,6 +61,20 @@
         <article>
             <div class="content">
                 
+<div id="helloblock">
+    <div id="logo">
+        <img src="/img/main/Logo.png" /></div>
+    <div id="blocktitle">Easy, Secure &amp; Portable Password Manager</div>
+    <div id="blocktext">
+        <p> One different password for each website.  <br />
+            If some are compromised, there is not way to find another one.<br />
+            You only have to remember one password.</p></div>
+     <div id="getit">
+        <a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=436268354&amp;mt=8">
+            <img src="/img/main/GetIt.png" /></a></div>
+     <div class="flush"></div>
+</div>
+
 <div id="easy" class="slideshow">
     <img src="/img/main/iPhone_Easy.png" alt="main view" class="rightimage" />
     <h3>Easy</h3>
@@ -111,7 +125,7 @@
             </div>
             <footer>
                 <ul class="article_metadata">
-                    <li>Modified: <time>07/12/2011</time></li>
+                    <li>Modified: <time>07/13/2011</time></li>
                 </ul>
             </footer>
         </article>
diff --git a/site/Scratch/fr/index.html b/site/Scratch/fr/index.html
index 5a661d0..2242092 100644
--- a/site/Scratch/fr/index.html
+++ b/site/Scratch/fr/index.html
@@ -61,6 +61,20 @@
         <article>
             <div class="content">
                 
+<div id="helloblock">
+    <div id="logo">
+        <img src="/img/main/Logo.png" /></div>
+    <div id="blocktitle">Easy, Secure &amp; Portable Password Manager</div>
+    <div id="blocktext">
+        <p> One different password for each website.  <br />
+            If some are compromised, there is not way to find another one.<br />
+            You only have to remember one password.</p></div>
+     <div id="getit">
+        <a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=436268354&amp;mt=8">
+            <img src="/img/main/GetIt.png" /></a></div>
+     <div class="flush"></div>
+</div>
+
 <div id="easy" class="slideshow">
     <img src="/img/main/iPhone_Easy.png" alt="main view" class="rightimage" />
     <h3>Easy</h3>
@@ -111,7 +125,7 @@
             </div>
             <footer>
                 <ul class="article_metadata">
-                    <li>modifié le : <time>12/07/2011</time></li>
+                    <li>modifié le : <time>13/07/2011</time></li>
                 </ul>
             </footer>
         </article>
diff --git a/site/css/main.css b/site/css/main.css
index 9e226ec..82798e6 100644
--- a/site/css/main.css
+++ b/site/css/main.css
@@ -73,30 +73,33 @@ hgroup#maintitle {
   background-image: -webkit-linear-gradient(top, #60646c, #51555c);
   background-image: -moz-linear-gradient(top, #60646c, #51555c);
   background-image: -o-linear-gradient(top, #60646c, #51555c);
-  background-image: -ms-linear-gradient(top, #60646c, #51555c);
   background-image: linear-gradient(top, #60646c, #51555c);
 }
-/* line 76, ../src/main.sass */
+/* line 75, ../src/main.sass */
+hgroup#maintitle h1, hgroup#maintitle h2 {
+  margin: 0.3em;
+}
+/* line 77, ../src/main.sass */
 hgroup#maintitle h1, hgroup#maintitle h1 a, hgroup#maintitle h2, hgroup#maintitle h2 a {
   font-weight: normal;
   color: #0f1011;
   text-shadow: 0 0 2px rgba(239, 239, 244, 0.5);
 }
-/* line 80, ../src/main.sass */
+/* line 81, ../src/main.sass */
 hgroup#maintitle h1 a:hover, hgroup#maintitle h2 a:hover {
   color: #002255;
 }
-/* line 82, ../src/main.sass */
+/* line 83, ../src/main.sass */
 hgroup#maintitle h2 {
   font-size: 0.8em;
 }
 
-/* line 90, ../src/main.sass */
+/* line 91, ../src/main.sass */
 footer {
   font-size: 0.8em;
 }
 
-/* line 94, ../src/main.sass */
+/* line 95, ../src/main.sass */
 #container > footer {
   padding: 3em 0;
   color: #0f1011;
@@ -105,45 +108,44 @@ footer {
   background-image: -webkit-linear-gradient(top, #60646c, #51555c);
   background-image: -moz-linear-gradient(top, #60646c, #51555c);
   background-image: -o-linear-gradient(top, #60646c, #51555c);
-  background-image: -ms-linear-gradient(top, #60646c, #51555c);
   background-image: linear-gradient(top, #60646c, #51555c);
 }
-/* line 95, ../src/main.sass */
+/* line 96, ../src/main.sass */
 #container > footer * {
   width: 960px;
   margin: 0 auto;
 }
-/* line 98, ../src/main.sass */
+/* line 99, ../src/main.sass */
 #container > footer a {
   color: #1f2024;
 }
-/* line 100, ../src/main.sass */
+/* line 101, ../src/main.sass */
 #container > footer a:hover {
   color: #002255;
 }
 
-/* line 114, ../src/main.sass */
+/* line 115, ../src/main.sass */
 .clickable {
   cursor: pointer;
 }
 
-/* line 118, ../src/main.sass */
+/* line 119, ../src/main.sass */
 #container {
   width: span(24);
   margin: 0 auto;
 }
 
-/* line 123, ../src/main.sass */
+/* line 124, ../src/main.sass */
 a {
   text-decoration: none;
 }
 
-/* line 126, ../src/main.sass */
+/* line 127, ../src/main.sass */
 h1, h2 {
   text-align: center;
 }
 
-/* line 136, ../src/main.sass */
+/* line 137, ../src/main.sass */
 .block {
   background-color: #e3e5ed;
   -moz-box-shadow: white 0 0 3px, rgba(0, 0, 0, 0.2) 0 0 3px inset;
@@ -157,28 +159,28 @@ h1, h2 {
   -khtml-border-radius: 5px;
   border-radius: 5px;
 }
-/* line 133, ../src/main.sass */
+/* line 134, ../src/main.sass */
 .block > * {
   margin: 20px;
 }
-/* line 138, ../src/main.sass */
+/* line 139, ../src/main.sass */
 .block:hover {
   background-color: rgba(0, 0, 0, 0.05);
 }
 
-/* line 182, ../src/main.sass */
+/* line 183, ../src/main.sass */
 #prelinks {
   width: 960px;
   margin: 0.5em auto;
   height: 1em;
 }
 
-/* line 188, ../src/main.sass */
+/* line 189, ../src/main.sass */
 #choixlang {
   float: left;
   font-size: 14px;
 }
-/* line 143, ../src/main.sass */
+/* line 144, ../src/main.sass */
 #choixlang a:hover {
   color: #efeff4;
   background-color: rgba(0, 0, 0, 0.3);
@@ -187,16 +189,16 @@ h1, h2 {
   -o-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
   box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
 }
-/* line 147, ../src/main.sass */
+/* line 148, ../src/main.sass */
 #choixlang a:active {
   background-color: rgba(0, 0, 0, 0.5);
   text-shadow: 0 0 2px black;
 }
-/* line 150, ../src/main.sass */
+/* line 151, ../src/main.sass */
 #choixlang a {
   color: #9ca1ad;
 }
-/* line 152, ../src/main.sass */
+/* line 153, ../src/main.sass */
 #choixlang a, #choixlang span {
   padding: 0.2em;
   -moz-border-radius: 2ex;
@@ -209,11 +211,11 @@ h1, h2 {
   width: 100%;
   display: inline-block;
 }
-/* line 158, ../src/main.sass */
+/* line 159, ../src/main.sass */
 #choixlang a:hover, #choixlang span:hover {
   color: #efeff4;
 }
-/* line 160, ../src/main.sass */
+/* line 161, ../src/main.sass */
 #choixlang span {
   color: #efeff4;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3);
@@ -224,12 +226,12 @@ h1, h2 {
   box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
 }
 
-/* line 192, ../src/main.sass */
+/* line 193, ../src/main.sass */
 #choixrss {
   float: right;
   font-size: 14px;
 }
-/* line 143, ../src/main.sass */
+/* line 144, ../src/main.sass */
 #choixrss a:hover {
   color: #efeff4;
   background-color: rgba(0, 0, 0, 0.3);
@@ -238,16 +240,16 @@ h1, h2 {
   -o-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
   box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
 }
-/* line 147, ../src/main.sass */
+/* line 148, ../src/main.sass */
 #choixrss a:active {
   background-color: rgba(0, 0, 0, 0.5);
   text-shadow: 0 0 2px black;
 }
-/* line 150, ../src/main.sass */
+/* line 151, ../src/main.sass */
 #choixrss a {
   color: #9ca1ad;
 }
-/* line 152, ../src/main.sass */
+/* line 153, ../src/main.sass */
 #choixrss a, #choixrss span {
   padding: 0.2em;
   -moz-border-radius: 2ex;
@@ -260,11 +262,11 @@ h1, h2 {
   width: 100%;
   display: inline-block;
 }
-/* line 158, ../src/main.sass */
+/* line 159, ../src/main.sass */
 #choixrss a:hover, #choixrss span:hover {
   color: #efeff4;
 }
-/* line 160, ../src/main.sass */
+/* line 161, ../src/main.sass */
 #choixrss span {
   color: #efeff4;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3);
@@ -275,19 +277,19 @@ h1, h2 {
   box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
 }
 
-/* line 196, ../src/main.sass */
+/* line 197, ../src/main.sass */
 #mainnav {
   width: 600px;
   padding: 0;
   margin: 2.5em auto;
 }
-/* line 200, ../src/main.sass */
+/* line 201, ../src/main.sass */
 #mainnav ul {
   height: 2.2ex;
   padding: 0;
   list-style-type: none;
 }
-/* line 204, ../src/main.sass */
+/* line 205, ../src/main.sass */
 #mainnav ul li {
   text-align: center;
   float: left;
@@ -295,7 +297,7 @@ h1, h2 {
   margin: 0 20px;
   font-size: 14px;
 }
-/* line 143, ../src/main.sass */
+/* line 144, ../src/main.sass */
 #mainnav ul li a:hover {
   color: #efeff4;
   background-color: rgba(0, 0, 0, 0.3);
@@ -304,16 +306,16 @@ h1, h2 {
   -o-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
   box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
 }
-/* line 147, ../src/main.sass */
+/* line 148, ../src/main.sass */
 #mainnav ul li a:active {
   background-color: rgba(0, 0, 0, 0.5);
   text-shadow: 0 0 2px black;
 }
-/* line 150, ../src/main.sass */
+/* line 151, ../src/main.sass */
 #mainnav ul li a {
   color: #9ca1ad;
 }
-/* line 152, ../src/main.sass */
+/* line 153, ../src/main.sass */
 #mainnav ul li a, #mainnav ul li span {
   padding: 0.2em;
   -moz-border-radius: 2ex;
@@ -326,11 +328,11 @@ h1, h2 {
   width: 100%;
   display: inline-block;
 }
-/* line 158, ../src/main.sass */
+/* line 159, ../src/main.sass */
 #mainnav ul li a:hover, #mainnav ul li span:hover {
   color: #efeff4;
 }
-/* line 160, ../src/main.sass */
+/* line 161, ../src/main.sass */
 #mainnav ul li span {
   color: #efeff4;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3);
@@ -340,30 +342,30 @@ h1, h2 {
   -o-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
   box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
 }
-/* line 210, ../src/main.sass */
+/* line 211, ../src/main.sass */
 #mainnav ul li * {
   font-size: 1.5em;
 }
 
-/* line 214, ../src/main.sass */
+/* line 215, ../src/main.sass */
 .flush {
   clear: both !important;
 }
 
-/* line 217, ../src/main.sass */
+/* line 218, ../src/main.sass */
 .clean {
   background: none;
   border: none;
   margin: none;
 }
 
-/* line 222, ../src/main.sass */
+/* line 223, ../src/main.sass */
 #main {
   width: 960px;
   margin: 0 auto;
 }
 
-/* line 226, ../src/main.sass */
+/* line 227, ../src/main.sass */
 body.std #main > article, .slideshow {
   padding: 3em;
   margin: 3em 0;
@@ -379,49 +381,49 @@ body.std #main > article, .slideshow {
   -khtml-border-radius: 5px;
   border-radius: 5px;
 }
-/* line 133, ../src/main.sass */
+/* line 134, ../src/main.sass */
 body.std #main > article > *, .slideshow > * {
   margin: 20px;
 }
 
-/* line 231, ../src/main.sass */
+/* line 232, ../src/main.sass */
 .slideshow {
   color: #60646c;
   font-size: 1.3em;
 }
-/* line 234, ../src/main.sass */
+/* line 235, ../src/main.sass */
 .slideshow h3, .slideshow p, .slideshow ul {
   float: left;
   margin-left: 60px;
 }
-/* line 237, ../src/main.sass */
+/* line 238, ../src/main.sass */
 .slideshow h3, .slideshow p, .slideshow ul {
   width: 40%;
 }
-/* line 239, ../src/main.sass */
+/* line 240, ../src/main.sass */
 .slideshow h3 {
   font-size: 2em;
   color: #9ca1ad;
   text-shadow: 0 0 3px white;
 }
 
-/* line 244, ../src/main.sass */
+/* line 245, ../src/main.sass */
 .center {
   margin: 0 auto;
   text-align: center;
 }
 
-/* line 248, ../src/main.sass */
+/* line 249, ../src/main.sass */
 .leftimage {
   float: left;
 }
 
-/* line 250, ../src/main.sass */
+/* line 251, ../src/main.sass */
 .rightimage {
   float: right;
 }
 
-/* line 253, ../src/main.sass */
+/* line 254, ../src/main.sass */
 img.left {
   float: left;
   padding: 10px;
@@ -440,27 +442,27 @@ img.left {
   margin: 0 2em;
   background: #efeff4;
 }
-/* line 133, ../src/main.sass */
+/* line 134, ../src/main.sass */
 img.left > * {
   margin: 20px;
 }
 
-/* line 261, ../src/main.sass */
+/* line 262, ../src/main.sass */
 ul.article_metadata {
   list-style-type: none;
   text-align: right;
   color: #b4b8c5;
 }
-/* line 265, ../src/main.sass */
+/* line 266, ../src/main.sass */
 ul.article_metadata a {
   color: #9ca1ad;
 }
-/* line 267, ../src/main.sass */
+/* line 268, ../src/main.sass */
 ul.article_metadata a:hover {
   color: #315896;
 }
 
-/* line 270, ../src/main.sass */
+/* line 271, ../src/main.sass */
 #tagcloud {
   background: #efeff4;
   background-color: #e3e5ed;
@@ -478,21 +480,21 @@ ul.article_metadata a:hover {
   width: 600px;
   margin: 1em auto;
 }
-/* line 133, ../src/main.sass */
+/* line 134, ../src/main.sass */
 #tagcloud > * {
   margin: 20px;
 }
-/* line 276, ../src/main.sass */
+/* line 277, ../src/main.sass */
 #tagcloud a:hover {
   cursor: pointer;
 }
 
-/* line 279, ../src/main.sass */
+/* line 280, ../src/main.sass */
 #elementblock {
   width: 600px;
   margin: 0 auto 4em auto;
 }
-/* line 282, ../src/main.sass */
+/* line 283, ../src/main.sass */
 #elementblock ul.menu {
   background-color: #efeff4;
   -moz-box-shadow: white 0 0 3px, rgba(0, 0, 0, 0.2) 0 0 3px inset;
@@ -509,7 +511,7 @@ ul.article_metadata a:hover {
   padding: 10px;
   list-style-type: none;
 }
-/* line 289, ../src/main.sass */
+/* line 290, ../src/main.sass */
 #elementblock ul.menu li {
   display: inline-block;
   text-align: center;
@@ -517,7 +519,7 @@ ul.article_metadata a:hover {
   margin: 0 20px;
   font-size: 14px;
 }
-/* line 143, ../src/main.sass */
+/* line 144, ../src/main.sass */
 #elementblock ul.menu li a:hover {
   color: #efeff4;
   background-color: rgba(0, 0, 0, 0.3);
@@ -526,16 +528,16 @@ ul.article_metadata a:hover {
   -o-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
   box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
 }
-/* line 147, ../src/main.sass */
+/* line 148, ../src/main.sass */
 #elementblock ul.menu li a:active {
   background-color: rgba(0, 0, 0, 0.5);
   text-shadow: 0 0 2px black;
 }
-/* line 150, ../src/main.sass */
+/* line 151, ../src/main.sass */
 #elementblock ul.menu li a {
   color: #9ca1ad;
 }
-/* line 152, ../src/main.sass */
+/* line 153, ../src/main.sass */
 #elementblock ul.menu li a, #elementblock ul.menu li span {
   padding: 0.2em;
   -moz-border-radius: 2ex;
@@ -548,11 +550,11 @@ ul.article_metadata a:hover {
   width: 100%;
   display: inline-block;
 }
-/* line 158, ../src/main.sass */
+/* line 159, ../src/main.sass */
 #elementblock ul.menu li a:hover, #elementblock ul.menu li span:hover {
   color: #efeff4;
 }
-/* line 160, ../src/main.sass */
+/* line 161, ../src/main.sass */
 #elementblock ul.menu li span {
   color: #efeff4;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3);
@@ -563,24 +565,24 @@ ul.article_metadata a:hover {
   box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
 }
 
-/* line 296, ../src/main.sass */
+/* line 297, ../src/main.sass */
 #related_articles {
   width: 960px;
   margin: 3em auto;
 }
-/* line 299, ../src/main.sass */
+/* line 300, ../src/main.sass */
 #related_articles #previous_articles {
   float: left;
   width: 40%;
 }
-/* line 302, ../src/main.sass */
+/* line 303, ../src/main.sass */
 #related_articles #next_articles {
   float: right;
   text-align: right;
   width: 40%;
 }
 
-/* line 307, ../src/main.sass */
+/* line 308, ../src/main.sass */
 .date {
   font-size: 0.8em;
   line-height: 2em;
@@ -589,7 +591,7 @@ ul.article_metadata a:hover {
   margin-right: 1em;
 }
 
-/* line 314, ../src/main.sass */
+/* line 315, ../src/main.sass */
 article article, .archive {
   background-color: #e3e5ed;
   -moz-box-shadow: white 0 0 3px, rgba(0, 0, 0, 0.2) 0 0 3px inset;
@@ -605,17 +607,17 @@ article article, .archive {
   background-color: #efeff4;
   padding: 1em;
 }
-/* line 133, ../src/main.sass */
+/* line 134, ../src/main.sass */
 article article > *, .archive > * {
   margin: 20px;
 }
-/* line 318, ../src/main.sass */
+/* line 319, ../src/main.sass */
 article article .content, .archive .content {
   width: 600px;
   margin: 0 auto;
 }
 
-/* line 322, ../src/main.sass */
+/* line 323, ../src/main.sass */
 #hiddenDivs {
   width: 600px;
   margin: 1em auto;
@@ -633,17 +635,17 @@ article article .content, .archive .content {
   background-color: #efeff4;
   padding: 1em;
 }
-/* line 133, ../src/main.sass */
+/* line 134, ../src/main.sass */
 #hiddenDivs > * {
   margin: 20px;
 }
 
-/* line 330, ../src/main.sass */
+/* line 331, ../src/main.sass */
 .archive .button {
   font-size: 14px;
   width: 5em;
 }
-/* line 143, ../src/main.sass */
+/* line 144, ../src/main.sass */
 .archive .button a:hover {
   color: #efeff4;
   background-color: rgba(0, 0, 0, 0.3);
@@ -652,16 +654,16 @@ article article .content, .archive .content {
   -o-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
   box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
 }
-/* line 147, ../src/main.sass */
+/* line 148, ../src/main.sass */
 .archive .button a:active {
   background-color: rgba(0, 0, 0, 0.5);
   text-shadow: 0 0 2px black;
 }
-/* line 150, ../src/main.sass */
+/* line 151, ../src/main.sass */
 .archive .button a {
   color: #9ca1ad;
 }
-/* line 152, ../src/main.sass */
+/* line 153, ../src/main.sass */
 .archive .button a, .archive .button span {
   padding: 0.2em;
   -moz-border-radius: 2ex;
@@ -674,11 +676,11 @@ article article .content, .archive .content {
   width: 100%;
   display: inline-block;
 }
-/* line 158, ../src/main.sass */
+/* line 159, ../src/main.sass */
 .archive .button a:hover, .archive .button span:hover {
   color: #efeff4;
 }
-/* line 160, ../src/main.sass */
+/* line 161, ../src/main.sass */
 .archive .button span {
   color: #efeff4;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3);
@@ -689,28 +691,68 @@ article article .content, .archive .content {
   box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px inset, rgba(255, 255, 255, 0.3) 0 1px 3px inset;
 }
 
-/* line 334, ../src/main.sass */
+/* line 335, ../src/main.sass */
 .return {
   float: right;
   opacity: 0.3;
 }
-/* line 337, ../src/main.sass */
+/* line 338, ../src/main.sass */
 .return:hover {
   opacity: 1;
 }
 
-/* line 340, ../src/main.sass */
+/* line 341, ../src/main.sass */
 .big {
   font-size: 1.2em;
 }
 
-/* line 343, ../src/main.sass */
+/* line 344, ../src/main.sass */
 body.support #main > article {
   width: 600px;
   margin: 3em auto;
   font-size: 1.2em;
 }
-/* line 347, ../src/main.sass */
+/* line 348, ../src/main.sass */
 body.support #main > article form {
   margin: 1em;
 }
+
+/* line 351, ../src/main.sass */
+#helloblock {
+  color: #b4b8c5;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.9);
+  padding: 20px;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  -o-border-radius: 5px;
+  -ms-border-radius: 5px;
+  -khtml-border-radius: 5px;
+  border-radius: 5px;
+  -moz-box-shadow: rgba(0, 0, 0, 0.6) 0 0 15px inset;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.6) 0 0 15px inset;
+  -o-box-shadow: rgba(0, 0, 0, 0.6) 0 0 15px inset;
+  box-shadow: rgba(0, 0, 0, 0.6) 0 0 15px inset;
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #60646c), color-stop(100%, #51555c));
+  background-image: -webkit-linear-gradient(top, #60646c, #51555c);
+  background-image: -moz-linear-gradient(top, #60646c, #51555c);
+  background-image: -o-linear-gradient(top, #60646c, #51555c);
+  background-image: linear-gradient(top, #60646c, #51555c);
+}
+/* line 358, ../src/main.sass */
+#helloblock #logo {
+  float: left;
+  margin-right: 40px;
+}
+/* line 361, ../src/main.sass */
+#helloblock #blocktitle {
+  font-size: 1.6em;
+  font-weight: normal;
+}
+/* line 364, ../src/main.sass */
+#helloblock #blocktext {
+  margin: 32px 0;
+}
+/* line 366, ../src/main.sass */
+#helloblock #getit {
+  float: right;
+}
diff --git a/site/index.html b/site/index.html
index af17f86..b6f1cba 100644
--- a/site/index.html
+++ b/site/index.html
@@ -61,6 +61,20 @@
         <article>
             <div class="content">
                 
+<div id="helloblock">
+    <div id="logo">
+        <img src="/img/main/Logo.png" /></div>
+    <div id="blocktitle">Easy, Secure &amp; Portable Password Manager</div>
+    <div id="blocktext">
+        <p> One different password for each website.  <br />
+            If some are compromised, there is not way to find another one.<br />
+            You only have to remember one password.</p></div>
+     <div id="getit">
+        <a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=436268354&amp;mt=8">
+            <img src="/img/main/GetIt.png" /></a></div>
+     <div class="flush"></div>
+</div>
+
 <div id="easy" class="slideshow">
     <img src="/img/main/iPhone_Easy.png" alt="main view" class="rightimage" />
     <h3>Easy</h3>
@@ -111,7 +125,7 @@
             </div>
             <footer>
                 <ul class="article_metadata">
-                    <li>Modified: <time>07/12/2011</time></li>
+                    <li>Modified: <time>07/13/2011</time></li>
                 </ul>
             </footer>
         </article>
diff --git a/site/src/main.sass b/site/src/main.sass
index f4421bc..960b19c 100644
--- a/site/src/main.sass
+++ b/site/src/main.sass
@@ -347,3 +347,21 @@ body.support #main > article
   font-size: 1.2em
   form
     margin: 1em
+
+#helloblock
+  color: $ycolor1
+  text-shadow: 0 -1px 0 rgba(#000,.9)
+  padding: 20px
+  +border-radius()
+  +box-shadow(rgba(#000,.6) 0 0 15px inset)
+  +linear-gradient(color-stops($ycolor4,$ycolor5))
+  #logo
+    float: left
+    margin-right: 40px
+  #blocktitle
+    font-size: 1.6em
+    font-weight: normal
+  #blocktext
+    margin: 32px 0
+  #getit
+    float: right