Getting in the tab navigation

app/assets/stylesheets/darkswarm/shop.css.sass

@@ -2,6 +2,54 @@ product
   display: block 
 
 
+shop
+  color: #666
+  display: block
+  navigation
+    display: block
+    background: #f6efe5
+    distributor.details
+      box-sizing: border-box
+      display: block
+      height: 150px
+      padding: 40px 0px 0px
+      select
+        width: 200px
+      position: relative
+      img
+        display: block
+        height: 100px
+        width: 100px
+        margin-right: 12px
+      location
+        font-family: "AvenirBla_IE", "AvenirBla"
+        padding-right: 16px
+      ordercycle
+        display: block
+        position: absolute
+        right: 0px
+        top: 40px
+        form.custom 
+          width: 400px
+          text-align: right
+          & > strong
+            line-height: 2.5
+            font-size: 1.29em
+            padding-right: 14px
+          .custom.dropdown
+            width: 280px
+            display: inline-block
+            background: transparent
+            border-width: 2px
+            border-color: #666666
+            font-size: 1.28em 
+            margin-bottom: 0
+        closing
+          font-size: 0.875em
+product
+  display: block 
+
+
 shop
   color: #666
   display: block
@@ -50,6 +98,71 @@ shop
           float: right
           padding-top: 14px
 
+  tabs
+    background: url("/assets/matte.png") top left repeat
+    display: block
+    .section-container.auto
+      margin-bottom: 0
+      & > section 
+        transition:height 0s linear 0.5s
+        & > .content
+          background: none
+          border: none
+        & > .title, &.active > .title
+          text-transform: uppercase
+          line-height: 50px
+          border: none
+          &, &:hover
+            background: none
+          a
+            padding: 0px 2.2em
+
+  products
+    display: block
+    padding-top: 36px
+    table
+      width: 100%
+      border-collapse: collapse
+      border: none
+      th
+        line-height: 50px
+      .notes
+        max-width: 300px
+      td, th
+        background: #fff
+        border: 1px solid #cccccc
+        border-left: 0px
+        border-right: 0px
+      td
+        padding: 20px 0px
+      input[type=number]
+        width: 60px
+        margin: 0px
+      
+
+
+          display: block
+          float: right
+          padding-top: 14px
+
+  tabs
+    background: url("/assets/matte.png") top left repeat
+    display: block
+    .section-container.auto
+      margin-bottom: 0
+      & > section 
+        & > .content
+          background: none
+          border: none
+        & > .title, &.active > .title
+          text-transform: uppercase
+          line-height: 50px
+          border: none
+          &, &:hover
+            background: none
+          a
+            padding: 0px 2.2em
+
   products
     display: block
     padding-top: 36px

app/views/shop/_products.html.haml

@@ -18,7 +18,7 @@
             %h5
               {{ product.name }}
             {{ product.supplier.name }}
-          %td.notes {{ product.description | truncate:250 }}
+          %td.notes {{ product.description | truncate:80 }}
           %td {{ product.master.options_text }}
           %td 
             %input{type: :number, value: 0, min: 0, name: "variants[{{product.master.id}}]"}

app/views/shop/show.html.haml

@@ -1,7 +1,7 @@
 %shop{"ng-app" => "Shop"}
   %navigation
     %distributor.details.row
-      -#%img.left{src: @distributor.}
+      %img.left{src: ""}
       %h4
         = @distributor.name
       %location= @distributor.address.city
@@ -9,12 +9,37 @@
       = render partial: "shop/order_cycles"
 
       -#%description
-        -#= @distributor.long_description.andand.html_safe
+  
+  %tabs
+    .row
+      .section-container.auto{"data-section" => "", "data-options" => "one_up: false"}
+        %section
+          %p.title.avenir{"data-section-title" => ""}
+            %a{href: "#about"} About Us 
+          .content{"data-section-content" => ""}
+            %p= @distributor.long_description.andand.html_safe
+
+        %section
+          %p.title.avenir{"data-section-title" => ""}
+            %a{href: "#producers"} Our Producers 
+          .content{"data-section-content" => ""}
+            %p Content of section 2.
+
+        %section
+          %p.title.avenir{"data-section-title" => ""}
+            %a{href: "#groups"} Our Groups 
+          .content{"data-section-content" => ""}
+            %p Groups 
+
+        %section
+          %p.title.avenir{"data-section-title" => ""}
+            %a{href: "#contact"} Contact 
+          .content{"data-section-content" => ""}
+            %p Contact 
+    
     
   %products.row
     = render partial: "shop/products"
 
   -#= render partial: "enterprises/contact_us"
   -#= render partial: "enterprises/about_us"
-
-

spec/controllers/spree/orders_controller_spec.rb

@@ -31,7 +31,6 @@ describe Spree::OrdersController do
     order.distributor.should be_nil
   end
 
-
   describe "adding a product to the cart with a distribution combination that can't service the existing cart" do
     before do
       @request.env["HTTP_REFERER"] = 'http://test.host/'