create dropdown buttons and change the structure in box page

1 files changed, 21 insertions, 6 deletions

diff --git a/page-box.php b/page-box.php
index 51953d9e..a3a9f305 100644
--- a/page-box.php
+++ b/page-box.php
@@ -12,7 +12,7 @@
 		<h2 class="text-center revealOnScroll"><?php echo $l->t('Bring your data home');?></h2>
 		<p class="text-center revealOnScroll"><?php echo $l->t('The Nextcloud Box is your private cloud. It stores your data and enables 
 you to sync between your devices and share with others.');?></p>
-		<p><a class="btn-primary revealOnScroll" href="<?php echo home_url('features') ?>" role="button"><?php echo $l->t('Know Nextcloud</a>');?></p>
+		<p><a class="button button--blue button--arrow button--large revealOnScroll" href="<?php echo home_url('features') ?>" role="button"><?php echo $l->t('Know Nextcloud</a>');?></p>
 	</div>
 </section>
 
@@ -44,7 +44,22 @@ you to sync between your devices and share with others.');?></p>
 			<p class="revealOnScroll"><?php echo $l->t('Currently you can only purchase the Nextcloud Box in Europe and the USA. We are working on bringing the box to other regions!');?></p>
 			<p><strong><?php echo $l->t('Note:');?></strong></p>
 			<p><?php echo $l->t('The Box does not come with a Raspberry Pi.');?></p>
-			<div class="btn-group">
+			<div class="button button--blue button--dropdown">
+				<input class="dropdown-toggle" type="text">
+				<div class="dropdown-text">Select your country</div>
+				<ul class="dropdown-content">
+					<li><?php echo $l->t('<a href="http://shop.wdc.com/promo/4828823500" target="_blank">Buy in the USA </a>');?></li>
+					<li><?php echo $l->t('<a href=" http://shop.wdc.com/promo/4828823600" target="_blank">Buy in the UK </a>');?></li>
+					<li><?php echo $l->t('<a href="http://shop.wdc.com/promo/4828823700" target="_blank">Buy in Germany </a>');?></li>
+					<li><?php echo $l->t('<a href="http://shop.wdc.com/promo/4828823800" target="_blank">Buy in Spain </a>');?></li>
+					<li><?php echo $l->t('<a href="http://shop.wdc.com/promo/4828823900" target="_blank">Buy in France </a>');?></li>
+					<li><?php echo $l->t('<a href="http://shop.wdc.com/promo/4828824000" target="_blank">Buy in Italy </a>');?></li>
+					<li><?php echo $l->t('<a href="http://shop.wdc.com/promo/4828824100" target="_blank">Buy in the Netherlands </a>');?></li>
+					<li><?php echo $l->t('<a href="http://shop.wdc.com/promo/4832872800" target="_blank">Buy in rest of Europe </a>');?></li>
+				</ul>
+			</div>
+			
+			<!--<div class="btn-group">
 				<button type="button" data-toggle="dropdown" class="btn btn-primary buybutton dropdown-toggle revealOnScroll" aria-expanded="false"><?php echo $l->t('Select your country');?> &nbsp;<span class="caret"></span></button>
 				<ul role="menu" class="dropdown-menu">
 					<li><?php echo $l->t('<a href="http://shop.wdc.com/promo/4828823500" target="_blank">Buy in the USA </a>');?></li>
@@ -56,7 +71,7 @@ you to sync between your devices and share with others.');?></p>
 					<li><?php echo $l->t('<a href="http://shop.wdc.com/promo/4828824100" target="_blank">Buy in the Netherlands </a>');?></li>
 					<li><?php echo $l->t('<a href="http://shop.wdc.com/promo/4832872800" target="_blank">Buy in rest of Europe </a>');?></li>
 				</ul>
-			</div>
+			</div>-->
 		</div>
 		<div class="box-perspective col-md-8 revealOnScroll"></div>
 		</div>
@@ -68,7 +83,7 @@ you to sync between your devices and share with others.');?></p>
 		<h2 class="text-center revealOnScroll"><?php echo $l->t('How to Box');?></h2>
 		<p class="text-center revealOnScroll"><?php echo $l->t('The Nextcloud Box is very easy to assemble. It comes with all necessary screws and a screwdriver. The lid uses magnets (magic!) so you can quickly open and close it.');?></p>
 		<div class="assembly revealOnScroll"></div>
-		<p><a class="btn-primary revealOnScroll" href="<?php echo get_template_directory_uri(); ?>/assets/files/Box-Assembly-Guide.pdf" role="button"><?php echo $l->t('Download PDF</a>');?></p>
+		<p><a class="button button--blue button--arrow button--large revealOnScroll" href="<?php echo get_template_directory_uri(); ?>/assets/files/Box-Assembly-Guide.pdf" role="button"><?php echo $l->t('Download PDF</a>');?></p>
 	</div>
 </section>
 
@@ -78,8 +93,8 @@ you to sync between your devices and share with others.');?></p>
 		<p class="text-center revealOnScroll"><?php echo $l->t('You can find a lot of information, tips and tricks on configuring your Nextcloud Box on our wiki; discuss the Box and ask questions on our forums.');?></p>
 		<p class="text-center revealOnScroll"><?php echo $l->t('If you are interested in contributing to the software of the Box, you can <a href="https://github.com/nextcloud/nextcloud-snap">find the Nextcloud Snap here</a> - we look forward to your pull request. Find us on IRC in <a href="irc://#nextcloud-dev@freenode.net" target="_blank">the Nextloud development IRC chat channel</a> on freenode.net, also accessible via <a href="https://webchat.freenode.net/?channels=nextcloud-dev" target="_blank">webchat.</a>');?></p>
 		<div class="wrapper-buttons">
-			<p><a class="btn-primary" href="https://help.nextcloud.com/t/the-great-nextcloud-box-topic/3510" role="button"><?php echo $l->t('Help on forum</a>');?></p>
-	 		<p><a class="btn-primary" href="https://github.com/nextcloud/nextcloud-snap/wiki" role="button"><?php echo $l->t('Manual on Wiki</a>');?></p>
+			<a class="button button--blue button--arrow button--large" href="https://help.nextcloud.com/t/the-great-nextcloud-box-topic/3510" role="button"><?php echo $l->t('Help on forum</a>');?>
+	 		<a class="button button--blue button--arrow button--large" href="https://github.com/nextcloud/nextcloud-snap/wiki" role="button"><?php echo $l->t('Manual on Wiki</a>');?>
 		</div>
 	</div>
 </section>