Basic mark-up and styles. Change the controller to hold all notifications.

services/web/app/views/project/list.jade

@@ -22,9 +22,21 @@ block content
 	.content.content-alt(ng-controller="ProjectPageController")
 		.container
 			
-			//- div(ng-controller="AnnouncementsController", ng-cloak)
-			//- 	.alert.alert-success(ng-show="dataRecived")
-			//- 		a(href, ng-click="openLink()") {{title}} and {{totalAnnouncements}} others
+			div(
+				ng-controller="AnnouncementsController"
+				ng-cloak
+			)
+				.announcements(ng-if="announcements.length")
+					span.announcements-badge {{ announcements.length }}
+					.announcements-body
+						.announcement(
+							ng-repeat="announcement in announcements"
+						)
+							a.announcement-title(href, ng-click="openLink()") {{ announcement.title }}
+							p.announcement-description {{ announcement.excerpt }}
+					//- .card.card-thin(ng-show="dataReceived")
+					//- 	a.announcement-title(href, ng-click="openLink()") {{ title }}
+					//- 	p.announcement-description {{ excerpt }}
 
 			.row(ng-cloak)
 				span(ng-if="projects.length > 0")

services/web/public/coffee/main/announcements.coffee

@@ -2,19 +2,19 @@ define [
 	"base"
 ], (App) ->
 	App.controller "AnnouncementsController", ($scope, $http, event_tracking, $window) ->
+		$scope.announcements = []
 
-		$scope.dataRecived = false
-		announcement = null
-		$http.get("/announcements").success (announcements) ->
-			if announcements?[0]?
-				announcement = announcements[0]
-				$scope.title = announcement.title
-				$scope.totalAnnouncements =  announcements.length
-				$scope.dataRecived = true
+		refreshAnnouncements = ->
+			$http.get("/announcements").success (announcements) ->
+				$scope.announcements = announcements
+				
+		dismissCurrentAnnouncement = ->
+			event_tracking.sendMB "announcement-alert-dismissed", { blogPostId:announcement.id }
 
-		dismissannouncement = ->
-			event_tracking.sendMB "announcement-alert-dismissed", {blogPostId:announcement.id}
+		refreshAnnouncements()
 
 		$scope.openLink = ->
-			dismissannouncement()
-			$window.location.href = announcement.url
+			dismissCurrentAnnouncement()
+				.then(refreshAnnouncements)
+
+			$window.open = announcement.url

services/web/public/stylesheets/app/project-list.less

@@ -1,3 +1,14 @@
+@announcements-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.2);
+
+@keyframes pulse {
+	0% {
+		opacity: .7;
+	}
+	100% {
+		opacity: .9;
+	}
+}
+
 .project-header {
 	.btn-group > .btn {
 		padding-left: @line-height-base / 2;
@@ -293,3 +304,46 @@ ul.project-list {
 		margin-left:-100px;
 	}
 }
+
+.announcements {
+	position: absolute;
+	bottom: 100px;
+	right: 100px;
+	width: 80px;
+	height: 80px;
+	background: url(/img/lion-128.png) no-repeat center/80% white;
+	border-radius: 50%;
+	box-shadow: @announcements-shadow;
+	z-index: 1;
+}
+
+	.announcements-badge {
+		display: inline-block;
+		position: absolute;
+		font-size: 11px;
+		height: 1.8em;
+		min-width: 1.8em;
+		border-radius: 0.9em;
+		line-height: 1.8;
+		padding: 0 2px;
+		top: 1px;
+		right: 1px;
+		font-weight: bold;
+		color: #FFF;
+		background-color: @red;
+		vertical-align: baseline;
+		white-space: nowrap;
+		text-align: center;
+		animation: pulse 1s alternate infinite;
+	}
+
+	.announcements-body {
+		position: absolute;
+		right: 0;
+		bottom: 80px;
+		width: 500px;
+		min-height: 100px;
+		background: #FFF;
+		box-shadow: @announcements-shadow;
+		border-radius: 10px;
+	}